body{overflow-x:hidden; height:100%; width:100%; background:#000; font-family: "DM Sans", serif;scroll-behavior: smooth;}
/* html,body { overflow-x: hidden; } */
.videoContainer{ flex: none; height: 100%; left: calc(50.00000000000002% - 100% / 2); opacity: .67; position: absolute; top: calc(50.00000000000002% - 100% / 2); width: 100%; z-index: -1; filter: blur(10px);}
section{position: relative;}
.sectionPadding{padding: 100px 0;}
.colorLight{color:rgba(255,255,255,0.6) !important}
header { background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)); border-bottom: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);  }
.navbar-brand{color: #fff; max-width:186px}
.navbar-brand img { width: 100%; }
.navbar .nav-link { color: #ffffff80; font-size: 16px; font-weight: 500; line-height: 150%; padding: 20px !important; display: block; }
.navbar .nav-link.active, .navbar .nav-link:hover {color:#7e7efb;}

.avrionBanner { margin-top: -100px; padding: 250px 0 100px; }
.bannerText h1 { font-size: 75px; color: #fff; font-weight: 400; line-height: 90px; margin-bottom: 30px; }
.bannerText p { font-size: 16px; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 30px; max-width: 80%; line-height: 160%; }
.bannerText .btnLink { background: #fff; padding: 10px 20px; display: inline-block; border-radius: 9px; text-decoration: none; color: #000; font-weight: 500; cursor: pointer;}
.bannerText .btnLink:hover { opacity: 0.6 !important; }
.lottieImgBanner{max-width: 560px; margin: auto;}
.discoverMoreCta a { background: #4a4ab9; min-width: 138px; height: 46px; display: inline-flex; text-align: center; border-radius: 9px; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-weight: 500; border: 1px solid rgba(255,255,255,0.2); padding:0 10px; cursor:pointer}
.discoverMoreCta a:hover { box-shadow: 0 0px 10px rgba(255,255,255,0.3) inset; }


.sectionTag { backdrop-filter: blur(2.5px); background: linear-gradient(0.07383128568086761deg, rgba(74, 74, 185, 0.08) 0%, rgba(153, 153, 153, 0.1) 100%) ; border-radius: 10px; width: fit-content; padding: 8px 20px 8px 34px; font-size: 16px; color: #fff; border: 1px solid rgba(255,255,255,0.05); }
.sectionTag:before { content: ''; background: linear-gradient(90deg, rgba(74, 74, 185, 0) 0%, rgb(74, 74, 185) 50%, rgba(74, 74, 185, 0) 100%); will-change: transform; opacity: 1; transform: none; width: 70px; height: 1px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.sectionTag:after { content: ''; position: absolute; top: 50%; height: 5px; width: 5px; background: #fff; border-radius: 100%; left: 18px; transform: translateY(-50%); }

.sectionHeader { margin: 20px 0; }
.sectionHeader h2 { font-size: 54px; margin: 0; color: #fff; font-weight: 400; line-height: 110%; }
.sectionHeader p { font-size: 16px; color: rgba(255,255,255,0.6); margin: 20px 0; }
.aboutAvrion ul { list-style: none; padding: 0; margin-bottom: 40px; }
.aboutAvrion ul li { font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 20px; position: relative; padding-left: 30px; }
.aboutAvrion ul li:before { content: ''; background: url(../images/icon-tick.svg) no-repeat; position: absolute; left: 0; width: 23px; height: 23px; }
.divider { background: linear-gradient(90.00000000000075deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .15000000596046448) 50%, rgba(255, 255, 255, 0) 100%); flex: none; height: 1px; width: 230px; }
.aboutUs .imgBox{max-width: 550px; border-radius: 20px; overflow:hidden; border: 1px solid rgba(255, 255, 255, 0.08); padding: 10px; width: 528px; border-radius: 20px; margin-right: auto; }
.aboutUs .imgBox lottie-player{border-radius: 20px !important; overflow: hidden;}
.serviceBox { backdrop-filter: blur(0px); background: linear-gradient(0.07383128568086761deg, rgba(74, 74, 185, 0.15) 0%, rgba(97, 97, 97, 0.09) 100%); border-radius: 20px; min-height: 300px; width: 100%; position: relative; display: block; padding: 30px; border: 1px solid rgba(255,255,255,0.07); margin-bottom: 30px; }
.iconsprite { width: 44px; height: 44px; margin-bottom: 20px; background: url(../images/avrion-sprite.svg) no-repeat; border-radius: 100%; }
.iconwebsite {background-position: -20px -16px;}
.iconITsolution { background-position: -129px -16px; }
.iconecomweb { background-position: -187px -16px; }
.iconwebapp { background-position: -20px -80px; }
.icongear { background-position: -74px -16px; }
.iconopensource { background-position: -104px -80px; }

.serviceBox h3 { font-size: 18px; color: #fff; }
.serviceBox p { color: rgba(255,255,255,0.5); margin-bottom: 0; }
.serviceBox:before { content: ''; background: linear-gradient(90deg, rgba(74, 74, 185, 0) 0%, rgb(74, 74, 185) 50%, rgba(74, 74, 185, 0) 100%); will-change: transform; opacity: 1; transform: none; width: 50%; height: 1px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.iconarrow { background-position: -203px -110px; position: absolute; right: 10px; width: 30px; height: 30px; margin: 0; top: 10px; opacity: 0.4; }
.serviceBox:hover{cursor: pointer; }
.serviceBox:hover .iconarrow{opacity: 1;}
.serviceBoxHeader::after { content: ''; background: url(../images/services-vector.svg) no-repeat; position: absolute; right: 0; width: 567px; height: 237px; top: 160px; }
.serviceBoxHeader::before { content: ''; background: url(../images/services-vector.svg) no-repeat; position: absolute; left: 0; width: 567px; height: 237px; top: 160px; transform: scaleX(-1); }


.chooseBoxFeatureImg { border: 1px solid rgba(255,255,255,0.08); padding: 10px; width: 528px; border-radius: 20px; top:140px; margin-left: auto; }
.chooseBoxFeatureImg img { border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); }
.chooseBox { position: relative; background: url(../images/choosebox-bg.png) no-repeat; padding: 30px; border-radius: 20px; background-size: cover; border: 1px solid rgba(255, 255, 255, 0.09); margin-bottom: 30px; }

.chooseBox h3 { font-size: 18px; color: #fff; }
.chooseBox p { color: rgba(255,255,255,0.5); margin-bottom: 0; }
.chooseBox:before { content: ''; background: linear-gradient(90deg, rgba(74, 74, 185, 0) 0%, rgb(74, 74, 185) 50%, rgba(74, 74, 185, 0) 100%); will-change: transform; opacity: 1; transform: none; width: 50%; height: 1px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.chooseBox .iconsprite{width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.09);border-radius: 10px; box-shadow: rgba(99, 74, 186, 0.25) 0px 5px 25px 0px, rgba(255, 255, 255, 0.08) 0px 10px 10px -1px inset;}
.iconbusiness-strategies { background-position: -60px -145px; }
.iconinnovative-design { background-position: -101px -145px; }
.iconendtoend-support { background-position: -148px -148px; }
.iconfuture-proof { background-position: -191px -147px; }
.icontailord-solution { background-position: -12px -146px; }

.contactBoxContainer{max-width: 1000px;}
.contactBox { backdrop-filter: blur(2px); background: radial-gradient(102% 75% at 98.2% 1.9%, rgba(67, 67, 125, .44) -19%, rgba(28, 28, 54, .78) 10%, rgba(8, 8, 15, .99963) 48%, rgb(8, 8, 15) 100%); border-radius: 20px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.07); }
.contactUs .sectionTag { padding: 8px 20px; }
.contactUs .sectionTag:after{display: none;}
.contactUs .sectionHeader h2 { font-size: 75px; }
.innerBox { border: 1px solid; border-radius: 10px; padding: 30px 30px; }
.boxHeader { display: inline-flex; align-items: center; gap: 10px; }
.boxHeader .iconsprite { width: 22px; height: 22px; margin: 0; border-radius: 0; }
.emailicon { background-position: -212px -82px; }
.addressicon { background-position: -170px -82px; }
.phoneicon { background-position: -168px -117px; }
.contactBox .boxHeader { font-size: 16px; color: #fff; }
.contactBox .badge { background: #4a4ab9; display: inline-flex; text-align: center; border-radius: 7px; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-weight: 500; border: 2px solid rgba(255, 255, 255, 0.2); padding: 5px 7px; }
.contactBox p { color: rgba(255, 255, 255, 0.7); }
.contactBox a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.contactBox a:hover { color: #4a4ab9; }
.joinBox { position: relative; padding: 50px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); }
.joinBox  .videoContainer {filter: blur(40px);}
.feature-links ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 40px; justify-content: end;flex-direction: row; }
.feature-links ul a { color: rgba(255,255,255,0.7); text-decoration: none; font-weight: 300; }
.footer { border: 1px solid rgba(255,255,255,0.08); padding: 50px 0; }
.brand-logo img { max-width: 260px; }
.sectionDivider:before, .copyrightText:before{content:''; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);position: absolute; top: 0; left: 0; width: 100%; height: 1px;}
.copyrightText { padding: 30px 0 0; text-align: center; position: relative; margin-top: 40px; }
.copyrightText p { margin: 0; color: rgba(255,255,255,0.7); font-weight: 300; font-size: 14px; }
.feature-links a.nav-link.active { color: #7e7efb; }
@media(max-width:1600px){
    #ourServices { overflow-x: hidden; }
    .serviceBoxHeader::after { right: -100px; transform: translateX(100px); }
 .serviceBoxHeader::before { left: -100px; transform: translateX(-100px) scaleX(-1); }
}
@media(max-width:1367px){
    .bannerText h1 {font-size: 64px;line-height: 80px;}
    .bannerText p { max-width: 90%; }
    .aboutUs .imgBox { max-width: 100%; }
}
@media(max-width:1170.98px){
    html{overflow-x: hidden;}
    #cube{display: none;}
    .bannerText h1 { font-size: 54px; line-height: 70px; }
}

@media(max-width:991.98px){
    .navbar-toggler-icon {filter: invert(1);}
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {width: 16px;filter: invert(0); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABOSURBVHgBzZLLDQAgCEOJE7H/Eo7gKKh3wJrGSBNOvEL4iJSRmfUVCnC62SgxsiJHJgOQBiEImz3DtdkpkpqbvBA1ArVE6oz0I9Gv/E0TMz3NWV1lPHoAAAAASUVORK5CYII=");}
    .navbar-toggler { border: 0; }
    .navbar-toggler:focus { box-shadow: none; }
    .navbar .nav-link { padding: 20px 0 !important; }
    .navbar { padding: 20px 0; }
    .avrionBanner { padding-top: 220px; padding-bottom: 50px; }
    .aboutUs .imgBox { max-width: 100%; width: 100%; margin-top: 40px; }
    .sectionPadding{padding: 50px 0;}
    .serviceBoxHeader::after, .serviceBoxHeader::before{display: none;}
    .chooseBoxFeatureImg { width: 100%; }    
    .feature-links ul { justify-content: start; flex-direction: column; align-items: self-start; margin: 30px 0 0; gap: 20px; opacity: 0.7; }
    .contactBox { margin-bottom: 30px; }
}
@media(max-width:767px){
    .sectionHeader h2 { font-size: 42px; line-height: 130%; }
    .contactUs .sectionHeader h2 { font-size: 54px; line-height: 56px; }
    .serviceBox { padding: 20px; }
}
@media(max-width:576px){
    .sectionHeader h2 { font-size: 32px; }
    .contactUs .sectionHeader h2 { font-size: 40px; line-height: 44px; }
    .bannerText h1 { font-size: 44px; line-height: 60px; }
}

/*404 page*/
.avrion404 .videoContainer { filter: brightness(0.6); }
.avrion404 { height: 100vh; padding: 20px 0; display: flex ; align-items: center; justify-content: center; text-align: center;}
.avrion404Container h1 { font-size: 74px; color: #fff; font-weight: 400; margin: 30px 0; }
.avrion404Container p { font-size: 16px; max-width: 370px; margin: 0 auto 30px; color: #A9A9C2; }
.avrion404Container .btnLink { width: 230px; height: 46px; background: #edebe9; color: #141414; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; padding: 10px; border-radius: 10px; text-decoration: none; }
.avrion404Container .btnLink:hover{background:rgba(237, 235, 233, 0.8);}

@media(max-width:1540px){
    .avrion404Container h1 { font-size: 64px;margin: 20px 0;}
    .avrion404Container p{margin-bottom: 20px;}
}
@media(max-width:576px){
    .avrion404Container img { max-width: 280px; }
    .avrion404Container h1 { font-size: 44px;}
}