:root{
    --primary-color: #e99700;
    --primary-light-color: rgba(233, 151, 0, 0.15);
    --secondary-color: #0455A4;
}



.section-inner-head{max-width: 700px;}
.section-inner-head h2{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: var(--primary-color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}

/* header-main */
.header-main { position: sticky; background: var(--color-white);}

/* Banner Section */
.banner-section{padding-top: 144px;}
.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/lanyoce/hero-bg.webp); background-repeat: repeat-x;background-position: center;position: relative;margin-top: 80px;}
.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));}
.lanyoce-left{position: absolute;left: -20px;bottom: 16%;animation: moveingY 2.5s linear infinite;border: 2px solid #D9E9FF;border-radius: 12px;overflow: hidden;box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);background-color: var(--color-white);z-index: 1;}
.lanyoce-top-anim{position: absolute;top: -10%;right: 0;animation: moveingY 2s linear infinite;border: 2px solid #D9E9FF;border-radius: 12px;overflow: hidden;background-color: var(--color-white);}
@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-group {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.member-item {padding: 0px 30px 50px;background-color: var(--color-white);  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: all ease-in-out 0.3s; position: relative;}
.member-item::before {content: ''; height: 2px; width: 100%; bottom: -2px; position: absolute; left: 0; background-image: linear-gradient(90deg, rgba(255, 167, 4, 0) 0%, rgba(255, 167, 4, 0.2) 50%, rgba(255, 167, 4, 0) 100%);}
.member-item:hover {transform: translateY(-15px); box-shadow: 2px 4px 30px 0px #7D83911A;}
.member-icon {width: 80px; height: 80px; border-radius: 50%; background-color: var(--primary-light-color);display: flex;align-items: center;justify-content: center;margin: -40px auto 12px; transition: all ease-in-out 0.3s;position: relative;}
.member-icon::after {content: '';width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: var(--primary-light-color);border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;}
.member-title {color: var(--primary-color);margin: 0;}
.member-dis {color: var(--secondary);}
@keyframes smallScale { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0;}}

/* Project Member Timeline Section  */
.member-section h2{font-size: 0px;line-height: 0;}
.member-project-group{display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.member-project-item{display: flex; overflow: hidden; gap: 40px; padding: 40px; flex-direction: column; background-color: var(--color-white);  box-shadow: 2px 4px 30px 0px #7D83911A; border: 1px solid var(--theme-border-color); border-radius: 18px;}
.member-project-item h3{margin-bottom: 10px;}
.member-project-item-images{ position: relative;}
.member-project-item-content{flex: 1 1 0;}
.member-project-item-content p{color: var(--secondary);}
.member-project-one{background: url(../../images/case-studies/lanyoce/member-projece-one-bg.png);background-repeat: repeat-x;background-position: top;}
.member-project-one .member-project-item-images{display: flex;align-items: start;justify-content: center;padding-top: 47.344%;}
.member-project-one .member-project-item-images .overview_video{border-radius: 12px;box-shadow: 0 0 20px rgba(37, 24, 0, 0.25);width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
.member-project-two .member-project-item-images  {display: flex; align-items: center; gap: 39px; padding: 64px 43px 34px;}
.member-project-two .technology-icon {padding: 36px; height: 179px; width: 179px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background-color: var(--color-white); box-shadow: 0px 4px 20px 0px #0554991A;}
.member-project-two .plus {font-weight: 400; font-size: 70px; line-height: 80px; vertical-align: middle; color: var(--color-black); margin: 0;}

/* Features 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%}
.laptop-moc{filter: drop-shadow(0 0 44px rgba(0, 0, 0, 0.25));}
.features-group-block{display: flex;justify-content: center;flex-wrap: wrap;gap: 30px;}
.features-item {flex: 0 0 calc(33.33% - 20px);max-width: calc(33.33% - 20px);border: 2px solid rgba(233, 151, 0, 0.30);border-radius: 24px;padding: 16px;background-color: var(--color-white); transition: all ease-in-out 0.3s;}
.features-item:hover {border-color: var(--primary-color);}
.features-item h3{color: var(--primary-color);font-size: var(--font-24);line-height: 32px;}
.features-item p {color: var(--secondary);}

/* Projects Section */
.projects-section{background-color: #FFFCF5;padding: 100px 0;z-index: 1;}
.projects-section::after{content: '';position: absolute;left: calc(50% - 10px);top: 50%;width: 20px;height: calc(100% - 200px);transform: translate(-50%, -50%);background-color: transparent;border-bottom-right-radius: 100%;border-top-right-radius: 100%;box-shadow: 10px 0px 20px 0px rgba(225, 227, 230, 1);z-index: -2;}
.projects-section::before{content: '';position: absolute;left: calc(50% - 50px);top: 50%;width: 100px;height: 100%;transform: translate(-50%, -50%);background-color: #FFFCF5;z-index: -1;}
.projects-section h2{font-size: 0px;line-height: 0;}
.project-column{display: flex;align-items: center;}
.project-challenges-list{flex: 1;}
.project-challenges-list li{position: relative;background-color: var(--color-white);border-radius: 20px;padding: 10px 20px 10px 64px;margin-top: 20px;box-shadow: 0 4px 20px rgba(5, 84, 153, .1);}
.project-challenges-list li:first-child{margin-top: 0;}
.project-challenges-list li:before{content: '';position: absolute;left: 20px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;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="%23E99700"/><path d="M9.83038 14.2212L16.6104 7.44117C16.7704 7.28117 16.957 7.20117 17.1704 7.20117C17.3837 7.20117 17.5704 7.28117 17.7304 7.44117C17.8904 7.60117 17.9704 7.79131 17.9704 8.01157C17.9704 8.23184 17.8904 8.42171 17.7304 8.58117L10.3904 15.9412C10.2304 16.1012 10.0437 16.1812 9.83038 16.1812C9.61705 16.1812 9.43038 16.1012 9.27038 15.9412L5.83038 12.5012C5.67038 12.3412 5.59358 12.1513 5.59998 11.9316C5.60638 11.7118 5.68985 11.5217 5.85038 11.3612C6.01091 11.2006 6.20105 11.1206 6.42078 11.1212C6.64051 11.1217 6.83038 11.2017 6.99038 11.3612L9.83038 14.2212Z" fill="white"/></svg>');}
.project-column h3{color: var(--color-white);padding: 10px 15px;margin: 0;}
.challenges-column .project-title-block{margin-right: -58px;position: relative;padding-left: 60px;}
.challenges-column .project-title-block::before{content: '';position: absolute;right: calc(100% - 61px);top: -20px;border: 50px solid transparent;border-right-color: #255673;border-left: none;z-index: -1;}
.challenges-column .project-title-block::after{content: '';position: absolute;right: 0;top: -14px;width: 46px;height: 50%;background: linear-gradient(325deg,rgba(70, 162, 217, 1) 0%, rgba(37, 86, 115, 1) 100%);transform: skew(0deg, 30deg);z-index: -1;}
.challenges-column h3{background: linear-gradient(90deg,rgba(37, 86, 115, 1) 0%, rgba(37, 86, 115, 1) 50%, rgba(25, 120, 176, 1) 100%);}
.challenges-column span{margin-left: -30px;display: inline-block;}

.solutions-column{padding-top: 100px;}
.solutions-column .project-title-block{margin-left: -58px;position: relative;padding-right: 60px;}
.solutions-column .project-title-block::before{content: '';position: absolute;left: calc(100% - 61px);top: -20px;border: 50px solid transparent;border-left-color: #d5a42a;border-right: none;z-index: -1;}
.solutions-column .project-title-block::after{content: '';position: absolute;left: 0;top: 43px;width: 46px;height: 50%;background: linear-gradient(21deg,rgba(151, 109, 3, 1) 0%, rgba(253, 182, 5, 1) 100%);transform: skew(0deg, 30deg);z-index: -1;}
.solutions-column h3{background: linear-gradient(270deg,rgba(213, 164, 42, 1) 0%, rgba(213, 164, 42, 1) 50%, rgba(253, 182, 5, 1) 100%);}
.solutions-column span{margin-right: -30px;display: inline-block;}

/* Colors Typography Section */
.color-typography-group {display: flex; gap: 120px;}
.typography-title {font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 30px;}
.colors-side {width: 70%;}
.typography-side {width: 30%;}
.color-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.color-type-name {height: 105px; width: 100%; background-color: var(--color-code); margin-bottom: 20px; border-radius: 12px;}
.color-typography-item {position: relative;}
.color-typography-item:not(:last-child)::after {content: ''; height: 100%; width: 1px; border-right: 1px solid; border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 2.4%, rgba(244, 122, 33, 0.2) 48.97%, rgba(255, 255, 255, 0.2) 100%); border-image-slice: 1;  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);}
.typography-font-group {position: relative;}
.typography-font-type {font-weight: 700; font-size: 190px; line-height: 1; text-transform: capitalize; opacity: 0.05;}
.typography-font-name {margin-bottom: 0px;  position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.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 rgb(37 57 92 / 10%);}

/* Timeline Section */
.timeline-area{background: linear-gradient(0deg,rgba(255, 247, 232, 1) 0%, rgba(255, 255, 255, 1) 100%);border-radius: 20px;display: flex;flex-wrap: wrap;padding: 20px;}
.timeline-details{border-right: 2px dashed #A1A1A1;min-height: calc(100% - 96px);position: relative;padding-top: 40px;padding-bottom: 46px;}
.timeline-block:last-child .timeline-details{border-right: none;}
.timeline-block:first-child .timeline-details{border-left: 2px dashed #A1A1A1;}
.timeline-details:after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%);width: 2px;height: 100%;border-right: 2px dashed #A1A1A1;z-index: 0;}
.timeline-block{max-width: 20%;flex: 0 0 20%;}
.timeline-block h3{font-size: var(--font-20);line-height: 28px;font-weight: 500;margin-bottom: 20px;text-align: center;}
.timeline-details + h3{margin-bottom: 0;margin-top: 20px;}
.timeline-details p{background-color: #FFF7E8;border-left: 4px solid var(--primary-color);padding: 10px;width: max-content;color: rgba(25, 25, 25, 0.8);font-weight: 500;margin-left: -2px;margin-bottom: 0;z-index: 1;position: relative;}
.timeline-details p + p{margin-top: 30px;margin-left: calc(50% - 1px);}

.timeline-block:nth-child(2) .timeline-details{padding-top: 120px;}
.timeline-block:nth-child(3) .timeline-details{padding-top: 198px;}
.timeline-block:nth-child(4) .timeline-details{padding-top: 354px;}
.timeline-block:nth-child(5) .timeline-details{padding-top: 432px;}

.timeline-block:nth-child(4) .timeline-details p{margin-left: calc(50% - 1px);}
.timeline-block:nth-child(5) .timeline-details p{margin-left: calc(50% - 1px);}


/* Visual Design Section */
.visual-section .section-inner-head + .visual-area{margin-top: 255px;}
.visual-area{background-color: #FFA704;border-radius: 20px;position: relative;z-index: 1;}
.visual-area:after{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-image: url(../../images/case-studies/lanyoce/visual-bg.webp);background-position: center;z-index: -1;}
.visual-moc1{margin-top: -200px;margin-bottom: -1px;}
.visual-area2{padding: 90px 90px 0;text-align: center;}
.visual-moc2{margin-bottom: -1px;}


/* Testimonial, Resources Section */
.testimonial-section .section-inner-head,.resources-section .section-inner-head{margin-left: auto;margin-right: auto;}

/*-------------------============ Responsive CSS ==============--------------------- */
@media screen and (max-width: 1441px) {
    /* Banner Section */
    .banner-section {padding-top: 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;}

    /* Project Member Timeline Section  */
    .member-project-item-images {height: 240px;}
    .member-project-two .technology-icon {height: 135px;width: 135px;}

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

    /* Projects Section */
    .project-column h3{font-size: var(--font-20); line-height: 28px;}
    .challenges-column .project-title-block::before,.solutions-column .project-title-block::before{top: -24px;}
    .challenges-column .project-title-block::after{height: 60%;}
    .solutions-column .project-title-block::after{top: 32px;height: 60%;}

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

    /* Timeline Section */
    .timeline-block h3{font-size: 18px;}

    /* Visual Design Section */
    .visual-section .section-inner-head + .visual-area{margin-top: 210px;}
    .visual-area2{padding: 30px 30px 0;}
    .visual-moc1{margin-top: -180px;}
}

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

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

    /* Project Member Timeline Section  */
    .member-project-item-images {height: 240px;}
    .member-project-two .technology-icon {height: 135px; width: 135px;}

    /* Features Section */
    .features-group .laptop-moc{ max-width: 700px;}

    /* Projects Section */
    .project-challenges-list li{padding: 10px 15px 10px 45px}
    .project-challenges-list li:before{width: 20px;height: 20px;background-size: contain;left: 15px;}

    /* Colors Typography Section */
    .color-typography-group {gap: 100px;}
    .color-typography-item:not(:last-child)::after {right: -50px;}
    .typography-font-weight {font-size: 16px; line-height: 26px;}
    .typography-title {font-size: 20px ; line-height: 28px;}

    /* Timeline Section */
    .timeline-details p{line-height: 24px;}
    .timeline-block h3{font-size: 16px; line-height: 26px;}

    /* Visual Design Section */
    .visual-section .section-inner-head + .visual-area{margin-top: 19%;}
    .visual-moc1{margin-top: -16%;}
}

@media screen and (max-width:1100px) {
    /* Project Member Section */
    .member-group {grid-template-columns: 1fr 1fr; gap: 60px 30px;}

    /* Project Member Timeline Section  */
    .member-project-two .member-project-item-images {padding: 50px 0px 40px; justify-content: center;}
    .member-project-two .technology-icon {width: 120px; height: 120px; padding: 24px;}
    .member-project-two .plus {font-size: 55px; line-height: 60px;}
}

@media screen and (max-width:1024px) {
    /* Colors Typography Section */
    .color-typography-group {gap: 60px;}
    .color-typography-item:not(:last-child)::after {right: -30px;}
    .colors-side {width: 65%;}
    .typography-side {width: 35%;}
    .color-type-name {height: 80px;}
}

@media screen and (max-width: 991px) {
    /* Banner Section */
    .banner-section {padding-top: 80px;}
    .lanyoce-top-anim{max-width: 250px;top: -15%;}
    .lanyoce-left{max-width: 180px;}
    
    /* Project Member Timeline Section  */
    .member-project-item-images {height: 170px;}
    .member-project-two .member-project-item-images {padding: 30px 0px 20px; gap: 24px; justify-content: center;}
    .member-project-two .technology-icon {width: 100px; height: 100px; padding: 20px;}

    /* Features Section */
    .features-item {flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px);}
}

@media screen and (max-width: 768px){
    /* Banner Section */
    .lanyoce-left{max-width: 130px;}
    .lanyoce-top-anim{max-width: 170px;top: -16%;}

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

    /* Project Member Timeline Section  */
    .member-project-group {grid-template-columns: 1fr;}
    .member-project-item {gap: 30px; padding: 30px;}

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

    /* Projects Section */
    .projects-section::before,.projects-section::after,.challenges-column .project-title-block::after,.solutions-column .project-title-block::after{display: none;}
    .project-column{flex-wrap: wrap;}
    .project-challenges-list{width: 100%;}
    .challenges-column .project-title-block{margin-right: 0;width: 100%;order: -1;padding-left: 0;padding-bottom: 30px;}
    .solutions-column .project-title-block{margin-left: 0;width: 100%;padding-right: 0;padding-bottom: 30px;}
    .challenges-column span,.solutions-column span{margin-left: 0;margin-right: 0;display: block;text-align: center;}
    .challenges-column h3{background: linear-gradient(0deg, rgba(37, 86, 115, 1) 0%, rgba(37, 86, 115, 1) 50%, rgba(25, 120, 176, 1) 100%)}
    .solutions-column h3{background: linear-gradient(0deg, rgba(213, 164, 42, 1) 0%, rgba(213, 164, 42, 1) 50%, rgba(253, 182, 5, 1) 100%)}
    .challenges-column .project-title-block::before,.solutions-column .project-title-block::before{border-width: 30px;transform: rotate(-90deg);right: inherit;transform: rotate(-90deg) translateX(-50%);left: calc(50% - 15px);top: 8px;}
    .solutions-column .project-title-block::before{transform: rotate(90deg) translateX(-50%);top: 38px;}
    .solutions-column{padding-top: 50px;}

    /* Colors Typography Section */
    .color-typography-group {flex-direction: column; gap: 100px;}
    .color-typography-item:not(:last-child)::after {right: 0%; height: 1px; width: 100%; transform: unset; top: calc(100% + 50px);  border-bottom: 1px solid;  border-right: none; border-image-source: linear-gradient( 90deg, rgba(255, 255, 255, 0.2) 2.4%, rgba(244, 122, 33, 0.2) 48.97%, rgba(255, 255, 255, 0.2) 100%);}
    .colors-side, .typography-side {width: 100%;}
    .color-group {gap: 24px;}
    .color-type-name {margin-bottom: 12px;}

    /* Timeline Section */
    .timeline-details{min-height: auto;border-left: 2px dashed #A1A1A1;padding-bottom: 40px;}
    .timeline-block{max-width: 100%;flex: 0 0 100%;}
    .timeline-block:not(:last-child){border-bottom: 1px solid rgb(37 57 92 / 10%);padding-bottom: 30px;margin-bottom: 30px;}
    .timeline-details p{max-width: inherit;}
    .timeline-details p + p{width: calc(100% - 49%);}
    .timeline-block:nth-child(4) .timeline-details p,.timeline-block:nth-child(5) .timeline-details p{margin-left: -2px;}
    .timeline-block:nth-child(2) .timeline-details,.timeline-block:nth-child(3) .timeline-details,.timeline-block:nth-child(4) .timeline-details,.timeline-block:nth-child(5) .timeline-details{padding-top: 40px;}
    .timeline-block:last-child .timeline-details{border-right: 2px dashed #A1A1A1;}
    .timeline-block h3{margin-bottom: 15px;}
    .timeline-details + h3{margin-top: 15px;margin-bottom: 0}

    /* Visual Design Section */
    .visual-section .section-inner-head + .visual-area{margin-top: 20%;}
    .visual-area:after{background-size: cover;}
    .visual-area2{padding: 20px 20px 0;}
}

@media screen and (max-width:576px) {
    /* Banner Section */
    .banner-bottom-content{max-width: 400px;}
    .lanyoce-left{max-width: 90px;left: -15px;}
    .lanyoce-top-anim{max-width: 130px;top: -26%;right: -15px;}

    /* Project Member Timeline Section  */
    .member-project-two .member-project-item-images {padding: 0px; gap: 10px; max-width: 250px; margin-inline: auto; justify-content: space-between;}
    .member-project-two .technology-icon {width: 80px; height: 80px;}
    .member-project-two .plus {font-size: 40px; line-height: 50px;}

    /* Features Section */
    .features-section{background-size: 70%, 70%;background-position: left 12%, right 18%;}
    .features-item {flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px);}

    /* Visual Design Section */
    .visual-section .section-inner-head + .visual-area{margin-top: 22%;}
    .visual-area2{padding: 10px 10px 0;}
}