html,body{
  overflow-x: hidden;
}
body{
 font-family: 'Poppins', sans-serif;

}
.container{
 max-width: 1140px;
 margin: 0 auto;
 padding: 0 16px;
 width: 100%;
}
header{
 display: flex;
 padding: max(3vh, 30px) 0;
 position: absolute;
 top: 0;
 width: 100%;
}
header .container{
 display: flex;
 justify-content: center;
}
header .logo{
animation: scale 0.5s ease-in-out;
display: flex;
max-width: 160px;
width: 100%;
}

header .logo img{
width: 100%;
height: auto;
object-fit: contain;
}

@keyframes scale {
 0% {
   transform: scale(0);
 }
 100% {
   transform: scale(1);
 }
}

.hero{
 background: linear-gradient(180deg, rgba(250, 251, 251, 0.0001) 0%, #F8FBFF 100%);
 min-height: 100vh;
 height: auto;
 display: flex;
 overflow: hidden;
 position: relative;
 padding-top: max(18vh, 120px);
 padding-bottom: max(6vh, 40px);
}
.hero .container{
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.hero .left{
 max-width: 539px;
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 30px;
}
@media screen and (min-width:1750px){
 .hero .right{
 width: 1079px;
 height: 1079px;
 position: absolute;
 right: -200px;
 bottom: -200px;
 background-color: #DAE7FA;
 border-radius: 50%;
}
.hero .right img{
 position: absolute;
 height: 100%;
 top: -30px;
 left: 185px;
}
}
@media screen and (max-width:1750px){
 .hero .right{
   width: 800px;
   height: 800px;
   position: absolute;
   right: -150px;
   bottom: -100px;
   background-color: #DAE7FA;
   border-radius: 50%;
 }
 .hero .right img{
   position: absolute;
   height: 100%;
   top: -30px;
   left: 100px;
 }
}

@media screen and (max-width:1200px){
 .hero .right{
   width: 600px;
   height: 600px;
   position: absolute;
   right: -100px;
   bottom: -50px;
   background-color: #DAE7FA;
   border-radius: 50%;
 }
 .hero .right img{
   position: absolute;
   height: 100%;
   top: 0;
   left: 50px;
 }
}




.hero .left h1{
 font-weight: 500;
 font-size: 56px;
 line-height: 68px;
 letter-spacing: 0.2px;
 color: #373737;
}
.hero .left h1 strong{
 font-weight: 700;
 background: linear-gradient(to left, #1b1c1f 20%, #6c15bc 40%, #16d8a9 60%, #1665d8 80%);
 background-size: 200% auto;
 color: #ea7576;
 background-clip: text;
 text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: shine 5s linear infinite;
}
@keyframes shine{
 100% {
   background-position: -200% center;
}
}

.hero .left p{
 color: #183B56;
 font-weight: 400;
 font-size: 20px;
 line-height: 36px;
}
.hero .left a{
 background-color: #1565D8;
 padding: 14px 24px;
 display: inline-flex;
 align-items: center;
 gap: 24px;
 width: 259px;
 box-shadow: 0px 15px 35px 0px #142D4126;
 border-radius: 50px;
 color: #fff;
 font-family: 'Open Sans', sans-serif;
 font-weight: 700;
 font-size: 18px;
 transition: transform 0.3s ease-in-out , background-color 0.3s ease-in-out;
}
.hero .left a:hover{
 transform: translateY(-5px);
 background-color: #0E4BBF;
}
.hero .left h6{
 font-family: 'Open Sans', sans-serif;
 font-weight: 600;
 font-size: 16px;
 letter-spacing: 0px;
 display: flex;
 align-items: center;
 gap: 12px;
 color: #B3BAC5;
}
.hero .left h6 svg{
 border: 1px dashed #1665d8;
 padding: 2px;
}
.hero .left h6 strong{
 color: #5A7184;
}
.brand{
 padding: 138px 0;
 position: relative;
 width: 100%;
}
.brand.reverse .container{
 flex-direction: row-reverse;
 
}
.brand::before{
 width: 1186px;
 height: 1186px;
 background: radial-gradient(circle at top right, #C4D5F3 0%, rgba(255, 255, 255, 0.0001) 88.44%);
 content: '';
 position: absolute;
 border-radius: 50%;
 opacity: 0.1;
 top: 45px;
 left: 100px;
}
.brand .container{
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
}
.brand .container .left{
 max-width: 460px;
 width: 100%;
}
.before-2::before{
 left: inherit;
 right: 10%;
}
.before-3::before{
 left: inherit;
 right: 0;
}
.brand .container .right{  
 max-width: 556px;
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 48px;
}

.brand .container .right h3{
 font-weight: 700;
 font-size: 36px;
 line-height: 48px;
 letter-spacing: 0.2px;
 color: #183B56;
}
.brand .container .right  p{
 font-weight: 400;
 font-size: 18px;
 line-height: 32px;
 color: #5A7184;
} 
.brand .container .right  p.italic{
 font-style: italic;
}
.brand .container .right  ul{
 display: flex;
 flex-direction: column;
 gap:16px;
}
.brand .container .right  ul li{
 display: flex;
 align-items: center;
 gap: 12px;
}
.brand .container .right  ul li .icon{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 background-color: #36b37f30;
 border-radius: 50%;
}
.brand .container .right  ul li span{
 color: #183B56;
}
.cuff .container{
 max-width: 997px;
 background: url('/assets/images/cuff-bg.svg');
 background-repeat: no-repeat;
 background-size: contain;
 padding:176px 16px 217px 16px;
 position: relative;
}
.cuff .container .box{
 max-width: 621px;
 width: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
 text-align: center;
 align-items: center;
 justify-content: center;
 gap: 20px;
}
.cuff .container .box h4{
 font-weight: 700;
 font-size: 36px;
 line-height: 48px;
 letter-spacing: 0.2px;
 color: #183B56;
}
.cuff .container .box p{
 font-weight: 400;
 font-size: 18px;
 line-height: 32px;
 text-align: center;
 color: #5A7184;
}


.cuff .container .icons span{
 position: absolute;
 width: 76px;
 height: 76px;
 background-color: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0px 15px 25px 0px #0000000F;
}
.cuff .container .icons span:nth-child(1){
 top: 160px;
 left: 0;
}
.cuff .container .icons span:nth-child(2){
left: 56px;
top: 412px;
}
.cuff .container .icons span:nth-child(3){
right: 80px;
top: 180px;
}
.cuff .container .icons span:nth-child(4){
right: -70px;
top: 300px;
}
.cuff .container .icons span:nth-child(5){
right: 90px;
top: 400px;
}
footer{
 padding: 93px 0 221px 0;
 background:url('/assets/images/footer-left.svg') top 104px left no-repeat, url('/assets/images/footer-right.svg') bottom 104px right no-repeat  #F8FBFF;
 text-align: center;
}
footer .container{
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 72px;
}
footer .container p{
 max-width: 680px;
}
footer .container h3{
 font-weight: 700;
 font-size: 36px;
 line-height: 48px;
 letter-spacing: 0.2px;
 text-align: center;
 color: #183B56;
}
footer .container p{
 font-weight: 400;
 font-size: 18px;
 line-height: 32px;
 letter-spacing: 0px;
 text-align: center;
 color: #5A7184;
}
footer .container .contact-box{
 border: 1px solid #E3E3E3;
 padding: 24px;
 max-width: 509px;
 border-radius: 24px;
 padding: 24px;
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 32px;
}
footer .container .contact-box .icon{
 width: 56px;
 height: 56px;
 background-color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 16px;
 margin: 0 auto;
}
footer .container .contact-box .content{
 display: flex;
 flex-direction: column;
 gap: 12px;
} 
footer .container .contact-box .content h5{
 font-weight: 600;
 font-size: 24px;
 line-height: 100%;
 letter-spacing: -0.2px;
 color: #1A1A1A;
}
footer .container .contact-box .content p{
 font-size: 16px;
 line-height: 26px;
 letter-spacing: 1%;
 text-align: center;
 color: #1A1A1A;
}
footer .container .contact-box .content a{
 font-weight: 400;
 font-size: 16px;
 line-height: 22px;
 letter-spacing: 1%;
 opacity: 0.5;
 color: #1A1A1A;
}

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

   .hero .right{
     display: none;
   }
   .hero .left{
     max-width: 100%;
     width: 100%;
     display: flex;
     justify-self: center;
     align-items: center;
   }
   .hero .left h1{
     font-size: 38px;
     line-height: 44px;
     text-align: center;
   }
   .hero .left p{
     font-size: 16px;
     line-height: 28px;
     text-align: center;
   }
 .cuff {
   padding: 0 16px;
 }
 .brand .container .right{
   gap: 32px;
 }
 .brand .container .right h3{
   font-size: 28px;
   line-height: 36px;
 }
 .brand .container .right img{
   height: 40px;
 }
 .brand .container .right p{
   font-size: 14px;
   line-height: 24px;
 }
 .brand .container .right ul li span{
   font-size: 14px;
   line-height: 21px;
 }
 .cuff .container .icons span:nth-child(4){
   right: 32px;
 }
 .cuff .container .icons span:nth-child(1){
   left: 32px;
 }
 .cuff .container{
   padding: 100px 16px 120px 16px;
 }
 .cuff .container .box h4{
   font-size: 24px;
   line-height: 31px;
 }
 .cuff .container .box{
   max-width: 400px;
 }
 .cuff .container .box p{
   font-size: 15px;
   line-height: 24px;
 }
 .cuff .container{
   background-size: cover;
 }
 footer .container h3{
   font-size: 28px;
   line-height: 36px;
 }
 footer .container{
   gap: 32px;
 }
 footer .container .contact-box{
   background-color: #fff;
 }
 footer .container p{
   font-size: 14px;
 }
}
@media screen and (max-width:825px){
  .cuff .container{
     padding: 58px 16px;
 }
 .cuff{
   padding: 0;
 }
.cuff .container{
 background: none;
 
}
.cuff .container .icons{
 display: flex;
 gap: 12px;
 margin-bottom: 32px;
}
.cuff .container .icons span{
 position: relative;
 left: 0 !important;
 right: 0 !important;
 top: 0 !important;
 bottom: 0 !important;
} 

}
@media screen and (max-width:768px){
 header .logo{
   max-width: 130px;
 }
 
 .hero{
   padding-top: max(16vh, 100px);
 }
}

@media screen and (max-width:640px){
 header .logo{
   max-width: 110px;
 }
 
 .hero{
   padding-top: max(15vh, 90px);
 }
 
 .brand::before{
   width: 200px;
   height: 200px;
   background: radial-gradient(circle at top right, #C4D5F3 0%, rgba(255, 255, 255, 0.0001) 88.44%);
   transform: scale(1.1);
   opacity: 1;
   left: calc(50% - 100px);
   top: 20%;
   border-radius: 50%;
 }
.brand .container{
 flex-direction: column;
}
.brand.reverse .container{
 flex-direction: column-reverse;
}
.before-2::before{
 background: radial-gradient(circle at top right, #af57ed3b 0%, rgba(255, 255, 255, 0.0001) 88.44%);
}
 .brand .container .left {
   width: 100%;
   max-width: 100%;
   display: flex;
   justify-content: center;
 }
.brand .container .left img{
   height: 400px;
 }
 .brand{
   padding: 50px 0;
 }


}
@media screen and (max-width:470px){
 .cuff .container .icons span{
   width: 52px;
   height: 52px;
   padding: 2px;
 }
}