@font-face {
     font-family: 'switzer';
     src: url('../fonts/switzer/Switzer-Black.woff2') format('woff2');
     font-weight: 900;
     font-display: swap;
 }

 @font-face {
     font-family: 'switzer';
     src: url('../fonts/switzer/Switzer-Bold.woff2') format('woff2');
     font-weight: 700;
     font-display: swap;
 }

 @font-face {
     font-family: 'switzer';
     src: url('../fonts/switzer/Switzer-Semibold.woff2') format('woff2');
     font-weight: 600;
     font-display: swap;
 }

 @font-face {
     font-family: 'switzer';
     src: url('../fonts/switzer/Switzer-Medium.woff2') format('woff2');
     font-weight: 500;
     font-display: swap;
 }

 @font-face {
     font-family: 'switzer';
     src: url('../fonts/switzer/Switzer-Regular.woff2') format('woff2');
     font-weight: 400;
     font-display: swap;
 }


 @font-face {
     font-family: 'general-sans';
     src: url('../fonts/generalsans/GeneralSans-Regular.woff2') format('woff2');
     font-weight: 400;
     font-display: swap;
 }

 @font-face {
     font-family: 'general-sans';
     src: url('../fonts/generalsans/GeneralSans-Medium.woff2') format('woff2');
     font-weight: 500;
     font-display: swap;
 }

 @font-face {
     font-family: 'general-sans';
     src: url('../fonts/generalsans/GeneralSans-Bold.woff2') format('woff2');
     font-weight: 700;
     font-display: swap;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body,
 html {
     width: 100%;
     height: 100%;
     background: var(--darkblue);
     color: var(--gray);
     font-family: 'general-sans';
     font-weight: 400;
     font-size: 19px;
 }

 html {
     scroll-behavior: smooth;
 }

 :root {
     --white: #fff;
     --darkblue: #00091D;
     --gray: #DCDDDD;
     --oceanblue: #399BE6;
     --gradprimary: linear-gradient(360deg, #1C60FF 0%, rgba(13, 30, 184, 0.82) 33.17%, #00091D 100%);
     --smalltext: 14px;
     --bodytext: 17px;
     --subheading: 25px;
     --sectionheading: 35px;
     --heroheading: 64px;
     --mainheading: 74px;
     --moblie-smalltext: 14px;
     --moblie-bodytext: 15px;
     --moblie-subheading: 19px;
     --moblie-sectionheading: 22px;
     --moblie-heroheading: 33px;
     --moblie-mainheading: 40px;
     --bdrprimary: #399BE6;
     --bdrhalf: 1px solid rgba(255, 255, 255, 0.5);
 }

/* chatbot */

/* Launcher button */
/* Launcher button */
.chat-launcher {
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font: 600 14px/1 'general-sans';
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.chat-launcher:hover { background: #1f2937; }

/* Overlay hidden by default */
.chat-overlay {
  display: none;                 /* HIDDEN on load */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  place-items: center;
}
.chat-overlay.active { display: grid; }  /* SHOWN when .active is added */

/* Modal container — responsive */
.chat-modal {
  position: relative;
  width: 600px;                  /* base desktop */
  height: 700px;
  max-width: 96vw;               /* never overflow viewport width */
  max-height: 92vh;              /* never overflow viewport height */
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
  overflow: hidden;
  background: transparent;       /* modal just holds the iframe */
}

/* Close button */
.chat-close {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  border: none;
  background: transparent;
  font-size: 30px;
  font-family: 'general-sans';
  cursor: pointer;
  color: #fff;
}

/* Iframe fills modal */
.chat-frame {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  display: block;
}


@media (max-width:768px){
  .chat-close {
    top: -10px;
    right: 10px;
    z-index: 99999999;
  }
}


/* ============================= */
/*        RESPONSIVE TWEAKS      */
/* ============================= */

/* Big desktops: give extra width for long tab titles */
@media (min-width: 1280px) {
  .chat-modal {
    width: 800px;                /* more room on wide screens */
    height: 760px;
  }
}

/* Tablets & small laptops */
@media (max-width: 1024px) {
  .chat-modal {
    width: 720px;
    height: 700px;
  }
}

/* Large phones / small tablets (portrait) */
@media (max-width: 768px) {
  .chat-modal {
    width: 92vw;                 /* scale to viewport */
    height: 84vh;
    border-radius: 10px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .chat-modal {
    width: 96vw;                 /* nearly edge-to-edge */
    height: 86vh;
    border-radius: 10px;
  }
}

/* Very short viewports (landscape phones, small laptops) */
@media (max-height: 640px) {
  .chat-modal {
    height: 90vh;                /* prioritize fitting vertically */
  }
}








 /* utilities  */

 .main {

     position: relative;
     overflow: hidden;
 }

 .contentwrapper {
     max-width: 1356px;
     height: auto;
     margin-inline: auto;
 }

 img {
     max-width: 100%;
     width: 100%;
 }

 a {
     color: inherit;
     text-decoration: none;
     display: inline-block;
 }

 ul {
     list-style: none;
 }

 /* headings  */
 h1,
 h2,
 h4,
 h5,
 h6 {
     font-family: 'switzer';
     font-weight: 500;
 }

 h3 {
     font-family: 'switzer';
     font-weight: 600;
 }


 .bdrhalf {
     border: var(--bdrhalf);
 }

 .btnhollow {
     position: relative;
     border-radius: 18px;
     padding: 18px 30px;
     background-color: transparent;
     height: 62px;
     min-width: fit-content;
     align-content: center;
     border: 1px solid var(--bdrprimary);
     display: flex;
     align-items: center;
     gap: 20px;
     transition: all .3s ease-in-out;
     overflow: hidden;
 }

 .btnhollow:after {
     content: "";
     position: absolute;
     left: 0%;
     top: 100%;
     width: 100%;
     height: 100%;
     background-color: var(--oceanblue);
     scale: 100%;
     pointer-events: none;
     z-index: 0;
 }

 /* .btnhollow:hover {
     background: var(--oceanblue);
 } */

 .btnhollow:hover::after {
     scale: 100%;
     top: 0%;
     left: 0;
     /* transform: translate(0%,90%); */
     transition: all .3s cubic-bezier(.21, .71, .45, 1.01);
 }

 .btnfilled {
     position: relative;
     width: fit-content;
     height: 70;
     border-radius: 18px;
     padding: 18px 50px;
     border-width: 0.5px;
     /* background-color: var(--oceanblue); */
     color: var(--white);
     display: flex;
     align-items: center;
     gap: 20px;
     transition: all .3s ease-in-out;
     overflow: hidden;
 }

 .btnfilled>*,
 .btnhollow>* {
     z-index: 1;
 }

 .btnfilled:after {
     content: "";
     position: absolute;
     left: 0%;
     top: 0%;
     width: 100%;
     height: 100%;
     background-color: var(--oceanblue);
     scale: 100%;
     pointer-events: none;
     z-index: 0;
 }

 .btnfilled:hover::after {
     scale: 100%;
     top: 100%;
     left: 0;
     /* transform: translate(0%,90%); */
     transition: all .35s cubic-bezier(.53, .14, .41, 1.38);
 }

 .btnfilled:hover {
     background-color: transparent;
 }

 .btnhollow .arrowicon,
 .btnfilled .arrowicon {
     display: inline-block;
     /* needed for transform */
     transition: transform 0.6s ease-in-out;
 }



 .btnhollow:hover .arrowicon,
 .btnfilled:hover .arrowicon {
     transform: rotate(360deg);
 }


 .bodybg {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     max-width: 1512px;
     height: auto;
 }

 .bodybg img.mobile,
 .bodybg2 img.mobile {
     display: none;
 }

 main>*:not(.bodybg2) {
     position: relative;
     z-index: 2;
 }

 /* .bodybg2 {
     position: absolute;
     bottom: 130rem;
     filter: blur(260px);
     left: 0;
     z-index: 1;
 } */
 .bodybg2 {
     position: absolute;
     bottom: 12rem;
     filter: blur(95px);
     left: -5%;
     z-index: 1;
 }

 .bodybg img.desktop {
     filter: blur(40px);
 }

 h1.heroheading {
     font-family: 'switzer';
     font-weight: 500;
     font-style: Medium;
     font-size: var(--mainheading);
     line-height: 94.5px;
     letter-spacing: 0%;

 }

 h3 {
     font-family: 'switzer';
     font-weight: 600;
     font-size: var(--moblie-sectionheading);
 }

 .w50 {
     width: 50%;
 }

 p.herotext {
     font-size: var(--moblie-subheading);
 }

 .flex {
     display: flex;
 }

 .items-center {
     align-items: center;
 }

 .justify-center {
     justify-content: center;
 }

 .relative {
     position: relative;
 }

 .arrowicon {
     width: 37px;
     height: 37px;

 }

 section {
     padding-block: 80px;
     padding-inline: 10px;
 }

 /* design  */

 /* header start */

 .contentwrapper:has(> header) {
     z-index: 9 !important;
 }

 .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 50px;
     position: absolute;
     z-index: 99;
     width: 100%;
 }

 .header .moblieheader_wrapper {
     display: flex;
     width: 100%;
     align-items: center;

 }

 .mobilenavtoggler {
     display: none;
 }

 .navbar {
     width: 100%;
     display: flex;
     justify-content: center;
 }

 .navlist {
     background-color: var(--oceanblue);
     display: inline-flex;
     align-items: center;
     border-radius: 20px;
     padding: 5px;
 }

 /*.navlist.active {*/
 /*    display: block;*/
 /*    z-index: 9999;*/
 /*    top: 77px;*/
 /* show when toggled */
 /*}*/
 .navlist.active {
     display: block;
     z-index: 9999;
     top: -35px;
     padding-top: 5rem !important;
 }

 .closebtn {
     position: absolute;
     z-index: 9999;
     top: 0;
     right: 18px;
     opacity: 0;
     pointer-events: none;
     transition: all .5s ease-in-out;
 }

 .navlist li {

     border-radius: 18px;
     /*padding: 13px 50px;*/
     position: relative;
     overflow: hidden;

 }

 .navlist li a {
     position: relative;
     z-index: 1;

 }

 .navlist li a {
     position: relative;
     z-index: 1;
     padding: 13px 50px;
     width: 100%;
     height: 100%;
     display: inline-block;
 }

 .navlist li:after {
     content: "";
     position: absolute;
     left: 0%;
     top: 100%;
     width: 100%;
     height: 100%;
     background-color: var(--darkblue);
     scale: 0%;
     pointer-events: none;
     z-index: 0;
 }

 .navlist li.active {
     background-color: var(--darkblue);
 }

 /* .navbar .navlist li.navitem {
     transition: all 0.3s linear;
 } */

 /* .navbar .navlist li.navitem:hover {
     background-color: var(--darkblue) !important;
     cursor: pointer;
 } */
 .navbar .navlist li.navitem:hover::after {
     scale: 100%;
     top: 0%;
     left: 0;
     /* transform: translate(0%,90%); */
     transition: all .6s cubic-bezier(.53, .14, .41, 1.38);
 }

 .navbar .navlist:hover .navitem.active {
     background-color: transparent;
 }



 /* hero start*/

 .hero {
     /* min-height: 100vh; */
 }

 .herotext {
     margin-top: 20px;
     margin-bottom: 52px;
 }

 .headerdesc {
     margin-top: 410px;
     max-width: 478px;
     margin-left: auto;
 }

 .headerdesc_item {
     gap: 18px;
     margin-bottom: 65px;
 }

 .numb {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     font-size: 50px;
     font-family: 'switzer';
     font-weight: 700;
     align-content: center;
     text-align: center;
 }

 .numb.bdrhalf span {
     display: none;
 }

 .headerdesc .headingwrapper {
     max-width: 350px;
 }

 .heroright .startproject_btn {
     display: none;
 }

 .herostrshp {
     /* max-width: 50px; */
     height: 160px;
     position: absolute;
     left: -80px;
     top: 7.5rem;
     transform: translateY(-50%);

 }

 .step-line.play path {
     stroke-dasharray: 275;
     /* total length of path */
     stroke-dashoffset: 275;
     /* hidden initially */
     animation: drawLine 6s ease forwards;
 }

 .step-line svg .endpoint {
     opacity: 0;
 }

 .step-line svg .endpoint {
     /* animation: endpoint 3s ease  forwards; */
     animation-name: endpoint;
     animation-duration: .3s;
     animation-timing-function: ease-in-out;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
     animation-delay: 1.5s;

 }

 @keyframes drawLine {
     to {
         stroke-dashoffset: 0;
         /* reveals path */
     }
 }

 @keyframes endpoint {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }





 /* hero end  */



 /* whyus start  */

 .sec_main_heading {
     font-size: 48px;
     max-width: 60%;
 }

 .card-container {
     display: flex;
     gap: 40px;
     padding-block: 40px;
 }

 .card {
     flex: 1;
     border-radius: 40px;
     padding: 50px 42px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 .5px 2.5px rgba(255, 255, 255, 0.5);
     transition: all .2s ease-in-out;
     max-width: 33.33%;
     width: 100%;

 }

 /* Backgrounds */
 .card:hover {
     background: var(--oceanblue);
     color: #fff;
 }



 /* Headings */
 .card h2 {
     font-size: 26px;
     margin-bottom: 170px;
     line-height: 108%;
 }

 /* Paragraphs */
 .card p {
     font-size: 17px;
     line-height: 1.2;
 }

 /* Divider lines */
 .divider {
     width: 100%;
     height: 1px;
     background: rgba(255, 255, 255, 0.5);
     margin-block: 12px;
 }


 /* Responsive */
 @media (max-width: 900px) {
     .card-container {
         flex-direction: column;
     }
 }


 /* whyus end  */

 /* what we build  */

 section.whatwebuild {
     background: var(--gray);
     /* light gray inner background */
     border-radius: 40px;
     padding: 40px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 section.sectionbg h2 {
     font-size: 48px;
     margin-bottom: 60px;
     color: var(--darkblue);
 }

 .feature {
     display: flex;
     align-items: flex-start;
     margin-bottom: 50px;
     gap: 20px;
     max-width: 928px;
     margin-left: auto;
 }

 .feature img {
     width: 85px;
     height: auto;
     object-fit: contain;
     flex-shrink: 0;
 }

 .feature-content h3 {
     font-size: 26px;
     font-weight: 500;
     margin: 0 0 8px;
     color: var(--darkblue);
 }

 .feature-content p {
     margin: 0;
     line-height: 1.6;
     font-weight: 500;
     color: var(--darkblue);
 }

 @media (max-width: 768px) {
     .feature {
         flex-direction: column;
         align-items: flex-start;
     }

     .feature img {
         margin-bottom: 10px;
     }
 }

 /* what we build end  */


 /* core_deliverables */


 section.core_deliverables h2 {
     font-size: 48px;
     text-align: center;
     font-weight: 500;
     margin-bottom: 20px;
     color: var(--gray);
 }

 .core_deliverables .sec_heading {
     text-align: center;
     margin-bottom: 80px;
 }

 .pill {
     display: inline-block;
     background: var(--oceanblue);
     padding: 16px 40px;
     border-radius: 50px;
     font-size: 19px;
     margin-inline: auto;
     width: fit-content;
 }

 .features {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     position: relative;
     margin: 0 auto 60px;
 }

 .deliverable {
     width: 22%;
     text-align: center;
 }

 .deliverable h3 {
     font-size: 26px;
     margin-bottom: 10px;
     line-height: 108%;
     font-weight: 500;
 }

 .deliverable p {
     font-size: 17px;
     color: var(--gray);
 }

 .bottomtext {
     color: var(--gray);
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 25px;
 }

 .bottomtext .boldtext {
     font-size: 30px;
     font-weight: 500;
 }

 .bottomtext .regulartext {
     font-family: 'general-sans';
     font-size: 19px;
     max-width: 380px;
     text-align: start;
 }

 .bottomtext strong {
     font-size: 35px;
     font-weight: 700;
     color: var(--gray);
     text-decoration: underline;
 }

 .strings {
     width: 78%;
     margin-inline: auto;
     margin-bottom: 40px;
 }

 /* Arc setup */
 .strings.play .arc {
     stroke-dasharray: 500;
     /* must be set to each arc's length */
     stroke-dashoffset: 500;
     fill: none;
     animation-name: drawArc;
     animation-duration: 1.5s;
     /* animation-duration: .2s; */
     animation-timing-function: linear;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
 }

 /* Animate in sequence */
 .arc-1 {
     animation-delay: 0s;
 }

 .arc-2 {
     animation-delay: 1.4s !important;
     /* animation-delay: 0.2s !important; */
 }

 .arc-3 {
     animation-delay: 2.8s !important;
     /* animation-delay: 0.4s !important; */
 }

 @keyframes drawArc {
     to {
         stroke-dashoffset: 0;
     }
 }

 /* Dots */
 .arc-dot {
     opacity: 0;
     transform: scale(0.5);
     animation: showDot 0.3s ease forwards;
 }

 .arc-dot-start {
     opacity: 1;
     /* always visible */
 }

 /* Reveal dots at correct times */
 .arc-dot-1 {
     animation-delay: 1s;
 }

 .arc-dot-2 {
     animation-delay: 2.8s;
 }

 .arc-dot-end {
     animation-delay: 5s;
 }

 @keyframes showDot {
     to {
         opacity: 1;
         transform: scale(1);
     }
 }





 @media (max-width: 900px) {
     .features {
         flex-direction: column;
         gap: 40px;
     }

     .features::before {
         display: none;
         /* hide arcs on mobile */
     }

     .deliverable {
         width: 100%;
     }
 }

 /* core_deliverables end  */

 /* build process  */

 .build-process {
     padding: 80px 20px;

 }

 .build-process .sec_heading {
     color: var(--gray);

 }

 .leftcontainer {
     width: 40%;
 }

 .rightcontainer {
     width: 65%;
 }

 .build-steps {
     display: flex;
     gap: 40px;
     margin-top: 40px;
 }

 .rightcontainer .step-card {
     margin-bottom: 40px;
 }

 .step1 {
     /* height: calc(100% - 165px); */
 }

 .step-card {
     background: var(--gray);
     border-radius: 40px;
     padding: 0px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 320px;
 }

 .step-card.horizontal {
     flex-direction: row;
 }

 .step-card.horizontal .step-content,
 .step-card.horizontal .step-illustration {
     width: 50%;

 }

 .step-card.step3 {
     flex-direction: row-reverse;
 }

 .step-content {
     margin-bottom: 20px;
     padding: 30px 70px;
 }

 .step-number {
     font-size: 19px;
     font-weight: 500;
     font-family: 'general-sans';
     display: block;
     margin-bottom: 10px;
     color: var(--darkblue);
 }

 .step-card h3 {
     font-size: 26px;
     color: var(--darkblue);
     margin-bottom: 24px;
 }

 .step-card p {
     font-size: 17px;
     font-weight: 500;
     font-family: 'general-sans';
     line-height: 1.5;
     color: #333;
 }

 .step-card p strong {
     color: var(--darkblue);
     font-size: 17px;
 }

 .step-illustration {
     margin-top: auto;
     text-align: center;
 }

 .step-illustration img {
     max-width: 100%;
     border-radius: 12px;
     margin-bottom: -6px;
 }


 /* build process end  */


 /* about section  */

 /* About Section */

 .brandlogo > img {
     width: 135px;
     height: 68px
 }

 .about-section {
     padding: 80px 10px;
 }

 .about-section .sec_heading {
     color: var(--gray);
     font-size: 48px;
     margin-bottom: 40px;
     text-align: left;
 }

 .about-section .sec_heading img {
     margin-left: 20px;
     margin-top: 7px;
 }


 .about-cards {
     display: flex;
     gap: 30px;
     margin-bottom: 40px;
 }

 .about-card {
     border-radius: 30px;
     padding: 40px;
     flex: 1;
     display: flex;
     flex-direction: column;
     box-shadow: 0 .5px 2.5px rgba(57, 155, 230, 0.5);
     text-align: center;
     max-width: 25%;
 }

 .about-card h4 {
     font-size: 19px;
     font-weight: 500;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgb(57, 155, 230, 0.5);
     color: var(--gray);
     text-align: center;
 }

 .about-card p {
     font-size: 26px;
     font-weight: 600;
     font-family: 'switzer';
     line-height: 1.5;
     color: var(--gray);
 }

 .about-card.description {
     padding: 0;
     max-width: 700px;
     box-shadow: unset;

 }

 .about-card.description {

     font-weight: 600;
     font-family: 'switzer';
     color: var(--gray);
     text-align: start;
     align-self: end;
 }

 .about-card.description h3 {
     font-size: 24px;
 }

 .about-card.description p {
     font-size: 17px;
     font-weight: 500;
     font-family: 'general-sans';
     line-height: 1.5;
     color: var(--gray);
 }

 @media (max-width: 900px) {
     .about-cards {
         flex-direction: column;
     }
 }


 /* about section end  */

 /* Contact / CTA Section */
 .contact-section {
     padding: 80px 10px;
     text-align: center;
 }


 .contact-section h2 {
     font-size: 48px;
     font-weight: 600;
     color: var(--gray);
     margin-bottom: 18px;
     line-height: 100%;
 }

 .contact-section p {
     font-size: 19px;
     font-weight: 500;
     font-family: 'general-sans';
     color: var(--gray);
     line-height: 120%;
     margin-bottom: 70px;
 }

 .contact-section .cta-button {
     display: inline-block;
     background: var(--oceanblue);
     color: var(--gray);
     font-size: 30px;
     font-family: 'switzer';
     font-weight: 500;
     padding: 18px 50px;
     border-radius: 30px;
     text-decoration: none;
     transition: background 0.3s ease;
     margin-bottom: 70px;
     height: 95px;
     width: 511px;
     align-content: center;
 }

 .contact-section .cta-button:hover {
     background: #2389d7;
 }

 .contact-section .bottom-text {
     font-size: 26px;
     font-weight: 600;
     font-family: 'switzer';
     color: var(--gray);
 }

 /* Contact / CTA Section end */

 /* note  */

 section.note {
     background-color: var(--gray);
     padding-block: 40px;
     color: var(--darkblue);
     text-align: center;
     margin-bottom: 80px;
 }

 section.note h4 {
     font-size: 26px;
     font-weight: 600;
 }


 /* footer  */
 /* Footer */
 section.footer {
     padding-block: 0;
 }

 .site-footer {
     padding: 40px 20px;
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 30px;
     max-width: 918px;
     margin-inline: auto;
 }

 /* Footer Navigation */

 .footer-nav ul {
     list-style: none;
     padding: 64px 24px;
     margin: 0;
     display: flex;
     gap: 140px;
     justify-content: center;
     align-items: center;
     margin-bottom: 62px;
     border-bottom: 1px solid rgb(57, 155, 230, 0.5);
 }

 .footer-nav a {
     font-size: 19px;
     font-weight: 500;
     color: var(--gray);
     text-decoration: none;
     transition: color 0.2s;
 }

 .footer-nav a:not(.btnhollow):hover {
     color: var(--oceanblue);
 }

 .footer-nav .btnhollow {
     min-width: 236px;
     height: 50px;
     padding-block: 10px;
 }

 .footer-nav .btnhollow .arrowicon {}

 /* Footer Logo */
 .footer-logo img {
     height: 110px;
     margin-right: 40px;
 }

 /* Tagline */
 .footer-text {
     /*font-size: 26px;*/
     font-size: 20px;
     font-weight: 500;
     font-family: 'switzer';
     line-height: 100%;
     color: var(--gray);
     text-align: start;
 }

 .about-cta-btn {
     cursor: pointer;
 }

 .footer-text strong {
     color: #fff;
 }


 /* footer end  */




 /* RAjnish Start */
 /* About US */
 .about-us {
     width: 100%;
     margin-top: 75px;
 }

 .about-text {
     text-align: center;
 }

 .about-text h1 {
     font-family: "switzer";
     font-weight: 500;
     font-style: Medium;
     font-size: 30px;
     line-height: 108%;
     margin-block: 89px;
     color: var(--gray);
 }

 .about-text p {
     font-family: "general-sans";
     font-weight: 400;
     font-style: Medium;
     font-size: var(--bodytext);
     line-height: 90%;
     /* padding: 12px 0; */
     color: var(--gray);
 }

 .about-text h3 {
     font-family: "switzer";
     font-weight: 500;
     font-style: normal;
     font-size: 40px;
     line-height: 118%;
     padding: 0px 25px;
     color: var(--gray);
 }

 .about-info {
     /* width: 1100px; */
     margin: auto;
     display: flex;
     justify-content: center;
 }

 /*.infoCard1 {*/
 /*    display: flex;*/
 /*    justify-content: center;*/
 /*    align-items: center;*/
 /*    gap: 20px;*/
 /*    background: #000000;*/
 /*    padding-top: 91px;*/
 /*    border: 1px solid #dcdddd33;*/
 /*    border-radius: 40px;*/
 /*}*/
 .infoCard1 {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     background: rgb(0 0 0 / 27%);
     padding-top: 91px;
     border: 1px solid #dcdddd33;
     border-radius: 40px;
 }

 .infoCard1.margin-top {
     margin-top: 1rem;
 }

 .infocard1-img {
     width: 384px;
     height: 181px;
     border-radius: 27.17px;
     border: 1px solid #dcdddd66;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .infocard1-img img {
     width: 148px;
     height: 146px;
 }

 .infocard1-img.img2 {
     height: 85px;
 }

 .infocard1-img.img2 img {
     width: 174px !important;
     height: 138px;
     margin-bottom: 23px;
 }

 .infocard1-text {
     width: 75%;
 }

 .infocard1-text p {
     font-family: "general-sans";
     font-weight: 400;
     font-style: Medium;
     font-size: 17px;
     line-height: 130%;
     color: var(--gray);
 }

 .infocard.aboutPageInfo .infoCard1 .infocard1-text p {
     font-size: 17px;
     font-weight: 500;
 }

 .infocard.aboutPageInfo .infoCard1 .infocard1-text p:nth-child(1) {
     padding-bottom: 10px;
 }

 .infocard.aboutPageInfo .infoCard1.margin-top {
     margin-top: 28px;
 }

 .infocard1-text.para p {
     text-align: right;
 }

 .about-higlights {
     margin: 0;
     color: var(--gray);
     display: flex;
     justify-content: center;
     align-items: center;
     padding-bottom: 0px !important;
 }

 .about-higlights-container {
     width: 45%;
     padding: 40px;
     text-align: center;
     position: relative;
 }

 .text-block {
     margin-bottom: 169px;
 }

 .heading {
     font-family: "switzer";
     font-size: 24px;
     font-weight: 500;
     padding-bottom: 22px;
     line-height: 120%;
     color: var(--gray);
 }

 .paragraph {
     font-family: "general-sans";
     font-weight: 400;
     font-size: 19px;
     line-height: 130%;
     color: var(--gray);
 }

 .curve {
     position: absolute;
     width: 298px;
     height: 310px;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     margin-right: 10px !important;
 }

 .curve-left {
     left: -205px;
     top: 45%;
     background-image: url("../images/vector5.svg");
 }

 .curve-right {
     right: -205px;
     top: 9%;
     background-image: url("../images/vector4.svg");
 }

 .flag-img {
     display: flex;
     justify-content: center;
     padding-block: 100px;
 }

 .flag-img img {
     width: 106px;
     height: 121px;
 }

 .text-block:last-child {
     margin-bottom: 0;
 }

 .about-contact-parent {
     padding: 99px 156px;
     background: var(--oceanblue);
 }

 .about-contact {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 56px;
 }

 .about-contact-text {
     width: 60%;
 }

 .about-contact-text h3 {
     color: var(--white);
     font-family: "switzer";
     font-size: 48px;
     font-weight: 500;
     line-height: 120%;
     padding-bottom: 18px;
 }

 .about-contact-text p {
     font-family: "general-sans";
     font-weight: 500;
     font-size: 19px;
     line-height: 130%;
     color: var(--white);
 }

 .about-cta {
     width: 40%;
     text-align: center;
 }

 .about-cta-btn a {
     padding: 18px 30px;
     background: #000;
     color: var(--white);
     border: 0;
     border-radius: 20px;
     width: 100%;
     text-align: center;
 }

 .about-cta-btn a button {
     color: var(--white);
     font-size: 30px;
     font-weight: 500;
     line-height: 120%;
     background-color: transparent;
     border: none;
     cursor: pointer;
 }

 .about-cta h4 {
     color: var(--white);
     font-family: "switzer";
     font-size: 26px;
     font-weight: 600;
     line-height: 120%;
     margin-top: 46px;
 }

 body.servicepage .bodybg2 {
     bottom: -120rem;
 }

 body.aboutpage .bodybg2 {
     bottom: -155rem;
 }

 /* body.servicepage .bodybg,
 body.aboutpage .bodybg {
     left: 0rem;
     top: -22rem;
     filter: blur(0px);
     width: 80%;
 }

 body.servicepage .bodybg2,
 body.aboutpage .bodybg2 {
     width: 100%;
     position: absolute;
     bottom: -26rem;
     filter: blur(260px);
     z-index: 1;
     right: 0;
 }
     

 body.aboutpage .bodybg2 {
     bottom: -52rem !important;
 } */

 .service-card {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 30px;
 }

 .service-single-card {
     padding: 50px;
     border: 12px solid #dcdddd36;
     border-color: #dcdddd36;
     border-radius: 30px;
     background: #00000045;
     width: 50%;
     min-height: 825px;
     /* box-shadow: 0 0 2px 12px #dcdddd36; */
 }

 @keyframes servicescard {
     0% {
         transform: translateY(20px);
         opacity: 0;
     }

     100% {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .service-single-header h2 {
     font-size: 32px;
     line-height: 120%;
     font-family: "switzer";
     font-weight: 600;
     color: var(--gray);
     letter-spacing: 0;
     padding-bottom: 24px;
 }

 .service-single-header p {
     font-family: "general-sans";
     font-weight: 500;
     font-size: 17px;
     line-height: 120%;
     letter-spacing: 0;
     text-align: center;
     padding-bottom: 24px;
 }

 .service-single-card-btn {
     border-radius: 30px;
     padding: 12px 20px;
     background: #399be6;
     border: 1px solid #399be6;
     margin-bottom: 1rem;
 }

 .service-single-card-btn a {
     color: var(--white);
     font-size: 19px;
     font-family: "general-sans";
     font-weight: 500;
     line-height: 100%;
     letter-spacing: 0;
 }

 .serviceWrapper {
     min-height: 286px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .serviceWrapper2 {
     min-height: 376px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* padding-block: 2rem; */
 }

 .info-top h6,
 .info-bottom h6 {
     font-size: 17px;
     color: var(--gray);
     font-family: "general-sans";
     line-height: 120%;
     font-weight: 500;
     padding-bottom: 10px;
 }

 .info-top h3,
 .info-bottom h3 {
     font-size: 26px;
     color: var(--gray);
     font-family: "switzer";
     line-height: 120%;
     font-weight: 500;
 }

 .info-top {
     border-bottom: 1px solid #dcdddd47;
     padding-bottom: 35px;
     margin-bottom: 35px;
     margin-inline: 1.6rem;
 }

 .built-in-parent {
     display: flex;
     justify-content: center;
     margin-top: 47px;
 }

 .top-content h2 {
     font-size: 48px;
     font-family: "switzer";
     font-weight: 500;
     color: var(--gray);
     text-align: center;
     border-bottom: 1px solid #399be6;
     padding-bottom: 33px;
     width: 80%;
     margin: auto;
 }

 .top-content p {
     font-size: 26px;
     font-family: "switzer";
     font-weight: 600;
     line-height: 120%;
     color: var(--white);
     text-align: center;
     width: 60%;
     margin: auto;
     padding-block: 43px;
 }

 .blue-box {
     border-radius: 30px;
     text-align: center;
     padding: 18px 20px;
     background: #399be6;
     border: 1px solid #399be6;
     /* margin-top: 1.5rem; */
     font-size: 19px;
     font-weight: 500;
     font-family: "general-sans";
     line-height: 120%;
     color: var(--white);
     width: 95%;
     margin: auto;
 }

 .shape-section {
     display: flex;
     justify-content: center;
     width: 90%;
     margin-top: 5rem;
     margin-inline: auto;
 }

 .shape-sec-img {
     position: relative;
     left: 57%;
     bottom: -66px;
 }


 .shape-sec-img.img2 {
     width: 325px;
 }

 .shape-sec-info h3 {
     font-size: 26px;
     width: 70%;
     font-family: "switzer";
     font-weight: 500;
     color: var(--gray);
     text-align: center;
     margin: auto;
     line-height: 120%;
 }

 .shape-sec-info p {
     font-size: 17px;
     width: 70%;
     font-family: "general-sans";
     font-weight: 500;
     color: var(--gray);
     text-align: center;
     margin: 20px auto;
     line-height: 120%;
 }

 .shape-sec-2 {
     margin-top: 5rem;
 }

 .shape-sec-3 {
     margin-top: 9rem;
 }

 .shape-sec-4 {
     margin-top: 21rem;
     /* margin-left: 27px; */
 }

 .shape-sec-img.img3rd {
     top: unset;
     left: 53%;
     bottom: -77px !important;
 }

 .shape-sec-3 .shape-sec-info {
     margin-top: 1.2rem;
 }

 .shape-sec-4 .shape-sec-info {
     margin-top: 3.2rem;
 }

 .web-acess-sec-info {
     margin-left: 6rem;
     margin-top: 15px;
 }

 .web-acess-sec-info h4 {
     font-size: 26px;
     font-family: "switzer";
     font-weight: 500;
     color: var(--gray);
     margin: auto;
     line-height: 100%;
     padding-bottom: 20px;
     width: 25%;
     margin: 0 0 13px 0;
     border-bottom: 1px solid #399be6;
 }

 .web-acess-sec-info p {
     font-size: 17px;
     font-family: "general-sans";
     font-weight: 500;
     color: var(--gray);
     line-height: 120%;
     width: 25%;
     margin: 0 0 10px 0;
 }

 .web-acess-sec {
     margin-top: -12rem;
 }


 .infoCard1.info {
     border: none;
     background: none;
     gap: 54px;
 }

 .infocard1-img.info img {
     width: 385px;
     height: 331px;
     margin-top: -19px;
     margin-left: 26px;
 }

 .why-chose-i4s {
     display: flex;
     margin-left: 7%;
     /* align-items: center; */
     gap: 32px;
     /* margin-top: 10rem; */
     /* margin-bottom: 2rem; */
 }

 .why-chose-i4s h2 {
     font-size: 48px;
     font-family: "switzer";
     font-weight: 500;
     color: var(--gray);
     line-height: 120%;
 }

 .why-chose-i4s img {
     width: 135px;
     height: 69.2px;
 }

 .infocard1-text h4 {
     font-size: 30px;
     font-family: "switzer";
     font-weight: 500;
     color: var(--gray);
     line-height: 120%;
     margin-bottom: 13px;
 }

 .shape-section-mobile {
     display: none;
 }

 @media (max-width: 1100px) {
     .about-info {
         width: 990px;
     }
 }

 @media (max-width: 991px) {

     .header .moblieheader_wrapper {
         padding-inline: 20px;
     }

     .mobilenavtoggler {
         background: var(--oceanblue);
         border-radius: 50%;
         min-width: 50px;
         height: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
     }

     ul.navlist.active.open+.closebtn {
         pointer-events: all;
         opacity: 1;
         cursor: pointer;
     }

     a.btnhollow.navcta {
         margin-right: 2rem;
     }


     /*.navlist {*/
     /*    position: absolute;*/
     /*    display: block;*/
     /*    width: calc(100% - 20px - 20px);*/
     /*    right: 20px;*/
     /*    padding: 20px 5px;*/
     /*    top: 60px;*/
     /*    display: none;*/
     /*}*/
     .navlist {
         position: absolute;
         top: 60px;
         right: 0;
         width: 100%;
         padding: 0 5px;
         display: block;
         overflow: hidden;
         transition: all 0.75s ease;
         top: -35px;
         padding-top: 5rem !important;
         transform: translateY(-100%);
     }


     .navlist.open {
         padding: 20px 5px;
         max-height: 500px;
         /* adjust to content size */
         transform: translateY(0%);
     }

     .about-us {
         width: 100%;
         padding-inline: 20px;
         margin-top: 0;
     }

     .about-text h3 {
         font-size: 28px;
         line-height: 118%;
         padding: 3px 0px;
     }

     .about-info {
         width: 100%;
         padding-inline: 20px;
     }

     section {
         padding-block: 50px;
         padding-inline: 10px;
     }

     .infoCard1 {
         /* display: block; */
         flex-direction: column;
         /* padding: 49px 20px 30px 20px; */
         border: 1px solid #dcdddd54;
     }

     .infocard1-img {
         width: 100%;
     }

     .infocard1-img img {
         width: 155px;
         height: 160px;
     }

     .infocard1-text {
         width: 100%;
         margin-top: 30px;
     }

     .infoCard1.margin-top {
         margin-top: 1rem;
         display: flex;
         flex-direction: column-reverse;
         padding-top: 55px;
     }

     .infocard1-text.para p {
         text-align: center;
     }

     .about-higlights {
         padding-inline: 20px;
     }

     .about-higlights-container {
         max-width: 100%;
         padding: 10px 69px 0 0;
         text-align: right;
     }

     .heading {
         font-size: 22px;
     }

     .curve-right {
         right: -87px;
         top: 3%;
     }

     .curve {
         margin-right: 10px;
     }

     .curve-left {
         display: none;
     }

     .curve-left-mobile {
         right: -85px;
         top: 45%;
         background-image: url("../images/vector4.svg");
     }

     .paragraph {
         line-height: 20px;
     }

     .about-contact {
         display: block;
         width: 100%;
     }

     .about-contact-text {
         width: 100%;
     }

     .about-cta {
         width: 100%;
     }

     .built-in-parent {
         margin-top: 0rem;
     }

     .shape-section {
         display: none;
     }


     .shape-section-mobile {
         display: block;
         padding-inline: 20px;
         width: 100%;
     }

     .shape-section-mobile-stl {
         display: flex;
         align-items: center;
         gap: 30px;
         justify-content: center;
     }

     .mobile-stl-info h3 {
         font-size: 20px;
         text-decoration: underline;
     }

     .mobile-stl-info {
         border-left: 1.3px solid #dcdddd;
         padding-left: 10px;
     }

     .mobile-stl-info-img {
         padding-top: 7rem;

         width: 33%;
     }

     .mobile-stl-info-img img {
         height: 130px;
     }

     .shape-section-mobile-stl.second,
     .shape-section-mobile-stl.third {
         margin-top: -4rem;
     }

     .second .mobile-stl-info-img {
         text-align: right;
     }

     .second .mobile-stl-info {
         border: 0;
         border-right: 1.3px solid #dcdddd;
         padding-right: 10px;
     }

     .fourth .mobile-stl-info {
         border: 0;
         border-right: 1.3px solid #dcdddd;
         padding-right: 10px;
     }

     .web-acess-sec {
         margin-top: 0;
         display: flex;
         justify-content: center;
         width: 100%;
         padding-inline: 20px;
     }

     .web-acess-sec-img {
         display: none;
     }

     .web-acess-sec-info span {
         font-size: 22px;
         width: 100%;
         text-align: center;
     }

     .why-choose-i4s-parent {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .web-acess-img {
         display: flex;
         justify-content: center;
     }

     .why-choose-card {
         width: 100%;
         margin-inline: auto;
         padding-inline: 20px;
     }

     .infocard1-text {
         width: 100%;
         margin-top: 50px;
     }

     .why-chose-i4s {
         display: block;
         margin-left: 0;
         margin-top: 5rem;
     }

     .infocard1-text {
         width: 100%;
         margin-top: 50px;
     }

     .about-higlights {
         padding-inline: 20px;
     }

     .about-higlights-container {
         width: 100% !important;
         padding: 0 125px 0 0;
         text-align: right;
     }
 }

 @media (max-width: 772px) {
     .about-para {
         max-width: 100% !important;
     }

     .about-contact-text {
         padding-bottom: 21px;
     }

     .about-contact-parent {
         text-align: center;
     }

     .curve-left-mobile {
         right: -100px;
         top: 60%;
         rotate: -5deg;
         background-image: url("../images/vector4.svg");
     }

     .curve-right {
         right: -100px;
         top: 8%;
         rotate: -5deg;
     }
 }

 @media (max-width: 596px) {

     .top-content p {
         font-size: 15px;
     }

     .built-in-parent {
         padding-inline: 20px;
     }

     .mobile-stl-info h3 {
         font-size: 15px;
         text-decoration: underline;
     }

     .service.about-text h1 {
         margin-top: 5px;
     }

     .built-in-section .top-content {
         padding-top: 35px;
     }

     .top-content h2 {
         padding-inline: 4rem;
     }

     .top-content p {
         padding-inline: 1rem;
     }

     .blue-box {
         border-radius: 20px;
     }

     .web-acess-sec-info h4 {
         line-height: 120%;
     }

     .web-acess-sec-info h4 b {
         display: block;
     }

     .web-acess-sec-info {
         padding: 40px 28px !important;
     }

     .infocard1-text {
         margin-top: 35px;
     }

     .infocard1-text p {
         padding-inline: 18px;
     }

     .about-contact-text h3 {
         padding-inline: 65px;
     }
 }

 @media (max-width: 494px) {

     .mobile-stl-info-img img {
         height: 106px;
     }

     .mobile-stl-info-img {
         padding-top: 5rem;
         width: 50%;
     }

     .shape-section-mobile-stl.second,
     .shape-section-mobile-stl.third {
         margin-top: -3rem;
     }
 }

 @media (max-width: 390px) {
     .about-text h3 {
         font-size: 26px;
     }

     .mobile-stl-info h3 {
         font-size: 15px;
     }

     .shape-section-mobile-stl {
         gap: 4px;
     }
 }

 /* RAjnish End */
 /* 
 .navbar .navlist li.navitem {
     transition: all 0.3s linear;
 }

 .navbar .navlist li.navitem:hover {
     background-color: var(--darkblue) !important;
     cursor: pointer;
 }

 .navbar .navlist:hover .navitem.active {
     background-color: transparent;
 } */

 .web-acess-sec-img img {
     width: 205.27px;
 }

 .whyChooseWrapper {
     padding-block: 160px;
 }

 .about-para {
     max-width: 70%;
     margin: auto;
 }

 .about-text .about-para p {
     font-size: 18px;
     font-weight: 500;
     line-height: 120%;
     font-family: "general-sans";
     padding-bottom: 6px;
 }

 .about-text .about-para h3 {
     font-family: "switzer";
     font-weight: 600;
     font-style: normal;
     font-size: 36px;
     line-height: 120%;
     color: var(--gray);
     padding-bottom: 6px;
 }

 .infocard.aboutPageInfo .infoCard1 {
     padding: 50px 63px;
 }

 .infocard.aboutPageInfo .infoCard1 .infocard1-img {
     width: 314px;
     height: 150px;
     position: relative;
 }

 .infocard.aboutPageInfo .infoCard1 .infocard1-img img {
     width: 195px;
     height: 196px;
     position: absolute;
     top: -27px;
 }

 .threearcs {
     position: absolute;

 }




 /* responsiveness  */

 @media screen and (max-width:1400px) {
     .contentwrapper {
         max-width: 1140px;
     }

     svg.arc-svg {
         width: 930px;
     }

     .shape-sec-img.img2 {
         width: 100%;
         max-width: 296px;
         rotate: 5deg;
     }

     .shape-sec-img.img3rd {
         left: 51%;
         bottom: -80px !important;
     }
 }


 @media screen and (max-width:576px) {

     section {
         padding-inline: 30px !important;
         padding-block: 35px !important;
     }

     p {
         font-size: var(--moblie-smalltext);
     }

     .sec_heading>h2 {
         font-size: 32px !important;
         padding-inline: 35px;
     }

     .about-card:nth-child(2n+2),
     .card:nth-child(2n+2) {
         margin-left: auto;
     }

     .bodybg img.desktop,
     .bodybg2 img.desktop {
         display: none;
     }

     .bodybg img.mobile {
         display: inline-block;
         filter: blur(0px);
     }

     .bodybg2 {
         filter: blur(40px);
         bottom: 22rem;
     }

     .servicepage .bodybg2 {
         filter: blur(40px);
         bottom: -170rem !important;
     }

     body.aboutpage .bodybg2 {
         bottom: -184rem;
     }


     .bodybg2 img.mobile {
         display: inline-block;
         filter: blur(0px);
     }


     /* header  */

     .header {
         position: unset;
         padding-inline: 30px;
         margin-top: 20px;

     }

     .moblieheader_wrapper {
         display: flex;
         align-items: center;
         width: 100%;
         border-bottom: 1px solid var(--gray);
         padding-bottom: 20px; /* space inside before the border */
     }



     a.btnhollow.navcta {
         display: none;
     }

     /* hero */

     h1.heroheading {
         font-size: 40px;
         line-height: 45px;
     }

     .herotext {
         margin-bottom: 0;
     }

     .heroleft,
     .heroright {
         width: 100% !important;
     }

     section.hero>.contentwrapper {
         flex-direction: column;
     }

     p.herotext {
         font-weight: 400;
         font-size: 15px;
         line-height: 120%;
         padding-right: 2rem;
     }

     .headerdesc {
         margin-top: 40px;
         max-width: 218px;
     }

     .numb.bdrhalf {
         border: unset;
     }

     .numb {
         width: unset;
         height: unset;
         border-radius: unset;
         align-content: center;
         text-align: center;
         font-weight: 700;
         font-size: 59.66px;
         line-height: 100%;
     }

     .numb.bdrhalf span {
         display: inline-block;
         margin-left: -10px;
     }

     .headerdesc_item {
         flex-direction: column;
         align-items: start;
         margin-bottom: 40px;
     }

     .headerdesc_item.item2 {
         margin-bottom: 25px;
     }

     h3.itemheading {
         font-weight: 500;
         font-size: 17px;
         line-height: 120%;
     }

     p.itemtext {
         font-weight: 400;
         font-size: 15px;
         line-height: 120%;
     }

     .btnfilled {
         width: fit-content;
         height: 51px;
         border-radius: 15px;
         padding: 17px 35px;
         border-width: 0.5px;
         background-color: var(--oceanblue);
         color: var(--white);
         display: flex;
         align-items: center;
         gap: 20px;
         font-size: 15px;
     }

     .heroleft .startproject_btn {
         display: none;
     }

     .herostrshp {
         top: 28%;
     }

     .heroright .startproject_btn {
         display: flex !important;
     }

     /* whyus  */
     .sec_main_heading {
         max-width: 75%;
         font-family: Switzer;
         font-weight: 500;
         font-style: Medium;
         font-size: 32px;
         leading-trim: NONE;
         line-height: 37.2px;
         letter-spacing: 0%;
     }

     .card-container {

         gap: 0px;
         padding-block: 35px;
     }

     .card {
         max-width: 250px;
         width: 100%;
         padding: 28px 21px;
         border-radius: 20px;
         margin-bottom: 35px;
     }

     .card:last-child {
         margin-bottom: 0px;
     }

     .card.card-blue {
         background: var(--oceanblue);
     }


     .card h2 {
         margin-bottom: 49px;
         font-family: Switzer;
         font-weight: 500;
         font-size: 26px;
         line-height: 31.3px;
     }

     .card p {
         font-weight: 400;
         font-size: 16px;
         line-height: 120%;
     }

     .card p strong {
         font-weight: 400;
     }


     /* what we build  */

     .feature img {
         width: 55px;
     }

     .pill {
         text-align: center !important;
     }

     .infocard1-img {
         background: rgb(0 0 0 / 27%);
     }



     .feature {
         flex-direction: row;
         align-items: flex-start;
     }

     .feature:last-child {
         margin-bottom: 0;
     }

     section.whatwebuild {
         border-radius: 20px;
         padding: 56px 30px !important;
     }

     section.sectionbg.whatwebuild h2 {
         margin-bottom: 39px;
         font-size: 32px !important;
         text-align: left;
         line-height: 37.2px;
     }

     .feature-content h3 {
         font-size: 26px;
         font-weight: 500;
         margin: 0 0 8px;
         color: var(--darkblue);
         font-weight: 500;
         font-style: Medium;
         font-size: 17px;
         line-height: 100%;
         letter-spacing: 0%;
     }

     .feature-content p {
         margin: 0;
         line-height: 1.6;
         font-weight: 500;
         color: var(--darkblue);
         font-weight: 400;
         font-style: Regular;
         font-size: 15px;
         leading-trim: NONE;
         line-height: 120%;
         letter-spacing: 0%;
     }



     /* core deleverables  */



     section.core_deliverables {
         position: relative;
     }

     .core_deliverables .sec_heading {
         padding-top: 35px;
         margin-bottom: 50px;
     }

     .features {
         /*max-width: 159px;*/
         /*margin-right: 25px;*/
         /*        margin-right: calc(100% - 16.5rem);*/
         /*margin-left: auto;*/
         max-width: 159px;
         /* margin-right: 25px; */
         margin-right: auto;
         margin-left: 35vw;
     }


     .deliverable {
         text-align: start;
     }

     .pill {
         display: inline-block;
         background: var(--oceanblue);
         padding: 16px 40px;
         border-radius: 50px;
         margin-inline: auto;
         width: fit-content;
         font-weight: 400;
         font-size: 15px;
         line-height: 100%;
         text-align: start;
     }

     .pill {
         font-weight: 400;
         font-size: 17px;
         line-height: 100%;
         letter-spacing: 0%;
         text-align: start;
         border-radius: 15px;
         padding: 19px 45px;
     }

     .deliverable h3 {
         margin-bottom: 10px;
         font-size: 17px;
         font-weight: 500;
         line-height: 120%;
     }

     .deliverable p {
         font-weight: 400;
         font-size: 16px;
         line-height: 120%;
     }

     .strings {
         position: absolute;
         transform: translateX(-50%) rotate(-90deg);
         left: 7.5rem;
         top: 48.5%;
         width: 100%;
     }

     .bottomtext {
         flex-direction: column;
     }

     .bottomtext .boldtext,
     .bottomtext .boldtext strong {
         font-family: 'switzer';
         font-size: 17px;
         line-height: 100%;
         text-align: center;
         display: block;
     }

     .boldtext strong {
         font-size: 19px !important;
         margin-block: 10px !important;
         text-decoration: unset;
     }

     .bottomtext .regulartext {
         max-width: 380px;
         font-weight: 400;
         font-size: 16px;
         line-height: 120%;
         text-align: center;
     }

     .step-line2 svg {

         max-width: 22rem;
         width: 100%;
     }

     svg.arc-svg path {
         stroke-width: 5;
     }

     svg.arc-svg circle {
         r: 8
     }

     svg.arc-svg circle.one {

         cx: 6.5;
     }

     svg.arc-svg circle.two {

         cx: 348;
     }

     svg.arc-svg circle.three {

         cx: 690;
     }

     svg.arc-svg circle.four {

         cx: 1030;
     }

     .strings {
         /*left: calc(100% - 13.5rem);*/
         left: 32vw;

         top: 42.25%;
         transform: translateX(-50%) rotate(90deg) scaleY(-1);
         width: 20rem;
     }

     /* how we bulid  */



     .build-steps {
         flex-direction: column;
         gap: 35px;
         margin-top: 0px;
     }

     .leftcontainer,
     .rightcontainer {
         width: 100%;
     }

     section.sectionbg h2 {
         margin-bottom: 35px;
         font-weight: 500;
         font-size: 32px !important;
         line-height: 37.2px;
         text-align: center;
     }

     .step-card {
         border-radius: 26px;
         min-height: unset;
         padding: 28px 21px;
     }

     .step-card.step3 {
         margin-bottom: 0;
     }

     .step-content {
         padding: unset;
     }

     .step-card h3 {
         margin-bottom: 15px;
         font-weight: 500;
         font-size: 17px;
         line-height: 120%;
     }

     .step-card p,
     .step-card p strong {
         font-weight: 400;
         font-size: 16px;
         line-height: 140%;
     }

     .step-card.horizontal {
         flex-direction: column;
     }

     .step-card.horizontal .step-content,
     .step-card.horizontal .step-illustration {
         width: 100%;
     }

     .step-card.step2 {
         background-color: transparent;
         padding-block: 0;
     }

     .step-card.step2 .step-number,
     .step-card.step2 .step-content h3,
     .step-card.step2 .step-content p,
     .step-card.step2 .step-content p strong {
         color: var(--gray);
     }

     .step-card.step2 picture {
         max-width: 85%;
         margin: auto;
         display: inline-block;
     }


     /* about section  */
     .about-section .sec_heading {
         margin-bottom: 18px;
     }

     .about-section .sec_heading img {
         margin-left: 14px;
         margin-top: 7px;
         width: 87px;
         height: 44px;
     }

     .about-card.description h3 {
         font-weight: 500;
         font-size: 17px;
         line-height: 100%;
         margin-bottom: 10px;
     }

     .about-card.description p {
         font-weight: 400;
         font-size: 16px;
         line-height: 120%;
     }

     .about-cards {
         gap: unset;
         margin-bottom: 0;
     }

     .about-card {
         border-radius: 20px;
         padding: 28px 21px;
         flex: 1;
         display: flex;
         flex-direction: column;
         box-shadow: 0 .5px 2.5px rgba(57, 155, 230, 0.5);
         text-align: left;
         max-width: 246px;
         margin-bottom: 35px;
     }

     .about-card h4 {
         font-size: 16px;
         font-weight: 400;
         font-family: 'general-sans';
         text-align: start;
     }

     .about-card p {
         font-weight: 500;
         font-size: 17px;
         line-height: 100%;
     }



     .about-card.description {
         order: -1;
         margin-bottom: 15px;
     }



     /* contact section  */


     .contact-section h2 {
         font-size: 32px;
         font-weight: 500;
         line-height: 37.2px;
         margin-bottom: 35px;
         margin-top: 20px;
     }

     .contact-section p {
         font-size: 16px;
         font-weight: 400;
         line-height: 100%;
         margin-bottom: 35px;
     }

     .contact-section .cta-button {
         font-size: 22px;
         font-weight: 900;
         border-radius: 18px;
         margin-bottom: 35px;
         height: 58px;
         width: 333px;
     }

     .contact-section .bottom-text {
         font-size: 17px;
         font-weight: 500;
         padding-inline: 20px;
         margin-bottom: 35px;
     }

     /* note section  */

     section.note {
         margin-bottom: 0px;
         padding: 29px 26px;
     }

     section.note h4 {
         font-size: var(--moblie-bodytext);
         font-weight: 700;
         font-family: 'general-sans';

     }


     /* footer  */

     .site-footer {
         gap: 20px;
         max-width: 310px;
         padding-block: 0;
     }

     .site-footer ul {
         flex-direction: column;
         gap: 37px;
         padding: 15px 24px 29px 24px;
     }

     .footerbottom_wrapper {
         flex-direction: column;
     }

     .footerbottom_wrapper .footer-text {
         text-align: center;
         font-size: 17px;
         margin-bottom: 25px;
     }

     .footer-logo img {
         height: 69;
         width: 170px;
         margin-right: 0;
     }

     .footer-nav ul {
         margin-bottom: 0;
     }

     .footer-nav a {
         font-size: 15px;
     }

     .footer-nav .btnhollow {
         min-width: unset;
         height: 50px;
         padding-block: 10px;
     }

     .arrowicon {
         width: 25px;
         height: 25px;
     }


 }

 @media (width < 575px) {
     .heading {
         font-size: 17px;
         font-weight: 500;
         padding-bottom: 10px;
     }

     .paragraph {
         line-height: 130%;
         font-size: 15px;
         font-weight: 400;
     }

     .curve-left-mobile {
         right: -135px;
         top: 60%;
         rotate: -5deg;
         background-image: url("../images/vector4.svg");
     }

     .curve {
         height: 201px;
     }

     .curve-left {
         left: -205px;
         top: 37%;
         background-image: url("../images/vector5.svg");
     }

     .about-text h1 {
         font-size: 17px;
         margin: 40px 0;
     }

     .service-card {
         flex-direction: column;
     }

     .service-single-card {
         min-height: auto;
         width: 100%;
         padding: 60px 20px;
     }

     .serviceWrapper2,
     .serviceWrapper {
         min-height: auto;
     }

     .service-single-header h2 {
         font-size: 32px;
         font-weight: 500;
         padding-bottom: 4px;
     }

     .about-text p {
         width: 100%;
         line-height: 130%;
         font-size: 16px;
         padding-bottom: 14px;
         font-weight: 400;
     }

     .service-single-card-btn {
         margin-bottom: 34px;
         border-radius: 40px;
     }

     .service-single-card-btn a {
         font-size: 16px;
         font-weight: 400;
         line-height: 120%;
     }

     .info-top h6,
     .info-bottom h6 {
         font-size: 16px;
         font-weight: 400;
     }

     .info-top h3,
     .info-bottom h3 {
         font-size: 17px;
         font-weight: 500;
     }

     .info-top {
         padding-bottom: 12px;
         margin-bottom: 12px;
     }

     .top-content h2 {
         width: 100%;
         font-size: 32px;
         padding-bottom: 17px;
     }

     .top-content p {
         width: 100%;
         padding-block: 17px 22px;
         font-size: 17px;
         font-weight: 500;
     }

     .blue-box {
         font-size: 15px;
         font-weight: 400;
     }

     .mobile-stl-info h3 {
         font-size: 17px;
         padding-bottom: 6px;
     }

     .rightStl {
         text-align: right;
     }

     .mobile-stl-info p {
         font-size: 16px;
     }

     .mobile-stl-info {
         width: 100%;
     }

     .web-acess-sec-info {
         margin-left: 0;
         margin-top: 50px;
         padding: 40px 35px;
         border: 12px solid #dcdddd36;
         border-color: #dcdddd36;
         border-radius: 40px;
         background: #00000045;
         width: 100%;
     }

     .web-acess-sec-info h4 {
         font-size: 16px;
         width: 100%;
         text-align: center;
         font-weight: 400;
     }

     .web-acess-sec-info h4 b {
         font-size: 17px;
         font-weight: 500;
     }

     .web-acess-sec-info p {
         font-size: 17px;
         font-weight: 500;
         width: 100%;
         text-align: center;
     }

     .whyChooseWrapper {
         padding-block: 70px;
     }

     .why-chose-i4s {
         margin-top: 0;
         text-align: center;
     }

     .why-chose-i4s h2 {
         font-size: 32px;
         font-weight: 500;
     }

     .infocard1-img.info img {
         margin-top: 0;
         margin-left: 0;
     }

     .infocard1-text h4 {
         font-size: 17px;
         text-align: center;
         font-weight: 500;
     }

     .infocard1-text p {
         font-size: 16px;
         font-weight: 400;
         line-height: 130%;
         text-align: center;
     }

     .about-contact-parent {
         padding: 70px 20px;
     }

     .about-contact-text h3 {
         font-size: 28px;
         font-weight: 500;
         text-align: center;
         padding-bottom: 21px;
     }

     .about-contact-text p {
         text-align: center;
         margin-bottom: 21px;
         font-size: 16px;
         font-weight: 400;
     }

     .about-cta-btn a button {
         font-size: 22px;
         font-weight: 900;
     }

     .about-cta h4 {
         font-size: 17px;
         font-weight: 500;
         margin-top: 21px;
     }

     .infocard1-img.info img {
         height: 230px;
     }

     .infocard1-img {
         height: 149px;
     }

     .infoCard1 {
         padding-top: 45px;
     }

     .flag-img {
         padding-block: 50px;
     }

     .about-higlights-container {
         padding: 0 70px 0 0 !important;
     }

     .infocard.aboutPageInfo .infoCard1 .infocard1-text p {
         font-size: 16px;
         font-weight: 400;
     }

     .infocard.aboutPageInfo .infoCard1.margin-top {
         margin-top: 35px;
     }

     .about-text h1 {
         font-size: 17px;
         margin: 40px 0;
     }

     .infocard.aboutPageInfo .infoCard1 {
         padding: 67px 29px 28px 29px;
     }

     .infocard.aboutPageInfo .infoCard1 .infocard1-img {
         width: 100% !important;
     }

     .about-text .about-para p {
         padding-bottom: 9px;
         font-size: 16px;
         font-weight: 400;
     }

     .about-text .about-para h3 {
         font-weight: 500;
         font-size: 28px;
         padding-bottom: 9px;
         padding-inline: 12px;
         line-height: 37.2px;
     }

     .about-info {
         padding-inline: 20px;
         padding-bottom: 20px;
     }

     .infocard.aboutPageInfo .infoCard1 .infocard1-img {
         width: 100% !important;
     }

     .infocard1-text {
         width: 100%;
         margin-top: 30px !important;
     }

     .flag-img img {
         width: 72px;
         height: 83px;
     }

     .text-block {
         margin: 0 0 69px 0;
     }

     .curve-right {
         right: -135px;
         top: 8%;
         rotate: -5deg;
     }
 }

 @media (width < 1440px) {
     .about-higlights-container {
         width: 65%;
     }
 }

 @media (max-width: 1025px) and (min-width: 577px) {


     .mobilenavtoggler {
         background: var(--oceanblue);
         border-radius: 50%;
         min-width: 50px;
         height: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
     }

     a.btnhollow.navcta {
         margin-right: 2rem;
     }

     /* Home Page */
     section.hero .contentwrapper {
         flex-direction: column;
     }

     section.hero .contentwrapper .w50 {
         width: 100%;
     }

     section.hero {
         padding-top: 115px;
     }

     .header {
         margin-top: 15px;
     }

     section.hero .contentwrapper .w50.heroright .headerdesc {
         margin-top: 60px;
     }

     h1.heroheading {
         font-size: 9vw;
         line-height: 100%;
     }

     section.whyus {
         padding-block: 20px;
     }

     .sec_main_heading {
         max-width: 100%;
     }

     .card-container .card {
         max-width: 60%;
     }

     .about-card:nth-child(2n+2),
     .card:nth-child(2n+2) {
         margin-left: auto;
     }

     .card.card-blue {
         background: var(--oceanblue);
     }

     .features {
         max-width: 95%;
         margin: auto;
     }

     .features {
         flex-direction: column;
         gap: 40px;
     }

     .bottomtext {
         flex-direction: column;
         padding-top: 4rem;
     }

     .step-line2 {
         display: none;
     }

     .bottomtext .regulartext {
         text-align: center;
     }

     .build-process {
         padding: 20px;
     }

     .core_deliverables .sec_heading {
         margin-bottom: 45px;
     }

     .about-section {
         padding-inline: 20px;
         padding-block: 20px;
     }

     .whyus .contentwrapper,
     .hero .contentwrapper {
         padding-inline: 10px;
     }

     .build-steps {
         flex-direction: column;
         margin-top: 0;
         gap: 20px;
     }

     .build-steps .rightcontainer,
     .build-steps .leftcontainer {
         width: 100%;
     }

     .about-section .sec_heading {
         text-align: center;
         margin-bottom: 20px;
         justify-content: center;
     }

     section.note,
     .rightcontainer .step-card {
         margin-bottom: 20px;
     }

     .about-cards .about-card {
         max-width: 100%;
         text-align: center;
     }

     .contact-section {
         background: #399be6;
     }

     .contact-section .cta-button {
         background: #000;
     }

     .contact-section .cta-button,
     .contact-section p {
         margin-bottom: 20px;
     }

     section.footer {
         padding-inline: 10px;
         padding-block: 2REM;
     }

     .site-footer {
         padding: 0;
     }

     .footer-nav ul {
         padding: 20px;
         margin: 0;
         justify-content: space-between;
         gap: 0;
     }

     .footerbottom_wrapper {
         gap: 10px;
     }

     /* About Page */
     .service-single-card {
         padding: 30px 20px;
     }

     .about-text h3 {
         padding: 0;
     }

     .service-single-header h2,
     .top-content h2 {
         font-size: 30px;
     }

     .service-single-header p,
     .info-top h6,
     .info-bottom h6,
     .blue-box {
         font-size: 17px;
     }

     .about-text h3 {
         font-size: 26px;
     }

     .top-content p {
         font-size: 20px;
     }

     .web-acess-sec-info h4,
     .web-acess-sec-info p {
         width: 100%;
         text-align: center;
     }

     .contentwrapper {
         max-width: 768px;
     }

     .web-acess-sec-info {
         margin-left: unset;
         margin-top: 15px;
         margin-inline: auto;
     }

     .whyChooseWrapper {
         padding-block: 40px;
     }

     .serviceWrapper2 {
         min-height: auto;
     }

     .service-single-card {
         width: 100%;
         min-height: auto;
     }

     .serviceWrapper {
         min-height: auto;
     }

     .why-chose-i4s {
         display: flex;
         justify-content: center;
         margin-top: 0;
     }

     .infocard1-img.info img {
         width: 357px;
         height: 258px;
     }

     .infoCard1.info {
         gap: 0;
     }

     .infoCard1 {
         padding-top: 50px;
     }

     .infocard1-text {
         text-align: center;
     }

     .about-contact-parent {
         background: var(--oceanblue);
         padding: 5rem 5rem;
         text-align: center;
     }

 }

 @media (max-width: 776px) and (min-width: 577px) {
     .about-contact-parent {
         padding: 4rem 2rem;
     }

     .service-card {
         flex-direction: column;
     }

     .serviceWrapper2 {
         min-height: auto;
     }

     .service-single-card {
         width: 100%;
         min-height: auto;
     }

     .serviceWrapper {
         min-height: auto;
     }

     .top-content h2 {
         padding-inline: 0;
     }

     .top-content p {
         padding-inline: 10px;
         width: 100%;
     }

     .web-acess-sec-info {
         padding: 0;
     }
 }