/*==========================================
                HERO
==========================================*/

/* .hero {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    background: linear-gradient(135deg, #081A2F 0%, #0F4C81 55%, #1B6CB8 100%);

    display: flex;

    align-items: center;

}

.blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .18;

    animation: floatBlob 12s infinite ease-in-out;

}

.blob1 {

    width: 420px;

    height: 420px;

    background: #D9A404;

    top: -120px;

    right: -120px;

}

.blob2 {

    width: 300px;

    height: 300px;

    background: #4FA8FF;

    bottom: -80px;

    left: -120px;

    animation-delay: 2s;

}

.blob3 {

    width: 220px;

    height: 220px;

    background: #fff;

    right: 35%;

    top: 20%;

    opacity: .06;

}

@keyframes floatBlob {

    50% {

        transform: translateY(35px) scale(1.05);

    }

}

.hero-bg-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .18;

}



.hero-shape-1 {

    width: 450px;

    height: 450px;

    background: #F4C542;

    top: -120px;

    right: -120px;

}



.hero-shape-2 {

    width: 350px;

    height: 350px;

    background: #6BB8FF;

    bottom: -120px;

    left: -120px;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .10);

    backdrop-filter: blur(18px);

    color: #fff;

    font-weight: 600;

    margin-bottom: 30px;

}



.hero-badge i {

    color: #F4C542;

}



.hero-title {

    font-size: 68px;

    line-height: 1.15;

    font-weight: 800;

    color: #fff;

    margin-bottom: 30px;

}



.hero-title span {

    color: #F4C542;

}



.hero-text {

    color: rgba(255, 255, 255, .82);

    font-size: 18px;

    line-height: 1.9;

    max-width: 560px;

    margin-bottom: 40px;

}



.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.btn-hero-primary {

    background: #F4C542;

    color: #081A2F;

    padding: 16px 36px;

    border-radius: 60px;

    font-weight: 700;

    transition: .35s;

}



.btn-hero-primary:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(244, 197, 66, .35);

}



.btn-hero-outline {

    color: #fff;

    border: 2px solid rgba(255, 255, 255, .35);

    padding: 16px 36px;

    border-radius: 60px;

    backdrop-filter: blur(12px);

}



.btn-hero-outline:hover {

    background: #fff;

    color: #0F4C81;

}



.hero-image-wrapper {

    position: relative;

    max-width: 620px;

    margin: auto;

}



.hero-image {

    width: 100%;

    border-radius: 35px;

    box-shadow: 0 35px 70px rgba(0, 0, 0, .35);

}



.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 16px;

    background: rgba(255, 255, 255, .94);

    padding: 18px 22px;

    border-radius: 20px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}



.floating-card i {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #0F4C81;

    color: #fff;

    font-size: 22px;

}



.floating-card h4 {

    margin: 0;

    font-size: 22px;

    color: #0F4C81;

}



.floating-card small {

    color: #666;

}



.card-one {

    top: 10%;

    left: -40px;

}



.card-two {

    right: -30px;

    top: 45%;

}



.card-three {

    bottom: 40px;

    left: 20px;

}



.hero-wave {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    line-height: 0;

}



.hero-wave svg {

    width: 100%;

    height: 130px;

} */



/*=========================
        RESPONSIVE
==========================*/

/* @media(max-width:991px) {

    .hero {

        padding-top: 120px;
        text-align: center;

    }

    .hero-title {

        font-size: 46px;

    }

    .hero-text {

        margin: auto auto 40px;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-image-wrapper {

        margin-top: 70px;

    }

    .card-one,
    .card-two,
    .card-three {

        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 20px auto 0;

    }

}



@media(max-width:576px) {

    .hero-title {

        font-size: 36px;

    }

    .hero-text {

        font-size: 16px;

    }

    .hero-badge {

        font-size: 14px;

    }

} */

/*==============================
        HERO V2
==============================*/

.hero-section {

    position: relative;

    overflow: hidden;

    padding: 180px 0 120px;

    background: linear-gradient(135deg, #F8FBFE, #EEF5FC);

}

.hero-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .25;

}

.hero-shape-1 {

    width: 420px;

    height: 420px;

    background: #4A90E2;

    top: -120px;

    right: -120px;

}

.hero-shape-2 {

    width: 300px;

    height: 300px;

    background: #D9A404;

    bottom: -100px;

    left: -120px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #fff;

    padding: 12px 22px;

    border-radius: 50px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    font-weight: 600;

    color: #124E78;

}

.hero-section h1 {

    font-size: 68px;

    font-weight: 800;

    line-height: 1.1;

    margin: 30px 0;

    color: #162433;

}

.hero-section p {

    font-size: 19px;

    color: #66788A;

    line-height: 1.9;

    max-width: 580px;

}

.hero-buttons {

    display: flex;

    gap: 18px;

    margin: 45px 0;

}

.btn-outline-custom {

    border: 2px solid #124E78;

    color: #124E78;

    padding: 15px 34px;

    border-radius: 50px;

    font-weight: 700;

}

.btn-outline-custom:hover {

    background: #124E78;

    color: #fff;

}

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;

}

.hero-features span {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

}

.hero-features i {

    color: #D9A404;

}

.hero-image-box {

    position: relative;

}

.hero-placeholder {

    height: 600px;

    border-radius: 35px;

    background: linear-gradient(135deg, #E7F0F9, #D7E7F7);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border: 2px dashed #BFD1E3;

}

.hero-placeholder i {

    font-size: 90px;

    color: #124E78;

}

.hero-placeholder h5 {

    margin-top: 20px;

    font-size: 24px;

}

.floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 15px;

    background: #fff;

    padding: 18px 22px;

    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);

}

.floating-card i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #124E78;

    color: #fff;

    font-size: 22px;

}

.card-one {

    top: -160px;

    left: -40px;

}

.card-two {

    bottom: -130px;

    right: -30px;

}

@media (max-width:991px) {

    .hero-section {

        padding: 140px 0 80px;

        text-align: center;

    }

    .hero-section h1 {

        font-size: 48px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-features {

        justify-content: center;

    }

    .card-one,

    .card-two {

        position: relative;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        margin: 20px auto 0;

        width: 90%;

    }

    .hero-placeholder {

        height: 450px;

    }

}

/*==========================================
            SERVICES
==========================================*/

.services-section {

    padding: 120px 0;

    background: #fff;

}

.section-description {

    max-width: 700px;

    margin-top: 20px;

    color: #6B7280;

    font-size: 18px;

    line-height: 1.8;

}

.service-card {

    position: relative;

    overflow: hidden;

    background: #fff;

    border-radius: 28px;

    padding: 45px 35px;

    border: 1px solid #EDF2F7;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .05);

    transition: .45s;

    height: 100%;

}

.service-card::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 0;

    background: linear-gradient(135deg, #124E78, #1F6AA5);

    transition: .45s;

    z-index: 0;

}

.service-card>* {

    position: relative;

    z-index: 2;

}

.service-card:hover::before {

    height: 100%;

}

.service-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 35px 70px rgba(0, 0, 0, .15);

}

.service-icon {

    width: 90px;

    height: 90px;

    border-radius: 24px;

    background: linear-gradient(135deg, #124E78, #1F6AA5);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 38px;

    color: #fff;

    margin-bottom: 30px;

    transition: .4s;

}

.service-card:hover .service-icon {

    background: #fff;

    color: #124E78;

    transform: rotate(-8deg) scale(1.12);

}

.service-card h4 {

    font-weight: 700;

    margin-bottom: 18px;

    transition: .3s;

}

.service-card p {

    color: #6B7280;

    line-height: 1.8;

    transition: .3s;

}

.service-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    color: #124E78;

    font-weight: 700;

    transition: .3s;

}

.service-link i {

    transition: .3s;

}

.service-card:hover h4,

.service-card:hover p,

.service-card:hover .service-link {

    color: #fff;

}

.service-card:hover .service-link i {

    transform: translateX(8px);

}

/*==========================================
            ABOUT SECTION
==========================================*/

.about-section {

    padding: 120px 0;

    background: #F8FBFE;

}

.about-images {

    position: relative;

    min-height: 620px;

}

.about-main-image {

    width: 85%;

    border-radius: 30px;

    object-fit: cover;

    box-shadow: 0 30px 70px rgba(0, 0, 0, .12);

}

.about-small-image {

    position: absolute;

    width: 250px;

    right: 0;

    bottom: 40px;

    border-radius: 25px;

    border: 10px solid #fff;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

}

.experience-box {

    position: absolute;

    left: -20px;

    bottom: 120px;

    background: #0F4C81;

    color: #fff;

    padding: 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(15, 76, 129, .25);

}
.experience-box-one {

    position: absolute;

    left: 400px;

    bottom: 120px;

    background: #0F4C81;

    color: #fff;

    padding: 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(15, 76, 129, .25);

}
.experience-box-two {

    position: absolute;

    left: 400px;

    bottom: 600px;

    background: #0F4C81;

    color: #fff;

    padding: 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(15, 76, 129, .25);

}

.experience-box h2 {

    color: #fff;

    font-size: 48px;

    font-weight: 800;

    margin-bottom: 5px;

}

.experience-box span {

    font-size: 15px;

    opacity: .9;

}

.about-text {

    color: #66788A;

    font-size: 17px;

    line-height: 1.9;

    margin-top: 20px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 600;

    color: #1F2937;

}

.feature-item i {

    color: #D4A017;

    font-size: 22px;

}

.btn-primary-custom {

    background: #0F4C81;

    color: #fff;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: 700;

    transition: .3s;

}

.btn-primary-custom:hover {

    background: #0B2E4F;

    transform: translateY(-4px);

    color: #fff;

}

@media(max-width:991px) {

    .about-images {

        min-height: auto;

        margin-bottom: 60px;

    }

    .about-main-image {

        width: 100%;

    }

    .about-small-image {

        position: relative;

        width: 70%;

        right: auto;

        bottom: auto;

        margin: 30px auto 0;

        display: block;

    }

    .experience-box {

        left: 20px;

        bottom: 20px;

    }

}

/*==========================================
            WHY CHOOSE US
==========================================*/

.why-us-section {

    padding: 120px 0;

    background: #ffffff;

}

.why-card {

    background: #fff;

    padding: 30px;

    border-radius: 22px;

    border: 1px solid #E8EEF5;

    height: 100%;

    transition: .35s ease;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);

}

.why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 60px rgba(18, 78, 120, .15);

}

.why-icon {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    background: linear-gradient(135deg, #124E78, #1F6AA5);

    color: #fff;

    margin-bottom: 20px;

}

.why-card h5 {

    font-weight: 700;

    margin-bottom: 15px;

}

.why-card p {

    color: #6B7280;

    line-height: 1.7;

    margin-bottom: 0;

}

.why-image-wrapper {

    position: relative;

}

.why-image {

    border-radius: 30px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

.experience-card {

    position: absolute;

    bottom: 30px;

    left: -40px;

    background: #124E78;

    color: #fff;

    padding: 25px 35px;

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(18, 78, 120, .25);

}

.experience-card h3 {

    font-size: 42px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 5px;

}

.experience-card span {

    font-size: 15px;

}

@media(max-width:991px) {

    .experience-card {

        position: relative;

        left: 0;

        bottom: 0;

        margin-top: 25px;

    }

}

/*==========================================
            PROJECTS
==========================================*/

.projects-section {

    padding: 120px 0;

    background: #F8FBFE;

}

.project-card {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background: #fff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .4s;

}

.project-card:hover {

    transform: translateY(-10px);

}

.project-large {

    height: 420px;

}

.project-small {

    height: 420px;

}

.project-placeholder {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg, #EDF4FB, #DCEAF7);

    color: #124E78;

}

.project-placeholder i {

    font-size: 70px;

    margin-bottom: 20px;

}

.project-placeholder span {

    font-weight: 700;

    font-size: 22px;

}

.project-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 40px;

    background: linear-gradient(to top,
            rgba(11, 23, 38, .96),
            rgba(11, 23, 38, .45),
            transparent);

    color: #fff;

}

.project-badge {

    align-self: flex-start;

    padding: 8px 18px;

    background: #D9A404;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;

}

.project-overlay h3,
.project-overlay h4 {

    color: #fff;

    margin-bottom: 15px;

}

.project-overlay p {

    color: rgba(255, 255, 255, .85);

    max-width: 520px;

}

.project-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-weight: 700;

    margin-top: 20px;

}

.project-btn i {

    transition: .3s;

}

.project-card:hover .project-btn i {

    transform: translateX(8px);

}

/*==========================================
            IMPACT SECTION
==========================================*/

.impact-section {

    padding: 120px 0;

    background: linear-gradient(135deg, #0B2E4F, #124E78);

}

.impact-section .section-title,
.impact-section .section-description,
.impact-section .section-badge {

    color: #fff;

}

.impact-card {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    transition: .35s ease;

}

.impact-card:hover {

    transform: translateY(-10px);

    background: rgba(255, 255, 255, .14);

}

.impact-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #D9A404;

    color: #fff;

    font-size: 32px;

}

.impact-card h2 {

    color: #fff;

    font-size: 48px;

    font-weight: 800;

    margin-bottom: 10px;

}

.impact-card h5 {

    color: #fff;

    margin-bottom: 15px;

}

.impact-card p {

    color: rgba(255, 255, 255, .8);

    margin-bottom: 0;

    line-height: 1.8;

}