:root{
    --primary-color: #44ca14;
    --primary-color2: #01C847;
    --primary-color-dark: #006524;
    --secondary-color: #F2A843;
    --primary-light-color: #D0FFE1;
    --primary-light-15: #e0fdeb;
    --color-black : #191919;
    --color-black2 : #000000;
}

.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 */
.btn1 {border-color: var(--primary);}
.btn1.green-btn span {color: var(--primary-color);}
.btn1.outline-btn {background-color: transparent;}
.btn1.green-btn::before, .btn1.green-btn::after {background-color: var(--primary-color);}
.btn1.green-btn:hover span{color: var(--color-white);}
.btn1.green-btn:hover svg path{fill: var(--color-white);}

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

/* Banner Section */
.banner-section{padding-top: 144px; overflow: hidden; padding-bottom: 22px;}
.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); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.banner-bottom{background: url('data:image/svg+xml,<svg width="2045" height="759" viewBox="0 0 2045 759" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 527.656C0 499.802 19.1696 475.611 46.2865 469.245L1971.29 17.306C2008.94 8.46559 2045 37.039 2045 75.7178V699C2045 732.137 2018.14 759 1985 759H60C26.8629 759 0 732.137 0 699V527.656Z" fill="url(%23paint0_linear_1449_702)"/><g opacity="0.1"><line x1="468" y1="57" x2="2045" y2="57" stroke="white" stroke-width="4"/><line x1="468" y1="97" x2="2045" y2="97" stroke="white" stroke-width="4"/><line x1="468" y1="137" x2="2045" y2="137" stroke="white" stroke-width="4"/><line x1="468" y1="177" x2="2045" y2="177" stroke="white" stroke-width="4"/><line x1="468" y1="217" x2="2045" y2="217" stroke="white" stroke-width="4"/><line x1="468" y1="257" x2="2045" y2="257" stroke="white" stroke-width="4"/><line x1="468" y1="297" x2="2045" y2="297" stroke="white" stroke-width="4"/><line x1="468" y1="337" x2="2045" y2="337" stroke="white" stroke-width="4"/><line x1="468" y1="377" x2="2045" y2="377" stroke="white" stroke-width="4"/><line x1="468" y1="417" x2="2045" y2="417" stroke="white" stroke-width="4"/><line x1="468" y1="457" x2="2045" y2="457" stroke="white" stroke-width="4"/><line x1="468" y1="497" x2="2045" y2="497" stroke="white" stroke-width="4"/><line x1="468" y1="537" x2="2045" y2="537" stroke="white" stroke-width="4"/><line x1="468" y1="577" x2="2045" y2="577" stroke="white" stroke-width="4"/><line x1="468" y1="617" x2="2045" y2="617" stroke="white" stroke-width="4"/><line x1="468" y1="657" x2="2045" y2="657" stroke="white" stroke-width="4"/><line x1="468" y1="697" x2="2045" y2="697" stroke="white" stroke-width="4"/><line x1="468" y1="737" x2="2045" y2="737" stroke="white" stroke-width="4"/></g><defs><linearGradient id="paint0_linear_1449_702" x1="1953" y1="271.5" x2="-1075" y2="817.5" gradientUnits="userSpaceOnUse"><stop stop-color="%23006524"/><stop offset="1" stop-color="%2354D228" stop-opacity="0.7"/></linearGradient></defs></svg>'); background-repeat: no-repeat;background-size: cover;background-position: 170px 100%;margin-top: 50px;}
.banner-bottom-content{max-width: max-content;margin: 0 auto;z-index: 1;transform: translateY(70px);}
.spotbicho-logo{position: absolute;left: 0;top: -30px;z-index: -1;}
.spotbicho-top-anim{position: absolute;top: -10%;right: -20%;animation: moveingY 2s linear infinite;}
@keyframes moveingY {0%, 100% { transform : translateY(0px);}50% { transform: translateY(20px);} }


/* Project Member Section */
.member-section {background-image: url(../../images/case-studies/spotbicho/member-section-line-shap-bg.webp); background-repeat: no-repeat;position: relative; z-index: 3;background-position: center;}
.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;position: relative;}
.member-item:not(:last-child):after{content: '';position: absolute;right: -30px;top: 0;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="181" viewBox="0 0 40 181" fill="none"><line y1="0.5" x2="40" y2="0.5" stroke="%230E5728"/><line y1="36.5" x2="40" y2="36.5" stroke="%230E5728"/><line y1="72.5" x2="40" y2="72.5" stroke="%230E5728"/><line y1="108.5" x2="40" y2="108.5" stroke="%230E5728"/><line y1="144.5" x2="40" y2="144.5" stroke="%230E5728"/><line y1="180.5" x2="40" y2="180.5" stroke="%230E5728"/></svg>');background-repeat: no-repeat;background-position: center;width: 30px;height: 100%;}
.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;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-15); border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;z-index: -1;}
.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); 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; 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/spotbicho/project-overview-line-shap-bg.webp) no-repeat center;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(84, 210, 40, 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(84, 210, 40, 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(84, 210, 40, 0.8) -39.86%, rgba(255, 245, 238, 0) 58.71%); animation-delay: 0.6s;}
@keyframes scaleIn { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 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; opacity: 0; 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% { opacity: 0; transform: scale(0); } 100% { transform: scale(1);  opacity: 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); } }


/* Features Section */
.features-section{background-image: url(../../images/case-studies/spotbicho/features-bg.webp); background-repeat: repeat-x;background-position: center 320px;}
.features-group-block{display: flex;justify-content: center;flex-wrap: wrap;gap: 30px;max-width: 1125px;margin: 0 auto;}
.features-item {flex: 0 0 calc(33.33% - 20px);max-width: calc(33.33% - 20px);box-shadow: 2px 4px 30px rgba(125, 131, 145, 0.1);border-radius: 10px;padding: 24px;background-color: var(--color-white);}
.features-item h3{color: var(--primary-color); margin-bottom: 12px; font-size: var(--font-24); line-height: 32px;}
.features-item p {color: var(--secondary);}


/* Project Challenges Section */
.project-challenges-section{position: relative; padding-bottom: 50px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1665" height="744" viewBox="0 0 1665 744" fill="none"><path d="M1665 511.965C1665 484.111 1645.83 459.919 1618.71 453.553L-306.286 1.61456C-343.941 -7.22582 -380 21.3476 -380 60.0264V683.309C-380 716.446 -353.137 743.309 -320 743.309H1605C1638.14 743.309 1665 716.446 1665 683.309V511.965Z" fill="url(%23paint0_linear_11152_8216)"/><defs><linearGradient id="paint0_linear_11152_8216" x1="-288" y1="255.809" x2="2740" y2="801.809" gradientUnits="userSpaceOnUse"><stop stop-color="%23006524"/><stop offset="1" stop-color="%2354D228" stop-opacity="0.7"/></linearGradient></defs></svg>');background-repeat: no-repeat;background-size: cover;background-position: calc(100% - 50px) 100%;}
.project-challenges-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; position: relative;z-index: 1;}
.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%, #CEFDDF 0%, rgba(228, 233, 237, 0) 100%); border-radius: 20px; text-align: center;position: relative;}
.project-challenges-image:after{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44.15%, #FFFFFF 100%);}
.project-challenges-image img{z-index: 1;position: relative;}
.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: var(--font-20); 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>');}


/* Project Overview Section  */
.overview-two-column{display: grid; grid-template-columns: 1fr 1fr; gap: 50px;}
.overview-two-column>div,.overview-one-column{border-radius: 60px;overflow: hidden;background-color: #038F34;}
.overview-two-column>div img{width: 100%;}
.overview-one-column{background-color: var(--primary-color-dark);margin: 80px 50px;}
.overview-one-column img{margin-bottom: -20px;}

/* Colors Typography Section */
.typography-top{max-width: 596px;margin: 0 auto;margin-bottom: 45px;}
.font-feature{font-size: 120px;line-height: 1; font-weight: 700; margin-bottom: 34px;}
.font-style{display: flex;justify-content: space-between;align-items: center;}
.font-name {font-weight: 700; color: var(--color-black);}
.weight-font{border: 1px solid rgba(37,57,92,0.1);border-radius: 4px;display: flex;gap: 18px;}
.weight-font span{font-size: var(--font-20); line-height: 28px;padding: 4px 12px;position: relative;}
.weight-font span:not(:last-child):after{content: '';position: absolute;right: -18px;top: 50%;transform: translateY(-50%);width: 18px;height: 1px;background-color: rgba(37,57,92,0.1);}
.middle_line{width: 58px;height: 1px;display: block;background-color: rgba(37,57,92,0.1);}

.typography-colors{max-width: 994px;margin: 0 auto;display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.primary1{background-color: var(--primary-color-dark);}
.primary2{background-color: var(--primary-color2);}
.secondary1{background-color: var(--color-black);}
.secondary2{background-color: var(--color-black2);}
.color-block{aspect-ratio: 1/1;border-radius: 20px;display: flex;align-items: flex-end;justify-content: space-between;padding: 8px 14px;box-shadow: 10px 13px 40px rgba(197, 191, 167, 0.25);gap: 14px;max-width: 170px;}
.color-name{font-size: var(--font-20); line-height: 28px;font-weight: bold;color: var(--color-white);}
.color-code{color: var(--color-black);font-size: var(--font-20); line-height: 28px;font-weight: 500;padding: 8px 19px;border-radius: 20px;background-color: var(--color-white);margin-right: -58px;margin-bottom: 12px;}

/* 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 p {opacity: 1;}
.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;}

/* Screens Section */
.screens-inner { overflow: hidden; width: 100%; position: relative; background-color: #E8FAEC; border-radius: 20px; padding: 100px 0;}
.screens-inner .rtl-swiper {margin-bottom: 30px;}
.screens-inner img{border-radius: 20px;}


/*-------------------============ Responsive CSS ==============--------------------- */
@media screen and (max-width: 1441px) {
    /* Banner Section */
    .banner-section {padding-top: 100px;}
    .banner-bottom {background-position: 130px 100%;}
    .banner-bottom-content {max-width: 700px; transform: translateY(60px);}
    .spotbicho-logo {max-height: 55px; top: -24px;}
    .spotbicho-top-anim {width: 42%;}
    .banner-sub-title {font-size: var(--font-18); line-height: 27px; margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}

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

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

    /* Project Challenges Section */
    .project-challenges-content-title {margin-bottom: 20px;}
    .project-challenges-content-list li {font-size:18px}


    /* Project Overview Section  */
    .overview-two-column>div, .overview-one-column {border-radius: 40px;}
    .overview-one-column {margin: 60px 50px;}

    /* Colors Typography Section */
    .font-feature {margin-bottom: 30px;}
    .typography-top {margin-bottom: 35px;}
    .color-code, .color-name, .weight-font span {font-size: var(--font-18);}

    /* Screens Section */
    .screens-inner { padding: 80px 0;}

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

}

@media screen and (max-width: 1199px) {
     /* Banner Section */
    .banner-sub-title{font-size: var(--font-16); line-height: 26px;}
    .banner-bottom-content {max-width: 500px; transform: translateY(40px);}
    .spotbicho-logo { max-height: 50px; top: -27px;}

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

    /* Features Section */
    .features-item h3{font-size: var(--font-18);}
    .features-group .laptop-moc{ max-width: 700px;}

    /* Project Challenges Section */
    .project-challenges-section {padding-bottom: 30px;  background-position: calc(100% - -120px) 100%;}
    .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;}
    
    /* Project Overview Section  */
    .overview-two-column {gap: 40px;}
    .overview-one-column {margin: 50px 40px;}

    /* Colors Typography Section */
    .font-feature {margin-bottom: 20px;}
    .typography-top {margin-bottom: 25px;}
    .color-code {padding: 5px 19px;}
    .color-code, .color-name, .weight-font span {font-size: var(--font-16); line-height: 27px;}

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

    /* Screens Section */
    .screens-inner { padding: 60px 0;}
}

@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: 1024px) {

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

    
}

@media screen and (max-width: 991px) {
    /* Banner Section */
    .banner-section {padding-top: 80px;}
    .banner-bottom {background-position: 50px 100%;}
    .banner-bottom-content {max-width: 400px; transform: translateY(34px);}
    .spotbicho-logo { max-height: 40px; top: -20px;}

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

    /* Project Challenges Section */
    .member-section{padding-top: 50px;}
    .project-challenges-item {padding: 30px; gap: 30px;}
    
    /* Project Overview Section  */
    .overview-two-column>div, .overview-one-column {border-radius: 30px;}
    .overview-two-column {gap: 30px;}
    .overview-one-column {margin: 40px 30px;}

    /* Colors Typography Section */
    .typography-colors {grid-template-columns: 1fr 1fr;}
    .color-block {margin-inline: auto; width: 100%;}
}

@media screen and (max-width: 768px) {
    /* Project Member Section */
    .member-group {grid-template-columns: 1fr; gap: 60px;}
    .member-item:not(:last-child):after {display: none;}

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

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

    /* Project Challenges Section */
    .project-challenges-group {grid-template-columns: 1fr;}

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


@media screen and (max-width:576px) {
    /* Banner Section */
    .banner-bottom {background-position: 10px 100%;}
    .banner-bottom-content {max-width: 250px; transform: translateY(20px);}
    .spotbicho-logo { max-height: 30px; top: -18px;}
    .spotbicho-top-anim {right: -4%;}

    /* Colors Typography Section */
    .color-code {margin: 0px;}
    .color-block {flex-direction: column; max-width: 100%; align-items: start; padding: 15px;}
    .font-style {flex-direction: column; align-items: center; gap: 15px;}

    /* 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); } }
    
    /* Features Section */
    .features-group-block {margin-top: 20px;}
    .features-item {flex: 0 0 calc(100% - 0px); max-width: calc(100% - 0px);}

    /* Project Overview Section  */
    .overview-two-column>div, .overview-one-column {border-radius: 20px;}
    .overview-two-column {gap: 20px;}
    .overview-one-column {margin: 30px 20px;}

    
    /* Screens Section */
    .screens-inner { padding: 50px 0;}
    .screens-inner .rtl-swiper {margin-bottom: 10px;}
    .screens-inner img{border-radius: 10px;}
}