:root{
    --primary-color: #055499;
    --secondary-color: #0455A4;
    --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);}


/* Banner Section */
.banner-section {padding: 209px 0px 42px; position: relative; overflow: hidden;}
.banner-section::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../images/case-studies/sara/banner-logo.png) no-repeat center left;}
.banner-section>div{position: relative;}
.banner-content {max-width: 645px; width: 100%;}
.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: #013078;}
.banner-title {margin-bottom: 24px; font-weight: 700; color: var(--secondary-color);}
.banner-section .btn1 {background-color: var(--secondary-color); box-shadow: 0px 4px 20px 0px #0554991A; border-color: var(--secondary-color); color: var(--color-white);}
.banner-moc-image {position: relative;}
.banner-moc {top: -65px; right: -78px; position: relative; z-index: 1;}
.banner-shap {position: absolute; inset: 0; animation: rotateAnimation 15s linear infinite;}
@keyframes rotateAnimation {0%{ transform : rotate(0deg);} 100% { transform: rotate(360deg);} }


/* Project Member Section */
.member-section {padding-top: 40px; 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;  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(5, 84, 153, 0) 0%, rgba(5, 84, 153, 0.2) 50%, rgba(5, 84, 153, 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: inline-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-color-15); border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;}
.member-sub-title {margin: 0px; }
.member-title {color: var(--primary-color);}
.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-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 .member-project-item-images {background: url(../../images/case-studies/pioneers-learning-hub/member-projece-one-bg.png) no-repeat center; background-size: cover; overflow: hidden; display: flex; align-items: start; justify-content: center;} 
.member-project-two .member-project-item-images  {display: flex; align-items: center; gap: 39px; padding: 64px 43px 47px;}
.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 */
.feature-group {display: grid; grid-template-columns: 24% 52% 24%; padding-top: 29px;}
.feature-group .mobileview {display: none;}
.feature-item {padding: 20px; width: 389px; border-radius: 20px; box-shadow: 0px 4px 20px 0px #0554991A; border: 1px solid;border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2.19%, rgba(5, 84, 153, 0.2) 100%); background-color: var(--color-white); position: relative;}
.feature-item h3 {font-size: 24px; line-height: 32px; color: var(--primary-color); font-weight: 700; margin-bottom: 8px;}
.feature-item p {color: var(--secondary);}
.feature-item::before {content: "";  animation: smoothReverse 3s linear infinite; width: 89px; height: 193px; position: absolute; top: 27px; border-radius: 0px 45px 0px 0px; padding: 2px 2px 0px 0px; background: linear-gradient(180.37deg, #AECAF7 -22.25%, #FFFFFF 86.78%); -webkit-mask: linear-gradient(#000 0 0) content-box,  linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;}
.feature-left, .feature-right {display: flex; flex-direction: column;}
.feature-left .feature-item::before {left: calc(100% + 16px);}
.feature-left .item-one::before {height: 302px; border-top-right-radius: 60px; top: calc(100% - 30px);}
.feature-left {gap: 75px; padding-top: 52px;}
.feature-left .item-second {margin-left: -65px;}
.feature-right .feature-item::before {right: calc(100% + 16px); top: 30%; height: 243px; border-radius: 45px 0px 0px 0px; padding: 2px 0px 0px 2px;}
.feature-right .item-one::before {height: 423px; border-top-left-radius: 60px; top: 42%;}
.feature-right {gap: 49px; margin-top: -11px;}
.feature-right .item-one {margin-left: -70px;}
.feature-right .item-second {margin-left: -20px;}
@keyframes smoothReverse { 0% {  } 50% { opacity: 0.5;  } 100% {   } }

/* 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;}
.project-challenges-section::before {content: ''; width: 100%; height: 140px; position: absolute; top: 34%; transform: skewY(-10.44deg); background: linear-gradient(137.73deg, #012D76 19.62%, #0552A2 51.41%, #002E76 85.17%);}
.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; color: var(--secondary); position: relative;}
.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="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.42999 11.8208L14.21 5.04078C14.37 4.88078 14.5567 4.80078 14.77 4.80078C14.9833 4.80078 15.17 4.88078 15.33 5.04078C15.49 5.20078 15.57 5.39091 15.57 5.61118C15.57 5.83145 15.49 6.02131 15.33 6.18078L7.98999 13.5408C7.82999 13.7008 7.64332 13.7808 7.42999 13.7808C7.21665 13.7808 7.02999 13.7008 6.86999 13.5408L3.42999 10.1008C3.26999 9.94078 3.19319 9.75091 3.19959 9.53118C3.20599 9.31145 3.28945 9.12131 3.44999 8.96078C3.61052 8.80025 3.80065 8.72025 4.02039 8.72078C4.24012 8.72131 4.42999 8.80131 4.58999 8.96078L7.42999 11.8208Z" fill="white"/></svg>');}


/* Colors Typography Section */
.color-typography-group {display: flex; gap: 120px;}
.colors-side {width: 70%;}
.typography-side {width: 30%;}
.color-group {display: flex; justify-content: space-between;}
.color-type {display: flex; flex-direction: column; align-items: center;}
.color-type-name, .color-type-name * {border-radius: 50%;}
.color-type-name {width: 174px; height: 174px; box-shadow: 10px 13px 40px 0px #C5BFA740; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 20px;}
.color-type-name span {width: 55.23%; height: 55.23%; box-shadow: var(--color-shadow); background-color: var(--color-code); display: block;}
.color-type-name::after {content: ''; width: 18.60%; height: 18.60%; border-radius: 50%; background-color: var(--color-white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 11px 11.9px 0px #55597D40; animation: zooming 2s linear infinite;}
.color-type:nth-child(1) .color-type-name::after { animation-delay: 0s; }
.color-type:nth-child(2) .color-type-name::after { animation-delay: 0.5s; }
.color-type:nth-child(3) .color-type-name::after { animation-delay: 1s; }
.color-type:nth-child(4) .color-type-name::after { animation-delay: 1.5s; }
@keyframes zooming { 0%, 100% {transform: translate(-50%, -50%) scale(1);} 50% {transform: translate(-50%, -50%) scale(0.8);}}
.color-type .color-name, .typography-font-name {font-weight: 700;}
.color-type .color-name {margin-bottom: 4px;}
.color-type .color-code, .typography-font-style {font-weight: 500;}
.color-typography-item {position: relative;}
.color-typography-item:not(:last-child)::after {content: ''; height: 200px; width: 1px; background-color: var(--blue-color); opacity: 0.1; position: absolute; right: -60px; top: 50%; transform: translateY(-50%);}
.typography-font-type {font-weight: 700; font-size: 100px; line-height: 1; text-transform: capitalize;}
.typography-font-type, .typography-font-weight {margin-bottom: 20px;}
.typography-font-name {margin-bottom: 10px; }
.typography-font-style {word-break: break-all; color: var(--secondary);}
.typography-font-weight {display: inline-flex; align-items: center; 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-section .section-inner-head {text-align: center; max-width: 800px; margin-inline: auto;}
.timeline-overview-group {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}
.timeline-overview-item h3 {font-size: 20px; line-height: 28px; font-weight: 500; color: var(--color-black); margin: 0px; text-align: center;}
.timeline-details {margin: 20px 0px; height: 526px; border-radius: 20px; background-color: var(--bg-color); padding: 37px 12px;}
.timeline-details-card {border-radius: 20px; border: 1px solid var(--border-color); padding: 12px;}
.timeline-details-card:not(:last-child) {margin-bottom: 10px;}
.timeline-details .team-image {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;}
.timeline-details .team-image img {width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); object-fit: cover; flex: 0 0 auto;}
.timeline-overview-item:nth-child(2) .timeline-details {padding-top: 135px;}
.timeline-overview-item:nth-child(3) .timeline-details {padding-top: 215px;}
.timeline-overview-item:nth-child(4) .timeline-details, .timeline-overview-item:nth-child(5) .timeline-details {display: flex; flex-direction: column; justify-content: end;}
.timeline-overview-item:nth-child(5) .timeline-details {padding-bottom: 25px;}


/* Visual Design Section */
.visual-design-section {text-align: center; position: relative; max-width: 1920px; margin-inline: auto; overflow: hidden;}
.visual-design-section > div {position: relative;}
.visual-design-section .section-inner-head {max-width: 742px; text-align: center; margin-inline: auto;}
.visual-design-section::before, .visual-design-section::after {content: ''; background-repeat: no-repeat; background-size: contain; background-image: url(../../images/case-studies/sara/visule-design-bg-circle.webp); position: absolute; z-index: -1;}
.visual-design-section::before {width: 350px; height: 350px; left: -80px; top: 28%; animation: circleAnimation 15s linear infinite;}
.visual-design-section::after {width: 800px; height: 800px; right: -400px; top: 25%;  animation: rotateAnimation 15s linear infinite;}
.visual-moc-container {display: grid; overflow: hidden; max-width: 100%; grid-template-columns: 16% 19% 19% 19% 19% 8%;}
@keyframes circleAnimation {0%{ transform : rotate(0deg);} 100% { transform: rotate(-360deg);} }
.visual-moc-image {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.visual-moc-image:nth-child(3) img {transform: translateY(50px);}
.visual-moc-image:nth-child(4) img {transform: translateY(-230px);}
.visual-moc-image:nth-child(5) img {transform: translateY(-50px);}








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

@media screen and (max-width:1600px) {
    /* Features Section */
    .feature-group {padding-inline: 50px;}
    .feature-item {width: 330px;}
    .feature-item::before {width: 60px;}
    .feature-left {gap: 50px}
}

@media screen and (max-width: 1600px) and (min-width:1441.98px) {
    .feature-left .item-one {margin-left: 50px;}
    .feature-left .item-second {margin-left: 0px;}
}


@media screen and (max-width: 1441px) {

    /* Banner Section */
    .banner-section {padding: 240px 0px 0px;}
    .banner-section::before {background-size: 350px;}
    .banner-sub-title {font-size: var(--font-18); line-height: 27px; padding: 8px 16px; margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}
    .banner-moc-image {margin-left: 50px;}
    .banner-moc {right: -55px;}

    /* Project Member Section */
    /* .member-section {padding-bottom: 80px;} */
    .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 */
    .feature-section {padding-top: 20px;}
    .feature-group {padding: 0px 30px; grid-template-columns: 20% 60% 20%;}
    .feature-item h3 {font-size: 22px; line-height: 30px;}
    .feature-item::before {width: 40px;}
    .feature-left {gap: 40px;}
    .feature-left .item-second {margin-left: -40px;}
    .feature-right .item-one {margin-left: -100px;}
    .feature-right .item-second {margin-left: -70px;}
    
    /* 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 */
    .color-type-name {height: 150px; width: 150px;}
    .typography-font-type {font-size: 90px;}
    .typography-font-weight {font-size: 18px;}

    /* Timeline Section */
    .timeline-section {padding-top: 20px;}
    .timeline-overview-item h3 {font-size: 18px;}

    /* Visual Design Section */
    .visual-moc-image:nth-child(4) img {transform: translateY(-100px);}
    .visual-design-section::before {width: 300px; height: 300px; left: -50px;}
    .visual-design-section::after {width: 500px; height: 500px; right: -250px; top: 35%;}

}
@media screen and (max-width: 1400px){
    .banner-moc-group {top: -50%; max-width: 80%; right: -15%;}

}

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

    /* Project Member Section */
    .member-section {padding-top: 30px;}
    .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: unset;}
    .member-project-two .technology-icon {height: 135px; width: 135px;}

    /* Features Section */
    .feature-group {padding: 0px; grid-template-columns: 25% 50% 25%;}
    .feature-item {width: 100%; margin-inline: 0px !important;}
    .feature-item h3 {font-size: 20px; line-height: 28px;}
    .feature-left, .feature-right {gap: 35px; padding-top: 0px;}
    .feature-left .item-one::before, .feature-right .item-one::before {width: 60px;}

    /* 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;}
    .color-type-name {height: 130px; width: 130px;}
    .typography-font-type {font-size: 70px;}
    .typography-font-weight {font-size: 16px; line-height: 26px;}

    /* Timeline Section */
    .timeline-details-card p {line-height: 24px;}
    .timeline-overview-item h3 {font-size: 16px; line-height: 26px;}
    
    /* Visual Design Section */
    .visual-design-section::before {width: 200px; height: 200px; left: -80px;}
    .visual-design-section::after {width: 400px; height: 400px; right: -200px; top: 37%;}
}

@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) {
    /* Features Section */
    .feature-group .mobileview {display: flex; align-items: center; justify-content: center;}
    .feature-group .desktopview {display: none;}
    .feature-group {grid-template-columns: 1fr 1fr; gap: 24px;}
    .feature-group .mobileview {grid-column: span 2; margin-bottom: 10px;}
    .feature-group .mobileview img {max-width: 450px; width: 100%;}
    .feature-right {margin-top: 0px;}
    .feature-left, .feature-right {gap: 24px;}
    .feature-item::before {display: none;}
    
    /* 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: 100px; width: 100px;}

}
@media screen and (max-width:991px) {
    /* Project Member Timeline Section  */
    .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;}

    /* Banner Section */
    .banner-section {padding: 150px 0px 0px;}
    .banner-moc-image {max-width: 500px; margin: 100px auto 0px;}

    /* Visual Design Section */
    .visual-design-section::after {width: 300px; height: 300px; right: -150px; top: 37%;}

    /* Project Challenges Section */
    .project-challenges-item {padding: 30px; gap: 30px;}

    /* Colors Typography Section */
    .colors-side {width: 65%;}
    .typography-side {width: 35%;}
    .color-type-name {height: 90px; width: 90px;}

}
@media screen and (max-width:768px) {
    /* Banner Section */
    .banner-moc-image {max-width: 350px;}
    .banner-section::before {background-size: 200px; background-position: -9% 16%; }
    .banner-moc {right: -35px;}

    /* 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 */
    .feature-group {grid-template-columns: 1fr;}
    .feature-group .mobileview {grid-column: span 1;}
    
    /* 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-group .mab-60 {margin-bottom: 24px;}
    .typography-font-type {font-size: 50px;}
    .color-typography-item:not(:last-child)::after {right: 0%; height: 1px; width: 100%; transform: unset; top: calc(100% + 50px);}
    .colors-side, .typography-side {width: 100%;}

    /* Timeline Section */
    .timeline-overview-group {grid-template-columns: 1fr; gap: 0px;}
    .timeline-details {height: auto; padding: 30px 20px !important; margin: 15px 0px;}
    .timeline-overview-item:not(:last-child) {padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgb(37 57 92 / 10%);}

    /* Visual Design Section */
    .visual-design-section::before {width: 100px; height: 100px; left: -20px; top: 50%;}
    .visual-moc-image:nth-child(4) img {transform: translateY(-40px);}
    .visual-moc-image:nth-child(5) img {transform: translateY(-10px);}
}
@media screen and (max-width:576px) {
    /* 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;}

    /* Colors Typography Section */
    .color-group {flex-wrap: wrap; gap: 40px; justify-content: center;}
    .color-type {width: calc(50% - 20px);}

    /* Visual Design Section */
    .visual-moc-container {grid-template-columns: 20% 30% 30% 20%; padding: 40px 0 30px;}
    .visual-moc-image:nth-child(1) img { transform: translateY(50px);}
    .visual-moc-image:nth-child(3) img { transform: translateY(79px);}
    .visual-moc-image:nth-child(2) img { transform: translateY(-79px);}
    .visual-design-section::before {top: 270px; left: 0;}
}