Level 58
To make the design mobile-friendly, you can use Bootstrap's grid system to create a responsive layout. You can also use Bootstrap's utility classes to adjust the size and spacing of elements based on screen size. Here's an example of how you can modify the existing code to make it more responsive:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>Polygon</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-T5m5WERuXcjgzF8DAb7tRkByEZQGcpraRTinjpywg37AO96WoYN9+hrhDVoM6CaT" crossorigin="anonymous">
<style>
.Services {
position:relative;
padding-top: 50px;
}
.Services h2 {
text-align:center;
}
.Services .serviceTitle {
line-height:normal;
color:#2c2c2c !important;
font-weight:600;
font-size:14pt !important;
min-height:unset !important;
margin-bottom:10px !important;
}
.Services .row {
justify-content:space-between;
}
.Services .row .col-lg-12 {
max-width:300px;
}
.Services .Middle {
position:relative;
z-index:2;
top: -60px;
}
.Services .serviceBox {
position:relative;
background:#fff;
padding:0 20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:20px;
box-shadow:0 2px 8px rgba(75,105,190,.1);
margin-bottom:65px;
z-index:2;
}
.Services .serviceBox .Image {
position:relative;
margin-top:-45px;
}
.Services .serviceBox .Text {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px 0;
}
.Services .serviceBox .Text p {
text-align:center;
color:#888;
font-size:10pt;
font-family:'MIRANSans';
margin-bottom:25px;
min-height:65px;
overflow:hidden;
}
.Services .serviceBox .Text span {
position:relative;
color:#fff;
padding:8px 15px;
border-radius:21px;
font-size:10pt;
margin-bottom:-35px;
}
.Services .serviceLight {
position:relative;
}
.Services .serviceLight .Text span {
background:#92a7fb;
border:1px solid #92a7fb;
box-shadow:0 6px 10px rgba(106,150,254,.5);
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
transition:.3s;
}
.Services .serviceLight .Text span:hover {
background:#7286d7;
color:#fff;
}
.Services .serviceLight .Text span:active {
box-shadow:unset;
}
.Services .Rpart {
position:relative;
right:200px;
}
.Services .serviceDark .Text span {
background:#35406e;
border:1px solid #35406e;
box-shadow:0 6px 10px rgba(59,65,76,.5);
-webkit-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
-o-transition:.3s;
transition:.3s;
}
.Services .serviceDark .Text span:hover {
background:#161f42;
color:#fff;
}
.Services .serviceDark .Text span:active {
box-shadow:unset;
}
.Services .Lpart {
position:relative;
left:200px;
}
#svgwrapper {
display:inline-block;
stroke:#ecedf4;
stroke-width:5;
position:relative;
fill:none;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
width:600px;
z-index:0;
}
/* Responsive styles */
@media (max-width: 991px)