/* =========================================================
   CONSULTANCY SERVICES
========================================================= */
.banner {
            height: 70vh;
            min-height: 500px;
            position: relative;

            background-image:
                linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                url("https://images.pexels.com/photos/4715453/pexels-photo-4715453.jpeg?_gl=1*1wvsk9f*_ga*NTI5NjUyMTI5LjE3ODU2NjYyNjY.*_ga_8JE65Q40S6*czE3ODcxMjY0ODgkbzkkZzEkdDE3ODcxMjcyMjckajYwJGwwJGgw");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .banner-content h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: 300;
            margin-bottom: 15px;
        }

        .banner-content p {
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-bottom: 0;
        } 

        /* Down Arrow */
         .down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-decoration: none;
            font-size: 40px;
            line-height: 1;

            animation: bounce 1.5s infinite;
        }

        .down-arrow:hover {
            color: #fff;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -12px);
            }

            60% {
                transform: translate(-50%, -6px);
            }
        } 




.bannerlab {
            height: 70vh;
            min-height: 500px;
            position: relative;

            background-image:
                linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                url("https://images.pexels.com/photos/8325948/pexels-photo-8325948.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .banner-contentlab h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: 300;
            margin-bottom: 15px;
        }

        .banner-contentlab p {
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-bottom: 0;
        } 

        /* Down Arrow */
         .down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-decoration: none;
            font-size: 40px;
            line-height: 1;

            animation: bounce 1.5s infinite;
        }

        .down-arrow:hover {
            color: #fff;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -12px);
            }

            60% {
                transform: translate(-50%, -6px);
            }
        } 









.bannerteam {
            height: 70vh;
            min-height: 500px;
            position: relative;

            background-image:
                linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                url("https://images.pexels.com/photos/8191968/pexels-photo-8191968.jpeg");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .banner-contentteam h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: 300;
            margin-bottom: 15px;
        }

        .banner-contentteam p {
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-bottom: 0;
        } 

        /* Down Arrow */
         .down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-decoration: none;
            font-size: 40px;
            line-height: 1;

            animation: bounce 1.5s infinite;
        }

        .down-arrow:hover {
            color: #fff;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -12px);
            }

            60% {
                transform: translate(-50%, -6px);
            }
        } 




.bannerContact {
            height: 70vh;
            min-height: 500px;
            position: relative;

            background-image:
                linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                url("https://images.pexels.com/photos/8232069/pexels-photo-8232069.jpeg");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .banner-contentContact h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: 300;
            margin-bottom: 15px;
        }

        .banner-contentContact p {
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-bottom: 0;
        } 

        /* Down Arrow */
         .down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-decoration: none;
            font-size: 40px;
            line-height: 1;

            animation: bounce 1.5s infinite;
        }

        .down-arrow:hover {
            color: #fff;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -12px);
            }

            60% {
                transform: translate(-50%, -6px);
            }
        } 











.bannerClient {
            height: 70vh;
            min-height: 500px;
            position: relative;

            background-image:
                linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                url("../images/probanner.jpg");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
        }

        .banner-contentClient h1 {
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: 300;
            margin-bottom: 15px;
        }

        .banner-contentClient p {
            font-size: clamp(1rem, 2vw, 1.4rem);
            margin-bottom: 0;
        } 

        /* Down Arrow */
         .down-arrow {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-decoration: none;
            font-size: 40px;
            line-height: 1;

            animation: bounce 1.5s infinite;
        }

        .down-arrow:hover {
            color: #fff;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -12px);
            }

            60% {
                transform: translate(-50%, -6px);
            }
        } 
























/* =========================================================
   CONSULTANCY HERO BANNER
========================================================= */

.consultancy-banner {
    position: relative;

    width: 100%;
    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #203a43;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.banner-bg {
    position: absolute;

    inset: 0;

    background-image:
                url("https://images.pexels.com/photos/4715453/pexels-photo-4715453.jpeg?_gl=1*1wvsk9f*_ga*NTI5NjUyMTI5LjE3ODU2NjYyNjY.*_ga_8JE65Q40S6*czE3ODcxMjY0ODgkbzkkZzEkdDE3ODcxMjcyMjckajYwJGwwJGgw");

    background-size: cover;
    background-position: center;

    transform: scale(1.03);

    animation: bannerZoom 12s ease-in-out infinite alternate;
}


/*
   If your image is inside css/images instead,
   use:

   background-image:
       url("../images/consultancy-banner.jpg");
*/

@keyframes bannerZoom {

    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.10);
    }

}


/* =========================================================
   OVERLAY
========================================================= */

.banner-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15, 48, 57, 0.96) 0%,
            rgba(20, 67, 72, 0.88) 35%,
            rgba(8, 121, 189, 0.55) 70%,
            rgba(32, 58, 67, 0.72) 100%
        );

    z-index: 1;
}


/* Green tint */

.banner-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(69, 169, 109, 0.18),
            transparent 45%
        );
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.banner-circle {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.12);

    z-index: 2;

    pointer-events: none;
}

.banner-circle-one {

    width: 520px;
    height: 520px;

    right: -230px;
    top: -180px;
}

.banner-circle-two {

    width: 350px;
    height: 350px;

    right: -120px;
    bottom: -170px;

    border-color:
        rgba(69, 169, 109, 0.25);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.banner-content {

    position: relative;

    z-index: 3;

    width: min(1100px, 90%);

    text-align: center;

    margin-top: -30px;

    animation:
        bannerContent 1s ease forwards;
}

@keyframes bannerContent {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   LABEL
========================================================= */

.banner-label {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    margin-bottom: 22px;

    color: #8fe0aa;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}

.banner-label span {

    width: 35px;
    height: 1px;

    background: #45a96d;
}


/* =========================================================
   HEADING
========================================================= */

.banner-content h1 {

    margin: 0;

    max-width: 950px;

    margin-left: auto;
    margin-right: auto;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 78px);

    line-height: 1.08;

    font-weight: 300;

    letter-spacing: -2px;
}

.banner-content h1 strong {

    display: block;

    color: #72d494;

    font-weight: 700;

    margin-top: 7px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.banner-content p {

    max-width: 700px;

    margin: 25px auto 32px;

    color: rgba(255,255,255,0.85);

    font-size: 17px;

    line-height: 1.8;

    font-weight: 300;
}


/* =========================================================
   BUTTONS
========================================================= */

.banner-buttons {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


.banner-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 27px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        all 0.35s ease;
}


/* Primary */

.banner-btn.primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #45a96d,
            #0879bd
        );

    box-shadow:
        0 10px 30px
        rgba(8, 121, 189, 0.25);
}

.banner-btn.primary i {

    transition:
        transform 0.3s ease;
}

.banner-btn.primary:hover {

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(8, 121, 189, 0.35);
}

.banner-btn.primary:hover i {

    transform: translateX(5px);
}


/* Secondary */

.banner-btn.secondary {

    color: #ffffff;

    border: 1px solid
        rgba(255,255,255,0.4);

    background:
        rgba(255,255,255,0.06);

    backdrop-filter: blur(8px);
}

.banner-btn.secondary:hover {

    color: #203a43;

    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-3px);
}


/* =========================================================
   BOTTOM SERVICE STRIP
========================================================= */

.banner-bottom {

    position: absolute;

    z-index: 3;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: min(1100px, 90%);

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(255,255,255,0.18);
}

.banner-bottom-item {

    min-height: 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    color:
        rgba(255,255,255,0.85);

    font-size: 12px;

    letter-spacing: 0.5px;

    border-right:
        1px solid
        rgba(255,255,255,0.12);
}

.banner-bottom-item:last-child {
    border-right: none;
}

.banner-bottom-item i {

    color: #72d494;

    font-size: 17px;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.banner-scroll {

    position: absolute;

    right: 35px;

    bottom: 120px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color:
        rgba(255,255,255,0.7);

    font-size: 9px;

    letter-spacing: 2px;

    writing-mode: vertical-rl;

    transition: color 0.3s ease;
}

.banner-scroll:hover {
    color: #ffffff;
}

.scroll-line {

    width: 1px;
    height: 55px;

    background:
        rgba(255,255,255,0.25);

    position: relative;

    overflow: hidden;
}

.scroll-line div {

    position: absolute;

    width: 100%;
    height: 25px;

    background: #72d494;

    top: -25px;

    animation:
        scrollAnimation 2s
        ease-in-out infinite;
}

@keyframes scrollAnimation {

    0% {
        top: -25px;
    }

    50% {
        top: 55px;
    }

    100% {
        top: 55px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .consultancy-banner {
        min-height: 570px;
    }

    .banner-content h1 {
        font-size: 52px;
    }

    .banner-bottom {
        width: 92%;
    }

    .banner-bottom-item {
        font-size: 11px;
    }

    .banner-scroll {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .consultancy-banner {
        min-height: 620px;
    }

    .banner-bg {
        background-position: 60% center;
    }

    .banner-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(15,48,57,0.90),
                rgba(15,48,57,0.82)
            );
    }


    .banner-content {

        width: 90%;

        margin-top: -55px;
    }


    .banner-label {

        font-size: 9px;

        letter-spacing: 2px;

        gap: 8px;
    }

    .banner-label span {
        width: 20px;
    }


    .banner-content h1 {

        font-size: 39px;

        line-height: 1.15;

        letter-spacing: -1px;
    }


    .banner-content p {

        font-size: 14px;

        line-height: 1.7;

        margin: 20px auto 25px;
    }


    .banner-buttons {

        flex-direction: column;

        width: 100%;
    }

    .banner-btn {

        width: 100%;

        max-width: 280px;
    }


    /* Bottom strip */

    .banner-bottom {

        width: 100%;

        grid-template-columns:
            repeat(3, 1fr);
    }

    .banner-bottom-item {

        min-height: 68px;

        flex-direction: column;

        gap: 5px;

        padding: 5px;

        text-align: center;

        font-size: 9px;
    }

    .banner-bottom-item i {
        font-size: 16px;
    }


    .banner-circle-one {

        width: 350px;
        height: 350px;

        right: -200px;
        top: -100px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .consultancy-banner {
        min-height: 600px;
    }

    .banner-content h1 {
        font-size: 34px;
    }

    .banner-content p {
        font-size: 13px;
    }

    .banner-bottom-item {
        font-size: 8px;
    }

}





.consultancy-services {
    position: relative;
    padding: 110px 0;
    background: #f5f8f7;
    overflow: hidden;
}

/* Background decoration */

.consultancy-services::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(69, 169, 109, 0.08);
    border-radius: 50%;
    top: -180px;
    left: -180px;
}

.consultancy-services::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(8, 121, 189, 0.06);
    border-radius: 50%;
    right: -150px;
    bottom: -150px;
}

.consultancy-services .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.services-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.services-heading span {
    display: inline-block;
    color: #45a96d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.services-heading h2 {
    margin: 0 0 15px;
    color: #0068ad;
    font-size: 40px;
    font-weight: 700;
}

.services-heading p {
    margin: 0;
    color: #667579;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN TABS
========================================================= */

.service-tabs {
    max-width: 850px;
    margin: 0 auto 55px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    background: #ffffff;

    padding: 8px;

    border-radius: 60px;

    box-shadow:
        0 15px 45px rgba(32, 58, 67, 0.10);
}

.service-tab {
    position: relative;

    border: none;
    outline: none;

    background: transparent;

    padding: 20px 30px;

    border-radius: 50px;

    color: #203a43;

    font-family: "Poppins", sans-serif;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    transition: all 0.35s ease;
}

.service-tab i {
    font-size: 21px;
}

.service-tab:hover {
    color: #0879bd;
}

.service-tab.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #45a96d 0%,
            #0879bd 100%
        );

    box-shadow:
        0 10px 25px rgba(8, 121, 189, 0.25);
}


/* =========================================================
   SERVICE PANEL
========================================================= */

.service-panel {
    display: none;

    animation: serviceFade 0.5s ease;
}

.service-panel.active {
    display: block;
}

@keyframes serviceFade {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   PANEL HEADING
========================================================= */

.service-panel-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 35px;

    padding-bottom: 25px;

    border-bottom: 1px solid #dce6e4;
}

.panel-label {
    color: #0879bd;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.service-panel-heading h3 {
    margin: 7px 0 0;

    color: #203a43;

    font-size: 30px;

    font-weight: 700;
}

.service-panel-heading p {
    max-width: 500px;

    margin: 0;

    color: #6b797d;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.service-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card {

    position: relative;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(32, 58, 67, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

    border: 1px solid rgba(32, 58, 67, 0.05);
}

.service-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(32, 58, 67, 0.15);
}


/* =========================================================
   SERVICE IMAGE
========================================================= */
/* =========================================================
   SERVICE CARD IMAGE - PERFECT FIT
========================================================= */

.service-image {
    width: 100%;
    height: 280px;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    position: relative;
    overflow: hidden;

    transition: transform 0.5s ease;
}

/* Image zoom on card hover */
.service-card:hover .service-image {
    transform: scale(1.04);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.service-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(32, 58, 67, 0.02),
        rgba(32, 58, 67, 0.35)
    );

    z-index: 1;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {
    .service-image {
        height: 280px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .service-image {
        height: 250px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .service-image {
        height: 210px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .service-image {
        height: 200px;
    }
}

/* =========================================================
   IMAGE CLASSES
   These use your existing img1-img15 CSS backgrounds.
========================================================= */

.service-image.img1 {
    background-image: url("https://vincivilworld.com/wp-content/uploads/2021/06/untitled-design-27.jpg?w=1024&h=576");
}

.service-image.img2 {
    background: url("https://images.openai.com/static-rsc-4/Qw5NhM1oomyPBNy-TQQ1DHLmmZk-q_QKAHzKcUZDosozovVYMgnavN-JzpW5j2P97hWFcxvAxrNYcVAilTKG91AKDC1yCKKQ5igiy_KgDm59hNvNJG6oqwlAzLpRz-KkK17Q2bvGjZUmIsu1lopxnxjK3gMeKYpoYUpKKo2jLGBnqMOB7MO2DDgKJZK8ZJdG?purpose=fullsize");
}

.service-image.img3 {
    background: url("https://earthonomic.com/wp-content/uploads/2024/04/Green-Audit.jpg");
}

.service-image.img4 {
    background-image: url("../images/Mining\ Plan.jfif");
}

.service-image.img5 {
    background: url("https://www.agiusa.com/sites/default/files/field/image/Behind%20The%20Scenes%20Of%20Groundwater%20Exploration%20With%20Electrical%20Resistivity.jpg");
}

.service-image.img6 {
    background-image: url("https://images.pexels.com/photos/6872529/pexels-photo-6872529.jpeg");
}

.service-image.img7 {
    background-image: url("https://images.pexels.com/photos/30037050/pexels-photo-30037050.jpeg");
}

.service-image.img8 {
    background-image: url("https://images.openai.com/static-rsc-4/AwIW2bbs7fBTSkybVQPtWaxbJ3hRWhYC55i6COXZDljPCmz_fz2afOGz8Mw6I3IitSpKplfaqyqeuNbf2B-vMvofGVmeQyeBnSZNHFPokv1wViv1CmoMMSsD_ROtYH0VZfugk0jTkpCcTdNhXhk8hgs9ENRS2PPdq32qfA69pgiCwBOcG9MVg6OaQuImME7w?purpose=fullsize");
}

.service-image.img9 {
    background: url("https://images.openai.com/static-rsc-4/Q4JHrZbLIRYrcx1QqmGAzbzvEGNOcj3VYZQH07IRGgRCfJj8cW_oQUDs7ObRCU3MjuKhwo4ZIvNnDamrcT_CPojq0R3SMOS3kZGA6e190DzdHjJP1KVU0ej8FyXAPW0Klp5iBK2ydmQVjmbXEs5aXWfg3rzo64rFn_neLAvwtqRkAP88UtfeWSYZ42AkqhIz?purpose=fullsize");
}

.service-image.img10 {
    background: url("../images/img10.jpg");
}

.service-image.img11 {
    background: url("../images/storm water design _ management.jpg");
}

.service-image.img12 {
    background: url("https://www.asce.org/-/media/asce-images-and-files/communities/institutes-and-technical-groups/environmental-and-water-resources/images/design-of-scms.jpeg");
}

.service-image.img13 {
    background: url("https://images.pexels.com/photos/27582561/pexels-photo-27582561.jpeg");
}

.service-image.img14 {
    background: url("https://www.navinaquatech.com/images/sewage.jpg");
}

.service-image.img15 {
    background: url("https://images.pexels.com/photos/19281034/pexels-photo-19281034.jpeg");
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-card-content {

    position: relative;

    padding: 28px 40px 30px;
}


/* Icon */

.service-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #45a96d,
            #0879bd
        );

    font-size: 20px;

    position: absolute;

    top: -26px;

    right: 25px;

    box-shadow:
        0 8px 20px rgba(8, 121, 189, 0.25);

    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: rotate(5deg) scale(1.08);
}


/* Number */

.service-number {

    display: block;

    color: #9caeb1;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 8px;
}


/* Title */

.service-card h4 {

    color: #203a43;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.45;

    margin: 0 45px 13px 0;
     white-space: nowrap;
    /* text-overflow: ellipsis; */
}


/* Description */

.service-card p {

    color: #718084;

    font-size: 14px;

    line-height: 1.75;
    text-align: justify;

    margin: 0 0 20px;
}


/* Learn More */

.service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #0879bd;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: all 0.3s ease;
}

.service-link i {

    transition:
        transform 0.3s ease;
}

.service-link:hover {

    color: #45a96d;
}

.service-link:hover i {

    transform: translateX(6px);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .consultancy-services {
        padding: 80px 0;
    }

    .services-heading h2 {
        font-size: 36px;
    }

    .service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .service-panel-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .consultancy-services {
        padding: 65px 15px;
    }

    .services-heading {
        margin-bottom: 35px;
    }

    .services-heading h2 {
        font-size: 30px;
    }

    .services-heading p {
        font-size: 14px;
    }


    /* Tabs become vertical */

    .service-tabs {

        grid-template-columns: 1fr;

        border-radius: 18px;

        margin-bottom: 40px;

    }

    .service-tab {

        border-radius: 12px;

        padding: 17px 15px;

        font-size: 14px;

    }


    .service-panel-heading h3 {
        font-size: 25px;
    }


    .service-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .service-image {
        height: 210px;
    }


    .service-card-content {
        padding: 27px 23px 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .services-heading h2 {
        font-size: 26px;
    }

    .service-tab {
        font-size: 13px;
    }

    .service-card h4 {
        font-size: 18px;
    }

}


        .contact-section {
            padding: 80px 0;
        }

        .contact-form {
            max-width: 800px;
            margin: auto;
            background: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.10);
        }

        .contact-title {
            text-align: center;
            margin-bottom: 35px;
        }

        .contact-title h2 {
            color: #003049;
            font-weight: 700;
        }

        .contact-title p {
            color: #777;
        }

        .form-label {
            font-weight: 600;
            color: #333;
        }

        .form-control {
            border-radius: 8px;
            padding: 12px 15px;
        }

        .form-control:focus {
            border-color: #00a6a6;
            box-shadow: 0 0 0 0.2rem rgba(0, 166, 166, 0.15);
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        .submit-btn {
            background: #0077b6;
            border: none;
            color: #fff;
            padding: 12px 35px;
            border-radius: 30px;
            font-weight: 600;
            transition: 0.3s;
        }

        .submit-btn:hover {
            background: #003049;
            color: #fff;
        }

        /* Invalid field */
        .form-control.is-invalid {
            border-color: #dc3545;
            background-image: none;
        }

        /* Valid field */
        .form-control.is-valid {
            border-color: #198754;
            background-image: none;
        }

        /* Bootstrap tooltip */
        .tooltip-inner {
            background-color: #dc3545;
            color: #fff;
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .bs-tooltip-top .tooltip-arrow::before {
            border-top-color: #dc3545;
        }

        .bs-tooltip-bottom .tooltip-arrow::before {
            border-bottom-color: #dc3545;
        }

        .bs-tooltip-start .tooltip-arrow::before {
            border-left-color: #dc3545;
        }

        .bs-tooltip-end .tooltip-arrow::before {
            border-right-color: #dc3545;
        }

        .success-message {
            display: none;
        }