:root{
    --primary-color: #005061;
    --primary-light-color: rgba(233, 151, 0, 0.15);
    --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: #f2a843; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}

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

/* Banner Section */
.banner-section{padding-top: 144px;}
.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); background-color: var(--primary-color); color: var(--color-white); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.banner-bottom{position: relative;}
.banner-bottom-content{max-width: max-content;margin: 0 auto;}
.lanyoce-main img{filter: drop-shadow(0 0 44px rgba(0, 0, 0, 0.25));}
.lanyoce-left{position: absolute;left: -20px;bottom: 16%;animation: moveingY 2.5s linear infinite;border: 2px solid #D9E9FF;border-radius: 12px;overflow: hidden;box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);background-color: var(--color-white);z-index: 1;}
.lanyoce-top-anim{position: absolute;top: -10%;right: 0;animation: moveingY 2s linear infinite;border: 2px solid #D9E9FF;border-radius: 12px;overflow: hidden;background-color: var(--color-white);}
@keyframes moveingY {0%, 100% { transform : translateY(0px);}50% { transform: translateY(20px);} }
.hero-video-area{position: absolute;left: 145px;top: 54px;max-width: 1030px;height: 634px;}
.hero-video-area video{width: 100%;height: 100%;object-fit: cover;}

/* Project Member Section */
.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(0, 80, 97, 0) 0%, rgba(0, 80, 97, 0.2) 50%, rgba(0, 80, 97, 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: #00506126;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: #00506126;
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;}}

/* Feature Section */
.feature-slider{padding-top: 20px;padding-bottom: 20px;}
.features-item{box-shadow: 0 4px 20px rgba(5,84,153,.1);border-radius: 12px;text-align: center;background-color: var(--color-white);padding: 20px;}
.features-item h3{color: var(--primary-color);font-size: var(--font-24);line-height: 32px;}
.features-item p{color: var(--secondary);}
.features-grid-img {display: grid;gap: 30px;margin-top: 40px;}
.features-grid-img img {width: 100%;}


.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: #d5a42a;border-right: none;z-index: -1;}
.solutions-column .project-title-block::after{content: '';position: absolute;left: 0;top: 43px;width: 46px;height: 50%;background: linear-gradient(21deg,rgba(151, 109, 3, 1) 0%, rgba(253, 182, 5, 1) 100%);transform: skew(0deg, 30deg);z-index: -1;}
.solutions-column h3{background: linear-gradient(270deg,rgba(213, 164, 42, 1) 0%, rgba(213, 164, 42, 1) 50%, rgba(253, 182, 5, 1) 100%);}
.solutions-column span{margin-right: -30px;display: inline-block;}

/* Colors Typography Section */
.color-typography-group {display: flex; gap: 60px; flex-direction: column;}
.typography-title {font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 30px;text-align: center;}
.color-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.color-type-name {height: 105px; width: 100%; background-color: var(--color-code); margin-bottom: 20px; border-radius: 12px;}
.color-typography-item {position: relative;}
.typography-font-group {position: relative;text-align: center;width: fit-content;margin: 0 auto;}
.typography-font-type {font-weight: 700; font-size: 190px; line-height: 1; text-transform: capitalize; opacity: 0.05;}
.typography-font-name {margin-bottom: 0px;  position: absolute; top: 50%;transform: translate(-50%, -50%);left: 50%;white-space: nowrap;}
.typography-font-style {word-break: break-all; font-weight: 500; color: var(--secondary);}
.typography-font-weight {display: inline-flex; align-items: center; margin-bottom: 20px; padding: 4px 10px; border: 1px solid var(--blue-border-color); border-radius: 4px; font-size: 20px; line-height: 28px;}
.typography-font-weight li:not(:last-child) {padding-right: 12px; margin-right: 12px; border-right: 1px solid rgb(37 57 92 / 10%);}
.typo-grid{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;}
.typo-grid .typo-grid-item {padding-right: 30px;position: relative;}
.typo-grid .typo-grid-item:before {content: '';width: 1px;position: absolute;height: 100%;right: 0;background-image: linear-gradient(360deg, rgba(0, 80, 97, 0) 0%, rgba(0, 80, 97, 0.5) 50%, rgba(0, 80, 97, 0) 100%);}
.typo-grid .typo-grid-item:last-child:before {display: none;}

/* Timeline Section */
.timeline-area{background: linear-gradient(180deg, #FFFFFF 0.01%, #EFFBFD 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: var(--primary-color);border-left: 4px solid #00B7CA;padding: 10px;width: max-content;color:var(--color-white);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);}


/* Project Challenges Section */
.project-challenges-group{display: grid;grid-template-columns: 1fr;gap: 60px;position: relative;}
.project-challenges-item{border-radius: 18px;display: flex;gap: 50px;padding: 0px 40px;background-color: var(--color-white);box-shadow: 2px 4px 30px 0px rgba(125,131,145,.1019607843);}
.project-challenges-item img{-o-object-fit: contain;object-fit: contain;}
.project-challenges-image{text-align: center;display: flex;align-items: end;flex: 0 0 auto;}
.project-challenges-content{padding-block:40px;display: flex;flex-direction: column;justify-content: 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: 3px;left: 0;border-radius: 50%;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='%23005061'/%3E%3Cpath d='M10.43 14.8208L17.21 8.04078C17.37 7.88078 17.5567 7.80078 17.77 7.80078C17.9833 7.80078 18.17 7.88078 18.33 8.04078C18.49 8.20078 18.57 8.39091 18.57 8.61118C18.57 8.83145 18.49 9.02131 18.33 9.18078L10.99 16.5408C10.83 16.7008 10.6433 16.7808 10.43 16.7808C10.2167 16.7808 10.03 16.7008 9.86999 16.5408L6.42999 13.1008C6.26999 12.9408 6.19319 12.7509 6.19959 12.5312C6.20599 12.3114 6.28945 12.1213 6.44999 11.9608C6.61052 11.8002 6.80065 11.7202 7.02039 11.7208C7.24012 11.7213 7.42999 11.8013 7.58999 11.9608L10.43 14.8208Z' fill='white'/%3E%3C/svg%3E%0A");background-size: 24px; background-repeat: no-repeat; background-position: center;}
.project-challenges-content-list li strong {font-weight: 700 !important}


/* Testimonial, Resources Section */
.testimonial-section .section-inner-head,.resources-section .section-inner-head{margin-left: auto;margin-right: auto;}

/* Visual Design Section */
.visual-area1{z-index: 1;}
.visual-area2{display: grid; grid-template-columns: 1fr 58%; gap: 40px;}
.visual-area2-inner{max-width: 100%;text-align: center;border-radius: 20px;}
.visual-area1 img,.visual-area2 img {width: 100%;}

/* 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(56% - 15px);max-width: calc(56% - 15px);}
.member-project-item-images{flex: 0 0 calc(44% - 15px);max-width: calc(44% - 15px);}
.member-project-one .member-project-item-images{position: relative;z-index: 1;}
.member-project-two{margin-top: 80px;margin-bottom: 0;}
.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);}}

/*-------------------============ 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;}
    .hero-video-area{left: 11%;top: 7%;max-width: 78%;height: 84%;}

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

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

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

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

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

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

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

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

    /* Colors Typography Section */
    .color-typography-group {gap: 100px;}
    .typography-font-weight {font-size: 16px; line-height: 26px;}
    .typography-title {font-size: 20px ; line-height: 28px;}

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

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

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

@media screen and (max-width:1024px) {
    /* Colors Typography Section */
    .color-typography-group {gap: 60px;}
    .color-typography-item:not(:last-child)::after {right: -30px;}
    .color-type-name {height: 80px;}
}

@media screen and (max-width: 991px) {
    /* Banner Section */
    .banner-section {padding-top: 80px;}
    .lanyoce-top-anim{max-width: 250px;top: -15%;}
    .lanyoce-left{max-width: 180px;}

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

    /* Project Challenges Section */
    .project-challenges-group {gap: 40px;}
    .project-challenges-item { gap: 30px; padding-inline: 30px;}
    .project-challenges-content {padding-block: 30px;}
    .project-challenges-image {width: 40%;}

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

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

     /* Colors Typography Section */
    .typo-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
    .typo-grid .typo-grid-item:nth-child(2n)::before {display: none;}
}

@media screen and (max-width: 767px){
    /* Project Challenges Section */
    .project-challenges-item {flex-direction: column; padding: 30px;}
    .project-challenges-content {padding: 0px;}
    .project-challenges-image {width: 100%; justify-content: center;}
    .project-challenges-item-two {flex-direction: column-reverse;}

    /* Feature Section */
    .features-section {background-size: 70%,70%; background-position: left 30%,right 40%}
    .features-group .laptop-moc {max-width: 400px;width: 100%}
}

@media screen and (max-width: 768px){
    /* Banner Section */
    .lanyoce-left{max-width: 130px;}
    .lanyoce-top-anim{max-width: 170px;top: -16%;}

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

    /* Features Section */
    .features-section{background-size: 70%, 70%;background-position: left 16%, right 25%;}
    .features-group .laptop-moc{ max-width: 400px; width: 100%;}

    /* Colors Typography Section */
    .color-typography-group {flex-direction: column; gap: 50px;}
    .colors-side, .typography-side {width: 100%;}
    .color-group {gap: 24px;}
    .color-type-name {margin-bottom: 12px;}

    /* 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) {
    /* Banner Section */
    .banner-bottom-content{max-width: 400px;}
    .lanyoce-left{max-width: 90px;left: -15px;}
    .lanyoce-top-anim{max-width: 130px;top: -26%;right: -15px;}

    /* Feature Section */
    .features-section {background-size: 70%,70%;}
    .features-item {flex: 0 0 calc(100% - 0px);max-width: calc(100% - 0px)}

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

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

    .typo-grid{display: grid; grid-template-columns: 1fr; gap: 30px;}
    .typo-grid .typo-grid-item:nth-child(2n)::before {display: block;}
    .typo-grid .typo-grid-item {padding-right: 0;padding-bottom: 30px;}
    .typo-grid .typo-grid-item:before {content: '';width: 100%;height: 1px;right: 0;bottom: 0;background-image: linear-gradient(90deg, rgba(0, 80, 97, 0) 0%, rgba(0, 80, 97, 0.5) 50%, rgba(0, 80, 97, 0) 100%);}
}