:root{
    --primary-color: #E47015;
    --secondary-color: #F2A843;
    --primary-color-15 : #F4781826;
    --primary-light-color : #feebdd;
    --white-color-20: #FFFFFF33;
    --white-color-30: #FFFFFF4D;
    --color-black : #191919;
    --orange-border-color : #FFF5EE;
    --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(--secondary-color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}

/* Button */
.header-main:not(.sticky-header) .right-header-block li.calculator-icon a{ background-color: var(--color-white);}
.cta-btn:hover .green-icon{ background-color: transparent !important;}
.btn1 span {color: var(--color-black);}
.btn1.outline-btn {background-color: transparent;}
.btn1.white-btn {background-color: transparent; border-color: var(--color-white); color: var(--color-white);}
.btn1.white-btn span {color: var(--color-white);}
.btn1.white-btn::before, .btn1.white-btn::after {background-color: var(--primary-color);}
.btn-green {background-color: var(--secondary-color) !important; border-color: var(--white-color-20) !important;}


/* header-main */
.header-main { position: absolute; border-bottom: 1px solid #FFFFFF29;}


/* Banner Section */
.banner-section {padding: 504px 0px 288px; position: relative; overflow: hidden;}
.banner-section::before{content: ''; height: 962px; width: 100%; position: absolute; left: 100px; top: 10%; transform: skew(0deg, -17deg); background: linear-gradient(235.07deg, #F47818 33.75%, #FFAC6C 143.04%); border-radius: 100px 0px 0px 100px;}
.banner-section>div{position: relative;}
.banner-content .btn1:hover svg path{fill: var(--color-white);}
.main-banner-area{display: flex;flex-wrap: wrap;}
.banner-content{flex: 0 0 50%;-webkit-flex: 0 0 50%;z-index: 1;}
.banner-moc-group{flex: 0 0 calc(50% + 22%);-webkit-flex: 0 0 calc(50% + 22%);margin-left: -22%;transform: translateX(10%);margin-top: -14%;align-self: flex-end;}
.moc-img{position: relative;}
.moc-img:after{content: '';position: absolute;right: 40px;bottom: 30px;width: 50%;height: 50%;background-color: var(--primary-color);z-index: -1;border-radius: 50%;opacity: 0.4;filter: blur(60px);}


.banner-logo { position: absolute; width: 250px; height: 200px; left: -77px; top: -44%; z-index: -1;}
.banner-logo img {width: 100%; height: 100%; object-fit: contain;}
.banner-sub-title {font-size: var(--font-20); line-height: 28px; font-weight: 500; padding: 8px 16px; border: 1px dashed var(--white-color-30); display: inline-flex; margin-bottom: 30px;}
.banner-title {margin-bottom: 24px;}
.banner-sub-title, .banner-title, .banner-dis {color: var(--color-white);}
.business-name-card, .multi-date-card {position: absolute;}
.business-name-card {top: 0; right: -10%; animation: moveingY 2s linear infinite;}
.multi-date-card {top: -8%; right: 28%; animation: moveingX 2s linear infinite;}
@keyframes moveingX {0%, 100% { transform : translateX(0px);}50% { transform: translateX(20px);} }
@keyframes moveingY {0%, 100% { transform : translateY(0px);}50% { transform: translateY(20px);} }
.desktop-hide{display: none;}

/* 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 transparent;}
.member-item:hover {transform: translateY(-15px); border-color: var(--primary-color);}
.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); 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 Member Timeline Section  */
.member-project-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.member-project-item {display: flex; overflow: hidden; gap: 40px; flex-direction: column; background-color: var(--color-white); box-shadow: 2px 4px 30px 0px #7D83911A; border: 1px solid var(--orange-border-color); border-radius: 18px;}
.member-project-item h3 {margin-bottom: 10px;}
.member-project-item-images {height: 290px;  position: relative;}
.member-project-item-content {flex: 1 1 0;}
.member-project-item-content p {color: var(--secondary);}
.member-project-one {padding: 40px;}
.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; padding-inline: 60px;} 
.member-project-one .image1 {margin: 35px -68px 0px 0px; position: relative; z-index: 1; animation: imagemoveX 3s ease-out infinite;}
@keyframes imagemoveX { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } }
.member-project-two {padding: 40px 0px 0px;}
.member-project-two .member-project-item-images {padding: 0px 40px 0px; display: flex; justify-content: center;}
.member-project-two .member-project-item-content {padding: 0px 40px 40px; background-color: var(--color-white); position: relative;}
.member-project-two-layer-group {width: 565px; height: 565px; position: relative;}
.member-project-two-layer-group .layer { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: scaleIn 1.5s ease-out forwards;}
.member-project-two-layer-group .layer1 { width: 100%; height: 100%; background: linear-gradient(180deg, rgba(244, 120, 23, 0.8) -27.54%, rgba(255, 245, 238, 0) 55.26%); animation-delay: 0s;}
.member-project-two-layer-group .layer2 { width: 75%; height: 75%; background: linear-gradient(178.24deg, rgba(244, 120, 23, 0.8) -35.3%, rgba(255, 245, 238, 0) 59.28%); animation-delay: 0.3s;}
.member-project-two-layer-group .layer3 { width: 45%; height: 45%; background: linear-gradient(180deg, rgba(244, 120, 23, 0.8) -39.86%, rgba(255, 245, 238, 0) 58.71%); animation-delay: 0.6s;}
@keyframes scaleIn { 0% { transform: translate(-50%, -50%) scale(0); } 100% { transform: translate(-50%, -50%) scale(1); }}
.member-project-two-layer-group .tech-icon { position: absolute; width: 64px; height: 64px; background: var(--color-white); box-shadow: 0px 0px 13.81px 0px #BA632C26; border-radius: 50%; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; animation: fadeIn 1s ease-out forwards;}
.member-project-two-layer-group .icon1 { animation: fadeIn 1s ease-out forwards 0.8s, orbit1 9s linear infinite 2.5s; }
.member-project-two-layer-group .icon2 { animation: fadeIn 1s ease-out forwards 1s, orbit2 7s linear infinite 2.3s; }
.member-project-two-layer-group .icon3 { animation: fadeIn 1s ease-out forwards 1.2s, orbit3 5s linear infinite 2.1s; }
@keyframes fadeIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes orbit1 { 0% { transform: rotate(0deg) translateX(280px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(280px) rotate(-360deg); } }
@keyframes orbit2 { 0% { transform: rotate(120deg) translateX(210px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(210px) rotate(-480deg); } }
@keyframes orbit3 { 0% { transform: rotate(240deg) translateX(126px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(126px) rotate(-600deg); } }

/*Feature Section*/
.features-section .section-inner-head{padding-bottom: 35px;}
.features-group{display: flex;display: -webkit-flex;}
.feat-group-left{z-index: 1;}
.feat-group-right{margin-left: -21%;margin-top: -72px;flex: 1;}
.feature-circle-group{width: 424px;height: 424px;flex: 0 0 424px;-webkit-flex: 0 0 424px;position: relative;transform: rotate(60deg);-webkit-transform: rotate(60deg);}
.feature-circle-group:after{content: '';position: absolute;left: 20px;top: 20px;width: calc(100% - 40px);height: calc(100% - 40px);border: 1px dashed var(--primary-color);border-radius: 50%;z-index: -1;}
.feature-circle-group:before{content: '';position: absolute;left: 50%;top: 50%;width: 68%;height: 68%;background: linear-gradient(90deg,rgba(255, 172, 108, 1) 0%, rgba(244, 120, 24, 1) 100%);transform: translate(-50%, -50%) rotate(45deg);-webkit-transform: translate(-50%, -50%) rotate(45deg);border-radius: 50%;z-index: -1;}
.circle-container{width: 100%;height: 100%;position: relative;transition: transform 1s cubic-bezier(.25,.8,.25,1);border-radius: 50%;}
.feat-icon{width: 40px;height: 40px;position: absolute;transform: translate(-50%, -50%);background-color: #feebdd;transition: 0.5s ease;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.active-icon{width: 68px;height: 68px;}
.feat-content{width: 100%;border: 1px solid rgba(244, 120, 23, 0.2);border-radius: 20px;padding: 20px;box-shadow: 0 4px 20px rgba(93, 50, 17, 0.1);-webkit-box-shadow: 0 4px 20px rgba(93, 50, 17, 0.1);max-width: 61%;float: right;margin-top: -30px;}
.content-section{ display: none; }
.content-sectiont p {color: var(--secondary);}
.content-section.active{display: block; }
.content-section h2{margin: 0 0 12px;color: var(--primary-color);}

/* 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(67.76deg, #F47818 21.2%, #FFAC6C 120.79%);}
.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; 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-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;}
.visual-design-section > div {position: relative;}
.visual-design-section::before {content: ''; width: 100%; height: 60%; position: absolute; top: 36%; right: 0; transform: skewY(-10.44deg); background: linear-gradient(232.1deg, #F47818 12.54%, #FFAC6C 105.91%);}
.visual-design-template img:not(:last-child) {margin-bottom: 30px;}

/* Related Projects Section */
.related-projec-section {padding-top: 50px; position: relative; z-index: 1;}



/*-------------------============ Responsive CSS ==============--------------------- */
@media screen and (min-width: 1800px){
    /* Project Member Section */
    .member-section {padding-top: 80px;}
}
@media screen and (min-width: 1500px){
    /* Project Member Section */
    .member-section {padding-top: 40px;}
}
@media screen and (max-width: 1499px) and (min-width: 1441px){
    /* Project Member Section */
    .member-section {padding-top: 10px}
}
@media screen and (max-width: 1800px){
    /* Banner Section */
    .banner-section::before {top: 9%;}
    .banner-logo {top: -52%; left: -30px;}
}
@media screen and (max-width: 1650px){
    /* Banner Section */
    .banner-section::before {top: 10.2%; left: 40px;}
    .multi-date-card {right: 32%;}
    .business-name-card {right: -20px;top: -8%;}
    .banner-moc-group{transform: translateX(4%);}
}
@media screen and (max-width: 1500px){
    /* Banner Section */
    .banner-section::before {top: 13.6%; border-radius: 50px 0px 0px 50px; height: 900px;}
    .banner-logo {top: -42%; left: 0px;}
}
@media screen and (max-width: 1441px) {
    /* Banner Section */
    .banner-section {padding: 400px 0px 175px;}
    .banner-sub-title {font-size: var(--font-18); line-height: 27px; padding: 8px 16px; margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}
    .banner-section::before {height: 750px; top: 11.8%;}
    .banner-logo {width: 200px; height: 160px;}

    .business-name-card{right: -5%;}
    .multi-date-card{right: 38%;top: -10%;}
    .banner-moc-group{transform: translateX(8%);}

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

    /* Project Member Timeline Section  */
    .member-project-item-images {height: 240px;}
    .member-project-one .image1 {width: 250px; margin: 29px -62px 0px 0px;}
    .member-project-one .image2 {width: 220px;}
    .member-project-two-layer-group {width: 478px; height: 478px;}
    .member-project-two-layer-group .tech-icon {width: 56px; height: 56px; margin-top: -28px; margin-left: -28px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(239px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(239px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(179px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(179px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(108px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(108px) rotate(-600deg); } }

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


    /* Feature 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: 1300px){
    /* Banner Section */
    .banner-section::before {left: 10px;}
    .banner-logo {top: -44%;}
    .banner-moc-group{transform: translateX(4%);}
    .business-name-card{right: -10px;top: -12%;}
    .multi-date-card{right: 40%;}
}
@media screen and (max-width: 1199px) {

    /* Hero Section */
    .banner-sub-title{font-size: var(--font-16); line-height: 26px;}
    .business-name-card{width: 35%;}
    .multi-date-card{width: 30%;}
    .banner-moc-group{transform: translateX(20px);margin-top: -11%;}
    .banner-logo {top: -46%;}

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

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

    /* Feature Section */
    .feat-group-left{flex: 1;-webkit-flex: 1;}
}

@media screen and (max-width: 1199px) and (min-width: 1025px){
    /* Project Member Timeline Section  */
    .member-project-item {gap: 30px;}
    .member-project-item-images {height: 225px;}
    .member-project-one .image1 {width: 74%;}
    .member-project-one {padding: 30px;}
    .member-project-two {padding: 30px 0px 0px;}
    .member-project-two .member-project-item-images {padding: 0px 30px 0px;}
    .member-project-two .member-project-item-content {padding: 0px 30px 30px;}
    .member-project-two-layer-group {width: 410px; height: 410px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(205px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(205px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(154px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(154px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(92px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(92px) rotate(-600deg); } }
}

@media screen and (max-width:1100px) {
    .banner-logo {top: -52%;}
    .member-group {grid-template-columns: 1fr 1fr; gap: 60px 30px;}
}
@media screen and (max-width:1024px) {
    .banner-logo {top: -60%;}
     /* Project Member Timeline Section  */
    .member-project-group {grid-template-columns: 1fr;}

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

    /* Visual Design Section */
    .visual-design-section .design-mock {max-width: 500px; width: 100%;}

    /* Feature Section */
    .feat-group-left{margin-top: 40px}

}
@media screen and (max-width:991px) {
    /* Hero Section  */
    .desktop-hide{display: block;}
    .mob-hide{display: none;}
    .banner-sub-title{color: var(--primary-color);border-color: var(--primary-color);}
    .banner-title,.banner-content .btn1 span{color: var(--primary-color);}
    .banner-dis{color: var(--color-black)}
    .banner-content{max-width: 100%;margin-bottom: 80px;flex: 0 0 100%;-webkit-flex: 0 0 100%;}
    .banner-content .btn1{color: var(--primary-color);border-color: var(--primary-color);}
    .banner-content .btn1 svg path{fill: var(--primary-color);}
    .banner-content .btn1:hover svg path{fill: var(--color-white);}
    .banner-content .btn1:hover span{color: var(--color-white);}

    .banner-section::before{display: none;}
    .business-name-card{right: -20px;width: auto;top: 0;}
    .multi-date-card{right: 330px;width: auto;top: 0;}
    .moc-img{transform: translateY(50px);}
    
    .banner-moc-group{right: inherit;top: inherit;position: relative;max-width: 100%;flex: 0 0 100%;-webkit-flex: 0 0 100%;margin-top: 0;margin-left: 0;transform: inherit;}
    .banner-moc-group::before{content: '';position: absolute;left: 0;top: 0;width: calc(100% + 25px);height: 100%;background: linear-gradient(235.07deg, #F47818 33.75%, #FFAC6C 143.04%);transform: skew(0deg, -10deg);border-radius: 50px 0px 0px 50px;z-index: -1;}
    .banner-section{padding: 120px 0;}
    .banner-logo{top: -10px;width: 120px;height: 97px;z-index: -2;}

    /* Project Member Section */
    .member-section{padding-top: 50px;}

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

    /* Feature Section */
    .feat-group-left{margin-top: 60px}
    .feat-group-right{margin-left: -27%}

}
@media screen and (max-width:768px) {
    /* Hero Section */
    .banner-logo{top: 0px; width: 85px;height: 69px;}
    .business-name-card{width: 180px;top: 40px;}
    .multi-date-card{width: 180px;right: 190px;top: 10px;}

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

    /* Project Member Timeline Section  */
    .member-project-item {gap: 30px;}
    .member-project-one {padding: 30px;}
    .member-project-two {padding: 30px 0px 0px;}
    .member-project-two .member-project-item-images {padding: 0px 30px 0px;}
    .member-project-two .member-project-item-content {padding: 0px 30px 30px;}
    .member-project-one .member-project-item-images {padding-inline: 0px; height: unset;}
    .member-project-one .member-project-item-images img{width: 100%;}
    .member-project-item-images {height: 145px;}
    .member-project-two-layer-group .tech-icon { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; padding: 8px;}
    .member-project-two-layer-group .tech-icon img {max-height: 30px;}
    .member-project-two-layer-group {width: 290px; height: 290px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(145px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(145px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(109px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(109px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(65px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(65px) rotate(-600deg); } }

    
    /* 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 .design-mock {max-width: 350px;}

    /* Feature Section */
    .features-group{flex-wrap: wrap;-webkit-flex-wrap: wrap;overflow: hidden;}
    .feat-group-left{flex: 0 0 100%;-webkit-flex: 0 0 100%;margin-top: 0;}
    .feat-group-right{margin-left: 0;margin-top: -34%;}
    .feature-circle-group{margin: 0 auto;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .feat-content{float: inherit;max-width: 100%;text-align: center;margin-top: 30px;}

}
@media screen and (max-width:576px) {
    /* Hero Section */
    .moc-img{transform: translateY(30px);}
    .banner-logo{top: -20px;}
    .business-name-card{width: 120px;top: 10px;}
    .multi-date-card{width: 110px;right: 130px;top: 20px;}

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

    /* Visual Design Section */
    .visual-design-section .design-mock {max-width: 200px;}

     /* Feature Section */
     .feat-content{margin-top: 20px;}
     .feature-circle-group{width: 260px;height: 260px;}
     .feature-circle-group:before{width: 58%;height: 58%;}
     .active-icon{width: 58px;height: 58px;}
}
@media screen and (max-width:400px) {
    /* Hero Section */
    .banner-logo{top: -25px;}

    /* Project Member Timeline Section */
    .member-project-item-images {height: 104px;}
    .member-project-two-layer-group .tech-icon { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;}
    .member-project-two-layer-group .tech-icon img {max-height: 20px;}
    .member-project-two-layer-group {width: 208px; height: 208px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(104px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(104px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(78px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(78px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(47px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(47px) rotate(-600deg); } }

}