:root{
    --primary-color: #EF7310;
    --secondary-color: #EF7310;
    --primary-color-15 : #05549926;
    --primary-light-color : #E1EEF9;
    --white-color-20: #FFFFFF33;
    --white-color-30: #FFFFFF4D;
    --color-black : #191919;
    --theme-border-color : #E6F3FF;
    --blue-color : #25395C;
    --blue-border-color : #25395C1A;
}
.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); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}

/* Button */
.btn1 svg path {transition: all ease-in-out 0.3s;}
.btn1:hover svg path {fill: var(--color-black);}


/* Banner Section */
.banner-section {padding: 310px 0px 0px; min-height: 100vh; display: flex; align-items: end; justify-content: center; position: relative; overflow: hidden; background-image: url(../../images/case-studies/smile24/Glow-Bg.webp); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: var(--color-white);}
.banner-section::before {content: ''; width: 100%; height: 300px; position: absolute; bottom: -5px; left: 0; background: url(../../images/case-studies/smile24/Banner-Smile-Shape.png) no-repeat center bottom; z-index: 3; background-size: 100%;}
.banner-section .container{position: relative;}
.banner-inner-warpper {display: flex;}
.banner-content {width: 44%; position: relative; z-index: 4;}
.banner-sub-title {font-size: var(--font-20); line-height: 28px;  font-weight: 500; padding: 8px 16px; border: 1px dashed #050505; display: inline-flex; margin-bottom: 30px; color: var(--primary-color);}
.banner-title { margin-bottom: 24px; color: var(--primary-color);}
.banner-section .btn1 {background-color: var(--primary-color); box-shadow: 0px 4px 20px 0px #0554991A; border-color: var(--primary-color); color: var(--color-white);}
.banner-moc-image {position: relative; text-align: center; width: 56%; display: flex; align-items: start; z-index: 1;}
.banner-moc-left {margin-right: -14%; animation: movingX 3s linear infinite;}
.banner-moc {position: relative; z-index: 2;}
.banner-moc-right {margin: -22% 0 0 -29%; animation: movingY 3s linear infinite; position: relative; z-index: 1;}

.banner-shaps img {position: absolute;}
.banner-line-shap-left {left: 0; bottom: 0;}
.banner-line-shap-right {right: 0; top: 70px;}
.banner-circle-green {left: 40%; top: 200px; animation: rotateAnimationX 3s linear infinite;}
.banner-circle-green.small {left: 114px; top: 30%; height: 80px; width: 80px; animation: rotateAnimationY 3s linear infinite;}
.banner-circle-pink {right: 100px; bottom: 30%; animation: rotateAnimationY 3s linear infinite;}
.banner-circle-pink.bottom {left: 12%; bottom: 0%; animation: rotateAnimationX 3s linear infinite;}
.banner-star-pink {position: absolute; bottom: 100px; right: 0%; animation: hideshowX 3s linear infinite;}
.banner-star-green {position: absolute; top: -21%; right: 27%; z-index: 0;}
@keyframes movingX {0%{ transform : translateX(0px);} 50% { transform: translateX(20px)} 100% { transform: translateX(0px)} }
@keyframes movingY {0%{ transform : translateY(0px);} 50% { transform: translateY(-20px)} 100% { transform: translateY(0px)} }
@keyframes rotateAnimationX {0%{ transform : rotate(0deg);} 100% { transform: rotate(360deg);} }
@keyframes rotateAnimationY {0%{ transform : rotate(0deg);} 100% { transform: rotate(-360deg);} }
@keyframes hideshowX {0%{ transform : scale(1); } 50% { transform: scale(0.7); opacity: 0.5;} 100% { transform: scale(1); } }

/* Project Overview */
.project-overview {background: url(../../images/case-studies/smile24/project-overview-bg.webp) no-repeat center; background-size: cover; background-repeat: no-repeat;}
.project-overview .section-inner-head {max-width: 900px; margin: 0px auto 30px;}
.member-group {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 60px;}
.member-item {padding: 20px; box-shadow: 0px 4px 20px 0px #0554991A; background-color: var(--color-white); border-radius: 10px; overflow: hidden; display: flex; gap: 13px; transition: all ease-in-out 0.3s; position: relative;}
.member-item:hover {transform: translateY(-15px);}
.member-item::before {content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(0deg, rgba(239, 115, 16, 0.2) 0%, rgba(14, 148, 147, 0.2) 102.05%); -webkit-mask:  linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;}
.member-icon {width: 44px; height: 40px; flex: 0 0 auto; transition: all ease-in-out 0.3s; position: relative;}
.member-sub-title {margin: 0px; }
.member-title {color: var(--primary-color);  margin: 0px 0px 13px 0px;}
.member-dis {color: var(--secondary);}

/* Technology at Scale */
.technology-card {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 40px; box-shadow: 0px 0px 23px 0px #002B2A1A; background-color: var(--color-white); border-radius: 20px;}
.technology-logos {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.technology-logo {box-shadow: 0px 0px 15px 0px #002B2B14; border-radius: 13px; padding: 37px 0px;display: flex; align-items: center; justify-content: center; height: 155px;}
.technology-logo img {max-height: 100%; object-fit: contain;}
.technology-logo:last-child {grid-column: span 2;}
.technology-scale {display: flex; flex-direction: column;}
.technology-scale h3 {margin-bottom: 10px;}
.technology-scale p {color: var(--secondary);}
.technology-scale .layer-image {text-align: center; margin-top: auto; padding-top: 40px;}


/* Features that scale */
.feature-image {text-align: center;}
.features-item:not(:last-child) {margin-bottom: 26px;}
.features-item {width: calc(100% - 110px); padding: 20px; box-shadow: 0px 4px 20px 0px #0554991A; background-color: var(--color-white); border-radius: 20px; overflow: hidden; position: relative;}
.features-item::before {content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2.19%, rgba(239, 115, 16, 0.2) 100%); -webkit-mask:  linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: all ease-in-out 0.3s;}
.features-item:hover::before {transform: rotate(180deg);}
.features-item:nth-child(even) {margin-left: auto;}
.features-item h3 {color: var(--primary-color); font-size: 24px; line-height: 32px;}
.features-item p {color: var(--secondary);}

/* Project Challenges Section */
.project-challenges-section {position: relative; background-image: url(../../images/case-studies/pioneers-learning-hub/project-challenges-bg-shap.png); background-repeat: no-repeat; background-position: center bottom; overflow: hidden;}
.project-challenges-section::before {content: ''; width: 100%; height: 140px; position: absolute; top: 37%; transform: skewY(-10.44deg); background: linear-gradient(89.62deg, #0E9493 52.41%, #EF7310 53.43%);}
.project-challenges-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; position: relative;}
.project-challenges-item {border-radius: 18px; display: flex; flex-direction: column; gap: 40px; padding: 40px; background-color: var(--color-white); box-shadow: 2px 4px 30px 0px #7D83911A; overflow: hidden;}
.project-challenges-image {background: radial-gradient(81.13% 114.06% at 48.32% 50.1%, #ECF3FB 0%, rgba(228, 233, 237, 0) 100%) ,linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44.15%, #FFFFFF 100%); border-radius: 20px; text-align: 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; opacity: 0.8; position: relative; color: var(--secondary);}
.project-challenges-content-list li::before{content: ''; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); 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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="12" fill="%23EF7310"/><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>');}

/* Colors Typography Section */
.color-typography-section .section-inner-head {max-width: 700px; margin-inline: auto;}
.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%);}

/*  Visual Design Section */
.timeline-section {background-color: #fbffff;}
.timeline-map video {max-width: 100%; width: 100%;}

/* Timeline Section */ /*  Visual Design Section */
.timeline-section .section-inner-head, .visual-design-section .section-inner-head{max-width: 750px; margin-inline: auto;}

/*  Visual Design Section */
.visual-design-section {background: url(../../images/case-studies/smile24/Visual-Design-bg.webp) no-repeat center bottom; background-size: 100%;}


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

@media screen and (max-width: 1550px){
    /* Banner Section */
    .banner-moc-right {margin: -22% 0 0 -33%;}
    .banner-star-green {right: 31%;}
    .banner-circle-green.small {left: 30px;}
    .banner-circle-pink {right: 30px;}
}

@media screen and (max-width: 1441px) {
    h2, .bold-title {line-height: 45px;}
    .btn1 {font-size: 18px; line-height: 20px;}
    p, h4 {font-size: var(--font-18);}
    h3 {line-height: 36px;}
    .mab-60 {margin-bottom: 40px;}

    /* Banner Section */
    .banner-section {padding: 250px 0px 0px;}
    .banner-section::before {height: 250px;}
    .banner-sub-title {font-size: var(--font-18); line-height: 27px; padding: 8px 16px; margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}
    .banner-moc {max-width: 350px; width: 100%;}
    .banner-moc-left {width: 290px;}
    .banner-moc-right {margin: -20% 0 0 -31%; width: 360px;}
    .banner-star-green {right: 27%; top: -23%;}
    .banner-circle-green.small {width: 60px; height: 60px;}
    .banner-circle-green, .banner-circle-pink {width: 120px; height: 120px;}
    .banner-star-pink {width: 120px;}

    /* Project Overview */
    .member-group {padding-top: 40px;}

    /* Features that scale */
    .features-item:not(:last-child) {margin-bottom: 20px;}
    .features-item {width: calc(100% - 50px)}
    .features-item h3 {font-size: 22px; line-height: 30px;}

    /* Project Challenges Section */
    .project-challenges-section::before {height: 100px;top: 40%;}
    .project-challenges-content-title {margin-bottom: 20px;}
    .project-challenges-content-list li {font-size:18px}

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


    /* Features Section */
    .features-section{overflow: hidden;}
    .feat-group-right{margin-left: -25%;}
    .feat-content{margin-top: 0;}
    .feat-content{max-width: 54%;}
}

@media screen and (max-width: 1199px) {
    h2, .bold-title {line-height: 40px;}
    h3 {line-height: 32px;}
    .btn1 {font-size: 16px;}
    p, h4 {font-size: var(--font-16); line-height: 26px;}

    /* Banner Section */
    .banner-sub-title{font-size: var(--font-16); line-height: 26px;}
    .banner-moc {max-width: 300px;}
    .banner-circle-pink.bottom {left: 6%;}
    .banner-moc-left {width: 250px;}
    .banner-moc-right {margin: -20% 0 0 -31%; width: 300px;}
    .banner-circle-green, .banner-circle-pink {width: 100px; height: 100px;}
    .banner-star-pink {width: 100px;} 
    .banner-circle-pink {bottom: 15%;}

    /* Project Overview */
    .member-group {padding-top: 40px;}
    .member-title {margin-bottom: 10px;}

    /* Technology at Scale */
    .technology-logo {height: 130px;}

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

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

@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: 150px 0px 0px;}
    .banner-inner-warpper {flex-direction: column;}
    .banner-content {z-index: 2;}
    .banner-content, .banner-moc-image {width: 100%;}
    .banner-moc-image {justify-content: center; padding-top: 100px; max-width: 640px; margin-inline: auto;}
    .banner-moc-right {margin: -14% 0 0 -27%;}

     /* Project Overview */
    .member-group {grid-template-columns: 1fr;}

    /* Features that scale */
    .features-item:not(:last-child) {margin-bottom: 0px;}
    .features-item {width: 100%;}
    .features-group {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 30px;}

    /* Project Challenges Section */
    .project-challenges-item {padding: 30px; gap: 30px;}
}
@media screen and (max-width:768px) {
    /* Banner Section */
    .banner-moc-image {max-width: 440px;}
    .banner-moc {max-width: 250px;}
    .banner-circle-green, .banner-circle-pink {width: 80px; height: 80px;}
    .banner-star-pink {width: 80px;} 

    /* Technology at Scale */
    .technology-card {grid-template-columns: 1fr;}

    /* Project Challenges Section */
    .project-challenges-section::before {transform: skewY(-20deg);}
    .project-challenges-group {grid-template-columns: 1fr;}

    /* 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;}
}
@media screen and (max-width:576px) {
    /* Banner Section */
    .banner-moc-image {max-width: 440px; padding-top: 50px; flex-wrap: wrap;}
    .banner-moc-left, .banner-moc-right {width: 50%; margin: 0px;}
    .banner-moc-right {order: 2;}
    .banner-moc {max-width: 200px; order: 3;}
    
    /* Technology at Scale */
    .technology-card {padding: 30px;}
    .technology-scale .layer-image {padding-top: 30px;}
    .technology-logo { height: 100px; padding: 30px 0px;}

    /* Features that scale */
    .features-group {grid-template-columns: 1fr;}

}