:root{
    --primary-color: #e99700;
    --primary-light-color: #F1843B1A;
    --secondary-color: #0455A4;
    --color-white: #ffffff;
}

.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 !important; background: var(--color-white) !important;}
.header-main.sticky-header{position: fixed !important;}

/* Banner Section */
.banner-section{padding-top: 144px;background: url(../../images/case-studies/festival-city/herobg.webp);background-repeat: repeat-x;background-position: bottom;}
.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);background: -webkit-linear-gradient(90deg, #F1843B 0%, #FBC419 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.banner-sub-title {font-size: var(--font-20); line-height: 28px;}
.banner-section .btn1 {border-color: var(--primary-color); background: linear-gradient(90deg, #F1843B 0%, #FBC419 100%); color: var(--color-white); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.banner-bottom{position: relative; padding-top: 90px;}
.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::after{content: '';border: 1px solid #F1843B33;border-radius: 20px;position: absolute;height: 100%; width: 100%;}
/* .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: #FEF3EC;display: flex;align-items: center;justify-content: center;margin: -40px auto 12px; transition: all ease-in-out 0.3s;position: relative;z-index: 1;}
.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 {background: -webkit-linear-gradient(90deg, #F1843B 0%, #FBC419 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;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 0 0; flex-direction: column; background-color: var(--color-white); border-radius: 18px;border: 1px solid #F1843B33;box-shadow: 0px 0px 15px 0px #F1843B1A;}
.member-project-item h3{margin-bottom: 10px;}
.member-project-item-images{ position: relative;}
.member-project-item-content{flex: 1 1 0;padding: 0 40px;}
.member-project-item-content p{color: var(--secondary);}
.member-project-one .member-project-item-images{display: flex;align-items: start;justify-content: center;}
.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; justify-content: center; gap: 39px; padding: 64px 0 0;}
.member-project-two .plus {font-weight: 400; font-size: 70px; line-height: 80px; vertical-align: middle; color: var(--color-black); margin: 0;}
.member-project-one .member-project-item-images img {width: 100%;}

/* Features Section */

/* Projects Section */
.projects-section{background-color: #FFFBF9;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: #FFFBF9;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: 20px 20px 20px 64px;margin-top: 20px;box-shadow: 0px 4px 20px 0px #F1843B33;}
.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,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='url(%23paint0_linear_21589_82208)'/%3E%3Cpath 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='%23F1843B'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_21589_82208' x1='12.5636' y1='0.00359503' x2='29.532' y2='103.782' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='%23F1843B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");background-repeat: no-repeat;}
.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: #f1853a;border-left: none;z-index: -1;}
.challenges-column .project-title-block::after{content: '';position: absolute;right: 0;top: -14px;width: 46px;height: 50%;background: #BD672D;transform: skew(0deg, 30deg);z-index: -1;}

.challenges-column h3{background: linear-gradient(110deg, #F1843B, #efbd21), linear-gradient(0deg, #F1843B 100%, #FBC419 100%)}
.solutions-column h3{background: linear-gradient(110deg, #F1843B, #efbd21), linear-gradient(0deg, #F1843B 100%, #FBC419 100%)}
.challenges-column span{margin-left: -30px;display: inline-block;}

.solutions-column{padding-top: 120px;}
.solutions-column .project-title-block{margin-left: -58px;margin-top: 100px;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: #f0b924;border-right: none;z-index: -1;}
.solutions-column .project-title-block::after{content: '';position: absolute;left: 0;top: 43px;width: 46px;height: 50%;background:#BD672D;transform: skew(0deg, 30deg);z-index: -1;}
.solutions-column span{margin-right: -30px;display: inline-block;}

/* Timeline Section */
.timeline-area{background: linear-gradient(180deg, #FFFFFF 0.01%, #EFFBFD 100%);border-radius: 20px;display: flex;flex-wrap: wrap;padding: 20px;}

/* Visual Design Section */
.visual-section{background-image: url(../../images/case-studies/festival-city/visual-bg.webp);background-repeat: no-repeat;background-position: center center;background-size: 100%;}
.visual-section .section-inner-head + .visual-area{margin-top: 255px;}
.visual-area{background-color: #FFA704;border-radius: 20px;position: relative;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;}

/* Colors Typography Section */
.color-typography-section .section-inner-head {max-width: 790px; margin-inline: auto;}
.color-typography-group {display: flex; max-width: 1100px; margin: 0 auto;}
.colors-side {width: 60%; display: flex; justify-content: end; overflow: hidden;}
.typography-side {width: 40%;}
.color-group {display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; max-width: 576px;}
.color-type-name {height: 180px; width: 180px; border: 15px solid var(--color-white); border-radius: 50%; background-color: var(--color-code); margin-bottom: 30px;}
.color-type:nth-child(2) {left: -50px;}
.color-type:nth-child(3) {left: -100px;}
.color-type:nth-child(4) {left: -150px;}
.color-typography-item, .color-type {position: relative;}
.color-type .color-name {margin-bottom: 4px;}
.typography-font-group {display: flex; gap: 10px;}
.typography-font-type {font-weight: 700; font-size: 100px; line-height: 1; margin-bottom: 20px; text-transform: capitalize;}
.typography-font-name, .color-type .color-name {font-weight: 700;}
.typography-font-name {margin-bottom: 0px;}
.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%);}

/* mockup */
.mockup-wrapper{background-image: url(../../images/case-studies/festival-city/mockup-bg.webp);background-repeat: no-repeat;background-position: top;background-size: cover;padding: 100px 0 0;}

/* gallery */
.gallery-grid {display: grid;grid-template-columns: auto 50% auto;gap: 30px;}
.gallery-item{overflow: hidden;}
.gallery-item img {align-self: flex-start;}
.gallery-grid .gallery-item img {width: 100%;margin-bottom: 30px;border-radius: 30px;}
.gallery-grid .gallery-item img:last-child {margin-bottom: 0;}
.gallery-item.gallery-item-2 img:last-child {height: 420px;object-fit: cover;}

/* slider*/
.features-section{padding: 100px 0;}
.sticky-wrapper {max-width: 1065px;margin: 0 auto;position: relative;}
.sticky-wrapper .slide-item {padding: 20px 30px;display: flex;align-items: center;height: 100% !important;}
.sticky-wrapper .slide-item .slide-content {max-width: 520px;}
.sticky-wrapper .sticky-mySwiper{box-shadow: 0px 4px 20px 0px #0554991A;border-radius: 20px;margin: 16px; height: 357px;}
.sticky-wrapper .slide-heading{background: -webkit-linear-gradient(90deg, #F1843B 0%, #FBC419 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0 0 20px;}
.process-slider-arrow {display: flex; align-items: center; justify-content: center; gap: 30px;}
.process-slider-arrow .swiper-button-arrow {position: unset; margin: 0px; width: 58px; height: 58px; border: 1px solid var(--color-black); border-radius: 50%;}
.desktopview .swiper-button-prev {left: -60px;}
.desktopview .swiper-button-next {right: -60px;}
.process-slider-arrow .swiper-button-arrow , .process-slider-arrow .swiper-button-arrow svg path {transition: all ease-in-out 0.3s;}
.process-slider-arrow .swiper-button-arrow:hover svg path {stroke: var(--color-white);}
.process-slider-arrow .swiper-button-arrow:hover {border-color: var(--primary); background-color: var(--primary);}
.process-slider-arrow .swiper-button-arrow::after {display: none;}
.process-slider-arrow .swiper-button-arrow svg {flex: 0 0 auto;}
.process-slider-nav {position: relative;width: 100%;display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.mat-60{margin-top: 60px;}

/* and new  */


/*-------------------============ 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;}

    /* 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%;}

    /* Timeline Section */
    .timeline-details p{line-height: 24px;}

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

     /* Colors Typography Section */
    .typography-font-type {font-size: 90px;}
    .typography-font-weight {font-size: 18px;}

    /* slider*/
    .process-slider-arrow .swiper-button-arrow {width: 50px; height: 50px;}
    .mat-60 {margin-top: 40px;}

    /* gallery */
    .gallery-grid .gallery-item img{border-radius: 20px;}
}

@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;}

    /* 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;}

    /* 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%;}

    /* Colors Typography Section */
    .typography-font-type {font-size: 70px;}
    .typography-font-weight {font-size: 16px; line-height: 26px;}
}

@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 .plus {font-size: 55px; line-height: 60px;}
}

@media screen and (max-width: 1250px) and (min-width : 992px) {
    /* slider*/
    .sticky-wrapper {max-width: 880px;}
}
@media screen and (min-width : 992px) {
    /* slider*/
    .process-slider-nav {position: unset; margin: 0px;}
    .desktopview .swiper-button-arrow {position: absolute; top: 50%; transform: translateY(-50%);}
    .desktopview .swiper-button-prev {left: -70px;}
    .desktopview .swiper-button-next {right: -70px;}
}

@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-two .member-project-item-images {padding: 30px 0px 20px; gap: 24px; justify-content: center;}

    /* Colors Typography Section */
    .color-group {margin-right: -90px;}
    .color-type-name {height: 115px; width: 115px; border-width: 12px;}
    .color-type:nth-child(2) {left: -30px;}
    .color-type:nth-child(3) {left: -60px;}
    .color-type:nth-child(4) {left: -90px;}

    /* gallery */
    .gallery-grid{gap: 20px;}
    .gallery-grid .gallery-item img{margin-bottom: 20px;}
}


@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 0 0;}
    .member-project-item-content{padding: 0 30px;}

    /* 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 .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;}

    /* Timeline Section */
    .timeline-details{min-height: auto;border-left: 2px dashed #A1A1A1;padding-bottom: 40px;}

    /* 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;}

    /* Colors Typography Section */
    .color-typography-group {flex-direction: column; gap: 30px;}
    .colors-side, .typography-side {width: 100%;}
    .color-type-name {margin-bottom: 12px;}
    .colors-side , .typography-font-group{justify-content: center;}
    .typography-group {text-align: center;}
    .typography-font-style {margin-inline: auto;}

    /* slider  */
    .features-section { padding: 80px 0; }
    .sticky-panel {height: auto;position: static;padding: 0 0 40px;}
    .sticky-wrapper { overflow: hidden; }
    .slide-item {flex-direction: column;padding: 36px 24px;gap: 32px;display: none;}
    .sticky-wrapper .slide-item .slide-content {max-width: 100%;}
    .sticky-wrapper .sticky-mySwiper {height: auto;}
}

@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; margin-inline: auto; justify-content: space-between;}
    .member-project-two .plus {font-size: 40px; line-height: 50px;}

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

    .gallery-grid{grid-template-columns: 1fr;}
}