:root {
    --primary-color: #00A8A8;
    --primary-light-color: rgba(41, 85, 151, 0.15);
    --secondary-color: #010101;
}


.section-inner-head{max-width: 700px;}
.section-inner-head h2{-webkit-user-select: none;-moz-user-select: none;user-select: none;margin-bottom: 10px;}
.sub-heading{font-size: 20px;line-height: 28px;font-weight: 400;padding-bottom: 5px;margin-bottom: 10px;display: inline-flex;position: relative;}
.sub-heading::after{content: "";height: 3px;width: 32px;border-radius: 2px;background-color: #f2a843;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}

/* header-main */
.header-main {border-bottom: 1px solid #FFFFFF29;  width: 100%;}
.header-main.sticky-header { background: var(--color-white); animation: slideDown 0.35s ease-out; position: fixed; box-shadow: 10px 9px 50px rgb(13 28 62 / 10%);}
@keyframes slideDown { from { transform: translateY(-100%);}  to { transform: translateY(0);} }

/* Banner Section */
.banner-section{padding: 60px 0px 130px; overflow: hidden;}
.banner-content{max-width: 928px;margin: 0 auto;text-align: center;}
.banner-sub-title {font-weight: 500; padding: 8px 16px; border: 1px dashed var(--primary-color); display: inline-flex; margin-bottom: 30px;}
.banner-title {margin-bottom: 24px;}
.banner-sub-title, .banner-title{color: var(--primary-color);}
.banner-sub-title {font-size: var(--font-20); line-height: 28px;}
.banner-section .btn1 {border-color: var(--primary-color); background-color: var(--primary-color); color: var(--color-white); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.banner-bottom{ background-image: url(../../images/case-studies/click-and-trip/click-and-trip-banner-left-bg.webp); background-position-x: left;  position: relative;margin-top: 80px;}
.banner-bottom, .banner-bottom::before{background-repeat: no-repeat; background-size: contain; background-position-y: center;}
.banner-bottom::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../../images/case-studies/click-and-trip/click-and-trip-banner-right-bg.webp); background-position-x: right;}
.banner-bottom-content{max-width: max-content;margin: 0 auto;}
/* .lanyoce-main img{filter: drop-shadow(0 0 44px rgba(0, 0, 0, 0.25));} */
.banner-bottom-content>img {position: absolute;}

.lanyoce-left, .lanyoce-top-anim {border-radius: 40px; overflow: hidden;box-shadow: 0px 4px 18px 0px #0000006E; animation: moveingY 2.5s linear infinite;}
.lanyoce-left{ left: -62px; top: -12%; border: 1px solid var(--primary-color); border-radius: 40px;}
.lanyoce-right {top: -13%; z-index: -1; right: -200px;}
.lanyoce-bottom-left { left: -200px; bottom: 10px; z-index: -1;}
.lanyoce-top-anim {right: 0; bottom: 100px;}

@keyframes moveingY {0%, 100% { transform : translateY(0px);}50% { transform: translateY(20px);} }
.hero-video-area{position: absolute;left: 145px;top: 54px;max-width: 1030px;height: 634px;}
.hero-video-area video{width: 100%;height: 100%;object-fit: cover;}

/* Project Member Section */
.member-section {padding: 80px 0px 0px; background-image: url(../../images/case-studies/pioneers-learning-hub/member-section-line-shap-bg.png); background-repeat: repeat; position: relative; z-index: 3;}
.member-section h2 {margin: 0px; font-size: 0px; line-height: 0px;}
.member-section h3 {margin: 0px;}
.member-group {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.member-item {padding: 0px 30px 50px; box-shadow: 2px 4px 30px 0px #7D83911A;  background-color: var(--color-white); border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: all ease-in-out 0.3s; border: 1px solid #00A8A833;}
.member-item:hover {transform: translateY(-15px); border-color: var(--primary-color);}
.member-icon {width: 80px; height: 80px; border-radius: 50%; background-color: #e5f6f6; display: inline-flex; align-items: center; justify-content: center; margin: -40px auto 12px; transition: all ease-in-out 0.3s; position: relative;}
.member-icon img {position: relative;}
.member-icon::after {content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #00A8A81A; border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;}
.member-sub-title {margin: 0px;}
.member-title {color: var(--primary-color); margin: 0px;}
.member-dis {color: var(--secondary);}
@keyframes smallScale { 0% { transform: translate(-50%, -50%) scale(1);} 100% { transform: translate(-50%, -50%) scale(1.5);}}

/* Project Overview Section */
.project-overview-section .section-inner-head{max-width: 832px;}
.overview-image{position: relative;text-align: center;}
.overview-image::before{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 30%;background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}

/* Technology Scale Section */
.technology-group{display: flex;flex-wrap: wrap;margin-top: 150px;border-radius: 20px;box-shadow: 0 0 23px rgba(0, 43, 42, 0.1);overflow: hidden;}
.technology-group>*{flex: 1;}
.technology-left{padding: 40px;}
.technology-left h3{margin-bottom: 10px;}
.technology-left p{margin-bottom: 40px;}
.technology_box{width: 550px;height: 550px;border: 6px solid var(--primary-color);border-radius: 50%;transform: translate(32%, 32%);-webkit-transform: translate(32%, 32%);position: relative;}
.technology_box::before{content: '';position: absolute;left: -17px;top: -17px;width: calc(100% + 34px);height: calc(100% + 34px);border: 28px solid rgba(0, 168, 168, 0.1);border-radius: 50%;}
.layers{width: 63.5%;height: 63.5%;background-color: rgba(0, 168, 168, 0.1);border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.layers::after{content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 70%;height: 70%;border-radius: 50%;background-color: rgba(0, 168, 168, 0.1);}
.tech-icons{position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 50%;animation: rotateCircle 25s linear infinite;}
.icon-inner{width: 118px;height: 118px;border-radius: 50%;background: linear-gradient(127deg,rgba(0, 168, 168, 1) 0%, rgba(255, 255, 255, 1) 100%);padding: 5px;box-shadow: 0 6px 23px rgba(0, 168, 168, 0.15);--count: 8;position: absolute;top: calc(50% - 60px);left: calc(50% - 60px);transform: rotate(calc(360deg / var(--count) * var(--i))) translate(271px) rotate(calc(-360deg / var(--count) * var(--i)));}
.icon-inner .icon-content{width: 100%;height: 100%;background-color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;animation: counterRotate 25s linear infinite;}

@keyframes rotateCircle {
    to { transform: rotate(360deg); }
}

@keyframes counterRotate {
    to { transform: rotate(-360deg); }
}


/* Feature Section */
.features-section {background-image: url(../../images/case-studies/lanyoce/features-bg.webp),url(../../images/case-studies/lanyoce/features-bg.webp);background-repeat: no-repeat;background-position: left 23%,right 42%;background-size: 50%,50%;}
.feature-slider{padding-top: 20px;padding-bottom: 20px;}
.features-item{box-shadow: 0 4px 20px rgba(5,84,153,.1);border-radius: 12px;text-align: center;background-color: var(--color-white);padding: 20px;}
.features-item h3{color: var(--primary-color);font-size: var(--font-24);line-height: 32px;}
.features-item p{color: var(--secondary);}

/* Project Challenges Section */
.project-challenges-group{display: grid;grid-template-columns: 1fr;gap: 60px;position: relative;}
.project-challenges-item{border-radius: 18px;display: flex;gap: 50px;padding: 0px 40px;background-color: var(--color-white);box-shadow: 2px 4px 30px 0px rgba(125,131,145,.1019607843);}
.project-challenges-item img{-o-object-fit: contain;object-fit: contain;}
.project-challenges-image{text-align: center;display: flex;align-items: end;flex: 0 0 auto;}
.project-challenges-content{padding-block:40px;display: flex;flex-direction: column;justify-content: center}
.project-challenges-content-title{margin-bottom: 24px}
.project-challenges-content-list li:not(:last-child){margin-bottom: 16px}
.project-challenges-content-list li{padding-left: 34px;font-size: 20px;line-height: 28px;position: relative;color: var(--secondary)}
.project-challenges-content-list li::before{content: "";width: 24px;height: 24px;position: absolute;top: 3px;left: 0;border-radius: 50%;background-color: var(--primary-color);background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="12" fill="%2300A8A8"/><path d="M10.43 14.8208L17.21 8.04078C17.37 7.88078 17.5567 7.80078 17.77 7.80078C17.9833 7.80078 18.17 7.88078 18.33 8.04078C18.49 8.20078 18.57 8.39091 18.57 8.61118C18.57 8.83145 18.49 9.02131 18.33 9.18078L10.99 16.5408C10.83 16.7008 10.6433 16.7808 10.43 16.7808C10.2167 16.7808 10.03 16.7008 9.86999 16.5408L6.42999 13.1008C6.26999 12.9408 6.19319 12.7509 6.19959 12.5312C6.20599 12.3114 6.28945 12.1213 6.44999 11.9608C6.61052 11.8002 6.80065 11.7202 7.02039 11.7208C7.24012 11.7213 7.42999 11.8013 7.58999 11.9608L10.43 14.8208Z" fill="white"/></svg>');}
.project-challenges-content-list li strong {font-weight: 700 !important}

/* Project Portfolio */
.overview-two-column{display: grid;grid-template-columns: 1fr 1fr;gap: 60px;}
.overview-two-column>div,.overview-one-column{border-radius: 60px;overflow: hidden;background: linear-gradient(90deg,rgba(0, 168, 168, 1) 0%, rgba(12, 143, 143, 1) 100%);}
.overview-two-column>div img{width: 100%;}
.overview-one-column{margin-top: 60px;}

/* Colors Typography Section */
.typography-info{display: flex;gap: 60px;}
.typography-group{flex: 1;text-align: center;}
.typography-font-group{position: relative;}
.typography-font-type{font-weight: 700;font-size: 190px;line-height: 1;text-transform: capitalize;opacity: .05;}
.typography-font-name{margin-bottom: 0px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.typography-font-style{word-break: break-all;font-weight: 500;color: var(--secondary);}
.typography-font-weight{display: inline-flex;align-items: center;margin-bottom: 20px;padding: 4px 10px;border: 1px solid var(--blue-border-color);border-radius: 4px;font-size: 20px;line-height: 28px;}
.typography-font-weight li:not(:last-child){padding-right: 12px;margin-right: 12px;border-right: 1px solid rgba(37,57,92,.1);}


.typography-colors{display: grid;grid-template-columns: repeat(4, 1fr);gap: 65px;padding-right: 45px;}
.primary1{background-color: #00A8A8;}
.primary2{background-color: #0C8F8F;}
.secondary1{background-color: #010101;}
.secondary2{background-color: #5C7A8A;}
.color-block{border-radius: 20px;display: flex;align-items: flex-end;justify-content: space-between;padding: 8px 14px;box-shadow: 10px 13px 40px rgba(197,191,167,.25);gap: 14px;min-height: 130px;}
.color-name{font-size: var(--font-20);line-height: 28px;font-weight: bold;color: var(--color-white);}
.color-code{color: var(--color-black);font-size: var(--font-20);line-height: 28px;font-weight: 500;padding: 8px 19px;border-radius: 20px;background-color: var(--color-white);margin-right: -45px;margin-bottom: 12px;}


/* Timeline Section */
.timeline-section .section-inner-head {max-width: 750px; margin-inline: auto;}
.timeline-section .timeline-map {text-align: center;}
.timeline-section .timeline-map img {max-width: 916px; width: 100%;}

/* Visual Design Section */
.visual-section {position: relative; background-position: right center; background-image: url(../../images/case-studies/click-and-trip/click-and-trip-visual-right-shap.webp)}
.visual-section, .visual-section::before{background-repeat: no-repeat; background-size: contain;}
.visual-section::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: left center; background-image: url(../../images/case-studies/click-and-trip/click-and-trip-visual-left-shap.webp);}
.visual-section .section-inner-head {max-width: 750px; margin-inline: auto;}
.visual-section .visual-inner {padding: 20px 20px 0px 0px; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(275.95deg, #00A8A8 -67.92%, #0C8F8F 95.28%);}
.visual-section .swiper-slide{padding: 0px 20px;}
.visual-section .swiper-slide img , .visual-section .visual-inner-right{box-shadow: 0px 0px 19.84px 0px #00000033; overflow: hidden;}
.visual-section .swiper-slide img {border-radius: 20px;}
.visual-section .visual-inner-right {border-radius: 20px 20px 0px 0px;}
.visual-section .swiper-slide {height: auto !important}
.visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 1150px;}
.visual-section .rtl-swiper, .visual-section .rtl-swiper *, .visual-section .visual-inner-right img {width: 100%;}


/*-------------------============ Responsive CSS ==============--------------------- */


@media screen and (max-width : 1441px){
    /* Banner Section */
    .banner-section {padding-bottom: 100px;}
    .banner-sub-title {font-size: var(--font-18);line-height: 27px;margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}
    .hero-video-area{left: 11%;top: 7%;max-width: 78%;height: 84%;}

    /* Project Member Section */
    .member-item {padding-bottom: 40px;}

    /* Technology Scale Section */
    .technology-group {margin-top: 120px;}
    .technology_box {transform: translate(14%, 32%); -webkit-transform: translate(14%, 32%);}
    .icon-inner {width: 100px; height: 100px; top: calc(50% - 50px); left: calc(50% - 50px);}

    /* Feature Section */
    .features-item h3{font-size: var(--font-20);line-height: 28px}

    /* Project Challenges Section */
    .project-challenges-content-title {margin-bottom: 20px;}
    .project-challenges-content-list li {font-size:18px}

    /* Project Portfolio */
    .overview-two-column {gap: 50px;}
    .overview-one-column {margin-top: 50px;}

    /* Colors Typography Section */
    .typography-font-type {font-size: 150px;}
    .typography-title {font-size: 22px ; line-height: 30px;}
    .typography-font-weight, .color-code, .color-name, .weight-font span  {font-size: 18px;}

    /* Visual Design Section */
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 1000px;}

}

@media screen and (max-width: 1199px) {
    /* Banner Section */
    .banner-sub-title{font-size: var(--font-16);line-height: 26px;}
    .lanyoce-left{left: 0;}
    .lanyoce-right {top: -23%; right: -100px;}
    .lanyoce-bottom-left {left: -100px;}

    /* Project Member Section */
    .member-item {gap: 10px;}
    .member-icon{width: 60px; height: 60px; margin: -30px 0px 5px; padding: 7px;}

    /* Technology Scale Section */
    .technology-group {margin-top: 100px;}
    .icon-content img {max-width: 50px;}
    
    /* Project Challenges Section */
    .project-challenges-content-title {margin-bottom: 15px;}
    .project-challenges-content-list li::before {height: 20px; width: 20px; background-size: 17px;}
    .project-challenges-content-list li {font-size:16px; line-height: 26px;}

    /* Project Portfolio */
    .overview-two-column {gap: 40px;}
    .overview-one-column {margin-top: 40px;}

    /* Colors Typography Section */
    .typography-font-weight, .color-code, .color-name, .weight-font span {font-size: 16px; line-height: 26px;}
    .typography-title {font-size: 20px ; line-height: 28px;}

    /* Timeline Section */
    .timeline-section .timeline-map img {max-width: 700px;}
    
    /* Visual Design Section */
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 835px;}
}

@media screen and (max-width: 1024px) {
    /* Banner Section */
    .banner-section {padding-bottom: 80px;}
   .lanyoce-left, .lanyoce-top-anim {max-width: 200px; border-radius: 24px;}
   .lanyoce-right, .lanyoce-bottom-left {width: 70%;}

    /* Technology Scale Section */
    .technology_box {width: 400px; height: 400px; transform: translate(25%,55%); -webkit-transform: translate(25%, 55%);}
    .icon-inner {width: 80px; height: 80px; top: calc(50% - 40px); left: calc(50% - 40px); transform: rotate(calc(360deg / var(--count) * var(--i))) translate(200px) rotate(calc(-360deg / var(--count) * var(--i)));}
    .icon-content img {max-width: 40px;}

    /* Visual Design Section */
    .visual-section {background-position: 100%  60px;}
}

@media screen and (max-width: 991px) {
    /* Project Member Section */
    .member-section{padding-top: 50px;}

    /* Project Challenges Section */
    .project-challenges-group {gap: 40px;}
    .project-challenges-item { gap: 30px; padding-inline: 30px;}
    .project-challenges-content {padding-block: 30px;}
    .project-challenges-image {width: 40%;}

    /* Project Portfolio */
    .overview-two-column>div, .overview-one-column {border-radius: 30px;}

    /* Colors Typography Section */
    .typography-colors {grid-template-columns: 1fr 1fr; gap: 30px 40px;}
    .color-code {padding: 5px 13px;}

    /* Visual Design Section */
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 640px;}
}

@media screen and (max-width: 767px) {
    /* Banner Section */
    .lanyoce-left, .lanyoce-top-anim {max-width: 150px; border-radius: 20px;}
    .lanyoce-right {right: -10%;}
    .lanyoce-bottom-left {left: -10%;}
    .lanyoce-top-anim {bottom: 50px;}

    /* Project Member Section */
    .member-group {grid-template-columns: 1fr; gap: 60px;}

    /* Feature Section */
    .features-section {background-size: 70%,70%; background-position: left 30%,right 40%}
    .features-group .laptop-moc {max-width: 400px;width: 100%}

    /* Technology Scale Section */
    .technology-group {flex-direction: column;}
    .technology-left {margin-bottom: 40px;}
    .technology_box {margin-bottom: -50%; transform: unset; margin-inline: auto;}

    /* Project Challenges Section */
    .project-challenges-item {flex-direction: column; padding: 30px;}
    .project-challenges-content {padding: 0px;}
    .project-challenges-image {width: 100%; justify-content: center;}
    .project-challenges-item-two {flex-direction: column-reverse;}

     /* Project Portfolio */
     .overview-two-column {grid-template-columns: 1fr; gap: 30px;}
     .overview-one-column {margin-top: 30px;}

    /* Visual Design Section */
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 450px;}
}

@media screen and (max-width: 576px) {
    /* Banner Section */
    .lanyoce-left, .lanyoce-top-anim {max-width: 100px; border-radius: 10px;}

    /* Feature Section */
    .features-section {background-size: 70%,70%;}
    .features-item {flex: 0 0 calc(100% - 0px);max-width: calc(100% - 0px)}

    /* Technology Scale Section */
    .technology_box {width: 300px; height: 300px; border-width: 4px;}
    .technology-left {margin-bottom: 10px; padding: 30px;}
    .icon-inner {width: 60px; height: 60px; top: calc(50% - 30px); left: calc(50% - 30px); padding: 4px; transform: rotate(calc(360deg / var(--count) * var(--i))) translate(145px) rotate(calc(-360deg / var(--count) * var(--i)));}
    .technology_box::before {width: calc(100% + 20px); height: calc(100% + 20px); border-width: 20px; top: -10px; left: -10px;}
    .icon-content img {max-width: 30px;}

    /* Colors Typography Section */
    .typography-info {flex-direction: column; gap: 30px;}
    .typography-colors {padding-right: 0px; gap: 20px;}
    .color-code {margin: 0px;}
    .color-block {flex-direction: column; max-width: 100%; align-items: start; padding: 15px;}
    .font-style {flex-direction: column; align-items: center; gap: 15px;}

    /* Visual Design Section */
    .visual-section {background-position: 100%  120px;} 
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 300px;}
    .visual-section .swiper-slide img, .visual-section .visual-inner {border-radius: 10px;}
    .visual-section .swiper-slide {padding-inline: 10px;}
    .visual-section .visual-inner {padding: 10px 10px 0px 0px;}
    .visual-section .visual-inner-right {border-radius: 10px 10px 0px 0px;}
}

@media screen and (max-width: 400px) {
    /* Banner Section */
    .lanyoce-left, .lanyoce-top-anim {max-width: 90px;}
    .lanyoce-top-anim {bottom: 40px;}

    /* Technology Scale Section */
    .technology_box {width: 200px; height: 200px;}
    .icon-inner {width: 50px; height: 50px; top: calc(50% - 25px); left: calc(50% - 25px); transform: rotate(calc(360deg / var(--count) * var(--i))) translate(100px) rotate(calc(-360deg / var(--count) * var(--i)));}
    .icon-content img {max-width: 24px;}

    /* Visual Design Section */
    .visual-section .rtl-swiper, .visual-section .visual-inner-right {height: 235px;}
}