*{font-family:'SVN-Gilroy'}
/* HOME - S1 */
.home-s-banner{position: relative;}
.home-s-banner:after{content:'';position: absolute;top:0;left:0;width: 100%;height: 100%;background: linear-gradient(to bottom, #0D061F, transparent);opacity: 0.8;backdrop-filter: blur(32px);}
/* .home-s-banner:after{content:'';position: absolute;bottom:0;left:0;width: 100%;height: 30%;backdrop-filter: blur(32px);z-index: 3;} */

/* HOME - S2 */
.h-s2-subtitle{position: relative;}
.h-s2-subtitle:after{ content:''; position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; left:0;top:calc(50% - 3px);}

.h-s2-title{position: relative;padding-left: 48px !important;}
.h-s2-title:after{content:'';position: absolute;width: 32px;height: 32px;left:0;top:calc(50% - 16px);background-image: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.833 11.667C16.833 13.3238 18.1762 14.667 19.833 14.667H23C24.6569 14.667 26 16.0101 26 17.667V22.5C26 24.1569 24.6569 25.5 23 25.5H18.167C16.5101 25.5 15.167 24.1569 15.167 22.5V19.333C15.167 17.6762 13.8238 16.333 12.167 16.333H9C7.34315 16.333 6 14.9899 6 13.333V8.5C6 6.84315 7.34315 5.5 9 5.5H13.833C15.4899 5.5 16.833 6.84315 16.833 8.5V11.667Z' fill='white'/%3E%3C/svg%3E%0A");}
.h-s2-box{padding:8px 12px;background: linear-gradient(to right, #3E255C, rgba(37,28,72,0.21));min-height: 48px;min-width: 172px !important; display: flex ; align-items: center; justify-content: center;height: 100%}

.h-s3-title{position: relative;padding-left: 48px !important;}
.h-s3-title:after{content:'';position: absolute;width: 32px;height: 32px;left:0;top:calc(50% - 16px);background-image: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.833 11.667C16.833 13.3238 18.1762 14.667 19.833 14.667H23C24.6569 14.667 26 16.0101 26 17.667V22.5C26 24.1569 24.6569 25.5 23 25.5H18.167C16.5101 25.5 15.167 24.1569 15.167 22.5V19.333C15.167 17.6762 13.8238 16.333 12.167 16.333H9C7.34315 16.333 6 14.9899 6 13.333V8.5C6 6.84315 7.34315 5.5 9 5.5H13.833C15.4899 5.5 16.833 6.84315 16.833 8.5V11.667Z' fill='%232D2555'/%3E%3C/svg%3E%0A");}


/* LANGUAGUE */
.d-language-wrapper{position:relative;display: none;}
.d-language-active{background:rgb(27 15 41 / 12%);width:40px;height:40px;border-radius:50%;color:#fff;font-size:13px;display:inline-flex;align-items: center; justify-content: center;z-index: 1; position: relative;transition:all ease 0.5s;text-transform: uppercase;}
/* .d-language-active:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg, #9333EA 0%, #7D16E0 100%);opacity:0;transition:all ease 0.5s;border-radius:50%;z-index:-1;backdrop-filter: blur(24px);} */
.d-language-wrapper:hover .d-language-active:after{opacity:1}
.d-language-active:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transition:all ease 0.5s;border-radius:50%;z-index:-1;backdrop-filter: blur(24px);background:rgb(212 198 255 / 6%)}
.d-language-active span{transition:all ease 0.5s;}
.d-language-active span:last-child{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;text-transform: uppercase;opacity:0;color:#fff;}
.d-language-active:hover span:first-child{opacity:0;}
.d-language-active:hover span:last-child{opacity:1;}

.d-language-list{position:absolute;width:calc(100% + 8px);left:-4px;top:-4px;color:#fff;display:flex;flex-direction:column;align-items: center;padding-top: 4px; background: rgb(26, 21, 48, 0.12); border-radius: 99px;transition:all ease 0.5s;height:48px;opacity:0;backdrop-filter: blur(24px);}
.d-language-wrapper:hover .d-language-list{height:calc(100% + 40px + 8px + 4px);opacity:1;}

.d-language-wrapper.nav-light:hover .d-language-active{color:#fff !important}
.d-language-wrapper.nav-dark:hover .d-language-active{color:#fff !important}
.d-language-wrapper.nav-light .d-language-active{color:#2D2555}
.d-language-wrapper.nav-dark .d-language-active{color:#fff}
.d-language-wrapper.nav-light .d-language-list span, .d-language-wrapper.nav-light .d-language-list a{color:#2D2555}
.d-language-wrapper.nav-dark .d-language-list span, .d-language-wrapper.nav-dark .d-language-list a{color:#fff}

.d-language-list span, .d-language-list a{width:40px;height:40px;border-radius:50%;color:#fff;font-size:13px;display:inline-flex;align-items: center; justify-content: center;z-index:2;text-transform: uppercase;}

.logo-light{transition: all ease 0.5s !important;}
.logo-dark{position:absolute;opacity:0;transition: all ease 0.5s !important;}

.logo-light.nav-light{opacity:0}
.logo-light.nav-dark{opacity:1}

.logo-dark.nav-light{opacity:1}
.logo-dark.nav-dark{opacity:0}

/* HOME - S3 */
.mySwiper.swiper {
  height: 628px; /* hoặc auto nếu responsive */
  overflow: hidden;
}

.h-s3-row {
  display: flex;
  /* justify-content: space-between; */
  gap: 16px;
}

/* .item {
  flex: 1;
  background-color: #ccc;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
} */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Reset */
body.prevent-scroll {
  overflow: hidden;
  padding-right: 17px; /* để giữ vị trí layout khi mất scrollbar */
}

/* #h-swiper-container{position: sticky;top:0;z-index: 2;overflow: hidden;}
body.swiper-stuck #h-swiper-container {
  position: relative !important; 
} */


.mySwiper{margin-top: -85px;}
#h-swiper-container{position:realtive;overflow:hidden;}
#h-swiper-container:after{content:'';position:absolute;width:194px;height:211px;background:url('../images/vector.png') no-repeat center; bottom:50px;right:calc(calc(100% - 1360px + 30px) / 2 );z-index:1;}

.h-s3-row .item {
  opacity: 0;
  transition: all 0.6s ease;
  width: calc(100% / 3 - 11px);
}
.h-s3-row .item img{margin-top:0px;}

.h-s3-row-box{
  background: #EEEAF4;
  padding:20px 32px 26px 32px;
  min-height: 518px;
  display: flex ;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  position: relative;  
}
.h-s3-row-box img{width: 197px;}

.h-s3-row-overlay{position: absolute;top:0;left:0;width: 100%;height: 100%;}
.h-s3-row-box:hover{background: #ddd4e9;}

.h-s3-row-box h3{font-size: 40px;font-weight: 400;}
.h-s3-row-box div{font-size: 16px;font-weight: 400;color:#000;line-height: 160%;}

#error-file{display: none;color: #DC2626; font-size: 14px; font-weight: 400; line-height: 20px; margin-top: 8px;}


.item.slide-up,
.item.slide-down {
  opacity: 1;
  transform: translateY(0);
}


.item.exit-up {
  opacity: 0;
  transform: translateY(-40px);
}


.item.exit-down {
  opacity: 0;
  transform: translateY(40px);
}


.item:nth-child(1) {
  transition-delay: 0.1s;
  padding-top: calc(56px * 2);
}
.item:nth-child(2) {
  transition-delay: 0.3s;
  padding-top: 56px;
}
.item:nth-child(3) {
  transition-delay: 0.5s;  
}


.item.exit-up:nth-child(1),
.item.exit-down:nth-child(1) {
  transition-delay: 0.1s;
}
.item.exit-up:nth-child(2),
.item.exit-down:nth-child(2) {
  transition-delay: 0.3s;
}
.item.exit-up:nth-child(3),
.item.exit-down:nth-child(3) {
  transition-delay: 0.5s;
}


/* HOME - S4 */
.h-s4-quesContain{display: flex;flex-direction: column;}
.h-s4-quesItem{ display: flex; justify-content: space-between; gap:30px; padding:50px 0; border-bottom: 1px solid #D4CCE0; position: relative; align-items: start; position: relative;}
.h-s4-quesItem-overlay{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 3;}
.h-s4-quesItem:last-child{border-bottom: none;}
.h-s4-quesItem-arrow{display: inline-flex;align-items: center;justify-content: center;}
.h-s4-quesItem-info{display: flex;width: calc(100% - 48px - 30px);align-items: start;margin-top: 5px;}
.h-s4-quesItem-num{color:#1F1B24;font-size: 32px;font-weight: 300;}

.h-s4-quesItem-subinfo{ padding-left: 100px; padding-right: 100px; transition: all ease 1s; -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; position: relative; margin-top: -5px;}
.h-s4-quesItem:hover .h-s4-quesItem-subinfo{padding-left: 350px;}
.h-s4-quesItem:hover .h-s4-quesItem-arrow svg{ transform:rotate(45deg) ; -webkit-transform:rotate(45deg) ; -moz-transform:rotate(45deg) ; -ms-transform:rotate(45deg) ; -o-transform:rotate(45deg) ; }
.h-s4-quesItem-arrow svg{ transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }

.h-s4-quesItem-subinfo h3{ color:#1F1B24; font-size: 32px; font-weight: 300; margin-bottom: 0;font-family: 'SVN-Gilroy'; }
.h-s4-quesItem-content{
  font-weight: 300;
  color:#1F1B24;
  line-height: 160%;
  font-size: 18px;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity 0.7s ease, max-height 0.4s ease, transform 0.4s ease;
  min-width: 400px;
  width: 858px;
  line-height: 160%;
  margin-top: 10px;
  -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
  -moz-transition: max-height 0.5s ease, opacity 0.5s ease;
  -ms-transition: max-height 0.5s ease, opacity 0.5s ease;
  -o-transition: max-height 0.5s ease, opacity 0.5s ease;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  white-space: pre-line;
}
.h-s4-quesItem-content.no-whitepreline{white-space: unset;}
.h-s4-quesItem:hover .h-s4-quesItem-content { opacity: 1;
   /* max-height: 1000px; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0);  */
}
.h-s4-quesItem-active .h-s4-quesItem-content{ opacity: 1 !important; max-height: unset !important; transition: all ease 0.5s; transition-delay: 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }

.h-s4-ques-img{ position: absolute; top: 50px; left: 0; border-radius: 16px; overflow: hidden; opacity: 0; transition: opacity 0.5s ease, transform 1s ease; -webkit-transition: opacity 0.5s ease, transform 1s ease; -moz-transition: opacity 0.5s ease, transform 1s ease; -ms-transition: opacity 0.5s ease, transform 1s ease; -o-transition: opacity 0.5s ease, transform 1s ease; border-radius: 16px !important; -webkit-border-radius: 16px !important; -moz-border-radius: 16px !important; -ms-border-radius: 16px !important; -o-border-radius: 16px !important; width:310px;height:160px;}
.h-s4-quesItem:hover .h-s4-ques-img{opacity: 1;}


.h-about-container{height: 100vh;}
.h-about-vector{position: absolute; bottom: -80px; right: 0;}


/* HOME - SOLUTION */
body.no-scroll {overflow: hidden;}

#h-solution-container{position: relative;overflow: hidden;}
/* #h-solution-container:after{content:'';position: absolute;width: 100%;border-top:1px solid rgba(0,0,0,0.1);left: 0;bottom:20%;} */

.h-solution-main{}
.h-solution-main > .e-con-inner{position: relative;}
/*.h-solution-main > .e-con-inner:after{content:'';position: absolute;height: 150%;left: 15px;top:-25%;border-left:1px solid rgba(0,0,0,0.1);}
.h-solution-main > .e-con-inner:before{content:'';position: absolute;width: 200%;border-top:1px solid rgba(0,0,0,0.1);left: -50%;bottom:20%;}*/

.h-solution-boxes{display: flex;flex-direction: column;gap:24px;}
.h-solution-box{ border-radius:30px ; -webkit-border-radius:30px ; -moz-border-radius:30px ; -ms-border-radius:30px ; -o-border-radius:30px ; overflow: hidden; position: relative;cursor: pointer;height: 370px;}
.h-solution-box:before{content:'';position: absolute;top:0;left: 0;background: linear-gradient(to bottom, rgba(23,22,26,0.5), rgba(23,22,26,0.9));width: 100%;height: 100%;opacity: 0.8;}
.h-solution-box img{width: 100%;height: 100%;object-fit: cover;display: block;}

.h-solution-boxInfo{ position: absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; padding:36px; flex-direction: column; transition: opacity 0.3s ease;pointer-events: auto;opacity: 1;}
.h-solution-boxInfo.hidden {opacity: 0;/*pointer-events: none;*/ }
.h-solution-boxInfo.hidden-index{z-index: -1;}
.h-solution-boxInfo h3{color:#fff;font-size: 40px;font-weight: 500;margin-bottom:0;font-family: 'SVN-Gilroy';}
.h-solution-boxInfo span{ display: flex; justify-content: end; }
.h-solution-boxInfo span svg{ transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; }
.h-solution-box:hover .h-solution-boxInfo span svg{ transform:rotate(45deg) ; -webkit-transform:rotate(45deg) ; -moz-transform:rotate(45deg) ; -ms-transform:rotate(45deg) ; -o-transform:rotate(45deg) ; }

.h-solution-content { visibility: hidden; }
.h-solution-page { cursor: pointer; position: absolute; height: 100vh; width: 100vw; top: 0; left: 0; position: fixed; z-index: 10;overflow: hidden;}
.h-solution-page:after{content:'';position: absolute;top:0;left: 0;background: linear-gradient(to bottom, rgba(23,22,26,0.5), rgba(23,22,26,0.9));width: 100%;height: 100%;opacity: 0.8;}

.h-solution-layout{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap:30px; padding:30px; padding-right:50px; position: relative; z-index: 2; transition:all ease 0.7s ; -webkit-transition:all ease 0.7s ; -moz-transition:all ease 0.7s ; -ms-transition:all ease 0.7s ; -o-transition:all ease 0.7s ; opacity: 1; margin-top:0px; }
.h-solution-layout.hidden{opacity: 0;margin-top:50px;z-index: -1;}
.h-solution-titleBox{display: flex;align-items: center;justify-content: space-between;}
.h-solution-titleBox > span:first-child{color:#fff;font-size: 40px;font-weight: 500;}
.h-solution-close{color:#fff;font-size: 24px;cursor: pointer;font-weight: 400;}
.h-solution-number{text-align: right;color:#fff;font-weight: 100;font-size: 200px;line-height: 85%;}
.h-solution-list{display: flex;gap:104px;padding:0 62px;justify-content: center;align-items: start;}
.h-solution-smallBox{ width: 100%; position: relative; height: 100%;}
.h-solution-otherBox{width: 100%;display: flex;flex-direction: column;gap:10px;text-align: center;padding-bottom: 10px;}
.h-solution-otherBox span{color:#fff;font-size: 20px;font-weight: 600;}
.h-solution-smallBox-arrow{position: absolute;top:50%;right:-75px;}
.h-solution-smallBox-info{border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; overflow: hidden; background: #F5F6FC; height: 100%;min-height: 192px;}
.h-solution-smallBox-info p{margin-bottom: 0;background: linear-gradient(#D4ABFC,#E7CFFF);padding:14px;text-align: center;color:var(--colorBG);font-weight: 500;}
.h-solution-smallBox-info >div{padding:9px 17px 16px 17px;min-height: 205px;}

.h-solution-effectBox{ margin-top:0px; opacity: 1; transition: all ease 0.7s; -webkit-transition: all ease 0.7s; -moz-transition: all ease 0.7s; -ms-transition: all ease 0.7s; -o-transition: all ease 0.7s; }
.h-solution-effectBox:nth-child(1){transition-delay: 0.3s; }
.h-solution-effectBox:nth-child(2){transition-delay: 0.4s; }
.h-solution-effectBox:nth-child(3){transition-delay: 0.6s; }
.h-solution-effectBox:nth-child(4){transition-delay: 0.8s; }
.h-solution-effectBox:nth-child(5){transition-delay: 1s; height: 100%; justify-content: center; align-items: center;}
.h-solution-layout.hidden .h-solution-effectBox{opacity: 0;/*margin-top:100px;*/}

/* CCTV */
.h-solution-cctv-row{width: 112px;min-width: 112px;}
.h-solution-cctv{display: flex;flex-direction: column;gap:2px;align-items: center;}
.h-solution-cctv-box{display: flex;flex-direction: column;gap:2px;}
.h-solution-cctv-box img{width: 41px;margin: auto;}
.h-solution-cctv-box h3{text-align: center;text-transform: uppercase;font-size: 12px;font-weight: 600;color:#383737;margin: 0;}

/* NVR */
.h-solution-nvr-row{width: 166px;min-width: 166px;}
.h-solution-nvr-box{display: flex;flex-direction: column;gap:14px;align-self: center;justify-content: center;}
.h-solution-nvr-box img{width: 80px;margin: auto;}
.h-solution-nvr-box h3{color:#383737;font-size: 12px;font-weight: 600;text-transform: capitalize;text-align: center;line-height: 140%;margin: 0;}

/* BOX AI */
.h-solution-boxai-row{width: 206px;min-width: 206px;}

/* CLOUD SERVER */
.h-solution-cloudserver-row{width: 206px;min-width: 206px;}
.h-solution-security-row{width: 238px;}
.h-solution-security-row img{width: 178px;margin: 0 auto;}


/* HOME - LOAD ONSITE DATA */
.h-onsite-container{ border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; padding:40px; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }
.mySwiper-onsite{padding-bottom: 48px !important;z-index: 0 !important;}
.mySwiper-onsite .swiper-slide{ align-items: center; justify-content: center; color: #fff; display: flex ; transition: opacity 0.5s ease; /*background: #816DCA;*/ -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; opacity: 0; } 
.mySwiper-onsite .swiper-slide-active{opacity: 1;}
.autoplay-progress-bar { position: absolute; bottom: 0px; left: 10px; right: 10px; display: flex; gap: 16px; z-index: 10; } 
.progress-item { flex: 1; height: 4px; background: rgba(255,255,255,0.3); overflow: hidden; border-radius: 2px; } 
.progress-fill { display: block; height: 100%; width: 0%; background: #fff; transition: none; }
.h-onsite-box{display: flex;gap:36px;align-items: center;}
.h-onsite-info{width: calc(100% - 660px - 36px);display: flex;flex-direction: column;gap:52px;font-family:'SVN-Gilroy'}
.h-onsite-info h3{color:#fff;font-size: 50px;font-weight: 500;}
.h-onsite-info div{color:#fff;font-size: 20px;font-weight: 400;line-height: 150%;font-family:'SVN-Gilroy'}


/* HOME - FEEDBACK */
.h-feedback-wrapper{height:100vh;position:realtive;overflow:hidden;}
.h-feedback-wrapper > div,
.h-feedback-wrapper > div > div,
.h-feedback-wrapper > div > div > div{height:100%;}
.h-feedback-wrapper:after, .feedback_container:after{content:'';position:absolute;background:url('../images/vector2.png');width:123px;height:127px;top: 40px; right: calc(calc(100% - 1360px) / 2);z-index:1;}
.feedback_container{position:relative;}

.h-feedback-container{position: relative;height: 100%; display: flex ; flex-direction: column; justify-content: space-between;}
.s-feedback-box{display: flex;flex-direction: column;gap:246px;}
.s-feedback-top{display: flex;gap:32px;align-items: center;}
.s-feedback-top img{ width: 80px; aspect-ratio: 1 / 1; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.s-feedback-info{width: calc(100% - 80px - 32px);}
.s-feedback-info h3{color: #fff;font-size: 24px;font-weight: 500;margin-bottom: 2px;transition:all ease 0.3s;}
.s-feedback-info span{color:#fff;font-size: 18px;font-weight: 400;transition:all ease 0.3s;}
.s-feedback-content{font-size: 24px;font-weight: 300;color:#DFD4EF;line-height: 140%;padding-left: 48px;padding-top: 60px;position: relative;padding-right: 180px;}
.s-feedback-content:after{content:'';width:20px;height:17px;background-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.84 16.64H0.88L5.2 -3.8147e-06H8.88L5.84 16.64ZM16 16.64H11.04L15.36 -3.8147e-06H19.04L16 16.64Z' fill='white'/%3E%3C/svg%3E%0A");position: absolute;top:0;left:0;}
.s-feedback-hidden{}
.h-feedback-arrows-box{display: flex;align-items: center;justify-content: space-between;}
.h-feedback-arrows{display: flex;gap:16px;}
.h-feedback-arrows span{ cursor: pointer; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; opacity: 0.2;}
.h-feedback-arrows span:hover{opacity: 1;}
.h-feedback-title{color: #fff;font-size: 32px;font-weight: 400;display: flex;align-items: center;gap:16px;}
/* .mySwiper-feedback .swiper-slide{ transition: all ease 0.7s; -webkit-transition: all ease 0.7s; -moz-transition: all ease 0.7s; -ms-transition: all ease 0.7s; -o-transition: all ease 0.7s; opacity: 0 !important; }
.mySwiper-feedback .swiper-slide.swiper-slide-active{opacity: 1 !important;} */

.splide__slide {
    width: auto;
    white-space: nowrap;
}

.splide:hover .splide__track {
    animation-play-state: paused;
}

/* CASE STUDIES */
.casestudies-site{margin: 0 !important;}
.category-detail-banner{height: 100vh;overflow: hidden;background: #2A1B3D;position: relative;}
.category-detail-banner img, .category-detail-banner video{width: 100%;height: 100%;object-fit: cover;opacity: 0.4;}
.category-detail-banner-wrapper{position: absolute;top:0;left:0;width: 100%;height: 100%;background: linear-gradient(to right, #0D061F, transparent);display: flex;align-items: center;}
.category-detail-banner-info{display: flex;flex-direction: column;gap:40px;max-width: 780px;margin-left: calc(calc(100% - 1440px) / 2); padding-left: 80px;align-items: start;}
.category-detail-banner-info h1{color:#fff;font-weight: 500;font-size: 60px;text-transform: capitalize;margin: 0;line-height: 120%;}
.category-detail-banner-info >div{color:#fff;font-size: 18px;font-weight: 400;}
.casestudies-site .category-detail-banner-info-18{max-width: 1000px;}

.fix-category-detail-banner{height: 588px;}
.fix-category-detail-banner .category-detail-banner-info{max-width: 1000px;gap: 20px;}
.fix-category-detail-banner .category-detail-banner-info h1{font-weight: 400;}

.category-site-contain{background: #E7F4FF;padding:40px 0;}
.category-site-wrapper{max-width: 1360px;margin:auto;display: flex;gap:54px;}
.category-site-left{width: 444px;position: sticky;top:100px;align-self: start;}
.category-site-right{width: calc(100% - 444px - 54px);display: flex;gap:8px;flex-wrap: wrap;}
.category-site-left .wpcf7-response-output{margin-top:12px !important;}

.casestudies-box{ position: relative; overflow: hidden; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; width: calc(50% - 4px);display:block;}
.casestudies-box-info{display: flex;align-items: start;flex-direction: column;justify-content: end;position: absolute;bottom:0;left:0;width: 100%;height: 100%;background: linear-gradient(to top, #123552, transparent);padding:32px;box-sizing: border-box;}
.casestudies-box-thumbnail{position: relative;overflow: hidden;height: 594px;}
.casestudies-box-thumbnail img{height: 100%;width: 100%;object-fit: cover;}
.casestudies-box-info span{color:#fff;font-size: 24px;font-style: italic;}
.casestudies-box-info h2{color:#fff;font-size: 32px;font-weight: 500;}
.casestudies-box-info h2 *{margin-bottom: 0;}

/* BLOG RELATIVE - CATEGORY CASE STUDIES */
.category-blog-relative{background: #8282C9;padding:40px 0 80px 0;}
.category-blog-wrapper{max-width: 1360px;margin: auto;}
.category-blog-title{color:#fff;font-weight: 500;font-size: 40px;margin-bottom: 40px;line-height:120%;}
.blog-casestudies-info{background: rgb(72 68 182 / 20%) !important;}

/* CASE STUDIES DETAIL */
.casestudies-detail-site{margin: 0 !important;padding: 0 !important;}

/* FORM - TALK */
.form-talk-container{ background: #fff; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; padding:24px;margin-bottom: 0 !important;}
.form-talk-title{margin-bottom: 4px;color:#2D2555;font-size: 32px;font-weight: 500;line-height: 120%;}
.form-talk-title span{color:#7E6ED4;}
.form-talk-description{color:#000000;font-size: 16px;}
.form-talk-wrapper{margin-top:16px;display: flex;flex-direction: column;gap:10px;}
.form-talk-item{}
.form-talk-item p{margin: 0;}
body .form-talk-item input, body .form-talk-item textarea{ background: #F9FAFB; border:1px solid #F2E8FF; border-radius:12px !important ; -webkit-border-radius:12px !important ; -moz-border-radius:12px !important ; -ms-border-radius:12px !important ; -o-border-radius:12px !important ; min-height: 40px; box-shadow: none; }
body .form-talk-item input::placeholder, body .form-talk-item textarea::placeholder{color:#6B7280;font-size: 14px;font-weight: 500;}
body .form-talk-item textarea{min-height: 84px;}
.form-talk-submit{margin-top:14px;position: relative;}
.form-talk-submit p{margin: 0;}
.form-talk-submit input{width: 100%;background: linear-gradient(#9333EA, #7D16E0); text-align: center; font-size: 18px; font-weight: 500; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px;}
.form-talk-submit .wpcf7-spinner{position: absolute;right: 10px; top: 8px;margin: 0;}

.casestudies-detail-info-wrapper{margin:unset;width: 680px;max-width: 1440px;padding-left: 80px;display: flex ; flex-direction: column; gap: 30px;margin-left: calc(calc(100% - 1440px) / 2);}
.casestudies-detail-description{color:#fff;font-size: 18px;font-weight: 500;}
.casestudies-detail-title{text-transform: capitalize;color:#fff;font-size: 50px;font-weight: 500;}
.casestudies-detail-content{background: #E7F4FF;padding:52px 40px 60px 40px;}
.casestudies-detail-wrapper{display: flex;gap:40px;}
.casestudies-detail-left{ width: 346px; background: #EBDCFF; border-radius:24px ; -webkit-border-radius:24px ; -moz-border-radius:24px ; -ms-border-radius:24px ; -o-border-radius:24px ; padding:24px 24px 32px 24px;position: sticky;top:100px;align-self: start;}
.casestudies-detail-right{width: calc(100% - 346px - 40px);}
.casestudies-tableofcontent-title{color:#2D2555;font-size: 32px;font-weight: 600;margin-bottom: 12px;}
.casestudies-tableofcontent-list{list-style: none;padding-left: 12px;margin: 0; border-left: 1px solid rgb(45 37 85 / 10%);}
.casestudies-tableofcontent-list li{padding:5px 0;/*min-height: 61px; display: flex ; align-items: center;*/}
.casestudies-tableofcontent-list li a{ color:rgb(45 37 85 / 60%); font-size: 16px; font-weight: 500; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; line-height: 160%;display: block;}
.casestudies-tableofcontent-list li.active a{color: #2D2555;}


/* CASE STUDY RELATIVE */
.casestudy-relative-container{background: #FDFBFF;padding:40px 40px 80px 40px;}
.casestudies-box-relative{ position: relative; height: 460px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; overflow: hidden;}
.casestudies-box-relative .casestudies-box-info{background: linear-gradient(to top, rgb(18 53 82 / 80%), transparent);}
.casestudy-relative-title{margin-bottom: 40px;font-size: 40px;font-weight: 500;color:#2D2555;}
.casestudy-relative-title span{color:#7E6ED4;}
.casestudies-box-relative-overlay{position: absolute;top:0;left:0;width: 100%;height: 100%;}
.casestudies-categories{position:absolute;top:0;left:0;width:100%;height:auto;display:flex;padding:33px;gap:5px;flex-wrap:wrap;transition:all ease 0.3s;opacity:0;}
.casestudies-categories a{background:#FDFBFF;display:inline-flex;min-height:40px;align-items:center;justify-content:center;color:#2D2555;border-radius:99px;padding:0 16px;font-weight:500;font-size:14px;}
.casestudies-box-relative:hover .casestudies-categories{opacity:1;}


/* TOC */
.toc-active{position: relative;}
#toc-highlight{ content:''; position: absolute; height: 32px; width: 3px; background: #BB79F9; left:-1px; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; }
.casestudy-relative-wrapper{max-width: 1360px;margin: auto;}


/* BLOG PAGE ARCHIVE */
.blog-site-contain{background: #1E142C;padding:40px;}
.blog-site-wrapper{max-width: 1360px;margin: auto;}
.category-banner-btn{ background: linear-gradient(180deg, #9333EA 0%, #7D16E0 100%); color: #fff; min-width: 140px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius:10px ; -webkit-border-radius:10px ; -moz-border-radius:10px ; -ms-border-radius:10px ; -o-border-radius:10px ; font-size: 18px;font-weight: 500;text-transform: capitalize;}
.category-banner-btn:hover{color:#fff;}
.blog-site-top{display: flex;align-items: center;justify-content: space-between;margin-bottom: 44px;}
.blog-site-top-title{color:#fff;font-size: 40px;font-weight: 500;}
.blog-site-top-title span{color:#7E6ED4;}
.blog-site-list{display: flex;flex-wrap: wrap;gap:20px;}
.blog-site-box{width:calc(100% / 3 - 14px);}
.blog-site-box .blog-ourStory-img{height: auto;display: block;}
.blog-site-box .blog-casestudies-info { background: rgb(57 56 104 / 20%) !important; }
.blog-site-list .pagination{display: flex;align-items: center;justify-content: center;width: 100%;margin-top:20px;gap:8px; flex-wrap: wrap;}
.blog-site-list .pagination .page-numbers{ width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: rgba(255,255,255,0.1);color:#fff;font-size: 18px;font-weight: 500;}
.blog-site-list .pagination .page-numbers:hover, .blog-site-list .pagination .page-numbers.current{background: #7E6ED4;}

.blog-site-form{display:inline-flex;gap:7px;}
.blog-site-form select{height:48px;background:#292234;border-radius:12px;color:#fff;font-size:18px;font-weight:500;border:none;width: auto;min-width:218px;}
.blog-site-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: 10px; background-repeat: no-repeat; background-position: center right 20px;
}
.blog-site-formsearch{width:366px;position:relative;}
.blog-site-form input, .blog-site-form input:focus{height:48px;background:#292234;border-radius:12px;color:#fff;font-size:18px;font-weight:500;border:none;width:100%;padding-left:40px;min-width: 100%;font-family: 'SVN-Gilroy';}
.blog-site-form input::placeholder{opacity:0.5;color:#fff;font-size:18px;font-weight:500;}
.blog-site-formsearch span{position:absolute;top:12px;left:12px;opacity:0.5;}
.blog-site-form button[type="submit"]{border:none;outline:none;background:linear-gradient(180deg, #9333EA 0%, #7D16E0 100%);color:#fff;font-size:18px;font-weight:500;padding:0px 10px;height:48px;border-radius:12px;width:100px;}


/* BLOG DETAIL */
.blog-relative-container{}
.blog-realtive-wrapper{position:relative;}
.ourStory-btns{position:absolute;top:-82px;right:0;}
.btn-ourStory-swiper{display:inline-flex;width:42px;height:42px;align-items:center;justify-content: center;background:rgba(255,255,255,0.1);border-radius:50%;cursor:pointer;opacity:0.5;transition:all ease 0.5s;}
.btn-ourStory-swiper:hover{opacity:1;}
.btn-ourStory-prev svg{transform:rotate(180deg);}


/* CONTACT */
.contact-s-title-box{width:calc(100% - 428px - 40px);}
.contact-s-title{width:360px}
.contact-s-info{width:calc(100% - 360px - 40px);}
.contact-s-img{width: 428px;}
.contact-info-sub{width: calc(100% - 32px);}
.contact-info-sub *{line-height: 140%;}

/* FAQ */
.faq-site-wrapper{display: flex;flex-direction: column;width: 100%;gap:12px;}
.faq-item{ border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; background: rgba(255,255,255,0.02);padding:18px 24px;display: flex;gap:40px;cursor: pointer;position: relative;overflow: hidden;}
.faq-item:after{ content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(to bottom, #D4ABFC, #E7CFFF); z-index: 1; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; opacity: 0;}

.faq-answer{display: none;  animation: fadeIn 0.3s ease-in-out;color:#222222;font-size: 16px;font-weight: 500;opacity: 0.8;margin-top:12px;white-space: pre-line;}
.faq-plus{ width: 24px; height: 24px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: #7E6ED4; position: relative; z-index: 2; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }
.faq-plus:after{ content:''; position: absolute; width: 10px; height: 2px; background: #fff; border-radius: 99px; -webkit-border-radius: 99px; -moz-border-radius: 99px; -ms-border-radius: 99px; -o-border-radius: 99px; top:calc(50% - 1px); left:calc(50% - 5px); transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }
.faq-plus:before{ content:''; position: absolute; height: 10px; width: 2px; background: #fff; border-radius: 99px; -webkit-border-radius: 99px; -moz-border-radius: 99px; -ms-border-radius: 99px; -o-border-radius: 99px; left:calc(50% - 1px); top:calc(50% - 5px); transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }
.faq-info{width: calc(100% - 24px - 40px);position: relative;z-index: 2;}
.faq-question{ color:#fff; font-size: 20px; font-weight: 500; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }

.faq-item.active:after{opacity: 1;}
.faq-item.active .faq-question{color: #222222;}
.faq-item.active .faq-plus{background: #fff;}
.faq-item.active .faq-plus:after{background: #7E6ED4;}
.faq-item.active .faq-plus:before{opacity: 0;}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 404 PAGE */
.page-404-container{background: #0B0812;height: 100vh;width: 100%;position: relative;}
.page-404-container:after{content:'';position: absolute;top:5%;left:0;width: 100%;height: 100%;background: url('../images/404.png') no-repeat center;}
/* .page-404-wrapper{max-width: 1270px;margin: auto;margin-top:160px;padding-top:60px;padding-left: 76px;} */
.page-404-info{width: 450px;display: flex;flex-direction: column;gap:20px;}
/* .page-404-title{color:#fff;font-size: 60px;font-weight: 400;text-transform: capitalize;}
.page-404-title span{color:#7E6ED4;}
.page-404-description{color: #fff;font-size: 18px;} */
.page-404-title p, .page-404-description p{margin-bottom: 0;}
.page-404-contain > .e-con-inner{position: relative;}
.page-404-contain > .e-con-inner:before{content:'';position: absolute;top:0%;left:-43px;border-left: 1px solid rgba(255,255,255,0.1);height: 100%;}
.page-404-line{content:'';position: absolute;top:55%;left:-50%;border-top: 1px solid rgba(255,255,255,0.1);width: 200%;z-index: 2;}
.page-404-line span:nth-child(1){position: absolute;width: 138px;height: 138px;top:-138px;right:43%;backdrop-filter: blur(24px);}
.page-404-line span:nth-child(2){position: absolute;width: 194px;height: 194px;bottom:-194px;right:calc(43% - 194px);backdrop-filter: blur(24px);}

.wpcf7-response-output-custom{margin: 0 !important; background: #e3d5f1; border: none !important; border-radius: 12px; font-size: 14px; padding: 10px !important; margin-top: 12px !important;font-weight:400;display:flex;flex-direction:column;gap:8px;}