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

 html,
 body {
     width: 100%;
     height: 100%;
 }

 :root {
     --custom-color: #0abdcb;
     --Teal-Blue---Primary: #07bdcb;
     --speedReliability: #efeaff;
     --font: Poppins;
     --flexScal: #bff3e0;
     --closeCollabo: #fce9ea;
     --aboutUS: #f6f9fc;
     --Grey-300: #f9f9f9;
     --Gray-00: #fff;
     --integrationBg: linear-gradient(90deg, #142132 15.7%, #012751 91.16%);
 }

 /* nav {
      max-height: 69.7vh;
    } */
 .link-color {
     color: #08A9B9 !important;
 }

 .welcomeText {
     color: var(--White, #fff);
     font-family: var(--font);
     font-size: 46px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .welcomeTextSpan {
     color: var(--Grey-300, #f9f9f9);
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 26px;
 }

 .bg-primary {
    background-color: #07BDCB;
 }

 .headers {
     background: linear-gradient(to bottom,
             rgba(20, 33, 50, 1),
             rgba(1, 39, 81, 1));
 }

 .contact {
     color: var(--custom-color, #00D084);
     border-color: var(--custom-color);
 }

 .talkToUs {
     background-color: var(--custom-color);
 }

 .speedRialibity {
     background-color: var(--speedReliability);
 }

 .flexScal {
     background-color: var(--closeCollabo);
 }

 .closeCollabo {
     background-color: var(--flexScal);
 }

 .aboutUs {
     background-color: var(--aboutUS);
 }

 .textColor {
     color: var(--custom-color);
 }

 .servicesbox {
     border-radius: 20px;
     background: #fff;
     padding: 48px 40px 39px 40px;
     box-shadow: 0px 4px 54px 0px rgba(230, 236, 255, 0.24),
         0px 0px 48px 0px rgba(147, 147, 147, 0.04);
 }

 .serviceText {
     color: #272727;
     font-family: var(--font);
     font-size: 28px;
     font-style: normal;
     font-weight: 500;
     line-height: 160%;
     /* 44.8px */
 }

 .services {
     color: var(--Secondary-900, #040815);
     font-family: "Plus Jakarta Sans";
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .integrations {
     display: flex;
     /* padding: 80px 0 96px 0; */
     justify-content: space-between;
     align-items: center;
     text-wrap: wrap;
     background: linear-gradient(90deg, #142132 15.7%, #012751 91.16%);
 }

 .integrationTitle {
     color: var(--White, #fff);
     font-feature-settings: "liga" off;
     font-family: Poppins;
     /* font-size: 46px; */
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
     /* 130.435% */
     letter-spacing: -1.15px;
 }

 .integrationDescription {
     color: var(--White, #fff);
     font-feature-settings: "liga" off;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
 }

 .innovation {
     border-radius: 16px;
     background: linear-gradient(90deg, #142132 15.7%, #012751 91.16%);
 }

 @media screen and (max-width: 640px) {
     .innovation {
         padding: 0 2rem;
         margin: 1rem 2rem;
     }

     .questions {
         padding: 2rem;
     }

     footer {
         align-items: center;
     }

     footer> :first-child {
         padding: 0 3rem;
         gap: 2rem;
     }

     footer> :nth-child(2) {
         padding: 1rem 3rem;
         gap: 2rem;
     }

     .ourServices {
         padding: 1rem 2rem;
     }

     .services {
         font-size: 30px;
     }

     .serviceImg {
         display: none;
     }
 }

 footer {
     background: #012751;
 }

 .copyfooter {
     color: var(--Main-White, #fff);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
     opacity: 0.5;
 }

 .expertresoan {
     border-radius: 32px;
     border: 1px solid #fff;
     background: rgba(255, 255, 255, 0.19);
     backdrop-filter: blur(5px);
 }

 .poppinsFont {
     font-family: Poppins;
 }

 .jakarta {
     font-family: "Plus Jakarta Sans";
 }

 .frequent {
     cursor: pointer;
     transition: 0.4s;
 }

 @media screen and (max-width: 600px) {
     .menu {
         display: none;
     }
 }

 @media screen and (max-width: 600px) {
     .menuIcon {
         display: flex;
     }

     .nav-container {
         padding: 0 2rem
     }
 }

 @media screen and (max-width: 1136px) {
     .poster {
         display: none;
     }
 }

 .sidenav {
     top: 0;
     right: 0;
     background: #012751;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
     height: 100%;
     width: 0;
 }

 .sidenav .closebtn {
     position: absolute;
     top: 0;
     font-size: 46px;
 }

 a {
     margin: 0 !important;
 }

 .navbar {
     transition: background-color 0.3s ease;
 }

 .navbar.scrolled {
     background: linear-gradient(to bottom,
             rgba(20, 33, 50, 1),
             rgba(1, 39, 81, 1));
     -webkit-box-shadow: -11px 17px 12px -8px rgba(0, 0, 0, 0.04);
     -moz-box-shadow: -11px 17px 12px -8px rgba(0, 0, 0, 0.04);
     box-shadow: -11px 17px 12px -8px rgba(0, 0, 0, 0.04);
 }

 .navbar.nav-content {
     color: #07BDCB;
 }




 /* Hybrid Scroll */
 .scroll_container {
     height: 400vh;
 }

 .horizontal_scroll {
     position: absolute;
     top: 35%;
     /* height: 100vh; */
     width: 400vw;
     will-change: transform;
     display: flex;
     justify-content: space-between;
 }

 .scroll_contents {
     height: 50%;
     width: 100vw;
 }

 .sticky_wrap {
     overflow: hidden;
     position: sticky;
     top: 0;
     height: 100vh;
 }

 @media (min-wdth: 640px) {
     .serviceBox {
         width: 100%;
     }
 }

 .svg-mobile {
     width: 630px;
     height: 383px;
 }

 .svg-hardware {
     width: 387px;
     height: 285px
 }

 .svg-custom {
     width: 420px;
     height: 307px
 }

 .svg-integration {
     width: 556px;
     height: 312px;
 }

 @media (max-width: 768px) {
     .svg-mobile {
         width: 310px;
         height: 183px;
     }

     .svg-custom {
         width: 280px;
         height: 250px
     }

     .svg-integration {
         width: 356px;
         height: 212px;
     }
 }