:root{
    --primary-color: #279EFF;
    --primary-light-color: #279EFF26;
    --secondary-color: #0455A4;
}

.section-inner-head{max-width: 700px;}
.section-inner-head h2{user-select: none;margin-bottom: 10px;}
.sub-heading {font-size: 20px;line-height: 28px;font-weight: 400;padding-bottom: 5px;margin-bottom: 10px;display: inline-flex;position: relative;}
.sub-heading::after {content: ''; height: 3px; width: 32px; border-radius: 2px; background-color: var(--primary-color); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}
.main-content{overflow: hidden;}
.index-1{z-index: 1;}
.index-2{z-index: 2;}

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

/* Banner Section */
.banner-section{padding-top: 144px;position: relative;z-index: 1;}
.banner-section:before{content: '';position: absolute;left: 0;top: 0;background-image: url(../../images/case-studies/wabell/hero-bg.webp);background-size: cover;background-repeat: no-repeat;background-position: left bottom;width: 100%;height: 100%;z-index: -1;}
.banner-content{max-width: 928px;margin: 0 auto;text-align: center;z-index: 2;position: relative;}
.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); background-color: var(--primary-color); color: var(--color-white); box-shadow: 0px 4px 15px 0px #1D190E1A;}

.banner-bottom:before{content: '';position: absolute;left: -10%;top: 10%;width: 489px;height: 489px;background-color: #DBE9FF;border-radius: 50%;opacity: 0.4;filter: blur(140px);}
.banner-bottom:after{content: '';position: absolute;right: 0;bottom: 100%;width: 452px;height: 452px;background-color: #DBE9FF;border-radius: 50%;opacity: 0.2;filter: blur(140px);}
.banner-bottom-content{padding-top: 80px;z-index: 1;}
.banner-bottom-content:after{content: '';position: absolute;left: 50%;top: 50%;width: 100%;max-width: 795px;height: 795px;border-radius: 50%;transform: translate(-50%, -45%);background-color: #DBE9FF;opacity: 0.5;z-index: -1;filter: blur(80px);}
.floorplan-text{position: absolute;left: 50%;bottom: 60px;transform: translateX(-50%);padding: 0 24px;width: 100%;text-align: center;}
.floorplan-text:before,.floorplan-text:after{content: '';position: absolute;left: -8%;bottom: 40%;width: 473px;height: 473px;background-color: #DBE9FF;border-radius: 50%;z-index: -1;opacity: 0.2;filter: blur(70px);}
.floorplan-text:after{left: auto;bottom: 0;right: 0;opacity: 0.3;}
.medicine-left{position: absolute;left: 0;top: 0;z-index: -1;}
.medicine-right{position: absolute;right: 0;top: 0;z-index: -1;}

/* Project Member Section */
.member-section h2{font-size: 0px;line-height: 0;}
.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(39, 158, 255, 0) 0%, rgba(39, 158, 255, 0.2) 50%, rgba(39, 158, 255, 0) 100%);box-shadow: 2px 4px 30px 0px #7D83911A;}
.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: 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-light-color);border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;}
.member-title {color: var(--primary-color);margin: 0;}
.member-dis {color: var(--secondary);}
@keyframes smallScale { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0;}}

/* Project Member Timeline Section  */
.member-project-one>*,.member-project-two>*{flex: 1;}
.project-security{position: absolute;top: -85px;animation: moveingY 2s linear infinite;}
.member-project-item-content h3{margin-bottom: 10px;}
.member-project-item-content p{color: var(--secondary);}
.healthcare-text{position: absolute;right: -10px;bottom: -10px;}
@keyframes moveingY {0%, 100% { transform : translateY(0px);}50% { transform: translateY(20px);}}

/* Features Section */
.features-group{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 30px;}
.features-group-block{flex: 0 0 calc(60% - 15px);max-width: calc(60% - 15px);}
.features-group-img{flex: 0 0 calc(40% - 15px);max-width: calc(40% - 15px);}
.features-item{border: 1px solid #E7F4FF;border-radius: 12px;padding: 20px;box-shadow: 0px 4px 20px 0px #0554991A;
transition: all 350ms ease-in-out;background-color: var(--color-white); cursor: pointer;}
.features-item:hover{border-right-width: 4px;border-right-color: var(--primary-color);}
.features-item + .features-item{margin-top: 30px;}
.features-item h3{color: var(--primary-color);font-size: var(--font-24);line-height: 32px;margin-bottom: 0;}
.features-item p{color: var(--secondary);margin-top: .5rem;}
.features-circle{animation: moveingRotate 4s linear infinite;transform-origin: center;}
@keyframes moveingRotate {0% { transform : rotate(0deg);}100% { transform: rotate(360deg);}}
.features-group-phone{position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;text-align: center;}
.features-group-phone:after{content: '';position: absolute;left: 0;bottom:-15px;width: 100%;height: 16px;background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);border-radius: 50%;opacity: 0.3;filter: blur(7px);}
.features-medicine{position: absolute;right: -10px;top: -60px;}

/* Projects Section */
.projects-section{background: linear-gradient(170.71deg, #FFFFFF 7.37%, #279EFF 388.95%);padding: 100px 0;z-index: 1;}
.projects-section::after{content: '';position: absolute;left: calc(50% - 10px);top: 50%;width: 20px;height: calc(100% - 200px);transform: translate(-50%, -50%);background-color: transparent;border-bottom-right-radius: 100%;border-top-right-radius: 100%;box-shadow: 10px 0px 20px 0px rgba(40, 40, 41, 0.25);z-index: -2;}
.projects-section::before{content: '';position: absolute;left: calc(50% - 50px);top: 50%;width: 100px;height: 100%;transform: translate(-50%, -50%);background: linear-gradient(170.71deg, #FFFFFF 7.37%, #279EFF 388.95%);z-index: -1;}
.projects-section h2{font-size: 0px;line-height: 0;}
.project-column{display: flex;align-items: center;}
.project-challenges-list{flex: 1;}
.project-challenges-list li{position: relative;background-color: var(--color-white);border-radius: 20px;padding: 10px 20px 10px 64px;margin-top: 20px;box-shadow: 0 4px 20px rgba(5, 84, 153, .1);}
.project-challenges-list li:first-child{margin-top: 0;}
.project-challenges-list li:before{content: '';position: absolute;left: 20px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='url(%23paint0_linear_21589_64352)'/%3E%3Cpath d='M9.83038 14.2212L16.6104 7.44117C16.7704 7.28117 16.957 7.20117 17.1704 7.20117C17.3837 7.20117 17.5704 7.28117 17.7304 7.44117C17.8904 7.60117 17.9704 7.79131 17.9704 8.01157C17.9704 8.23184 17.8904 8.42171 17.7304 8.58117L10.3904 15.9412C10.2304 16.1012 10.0437 16.1812 9.83038 16.1812C9.61705 16.1812 9.43038 16.1012 9.27038 15.9412L5.83038 12.5012C5.67038 12.3412 5.59358 12.1513 5.59998 11.9316C5.60638 11.7118 5.68985 11.5217 5.85038 11.3612C6.01091 11.2006 6.20105 11.1206 6.42078 11.1212C6.64051 11.1217 6.83038 11.2017 6.99038 11.3612L9.83038 14.2212Z' fill='%23279EFF'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_21589_64352' x1='12.5636' y1='0.00359503' x2='29.532' y2='103.782' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='%23279EFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");}
.project-column h3{color: var(--color-white);padding: 10px 15px;margin: 0;}
.challenges-column .project-title-block{margin-right: -58px;position: relative;padding-left: 60px;}
.challenges-column .project-title-block::before{content: '';position: absolute;right: calc(100% - 61px);top: -20px;border: 50px solid transparent;border-right-color: #279EFF;border-left: none;z-index: -1;}
.challenges-column .project-title-block::after{content: '';position: absolute;right: 0;top: -14px;width: 46px;height: 50%;background: #004A85;transform: skew(0deg, 30deg);z-index: -1;}
.challenges-column h3{background: #279EFF;}
.challenges-column span{margin-left: -30px;display: inline-block;}

.solutions-column{padding-top: 100px;}
.solutions-column .project-title-block{margin-left: -58px;position: relative;padding-right: 60px;}
.solutions-column .project-title-block::before{content: '';position: absolute;left: calc(100% - 61px);top: -20px;border: 50px solid transparent;border-left-color: #1E293B;border-right: none;z-index: -1;}
.solutions-column .project-title-block::after{content: '';position: absolute;left: 0;top: 43px;width: 46px;height: 50%;background:#64748B;transform: skew(0deg, 30deg);z-index: -1;}
.solutions-column h3{background: #1E293B;}
.solutions-column span{margin-right: -30px;display: inline-block;}

/* Colors Typography Section */
.font-style{position: relative;display: flex;justify-content: center;align-items: center;padding: 28px 0;}
.font-style:before,.font-style:after{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 1px;background: linear-gradient(90deg, rgba(39, 158, 255, 0) 3.25%, rgba(39, 158, 255, 0.2) 52.77%, rgba(39, 158, 255, 0) 100%);}
.font-style:after{top: inherit;bottom: 0;}

.font-name{padding-right: 60px;text-align: center;}
.font-name span{font-size: 100px;line-height: 100px;font-weight: bold;}
.font-name p{font-weight: bold;}
.font-typo{padding-left: 60px;}

.weight-font{display: flex;flex-direction: column;gap: 10px;padding-right: 60px;padding-left: 60px;position: relative;}
.weight-font:before,.weight-font:after{content: '';position: absolute;left: 0;top: 0;width: 1px;height: 100%;background: linear-gradient(0deg, rgba(39, 158, 255, 0) 0%, rgba(39, 158, 255, 0.2) 50%, rgba(39, 158, 255, 0) 100%);}
.weight-font:after{left: inherit;right: 0;}
.weight-font span{font-size: var(--font-20); line-height: 28px;text-align: center;padding-left: 10px;padding-right: 10px;}

.typography-colors{display: grid; grid-template-columns: repeat(4, 1fr); gap: 65px;padding-right: 45px;}
.primary1{background-color: var(--primary-color);}
.primary2{background-color: #FFFFFF;}
.secondary1{background-color: #1E293B;}
.secondary2{background-color: #64748B;}
.color-block{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;min-height: 130px;}
.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: -45px;margin-bottom: 12px;}
section.color-typography-section.section-spacing {padding: 100px 0;}
.color-typography-section .typography-top {text-align: center;max-width: 742px;margin: auto auto 60px;}


/* Timeline Section */
.timeline-area{background: linear-gradient(0deg,rgba(213, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);border-radius: 20px;display: flex;flex-wrap: wrap;padding: 20px;}
.timeline-details{border-right: 2px dashed #A1A1A1;min-height: calc(100% - 96px);position: relative;padding-top: 40px;padding-bottom: 46px;}
.timeline-block:last-child .timeline-details{border-right: none;}
.timeline-block:first-child .timeline-details{border-left: 2px dashed #A1A1A1;}
.timeline-details:after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%);width: 2px;height: 100%;border-right: 2px dashed #A1A1A1;z-index: 0;}
.timeline-block{max-width: 20%;flex: 0 0 20%;}
.timeline-block h3{font-size: var(--font-20);line-height: 28px;font-weight: 500;margin-bottom: 20px;text-align: center;}
.timeline-details + h3{margin-bottom: 0;margin-top: 20px;}
.timeline-details p{background-color: #D2E9FF;border-left: 4px solid var(--primary-color);padding: 10px;width: max-content;color: rgba(25, 25, 25, 0.8);font-weight: 500;margin-left: -2px;margin-bottom: 0;z-index: 1;position: relative;}
.timeline-details p + p{margin-top: 30px;margin-left: calc(50% - 1px);}

.timeline-block:nth-child(2) .timeline-details{padding-top: 120px;}
.timeline-block:nth-child(3) .timeline-details{padding-top: 198px;}
.timeline-block:nth-child(4) .timeline-details{padding-top: 354px;}
.timeline-block:nth-child(5) .timeline-details{padding-top: 432px;}

.timeline-block:nth-child(4) .timeline-details p{margin-left: calc(50% - 1px);}
.timeline-block:nth-child(5) .timeline-details p{margin-left: calc(50% - 1px);}

/* Visual Design Section */
.visual-area1{z-index: 1;background: #F3FAFF;box-shadow: 0px 0px 28px 0px #0C14381A;}
.visual-area2{display: grid; grid-template-columns: 1fr 1fr; gap: 70px;}
.visual-area2-inner{max-width: 100%;text-align: center;box-shadow: 0px 0px 28px 0px #0C14381A;background: #F3FAFF;border-radius: 20px;}


/* Testimonial, Resources Section */
.testimonial-section .section-inner-head,.resources-section .section-inner-head{margin-left: auto;margin-right: auto;}
.testimonial-section .sub-heading::after{background-color: #F2A843;}

/* Project Member Timeline Section  */
.member-project-item-content h3{margin-bottom: 10px;}
.member-project-item-content p{color: var(--secondary);}
.member-project-one,.member-project-two{display: flex;flex-wrap: wrap;gap: 30px;align-items: center;}
.member-project-item-content{flex: 0 0 calc(50% - 15px);max-width: calc(50% - 15px);}
.member-project-item-images{flex: 0 0 calc(50% - 15px);max-width: calc(50% - 15px);}
.member-project-one .member-project-item-images{position: relative;z-index: 1;}
.member-project-two{margin-top: 80px;margin-bottom: 50px;}
.member-project-two .member-project-item-images{display: flex;}
.technology-list{flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.technology-list-column>span{width: 48px;height: 48px;background-color: var(--color-white);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 4px rgba(0, 0, 0, .1);animation: moveingX 2s linear infinite;margin-left: auto;}
.technology-list-column{z-index: 1;}
.technology-list-column:first-child{margin-top: -48px;margin-right: 12%;}
.technology-list-column:first-child:after{left: -145px;width: calc(100% + 100px);height: 24px;border-left: 2px dotted #275574;border-top-left-radius: 8px;}
.technology-list-column:last-child{margin-bottom: -48px;margin-right: 12%;}
.technology-list-column:last-child:after{left: -145px;width: calc(100% + 100px);height: 24px;border-left: 2px dotted #275574;border-bottom-left-radius: 8px;border-top: none;border-bottom: 2px dotted #275574;top: 0;}
.technology-list-column:nth-child(2),.technology-list-column:nth-child(4){margin-right: 30%;}
.technology-list-column:after{content: '';position: absolute;left: -20px;top: 24px;width: calc(100% - 20px);height: 2px;border-top: 2px dotted #275574;z-index: -1;}
.technology-list-column:nth-child(3):after{left: 10px;width: calc(100% - 50px);}
@keyframes moveingX {0%, 100% { transform : translateX(0px);}50% { transform: translateX(-20px);}}

.resources-section .sub-heading::after,
.features-section .sub-heading::after{background-color: #F2A843;}

/*-------------------============ Responsive CSS ==============--------------------- */
@media screen and (max-width: 1441px) {
    /* Banner Section */
    .banner-section {padding-top: 100px;}
    .banner-sub-title {font-size: var(--font-18);line-height: 27px;margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}

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

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

    /* Projects Section */
    .project-column h3{font-size: var(--font-20); line-height: 28px;}
    .challenges-column .project-title-block::before,.solutions-column .project-title-block::before{top: -24px;}
    .challenges-column .project-title-block::after{height: 60%;}
    .solutions-column .project-title-block::after{top: 32px;height: 60%;}

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

    /* Visual Design Section */
    .visual-top1{left: 4%;}
    .visual-top2{right: 5%;}
    .visual-top3{left: 0;}
    .visual-top4{right: 0;}
}

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

    /* Project Member Section */
    .member-item {gap: 10px;}
    .member-icon{width: 60px; height: 60px; margin: -30px 0px 5px; padding: 7px;}
    .member-section:before,.member-section:after{background-size: contain;}

    /* Project Member Timeline Section  */
    .project-security{top: -95px;}

    /* Projects Section */
    .project-challenges-list li{padding: 10px 15px 10px 45px}
    .project-challenges-list li:before{width: 20px;height: 20px;background-size: contain;left: 15px;}

    /* Colors Typography Section */
    .color-name,.color-code,.weight-font span{font-size: var(--font-16);line-height: 26px;}

    /* Visual Design Section */
    .visual1{max-width: 70%;}
}

@media screen and (max-width:1100px) {
    /* Project Member Section */
    .member-group {grid-template-columns: 1fr 1fr; gap: 60px 30px;}

     /* Colors Typography Section */
    .typography-colors{gap: 30px;}
}

@media screen and (max-width: 991px) {
    /* Banner Section */
    .banner-section {padding-top: 80px;}
    .banner-bottom-content:after{width: 100%;height: 100%;}
    .floorplan-main{max-width: 80%;}

     /* Project Member Timeline Section  */
    .member-project-two{margin-top: 40px;margin-bottom: 0;gap: 80px;}
    .member-project-item-content,.member-project-item-images{flex: 0 0 100%;max-width: 100%;}
    .member-project-two .member-project-item-images{order: 1;}

     /* Features Section */
    .features-group{flex-wrap: wrap;}
    .features-group-img{margin-top: 70px;}
    .features-group-block,.features-group-img{flex: 0 0 100%;max-width: 100%;}
    .features-group-phone{position: inherit;left: inherit;top: inherit;transform: inherit;max-width: fit-content;margin: 0 auto;}
    .features-circle-outer{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;}

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

    /* Visual Design Section */
    .visual1{max-width: 70%;}
    .visual-top1{left: 3%;max-width: 190px;}
    .visual-top2{right: 5%;bottom: 14%;max-width: 200px;}
    .visual-top3{left: 0;top: 0;max-width: 220px;}
    .visual-top4{right: 0;top: 10%;}

    .projects-section{padding-top: 0;}
}

@media screen and (max-width: 768px){
    /* Banner Section */
    .banner-section:after{background-size: 50%;}
    .banner-bottom:before,.floorplan-text:before, .floorplan-text:after{display: none;}
    .banner-bottom-content{padding-top: 40px;}
    .medicine-left{opacity: 0;}
    .floorplan-text{bottom: 10px;}

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

    /* Projects Section */
    .projects-section::before,.projects-section::after,.challenges-column .project-title-block::after,.solutions-column .project-title-block::after{display: none;}
    .project-column{flex-wrap: wrap;}
    .project-challenges-list{width: 100%;}
    .challenges-column .project-title-block{margin-right: 0;width: 100%;order: -1;padding-left: 0;padding-bottom: 30px;}
    .solutions-column .project-title-block{margin-left: 0;width: 100%;padding-right: 0;padding-bottom: 30px;}
    .challenges-column span,.solutions-column span{margin-left: 0;margin-right: 0;display: block;text-align: center;}
    .challenges-column .project-title-block::before,.solutions-column .project-title-block::before{border-width: 30px;transform: rotate(-90deg);right: inherit;transform: rotate(-90deg) translateX(-50%);left: calc(50% - 15px);top: 8px;}
    .solutions-column .project-title-block::before{transform: rotate(90deg) translateX(-50%);top: 38px;}
    .solutions-column{padding-top: 50px;}

    /* Colors Typography Section */
    .typography-colors{grid-template-columns: repeat(2, 1fr);}
    .weight-font{padding-left: 20px;padding-right: 20px;}
    .font-name{padding-right: 20px;}
    .font-typo{padding-left: 20px;}
    .font-name span{font-size: 70px;line-height: 70px;}

    /* Timeline Section */
    .timeline-details{min-height: auto;border-left: 2px dashed #A1A1A1;padding-bottom: 40px;}
    .timeline-block{max-width: 100%;flex: 0 0 100%;}
    .timeline-block:not(:last-child){border-bottom: 1px solid rgb(37 57 92 / 10%);padding-bottom: 30px;margin-bottom: 30px;}
    .timeline-details p{max-width: inherit;}
    .timeline-details p + p{width: calc(100% - 49%);}
    .timeline-block:nth-child(4) .timeline-details p,.timeline-block:nth-child(5) .timeline-details p{margin-left: -2px;}
    .timeline-block:nth-child(2) .timeline-details,.timeline-block:nth-child(3) .timeline-details,.timeline-block:nth-child(4) .timeline-details,.timeline-block:nth-child(5) .timeline-details{padding-top: 40px;}
    .timeline-block:last-child .timeline-details{border-right: 2px dashed #A1A1A1;}
    .timeline-block h3{margin-bottom: 15px;}
    .timeline-details + h3{margin-top: 15px;margin-bottom: 0}

    /* Visual Design Section */
    .visual-area2{gap: 40px; grid-template-columns: 1fr;} 
    .visual1{max-width: 70%;}
    .visual-top1{left: 3%;max-width: 140px;}
    .visual-top2{right: 5%;bottom: 14%;max-width: 150px;}
    .visual-top3{left: 0;top: 0;max-width: 170px;}
    .visual-top4{right: 0;top: 6%;max-width: 140px;}
}

@media screen and (max-width: 576px) {
     /* Project Member Timeline Section  */
    .member-project-two{gap: 30px;}
    .member-project-two .member-project-item-images{flex-wrap: wrap;}
    .technology-list{flex: 0 0 100%;flex-direction: row;max-width: 293px;margin: 0 auto 50px;}
    .member-project-two .member-project-item-images>img{margin: 0 auto;order: 1;}
    .technology-list-column:first-child,.technology-list-column:last-child{margin-top: 30%;margin-bottom: 0;}
    .technology-list-column>span{animation: moveingY 2s linear infinite;}
    .technology-list-column:after{width: 2px;height: 100%;left: 24px;top: 45px;border-top: none;border-left: 2px dotted #275574;}
    .technology-list-column:nth-child(3){margin-top: 16%;}
    .technology-list-column:nth-child(3):after{left: 24px;}
    .technology-list-column:first-child:after{width: 24px;height: calc(100% + 40px);left: 24px;border-top-left-radius: 0;}
    .technology-list-column:last-child:after{left: 0;width: 24px;height: calc(100% + 40px);border-bottom-left-radius: 0;border-left: none;border-right: 2px dotted #275574;border-bottom: none;top: 45px}
    .technology-list-column:nth-child(2):after,.technology-list-column:nth-child(4):after{height: calc(100% + 20px);}
    .technology-list-column:first-child,.technology-list-column:nth-child(2), .technology-list-column:nth-child(4),.technology-list-column:last-child{margin-right: 0;}

     /* Colors Typography Section */
    .typography-colors{padding-right: 0;gap: 20px;}
    .color-block{flex-direction: column;max-width: 100%;align-items: start;padding: 15px;}
    .color-code{margin: 0;}
    .font-style{flex-wrap: wrap;}
    .font-style>*{flex: 0 0 100%;max-width: 100%;padding-left: 0;padding-right: 0;text-align: center;}
    .weight-font{padding: 20px 0;margin: 20px 0;}
    .weight-font:before,.weight-font:after{width: 100%;height: 1px;background: linear-gradient(90deg, rgba(41, 85, 151, 0) 0%, rgba(41, 85, 151, 0.2) 50%, rgba(41, 85, 151, 0) 100%);}
    .weight-font:after{top: inherit;bottom: 0;}


    /* Visual Design Section */
    .visual-top1,.visual-top4{display: none;}
    .visual-top2{max-width: 70px;border-radius: 10px;}
    .visual-top3{max-width: 90px;border-radius: 10px;}
}