/********** Template CSS **********/
:root {
    --primary: #B78D65;
    --light: #F8F8F8;
    --dark: #252525;
}

h1,
h2,
.h1,
.h2,
.fw-bold {
    font-weight: 600 !important;
}

h3,
h4,
.h3,
.h4,
.fw-medium {
    font-weight: 500 !important;
}

h5,
h6,
.h5,
.h6,
.fw-normal {
    font-weight: 400 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-outline-body {
    color: var(--primary);
    border-color: #777777;
}

.btn-outline-body:hover {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 30px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.owl-carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .5);
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
    }
}

.header-carousel .owl-dots {
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dots .owl-dot {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 5px 0;
    background: var(--dark);
    transition: .5s;
}

.header-carousel .owl-dots .owl-dot.active {
    width: 60px;
    height: 60px;
}

.header-carousel .owl-dots .owl-dot img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 2px;
    transition: .5s;
    opacity: .3;
}

.header-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/Container4.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}


/*** Section Title ***/
.section-title {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
}


/*** Facts ***/
.fact-item .fact-icon {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 120px;
    transition: .5s;
}

.fact-item:hover .fact-icon {
    background: var(--dark);
}

.fact-item .fact-icon i {
    color: var(--primary);
    transition: .5;
}

.fact-item:hover .fact-icon i {
    color: #FFFFFF;
}


/*** About & Feature ***/
.about-img,
.feature-img {
    position: relative;
    height: 100%;
    min-height: 400px;
}

.about-img img,
.feature-img img {
    position: absolute;
    width: 60%;
    height: 80%;
    object-fit: cover;
}

.about-img img:last-child,
.feature-img img:last-child {
    margin: 20% 0 0 40%;
}

.about-img::before,
.feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
}


/*** Service ***/
.service-item .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.service-item .service-text {
    background: var(--light);
    transition: .5s;
}

.service-item:hover .service-text {
    background: rgba(0, 0, 0, .7);
}

.service-item * {
    transition: .5;
}

.service-item:hover * {
    color: #FFFFFF;
}

.service-item .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    color: var(--dark);
    background: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    transition: .5s;
}

.service-item:hover .btn {
    width: 140px;
}


/*** Project ***/
.project .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.project .nav .nav-link.active {
    background: var(--primary);
}

.project .nav .nav-link.active h3 {
    color: #FFFFFF !important;
}


/*** Team ***/
.team-items {
    margin: -.75rem;
}

.team-item {
    padding: .75rem;
}

.team-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s;
    z-index: -1;
}

.team-item:hover::after {
    height: 100%;
    background: var(--primary);
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
}

.team-item .team-social .btn {
    display: inline-flex;
    margin: 0 2px;
    color: var(--primary);
    background: var(--light);
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}


/*** Appointment ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.testimonial-carousel {
    display: flex !important;
    flex-direction: column-reverse;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-carousel .owl-dots {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.testimonial-carousel .owl-dots .owl-dot {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 5px;
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 100px;
    height: 100px;
}

.testimonial-carousel .owl-dots .owl-dot::after {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary);
    background: #FFFFFF;
    border-radius: 40px;
    transition: .5s;
    opacity: 0;
}

.testimonial-carousel .owl-dots .owl-dot.active::after {
    opacity: 1;
}

.testimonial-carousel .owl-dots .owl-dot img {
    opacity: .4;
    transition: .5s;
}

.testimonial-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #777777;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .form-control {
    border-color: #777777;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}
/* =========================================================
   MODERN HEADER / NAVBAR
   BLUE & WHITE THEME
========================================================= */

:root {
    --brand-primary: #1769aa;
    --brand-primary-dark: #0f4f82;
    --brand-dark: #0b1f33;
    --brand-dark-2: #12304a;
    --brand-text: #4b6073;
    --brand-light: #f4f8fc;
    --brand-blue-light: #eaf3fb;
    --brand-border: #dce6ef;
    --white: #ffffff;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar-contact,
.topbar-right,
.topbar-links,
.topbar-social {
    display: flex;
    align-items: center;
}

.topbar-contact {
    gap: 24px;
}

.topbar-contact a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: all 0.25s ease;
}

.topbar-contact a:hover {
    color: #65b7f3;
}

.topbar-contact i {
    color: #65b7f3;
    margin-right: 7px;
}

.topbar-right {
    gap: 22px;
}

.topbar-links {
    gap: 18px;
}

.topbar-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.25s ease;
}

.topbar-links a:hover {
    color: var(--white);
}

.topbar-social {
    gap: 7px;
}

.topbar-social a {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.topbar-social a:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--white);
    transform: translateY(-2px);
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.main-navbar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--brand-border);
    min-height: 78px;
    padding: 0;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* Logo */

.site-logo {
    display: flex;
    align-items: center;
    padding: 0;
}

.site-logo img {
    width: auto;
    max-height: 48px;
    object-fit: contain;
}


/* Navigation */

.main-navbar .navbar-nav {
    gap: 5px;
}

.main-navbar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 0 17px !important;

    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: color 0.25s ease;
}


/* Animated underline */

.main-navbar .nav-link::after {
    content: "";

    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 0;

    height: 3px;

    background: var(--brand-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--brand-primary);
}

.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after {
    transform: scaleX(1);
}


/* =========================================================
   QUOTE BUTTON
========================================================= */

.nav-cta-wrapper {
    margin-left: 18px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 20px;

    background: var(--brand-primary);
    color: var(--white);

    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(23, 105, 170, 0.18);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.nav-cta i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.nav-cta:hover {
    background: var(--brand-primary-dark);
    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(23, 105, 170, 0.25);
}

.nav-cta:hover i {
    transform: translateX(3px);
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */
.navbar-toggler-icon {
    color: #000000;
}
.navbar-toggler {
    width: 46px;
    height: 46px;

    border: 1px solid var(--brand-border);
    border-radius: 5px;
color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.15) !important;
    color: #000000;
}


/* =========================================================
   STICKY NAVBAR
========================================================= */

.main-navbar.sticky-top {
    z-index: 999;
}


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

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Blue/navy overlay */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 24, 43, 0.92) 0%,
            rgba(8, 37, 64, 0.78) 42%,
            rgba(9, 46, 78, 0.25) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;

    max-width: 760px;

    padding: 100px 0;
}

.hero-eyebrow,
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #68b9f2;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-eyebrow::before,
.section-label::before {
    content: "";

    width: 30px;
    height: 2px;

    background: currentColor;
}

.hero-content h1 {
    margin: 18px 0 24px;

    color: #fff;

    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.04;

    font-weight: 800;
    letter-spacing: -2px;
}

.hero-content h1 span {
    color: #68b9f2;
}

.hero-content p {
    max-width: 650px;

    margin-bottom: 32px;

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

    font-size: 18px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}


/* =========================================================
   GENERAL BLUE BUTTON
========================================================= */

.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 23px;

    background: var(--brand-primary);
    color: var(--white);

    border: 1px solid var(--brand-primary);
    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition: all 0.25s ease;
}

.btn-primary-custom:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(23, 105, 170, 0.20);
}

.btn-primary-custom i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.btn-primary-custom:hover i {
    transform: translateX(3px);
}


/* =========================================================
   HERO OUTLINE BUTTON
========================================================= */

.btn-outline-light-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 13px 23px;

    background: rgba(255, 255, 255, 0.05);
    color: var(--white);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition: all 0.25s ease;
}

.btn-outline-light-custom:hover {
    background: var(--white);
    color: var(--brand-dark);
    border-color: var(--white);

    transform: translateY(-2px);
}


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

@media (max-width: 991.98px) {

    .topbar {
        display: none;
    }

    .main-navbar {
        min-height: 70px;
        padding: 10px 0;
    }

    .main-navbar .navbar-nav {
        gap: 0;
        padding-top: 15px;
    }

    .main-navbar .nav-link {
        min-height: auto;
        padding: 13px 5px !important;
        border-bottom: 1px solid var(--brand-border);
    }

    .main-navbar .nav-link::after {
        display: none;
    }

    .nav-cta-wrapper {
        margin: 15px 0 5px;
    }

    .nav-cta {
        width: 100%;
        justify-content: center;
    }

    .site-logo img {
        max-height: 42px;
    }

}


@media (max-width: 575.98px) {

    .main-navbar {
        padding-left: 5px;
        padding-right: 5px;
    }

    .site-logo img {
        max-width: 150px;
    }

    .hero-content {
        padding: 80px 0;
    }

    .hero-content h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .hero-content p {
        font-size: 16px;
    }

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

.btn-primary-custom,
.btn-outline-light-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 54px;
    padding: 0 25px;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.25s ease;
}


/* Primary Blue Button */

.btn-primary-custom {
    background: var(--brand-primary);
    color: var(--white);

    border: 1px solid var(--brand-primary);

    box-shadow: 0 8px 20px rgba(23, 105, 170, 0.12);
}

.btn-primary-custom:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--white);

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(23, 105, 170, 0.20);
}

.btn-primary-custom i {
    font-size: 11px;

    transition: transform 0.25s ease;
}

.btn-primary-custom:hover i {
    transform: translateX(4px);
}


/* Outline Button */

.btn-outline-light-custom {
    color: var(--white);

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

    background: rgba(255, 255, 255, 0.03);
}

.btn-outline-light-custom:hover {
    background: var(--white);
    border-color: var(--white);

    color: var(--brand-dark);
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust-strip {
    position: relative;
    z-index: 5;

    background: var(--white);

    border-bottom: 1px solid var(--brand-border);

    box-shadow: 0 10px 35px rgba(11, 31, 51, 0.05);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-item {
    min-height: 120px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 22px 24px;

    border-right: 1px solid var(--brand-border);
}

.trust-item:last-child {
    border-right: 0;
}


/* Trust Icon */

.trust-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    background: var(--brand-blue-light);

    color: var(--brand-primary);

    border: 1px solid rgba(23, 105, 170, 0.10);

    border-radius: 50%;

    transition: all 0.25s ease;
}

.trust-item:hover .trust-icon {
    background: var(--brand-primary);
    color: var(--white);

    transform: translateY(-2px);
}

.trust-item h3 {
    margin: 0 0 5px;

    color: var(--brand-dark);

    font-size: 15px;
    font-weight: 700;
}

.trust-item p {
    margin: 0;

    color: var(--brand-text);

    font-size: 12px;
    line-height: 1.5;
}


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

.about-section {
    padding: 110px 0;

    background: var(--white);
}

.about-gallery {
    position: relative;

    min-height: 560px;
}

.about-image-main {
    position: absolute;

    top: 0;
    left: 0;

    width: 78%;
    height: 470px;

    overflow: hidden;
}

.about-image-main img,
.about-image-small img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.about-image-main:hover img,
.about-image-small:hover img {
    transform: scale(1.04);
}

.about-image-small {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 50%;
    height: 270px;

    padding: 8px;

    background: var(--white);

    overflow: hidden;
}


/* About Badge */

.about-badge {
    position: absolute;

    left: 30px;
    bottom: 35px;

    width: 125px;
    height: 125px;

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

    background: var(--brand-primary);

    color: var(--white);

    border-radius: 50%;

    box-shadow: 0 15px 35px rgba(11, 31, 51, 0.20);
}

.about-badge span {
    font-size: 9px;
    letter-spacing: 2px;
}

.about-badge strong {
    font-size: 24px;
    line-height: 1.2;
}


/* About Content */

.about-content {
    max-width: 600px;
}

.about-content h2,
.section-heading h2 {
    margin: 16px 0 22px;

    color: var(--brand-dark);

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.about-content h2 span,
.section-heading h2 span {
    color: var(--brand-primary);
}

.about-lead {
    color: var(--brand-dark);

    font-size: 18px;
    line-height: 1.7;
}

.about-content > p:not(.about-lead) {
    color: var(--brand-text);

    line-height: 1.8;
}


/* About Features */

.about-features {
    margin: 30px 0;
}

.about-feature {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


/* Feature Check */

.feature-check {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

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

    border-radius: 50%;

    background: var(--brand-blue-light);

    color: var(--brand-primary);

    border: 1px solid rgba(23, 105, 170, 0.10);

    font-size: 12px;

    transition: all 0.25s ease;
}

.about-feature:hover .feature-check {
    background: var(--brand-primary);
    color: var(--white);

    transform: translateX(3px);
}

/* =========================================================
   ABOUT — FEATURES & ACTIONS
   ========================================================= */

.about-feature strong {
    display: block;

    margin-bottom: 3px;

    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 700;
}

.about-feature p {
    margin: 0;

    color: var(--brand-text);

    font-size: 13px;
    line-height: 1.6;
}


/* About Actions */

.about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 25px;

    margin-top: 32px;
}


/* Dark Secondary Button */

.dark-button {
    background: var(--brand-dark);

    border-color: var(--brand-dark);

    color: var(--white);
}

.dark-button:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);

    color: var(--white);
}


/* Phone CTA */

.about-phone {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--brand-dark);

    text-decoration: none;

    transition: color .25s ease;
}

.about-phone:hover {
    color: var(--brand-primary);
}

.phone-icon {
    width: 42px;
    height: 42px;

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

    background: var(--brand-blue-light);

    border: 1px solid rgba(23, 105, 170, 0.12);

    border-radius: 50%;

    color: var(--brand-primary);

    transition: all .25s ease;
}

.about-phone:hover .phone-icon {
    background: var(--brand-primary);

    color: var(--white);

    transform: translateY(-2px);
}

.about-phone small,
.about-phone strong {
    display: block;
}

.about-phone small {
    margin-bottom: 2px;

    color: #7a8a99;

    font-size: 11px;
}

.about-phone strong {
    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   SOLUTIONS
   ========================================================= */

.solutions-section {
    padding: 110px 0;

    background: var(--brand-light);
}


/* Section Heading */

.section-heading {
    max-width: 720px;

    margin: 0 auto;

    text-align: center;
}

.section-heading > p {
    max-width: 620px;

    margin: 0 auto;

    color: var(--brand-text);

    line-height: 1.8;
}


/* Solution Card */

.solution-card {
    height: 100%;

    background: var(--white);

    border: 1px solid var(--brand-border);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.solution-card:hover {
    transform: translateY(-8px);

    border-color: rgba(23, 105, 170, 0.18);

    box-shadow: 0 20px 45px rgba(11, 31, 51, 0.10);
}


/* Solution Image */

.solution-image {
    height: 250px;

    overflow: hidden;

    background: var(--brand-blue-light);
}

.solution-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.solution-card:hover .solution-image img {
    transform: scale(1.06);
}


/* Solution Content */

.solution-content {
    position: relative;

    padding: 28px 30px 32px;
}

.solution-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: #dce8f2;

    font-size: 30px;
    font-weight: 800;

    line-height: 1;
}

.solution-content h3 {
    position: relative;
    z-index: 1;

    margin-bottom: 12px;

    color: var(--brand-dark);

    font-size: 21px;
    font-weight: 750;
}

.solution-content p {
    margin-bottom: 20px;

    color: var(--brand-text);

    font-size: 14px;
    line-height: 1.7;
}


/* Solution Link */

.solution-content a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--brand-primary);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}

.solution-content a:hover {
    color: var(--brand-primary-dark);
}

.solution-content a i {
    font-size: 10px;

    transition: transform .2s ease;
}

.solution-content a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   SOLUTIONS — RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .solutions-section {
        padding: 85px 0;
    }

    .solution-image {
        height: 220px;
    }

    .solution-content {
        padding: 25px 25px 28px;
    }

}


@media (max-width: 767.98px) {

    .about-actions {
        gap: 18px;
    }

    .solutions-section {
        padding: 70px 0;
    }

    .solution-image {
        height: 240px;
    }

}


@media (max-width: 575.98px) {

    .about-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-phone {
        width: 100%;
    }

    .solution-content {
        padding: 24px 22px 26px;
    }

    .solution-content h3 {
        font-size: 19px;
    }

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

@media (max-width: 991.98px) {

    .hero-slide {
        min-height: 600px;
    }

    .hero-content {
        padding: 80px 0;
    }

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

    .trust-item:nth-child(2) {
        border-right: 0;
    }

    .trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--brand-border);
    }

    .about-section,
    .solutions-section,
    .services-section {
        padding: 80px 0;
    }

    .about-gallery {
        min-height: 500px;
    }
}


@media (max-width: 767.98px) {

    .hero-slide {
        min-height: 650px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 24, 43, 0.90),
                rgba(8, 37, 64, 0.65)
            );
    }

    .hero-content {
        padding: 70px 15px;
    }

    .hero-content h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .hero-content p {
        font-size: 16px;
    }


    /* Trust Strip */

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-item,
    .trust-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--brand-border);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }


    /* About */

    .about-gallery {
        min-height: 430px;
    }

    .about-image-main {
        width: 85%;
        height: 360px;
    }

    .about-image-small {
        width: 55%;
        height: 210px;
    }

    .about-badge {
        width: 105px;
        height: 105px;

        left: 15px;
        bottom: 20px;
    }

    .about-actions {
        align-items: flex-start;
        flex-direction: column;
    }


    /* Services */

    .services-section {
        padding: 70px 0;
    }

    .service-card-image {
        height: 230px;
    }
}


@media (max-width: 575.98px) {

    .hero-content h1 {
        font-size: 37px;
    }

    .hero-buttons {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary-custom,
    .btn-outline-light-custom {
        width: 100%;
    }


    /* About */

    .about-gallery {
        min-height: 360px;
    }

    .about-image-main {
        height: 300px;
    }

    .about-image-small {
        height: 175px;
    }

    .solutions-section,
    .about-section,
    .services-section {
        padding: 65px 0;
    }
}


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

.services-section {
    padding: 110px 0;

    background: var(--brand-light);
}


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

.service-card {
    height: 100%;

    background: var(--white);

    border: 1px solid var(--brand-border);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(23, 105, 170, 0.18);

    box-shadow: 0 22px 50px rgba(11, 31, 51, 0.11);
}


/* =========================================================
   SERVICE IMAGE
   ========================================================= */

.service-card-image {
    position: relative;

    height: 245px;

    overflow: hidden;

    background: var(--brand-blue-light);
}

.service-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.service-card:hover .service-card-image img {
    transform: scale(1.07);
}


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

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

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 24, 43, 0.02),
            rgba(5, 24, 43, 0.48)
        );

    pointer-events: none;
}


/* =========================================================
   SERVICE NUMBER
   ========================================================= */

.service-number {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 2;

    width: 42px;
    height: 42px;

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

    background: var(--brand-primary);

    color: var(--white);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;

    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.20);
}


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

.service-card-content {
    position: relative;

    padding: 28px 30px 30px;
}

.service-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 18px;

    background: var(--brand-blue-light);

    color: var(--brand-primary);

    border: 1px solid rgba(23, 105, 170, 0.10);

    border-radius: 50%;

    transition: all .25s ease;
}

.service-card:hover .service-icon {
    background: var(--brand-primary);

    color: var(--white);

    transform: translateY(-2px);
}

.service-card-content h3 {
    margin: 0 0 12px;

    color: var(--brand-dark);

    font-size: 21px;
    font-weight: 750;
}

.service-card-content p {
    margin: 0 0 20px;

    color: var(--brand-text);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   SERVICE LINK
   ========================================================= */

.service-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--brand-primary);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}

.service-link:hover {
    color: var(--brand-primary-dark);
}

.service-link i {
    font-size: 10px;

    transition: transform .2s ease;
}

.service-link:hover i {
    transform: translateX(4px);
}


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

.service-card-featured {
    border-color: rgba(23, 105, 170, 0.25);
}

.service-card-featured .service-icon {
    background: var(--brand-primary);

    color: var(--white);
}


/* =========================================================
   SERVICES — TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .service-card-image {
        height: 220px;
    }

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

}


/* =========================================================
   SERVICES — MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .service-card-image {
        height: 235px;
    }

    .service-card-content {
        padding: 25px 24px 28px;
    }

}


/* =========================================================
   SERVICES — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .service-card-image {
        height: 220px;
    }

    .service-card-content h3 {
        font-size: 19px;
    }

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

}

/* =========================================================
   SERVICES — NUMBER
   ========================================================= */

.service-number {
    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 2;

    width: 45px;
    height: 45px;

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

    background: var(--brand-primary);

    color: var(--white);

    font-size: 12px;
    font-weight: 800;

    border-radius: 50%;

    box-shadow: 0 8px 18px rgba(11, 31, 51, 0.20);

    transition: all .25s ease;
}

.service-card:hover .service-number {
    background: var(--brand-primary-dark);

    transform: translateY(-2px);
}


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

.service-card-content {
    position: relative;

    padding: 34px 30px 32px;
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {
    width: 58px;
    height: 58px;

    margin-top: -62px;
    margin-bottom: 22px;

    position: relative;
    z-index: 3;

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

    background: var(--white);

    border: 1px solid var(--brand-border);

    box-shadow: 0 8px 20px rgba(11, 31, 51, 0.08);

    transition: all .25s ease;
}

.service-card:hover .service-icon {
    border-color: rgba(23, 105, 170, 0.25);

    box-shadow: 0 10px 25px rgba(23, 105, 170, 0.12);

    transform: translateY(-2px);
}

.service-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


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

.service-card-content h3 {
    margin-bottom: 12px;

    color: var(--brand-dark);

    font-size: 21px;
    font-weight: 750;
}


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

.service-card-content p {
    min-height: 76px;

    margin-bottom: 22px;

    color: var(--brand-text);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SERVICE LINK
   ========================================================= */

.service-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--brand-dark);

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition: color .25s ease;
}

.service-link i {
    color: var(--brand-primary);

    font-size: 10px;

    transition: transform .25s ease;
}

.service-link:hover {
    color: var(--brand-primary);
}

.service-link:hover i {
    transform: translateX(5px);
}


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

.service-card-featured {
    border-top: 3px solid var(--brand-primary);
}

.service-card-featured .service-icon {
    border-color: rgba(23, 105, 170, 0.20);
}


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

.why-section {
    padding: 110px 0;

    background: var(--white);
}


/* =========================================================
   WHY IMAGE
   ========================================================= */

.why-image {
    position: relative;

    min-height: 560px;

    overflow: hidden;

    background: var(--brand-blue-light);
}

.why-image > img {
    width: 100%;
    height: 560px;

    object-fit: cover;

    transition: transform .6s ease;
}

.why-image:hover > img {
    transform: scale(1.03);
}


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

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

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 24, 43, 0.50),
            rgba(5, 24, 43, 0.04) 55%
        );

    pointer-events: none;
}


/* =========================================================
   WHY FLOATING CARD
   ========================================================= */

.why-image-card {
    position: absolute;

    z-index: 2;

    left: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px 22px;

    background: var(--white);

    border: 1px solid var(--brand-border);

    box-shadow: 0 15px 40px rgba(11, 31, 51, 0.16);
}

.why-card-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    background: var(--brand-primary);

    color: var(--white);

    border-radius: 50%;
}

.why-image-card strong,
.why-image-card span {
    display: block;
}

.why-image-card strong {
    margin-bottom: 2px;

    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 700;
}

.why-image-card div span {
    color: #7b8a98;

    font-size: 11px;
}


/* =========================================================
   WHY CONTENT
   ========================================================= */

.why-content {
    padding-left: 15px;

    max-width: 590px;
}

.why-content h2 {
    margin: 16px 0 22px;

    color: var(--brand-dark);

    font-size: clamp(35px, 4vw, 50px);
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.why-content h2 span {
    color: var(--brand-primary);
}

.why-intro {
    margin-bottom: 32px;

    color: var(--brand-text);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   WHY FEATURE
   ========================================================= */

.why-feature {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;
}

.why-feature-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: var(--brand-blue-light);

    color: var(--brand-primary);

    border: 1px solid rgba(23, 105, 170, 0.10);

    border-radius: 50%;

    transition: all .25s ease;
}

.why-feature:hover .why-feature-icon {
    background: var(--brand-primary);

    color: var(--white);

    transform: translateY(-2px);
}

.why-feature h3 {
    margin-bottom: 5px;

    color: var(--brand-dark);

    font-size: 17px;
    font-weight: 750;
}

.why-feature p {
    margin: 0;

    color: var(--brand-text);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   WHY CHOOSE US — RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

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

    .why-image {
        min-height: 500px;
    }

    .why-image > img {
        height: 500px;
    }

    .why-content {
        padding-left: 0;
        margin-top: 50px;

        max-width: 100%;
    }

}


@media (max-width: 767.98px) {

    .why-section {
        padding: 70px 0;
    }

    .why-image {
        min-height: 430px;
    }

    .why-image > img {
        height: 430px;
    }

    .why-image-card {
        left: 18px;
        right: 18px;
        bottom: 18px;

        padding: 15px 18px;
    }

    .why-feature {
        gap: 14px;
        margin-bottom: 22px;
    }

}


@media (max-width: 575.98px) {

    .why-image {
        min-height: 360px;
    }

    .why-image > img {
        height: 360px;
    }

    .why-image-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .why-card-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .why-content h2 {
        font-size: 35px;
    }

}

/* =========================================================
   SERVICES / WHY — RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .services-section,
    .why-section {
        padding: 80px 0;
    }

    .why-content {
        padding-left: 0;
    }

    .why-image,
    .why-image > img {
        min-height: 480px;
        height: 480px;
    }
}


@media (max-width: 767.98px) {

    .services-section,
    .why-section {
        padding: 65px 0;
    }

    .service-card-image {
        height: 230px;
    }

    .service-card-content p {
        min-height: auto;
    }

    .why-image,
    .why-image > img {
        min-height: 400px;
        height: 400px;
    }

    .why-image-card {
        left: 15px;
        bottom: 15px;
    }
}


/* =========================================================
   CONTAINER SOLUTIONS TABS
   ========================================================= */

.solutions-tabs-section {
    padding: 110px 0;

    background: var(--white);
}

.solutions-tabs-wrapper {
    display: grid;

    grid-template-columns: 330px 1fr;

    gap: 45px;

    align-items: stretch;
}


/* =========================================================
   TAB NAVIGATION
   ========================================================= */

.solutions-tab-nav {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.solution-tab {
    width: 100%;
    min-height: 105px;

    padding: 22px 20px;

    border: 1px solid var(--brand-border);

    background: var(--white);

    display: flex;
    align-items: center;

    text-align: left;

    gap: 18px;

    color: var(--brand-dark);

    transition:
        all .3s ease;

    cursor: pointer;
}

.solution-tab:hover {
    border-color: rgba(23, 105, 170, .45);

    transform: translateX(4px);

    box-shadow: 0 8px 22px rgba(11, 31, 51, .06);
}


/* Active Tab */

.solution-tab.active {
    background: var(--brand-dark);

    border-color: var(--brand-dark);

    color: var(--white);

    box-shadow: 0 12px 30px rgba(11, 31, 51, .14);
}

.solution-tab-number {
    min-width: 28px;

    color: var(--brand-primary);

    font-size: 13px;
    font-weight: 800;
}

.solution-tab.active .solution-tab-number {
    color: #68b9f2;
}

.solution-tab-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.solution-tab-content strong {
    color: inherit;

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

    line-height: 1.3;
}

.solution-tab-content small {
    color: #6b7c8c;

    font-size: 12px;
}

.solution-tab.active .solution-tab-content small {
    color: rgba(255, 255, 255, .68);
}


/* Tab Arrow */

.solution-tab-arrow {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border: 1px solid var(--brand-border);

    color: var(--brand-dark);

    font-size: 12px;

    transition: all .3s ease;
}

.solution-tab.active .solution-tab-arrow {
    border-color: rgba(255, 255, 255, .22);

    color: var(--white);
}

.solution-tab:hover .solution-tab-arrow,
.solution-tab.active .solution-tab-arrow {
    background: var(--brand-primary);

    color: var(--white);

    border-color: var(--brand-primary);
}


/* =========================================================
   TAB CONTENT
   ========================================================= */

.solutions-tab-content {
    min-width: 0;
}

.solution-detail {
    display: grid;

    grid-template-columns: 48% 52%;

    min-height: 510px;

    background: var(--brand-light);

    border: 1px solid var(--brand-border);

    overflow: hidden;
}

.solution-detail-image {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    background: var(--brand-blue-light);
}

.solution-detail-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.solution-detail:hover .solution-detail-image img {
    transform: scale(1.04);
}


/* Image Label */

.solution-image-label {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 12px 17px;

    background: var(--brand-dark);

    color: var(--white);

    font-size: 13px;
    font-weight: 700;

    display: flex;
    align-items: center;

    gap: 10px;

    box-shadow: 0 8px 20px rgba(11, 31, 51, .16);
}

.solution-image-label span {
    color: #68b9f2;

    font-weight: 800;
}


/* =========================================================
   SOLUTION DETAIL CONTENT
   ========================================================= */

.solution-detail-content {
    padding: 55px 50px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solution-detail-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--brand-primary);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.solution-detail-content h3 {
    margin-bottom: 20px;

    color: var(--brand-dark);

    font-size: 32px;
    line-height: 1.2;

    font-weight: 750;
}

.solution-detail-content > p {
    margin-bottom: 25px;

    color: var(--brand-text);

    line-height: 1.8;
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.solution-check-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-bottom: 25px;
}

.solution-check-list div {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 600;
}

.solution-check-list i {
    width: 21px;
    height: 21px;

    flex: 0 0 21px;

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

    background: var(--brand-blue-light);

    color: var(--brand-primary);

    border: 1px solid rgba(23, 105, 170, .10);

    border-radius: 50%;

    font-size: 10px;
}


/* Detail Button */

.solution-detail-content .btn {
    align-self: flex-start;
}


/* =========================================================
   CONTAINER TABS — TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .solutions-tabs-section {
        padding: 85px 0;
    }

    .solutions-tabs-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .solutions-tab-nav {
        display: grid;

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

    .solution-tab {
        min-height: 90px;
    }

    .solution-detail {
        grid-template-columns: 45% 55%;
    }

    .solution-detail-image {
        min-height: 480px;
    }

    .solution-detail-content {
        padding: 45px 40px;
    }
}


/* =========================================================
   CONTAINER TABS — MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .solutions-tabs-section {
        padding: 70px 0;
    }

    .solutions-tab-nav {
        grid-template-columns: 1fr;
    }

    .solution-tab {
        min-height: 82px;

        padding: 18px;
    }

    .solution-detail {
        display: flex;
        flex-direction: column;
    }

    .solution-detail-image {
        min-height: 300px;

        height: 300px;
    }

    .solution-detail-content {
        padding: 38px 30px 40px;
    }

    .solution-detail-content h3 {
        font-size: 27px;
    }

    .solution-image-label {
        left: 18px;
        bottom: 18px;
    }
}


/* =========================================================
   CONTAINER TABS — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .solutions-tabs-section {
        padding: 65px 0;
    }

    .solution-tab-content strong {
        font-size: 14px;
    }

    .solution-tab-content small {
        font-size: 11px;
    }

    .solution-tab-arrow {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .solution-detail-image {
        min-height: 250px;
        height: 250px;
    }

    .solution-detail-content {
        padding: 32px 22px 35px;
    }

    .solution-detail-content h3 {
        font-size: 24px;
    }

    .solution-detail-content > p {
        font-size: 14px;
    }

    .solution-image-label {
        padding: 10px 13px;

        font-size: 12px;
    }
}
/* =========================================================
   QUOTE SECTION
   ========================================================= */

.quote-section {
    padding: 110px 0;

    background: var(--brand-light);
}

.quote-wrapper {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    background: var(--brand-dark);

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(11, 31, 51, 0.14);
}


/* =========================================================
   QUOTE INFORMATION
   ========================================================= */

.quote-info {
    padding: 65px 55px;

    color: var(--white);

    position: relative;
}

.quote-info::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -80px;

    border: 1px solid rgba(104, 185, 242, 0.22);

    transform: rotate(45deg);

    pointer-events: none;
}

.quote-info .section-eyebrow {
    color: #68b9f2;
}

.quote-info h2 {
    color: var(--white);

    font-size: 42px;
    line-height: 1.15;

    margin: 15px 0 20px;
}

.quote-intro {
    color: #c9d7e4;

    line-height: 1.8;

    max-width: 440px;

    margin-bottom: 40px;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.quote-contact-list {
    display: flex;
    flex-direction: column;

    gap: 25px;

    margin-bottom: 40px;
}

.quote-contact-item {
    display: flex;
    align-items: center;

    gap: 18px;
}

.quote-contact-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    background: rgba(23, 105, 170, 0.20);

    color: #68b9f2;

    border: 1px solid rgba(104, 185, 242, 0.12);

    font-size: 18px;
}

.quote-contact-item div:last-child {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.quote-contact-item span {
    color: #8fa4b8;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;
}

.quote-contact-item a {
    color: var(--white);

    font-size: 17px;
    font-weight: 700;

    text-decoration: none;

    transition: color .3s ease;
}

.quote-contact-item a:hover {
    color: #68b9f2;
}


/* =========================================================
   TRUST MESSAGE
   ========================================================= */

.quote-trust {
    display: flex;

    gap: 15px;

    padding-top: 25px;

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

.quote-trust-icon {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

    background: var(--brand-primary);

    color: var(--white);

    border-radius: 50%;

    font-size: 12px;
}

.quote-trust strong {
    display: block;

    color: var(--white);

    font-size: 14px;

    margin-bottom: 4px;
}

.quote-trust p {
    margin: 0;

    color: #8fa4b8;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   QUOTE FORM
   ========================================================= */

.quote-form-wrapper {
    background: var(--white);

    padding: 55px;
}

.quote-form-header {
    margin-bottom: 30px;
}

.quote-form-header > span {
    color: var(--brand-primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.quote-form-header h3 {
    margin: 8px 0;

    color: var(--brand-dark);

    font-size: 30px;

    font-weight: 750;
}

.quote-form-header p {
    margin: 0;

    color: var(--brand-text);

    font-size: 14px;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.quote-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--brand-dark);

    font-size: 13px;

    font-weight: 700;
}

.quote-form .form-control,
.quote-form .form-select {
    min-height: 54px;

    padding: 13px 16px;

    border: 1px solid var(--brand-border);

    border-radius: 4px;

    color: var(--brand-dark);

    background: var(--white);

    font-size: 14px;

    box-shadow: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.quote-form textarea.form-control {
    min-height: 130px;

    resize: vertical;
}

.quote-form .form-control:focus,
.quote-form .form-select:focus {
    border-color: var(--brand-primary);

    box-shadow:
        0 0 0 3px rgba(23, 105, 170, 0.10);
}

.quote-form .form-control::placeholder {
    color: #9aa8b5;
}


/* =========================================================
   QUOTE SUBMIT
   ========================================================= */

.quote-submit {
    width: 100%;

    min-height: 56px;

    border: 0;

    margin-top: 5px;

    background: var(--brand-primary);

    color: var(--white);

    transition: all .25s ease;
}

.quote-submit:hover {
    background: var(--brand-primary-dark);

    color: var(--white);
}


/* =========================================================
   RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .solutions-tabs-wrapper {
        grid-template-columns: 290px 1fr;

        gap: 30px;
    }

    .solution-detail-content {
        padding: 40px;
    }

    .solution-detail-content h3 {
        font-size: 28px;
    }

    .quote-info,
    .quote-form-wrapper {
        padding: 45px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .solutions-tabs-wrapper {
        grid-template-columns: 1fr;
    }

    .solutions-tab-nav {
        display: grid;

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

    .solution-tab {
        min-height: 90px;
    }

    .solution-detail {
        grid-template-columns: 1fr;
    }

    .solution-detail-image {
        min-height: 400px;
    }

    .quote-wrapper {
        grid-template-columns: 1fr;
    }

    .quote-info {
        padding: 50px 40px;
    }

    .quote-form-wrapper {
        padding: 45px 40px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .solutions-tabs-section,
    .quote-section {
        padding: 70px 0;
    }

    .solutions-tab-nav {
        grid-template-columns: 1fr;
    }

    .solution-tab {
        min-height: 80px;
    }

    .solution-detail-image {
        min-height: 320px;
    }

    .solution-detail-content {
        padding: 35px 25px;
    }

    .solution-detail-content h3 {
        font-size: 26px;
    }

    .quote-info {
        padding: 40px 25px;
    }

    .quote-info h2 {
        font-size: 34px;
    }

    .quote-form-wrapper {
        padding: 35px 25px;
    }

    .quote-form-header h3 {
        font-size: 27px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .quote-section {
        padding: 60px 0;
    }

    .quote-info {
        padding: 35px 20px;
    }

    .quote-form-wrapper {
        padding: 30px 20px;
    }

    .quote-info h2 {
        font-size: 31px;
    }

    .quote-contact-item a {
        font-size: 15px;
    }

    .quote-contact-icon {
        width: 46px;
        height: 46px;
    }

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

@media (max-width: 575.98px) {

    .solution-detail-image {
        min-height: 270px;
    }

    .solution-image-label {
        left: 15px;
        bottom: 15px;
    }

    .quote-contact-item a {
        font-size: 15px;
    }

}


/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {
    background: var(--brand-dark);

    color: #94a3b8;

    padding-top: 75px;
}


/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main {
    display: grid;

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

    gap: 55px;

    padding-bottom: 60px;
}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.footer-brand {
    padding-right: 25px;
}

.footer-logo {
    display: inline-block;

    margin-bottom: 25px;
}

.footer-logo img {
    width: 150px;
    height: auto;

    display: block;
}

.footer-description {
    max-width: 360px;

    margin: 0 0 25px;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.8;
}


/* Footer CTA */

.footer-cta {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 13px 20px;

    background: var(--brand-primary);

    color: var(--white);

    border: 1px solid var(--brand-primary);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: all .3s ease;
}

.footer-cta i {
    font-size: 11px;

    transition: transform .3s ease;
}

.footer-cta:hover {
    background: var(--brand-primary-dark);

    border-color: var(--brand-primary-dark);

    color: var(--white);
}

.footer-cta:hover i {
    transform: translateX(4px);
}


/* =========================================================
   FOOTER HEADINGS
   ========================================================= */

.footer-column h4 {
    position: relative;

    margin: 0 0 25px;

    padding-bottom: 14px;

    color: var(--white);

    font-size: 16px;

    font-weight: 700;
}

.footer-column h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 2px;

    background: var(--brand-primary);
}


/* =========================================================
   FOOTER CONTACT
   ========================================================= */

.footer-contact,
.footer-links {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-contact {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    color: #94a3b8;

    font-size: 13px;

    line-height: 1.7;
}

.footer-contact-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

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

    background: rgba(23, 105, 170, 0.16);

    color: #68b9f2;

    border: 1px solid rgba(104, 185, 242, 0.10);

    border-radius: 50%;

    font-size: 12px;

    transition: all .25s ease;
}

.footer-contact li:hover .footer-contact-icon {
    background: var(--brand-primary);

    color: var(--white);

    transform: translateY(-2px);
}

.footer-contact a {
    color: #94a3b8;

    text-decoration: none;

    transition: color .3s ease;
}

.footer-contact a:hover {
    color: #68b9f2;
}


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.footer-links li {
    position: relative;
}

.footer-links a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #94a3b8;

    text-decoration: none;

    font-size: 13px;

    transition: all .3s ease;
}

.footer-links a::before {
    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    color: var(--brand-primary);

    font-size: 8px;

    opacity: 0;

    transform: translateX(-5px);

    transition: all .3s ease;
}

.footer-links a:hover {
    color: var(--white);

    transform: translateX(3px);
}

.footer-links a:hover::before {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    min-height: 75px;

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

    gap: 25px;

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

.footer-copyright {
    color: #647f94;

    font-size: 12px;
}

.footer-copyright a {
    color: #94a3b8;

    text-decoration: none;

    font-weight: 600;

    transition: color .3s ease;
}

.footer-copyright a:hover {
    color: #68b9f2;
}

.footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 25px;
}

.footer-bottom-links a {
    color: #647f94;

    text-decoration: none;

    font-size: 12px;

    transition: color .3s ease;
}

.footer-bottom-links a:hover {
    color: var(--white);
}


/* =========================================================
   FOOTER — TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .site-footer {
        padding-top: 60px;
    }

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;

        gap: 40px;
    }

    .footer-brand {
        grid-column: span 3;

        padding-right: 0;

        max-width: 600px;
    }

}


/* =========================================================
   FOOTER — MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .site-footer {
        padding-top: 55px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 40px 30px;

        padding-bottom: 45px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-bottom {
        min-height: auto;

        padding: 25px 0;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .footer-bottom-links {
        gap: 18px;

        flex-wrap: wrap;
    }

}


/* =========================================================
   FOOTER — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .site-footer {
        padding-top: 50px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-logo img {
        width: 135px;
    }

    .footer-description {
        font-size: 13px;
    }

    .footer-bottom {
        padding: 22px 0;
    }

    .footer-bottom-links {
        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

}
/* =========================================================
   FOOTER RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .site-footer {
        padding-top: 60px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 45px 35px;

        padding-bottom: 50px;
    }

    .footer-brand {
        grid-column: 1 / -1;

        padding-right: 0;
    }

    .footer-description {
        max-width: 600px;
    }

}


/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .site-footer {
        padding-top: 55px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 40px 25px;

        padding-bottom: 45px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        min-height: auto;

        padding: 22px 0;

        flex-direction: column;

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

        gap: 14px;

        text-align: center;
    }

    .footer-copyright {
        line-height: 1.6;
    }

}


/* =========================================================
   FOOTER — SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .site-footer {
        padding-top: 50px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-description {
        max-width: 100%;

        font-size: 13px;
    }

    .footer-bottom {
        padding: 20px 0;
    }

    .footer-bottom-links {
        flex-wrap: wrap;

        justify-content: center;

        gap: 10px 18px;
    }

}

/* =========================================================
   PREVENT HORIZONTAL PAGE SCROLL
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   GLOBAL MOBILE OVERFLOW FIX
========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

.container,
.container-fluid,
.container-xxl {
    width: 100%;
    max-width: 100%;
}

.row {
    max-width: 100%;
}

@media (max-width: 767.98px) {

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .row > * {
        padding-left: 12px;
        padding-right: 12px;
    }

}

/* =========================================================
   HEADER — MOBILE OVERFLOW PROTECTION
========================================================= */

.topbar,
.main-navbar,
.page-header-custom {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
    background: var(--brand-dark);
    color: rgba(255,255,255,.78);
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar-inner {
    min-height: 44px;

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

    gap: 25px;
}

.topbar-contact {
    display: flex;
    align-items: center;

    gap: 25px;

    min-width: 0;
}

.topbar-contact a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

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

    text-decoration: none;

    white-space: nowrap;

    transition: color .25s ease;
}

.topbar-contact i {
    color: #68b9f2;
    font-size: 12px;
}

.topbar-contact a:hover {
    color: #68b9f2;
}

.topbar-right {
    display: flex;
    align-items: center;

    gap: 20px;
}

.topbar-links {
    display: flex;
    align-items: center;

    gap: 18px;
}

.topbar-links a {
    color: rgba(255,255,255,.65);

    text-decoration: none;

    font-size: 12px;

    transition: color .25s ease;
}

.topbar-links a:hover {
    color: var(--white);
}

.topbar-social {
    display: flex;
    align-items: center;

    gap: 6px;
}

.topbar-social a {
    width: 28px;
    height: 28px;

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

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

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

    border-radius: 50%;

    text-decoration: none;

    font-size: 11px;

    transition: all .25s ease;
}

.topbar-social a:hover {
    background: var(--brand-primary);

    border-color: var(--brand-primary);

    color: var(--white);
}


/* =========================================================
   MAIN NAVBAR
========================================================= */

.main-navbar {
    min-height: 78px;

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

    border-bottom: 1px solid var(--brand-border);

    z-index: 999;
}

.site-logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}

.site-logo img {
    width: auto;
    max-width: 150px;
    max-height: 48px;

    display: block;
}

.main-navbar .navbar-nav {
    align-items: center;

    gap: 8px;
}

.main-navbar .nav-link {
    position: relative;

    padding: 28px 15px;

    color: var(--brand-dark);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: color .25s ease;
}

.main-navbar .nav-link::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 18px;

    height: 2px;

    background: var(--brand-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--brand-primary);
}

.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after {
    transform: scaleX(1);
}

.nav-cta-wrapper {
    margin-left: 25px;
}

.nav-cta {
    min-height: 48px;

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

    gap: 10px;

    padding: 0 21px;

    background: var(--brand-primary);

    color: var(--white);

    border: 1px solid var(--brand-primary);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: all .25s ease;
}

.nav-cta i {
    font-size: 10px;

    transition: transform .25s ease;
}

.nav-cta:hover {
    background: var(--brand-primary-dark);

    border-color: var(--brand-primary-dark);

    color: var(--white);
}

.nav-cta:hover i {
    transform: translateX(4px);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-header-custom {
    position: relative;

    min-height: 360px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(5,24,43,.90),
            rgba(8,37,64,.68),
            rgba(9,46,78,.35)
        ),
        url("../img/Container3.jpg") center center / cover no-repeat;
}

.page-header-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.page-header-content {
    position: relative;

    z-index: 2;

    max-width: 700px;

    padding: 50px 0;
}

.page-header-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #68b9f2;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.page-header-content h1 {
    margin: 0 0 18px;

    color: var(--white);

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

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.page-header-content .breadcrumb {
    margin: 0;

    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    padding: 0;

    background: transparent;
}

.page-header-content .breadcrumb-item {
    color: rgba(255,255,255,.65);

    font-size: 13px;
}

.page-header-content .breadcrumb-item a {
    color: rgba(255,255,255,.82);

    text-decoration: none;

    transition: color .25s ease;
}

.page-header-content .breadcrumb-item a:hover {
    color: #68b9f2;
}

.page-header-content .breadcrumb-item.active {
    color: #68b9f2;
}

.page-header-content .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.35);
}


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

@media (max-width: 991.98px) {

    .topbar {
        display: none;
    }

    .main-navbar {
        min-height: 72px;
    }

    .site-logo img {
        max-height: 44px;
    }

    .main-navbar .navbar-toggler {
        padding: 8px 10px;

        border: 1px solid var(--brand-border);

        border-radius: 4px;

        box-shadow: none;
    }

    .main-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(23,105,170,.10);
    }

    .main-navbar .navbar-collapse {
        padding: 10px 0 20px;
    }

    .main-navbar .navbar-nav {
        align-items: stretch;

        gap: 0;
    }

    .main-navbar .nav-link {
        padding: 13px 5px;
    }

    .main-navbar .nav-link::after {
        display: none;
    }

    .nav-cta-wrapper {
        margin: 12px 0 0;
    }

    .nav-cta {
        width: 100%;
    }

    .page-header-custom {
        min-height: 320px;
    }

}


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

@media (max-width: 575.98px) {

    .main-navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .site-logo img {
        max-width: 125px;
        max-height: 40px;
    }

    .main-navbar .navbar-toggler {
        margin: 0;

        padding: 7px 9px;
    }

    .page-header-custom {
        min-height: 285px;
    }

    .page-header-content {
        padding: 40px 0;
    }

    .page-header-content h1 {
        font-size: 42px;

        letter-spacing: -1px;
    }

    .page-header-eyebrow {
        font-size: 10px;

        letter-spacing: 1.3px;
    }

}

/* =========================================================
   ABOUT / WHY — OVERFLOW PROTECTION
========================================================= */

.about-section,
.why-section,
.site-footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.about-gallery,
.about-image-main,
.about-image-small,
.why-image {
    max-width: 100%;
}

.about-gallery img,
.why-image img {
    max-width: 100%;
}

/* =========================================================
   SERVICES PAGE INTRO
========================================================= */

.services-intro {
    padding: 90px 0 35px;
    background: var(--white);
}

.services-intro .section-heading {
    max-width: 760px;
}

.services-intro .section-heading h2 {
    margin: 15px 0 18px;
    color: var(--brand-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.services-intro .section-heading h2 span {
    color: var(--brand-primary);
}

.services-intro .section-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--brand-text);
    font-size: 15px;
    line-height: 1.8;
}


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

.services-section {
    padding: 55px 0 110px;
    background: var(--white);
}


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

.service-card {
    height: 100%;
    background: var(--white);
    border: 1px solid var(--brand-border);
    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(23,105,170,.20);

    box-shadow:
        0 22px 50px rgba(11,31,51,.11);
}


/* IMAGE */

.service-card-image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: var(--brand-blue-light);
}

.service-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition: transform .6s ease;
}

.service-card:hover .service-card-image img {
    transform: scale(1.07);
}

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

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5,24,43,.02),
            rgba(5,24,43,.50)
        );

    pointer-events: none;
}


/* NUMBER */

.service-number {
    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 2;

    width: 45px;
    height: 45px;

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

    background: var(--brand-primary);
    color: var(--white);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(11,31,51,.20);

    transition: all .25s ease;
}

.service-card:hover .service-number {
    background: var(--brand-primary-dark);
    transform: translateY(-2px);
}


/* CONTENT */

.service-card-content {
    position: relative;
    padding: 34px 30px 32px;
}


/* ICON */

.service-icon {
    width: 58px;
    height: 58px;

    margin-top: -62px;
    margin-bottom: 22px;

    position: relative;
    z-index: 3;

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

    background: var(--white);
    border: 1px solid var(--brand-border);

    box-shadow:
        0 8px 20px rgba(11,31,51,.08);

    transition: all .25s ease;
}

.service-card:hover .service-icon {
    border-color: rgba(23,105,170,.25);

    box-shadow:
        0 10px 25px rgba(23,105,170,.12);

    transform: translateY(-2px);
}

.service-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


/* TITLE */

.service-card-content h3 {
    margin: 0 0 12px;

    color: var(--brand-dark);

    font-size: 21px;
    line-height: 1.3;
    font-weight: 750;
}


/* DESCRIPTION */

.service-card-content p {
    min-height: 76px;

    margin: 0 0 22px;

    color: var(--brand-text);

    font-size: 14px;
    line-height: 1.7;
}


/* LINK */

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--brand-dark);

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    transition: color .25s ease;
}

.service-link i {
    color: var(--brand-primary);

    font-size: 10px;

    transition: transform .25s ease;
}

.service-link:hover {
    color: var(--brand-primary);
}

.service-link:hover i {
    transform: translateX(5px);
}


/* FEATURED CARD */

.service-card-featured {
    border-top: 3px solid var(--brand-primary);
}


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

@media (max-width: 991.98px) {

    .services-intro {
        padding: 75px 0 30px;
    }

    .services-section {
        padding: 45px 0 80px;
    }

    .service-card-image {
        height: 220px;
    }

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

}


@media (max-width: 767.98px) {

    .services-intro {
        padding: 65px 0 25px;
    }

    .services-section {
        padding: 40px 0 65px;
    }

    .services-intro .section-heading h2 {
        font-size: 35px;
    }

    .service-card-image {
        height: 235px;
    }

    .service-card-content {
        padding: 28px 24px 26px;
    }

}


@media (max-width: 575.98px) {

    .services-intro {
        padding: 55px 0 20px;
    }

    .services-section {
        padding: 35px 0 60px;
    }

    .services-intro .section-heading h2 {
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .services-intro .section-heading p {
        font-size: 13px;
    }

    .service-card-image {
        height: 220px;
    }

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

    .service-card-content h3 {
        font-size: 19px;
    }

    .service-card-content p {
        min-height: auto;
        font-size: 13px;
    }

}

/* =========================================================
MODERN SERVICES SECTION
White + Blue Theme
========================================================= */

:root {
--primary-blue: #0866d6;
--dark-blue: #063b7a;
--light-blue: #eef6ff;
--text-dark: #172033;
--text-muted: #667085;
--border-light: #e5eaf0;
--white: #ffffff;
}

/* Section
--------------------------------------------------------- */

.services-section {
background: var(--white);
position: relative;
}

.services-heading {
max-width: 720px;
}

.section-label {
display: inline-block;
margin-bottom: 12px;
padding: 7px 14px;
background: var(--light-blue);
color: var(--primary-blue);
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
}

.services-heading h2 {
margin: 0 0 16px;
color: var(--text-dark);
font-size: 42px;
line-height: 1.2;
font-weight: 700;
}

.services-heading p {
margin: 0 auto;
max-width: 620px;
color: var(--text-muted);
font-size: 16px;
line-height: 1.7;
}

/* Service Card
--------------------------------------------------------- */

.modern-service-card {
height: 100%;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 18px;
overflow: hidden;
transition: all 0.35s ease;
box-shadow: 0 8px 30px rgba(20, 45, 80, 0.06);
}

.modern-service-card:hover {
transform: translateY(-8px);
border-color: rgba(8, 102, 214, 0.2);
box-shadow: 0 18px 45px rgba(20, 45, 80, 0.12);
}

/* Image
--------------------------------------------------------- */

.service-image {
height: 240px;
position: relative;
overflow: hidden;
}

.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}

.modern-service-card:hover .service-image img {
transform: scale(1.06);
}

/* Image Overlay */

.service-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(3, 25, 55, 0.55),
rgba(3, 25, 55, 0)
);
}

/* Number */

.service-number {
position: absolute;
z-index: 2;
right: 18px;
bottom: 18px;


width: 46px;
height: 46px;

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

background: var(--white);
color: var(--primary-blue);

border-radius: 50%;
font-size: 13px;
font-weight: 800;

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);


}

/* Content
--------------------------------------------------------- */

.service-content {
position: relative;
padding: 28px 28px 30px;
}

.service-icon {
width: 56px;
height: 56px;


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

margin-top: -56px;
margin-bottom: 20px;

position: relative;
z-index: 3;

background: var(--white);
border-radius: 14px;

box-shadow: 0 8px 25px rgba(20, 45, 80, 0.12);


}

.service-icon img {
width: 30px;
height: 30px;
object-fit: contain;
}

.service-content h3 {
margin-bottom: 12px;
color: var(--text-dark);
font-size: 22px;
font-weight: 700;
}

.service-content p {
min-height: 78px;
margin-bottom: 20px;


color: var(--text-muted);
font-size: 14px;
line-height: 1.7;


}

/* Service Link
--------------------------------------------------------- */

.service-link {
display: inline-flex;
align-items: center;
gap: 9px;


color: var(--primary-blue);
font-size: 14px;
font-weight: 700;
text-decoration: none;

transition: all 0.25s ease;


}

.service-link i {
font-size: 12px;
transition: transform 0.25s ease;
}

.service-link:hover {
color: var(--dark-blue);
}

.service-link:hover i {
transform: translateX(5px);
}

/* Bottom CTA
--------------------------------------------------------- */

.services-cta {
padding: 40px 30px;
background: var(--light-blue);
border-radius: 18px;
}

.services-cta h3 {
margin-bottom: 8px;
color: var(--text-dark);
font-size: 24px;
font-weight: 700;
}

.services-cta p {
margin-bottom: 22px;
color: var(--text-muted);
}

/* CTA Button
--------------------------------------------------------- */

.btn-primary-modern {
display: inline-flex;
align-items: center;


padding: 13px 24px;

background: var(--primary-blue);
color: var(--white);

border-radius: 8px;

font-size: 14px;
font-weight: 700;
text-decoration: none;

transition: all 0.3s ease;


}

.btn-primary-modern:hover {
background: var(--dark-blue);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(8, 102, 214, 0.25);
}

/* Responsive
--------------------------------------------------------- */

@media (max-width: 991px) {


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

.service-image {
    height: 220px;
}


}

@media (max-width: 767px) {


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

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

.service-image {
    height: 230px;
}

.service-content {
    padding: 25px;
}

.service-content p {
    min-height: auto;
}

.services-cta {
    padding: 30px 20px;
}

.services-cta h3 {
    font-size: 21px;
}


}
/* =========================================================
MODERN CONTACT PAGE
WHITE + BLUE DESIGN SYSTEM
========================================================= */

:root {
--primary-blue: #0866d6;
--dark-blue: #063b7a;
--light-blue: #eef6ff;
--lighter-blue: #f7fbff;


--text-dark: #172033;
--text-muted: #667085;

--border: #e4eaf1;
--white: #ffffff;

--shadow: 0 15px 45px rgba(20, 50, 90, 0.08);


}

/* =========================================================
PAGE HEADER
========================================================= */

.modern-page-header {
position: relative;
padding: 95px 0 90px;
background:
linear-gradient(
135deg,
rgba(6, 59, 122, 0.97),
rgba(8, 102, 214, 0.88)
),
url("../img/Container10.jpg") center/cover no-repeat;
overflow: hidden;
}

.modern-page-header::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -150px;
top: -200px;


border: 70px solid rgba(255,255,255,0.06);
border-radius: 50%;


}

.page-header-content {
position: relative;
z-index: 2;
max-width: 760px;
}

.page-header-content > span {
display: inline-block;
margin-bottom: 15px;


color: #ffffff;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;


}

.page-header-content h1 {
margin-bottom: 18px;


color: #ffffff;
font-size: clamp(38px, 5vw, 62px);
line-height: 1.1;
font-weight: 800;


}

.page-header-content p {
max-width: 650px;
margin-bottom: 28px;


color: rgba(255,255,255,0.85);
font-size: 17px;
line-height: 1.7;


}

.page-breadcrumb {
display: flex;
align-items: center;
gap: 12px;


font-size: 14px;


}

.page-breadcrumb a {
color: #ffffff;
text-decoration: none;
}

.page-breadcrumb i {
color: rgba(255,255,255,0.55);
}

.page-breadcrumb span {
color: rgba(255,255,255,0.7);
}

/* =========================================================
CONTACT SECTION
========================================================= */

.modern-contact-section {
padding: 100px 0;
background: var(--white);
}

/* Introduction */

.contact-intro {
margin-bottom: 35px;
}

.section-label {
display: inline-block;


margin-bottom: 14px;
padding: 7px 14px;

background: var(--light-blue);
color: var(--primary-blue);

border-radius: 50px;

font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;


}

.contact-intro h2 {
margin-bottom: 18px;


color: var(--text-dark);
font-size: 40px;
line-height: 1.2;
font-weight: 800;


}

.contact-intro h2 span {
color: var(--primary-blue);
}

.contact-intro p {
max-width: 540px;


color: var(--text-muted);
font-size: 15px;
line-height: 1.8;


}

/* =========================================================
CONTACT INFORMATION
========================================================= */

.contact-info-card {
padding: 10px 28px;


background: var(--lighter-blue);
border: 1px solid var(--border);
border-radius: 16px;


}

.contact-info-item {
display: flex;
align-items: center;


padding: 23px 0;

border-bottom: 1px solid var(--border);


}

.contact-info-item:last-child {
border-bottom: none;
}

.contact-icon {
width: 52px;
height: 52px;


flex-shrink: 0;

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

margin-right: 18px;

background: var(--primary-blue);
color: var(--white);

border-radius: 12px;

font-size: 17px;


}

.contact-info-item span {
display: block;
margin-bottom: 5px;


color: var(--text-muted);

font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;


}

.contact-info-item a {
color: var(--text-dark);


font-size: 15px;
font-weight: 600;
line-height: 1.5;

text-decoration: none;

transition: color 0.2s ease;


}

.contact-info-item a:hover {
color: var(--primary-blue);
}

/* =========================================================
WHATSAPP CARD
========================================================= */

.whatsapp-contact-card {
display: flex;
align-items: center;
gap: 16px;


margin-top: 18px;
padding: 18px 20px;

background: var(--white);
border: 1px solid var(--border);

border-radius: 14px;

box-shadow: 0 8px 30px rgba(20,50,90,0.05);


}

.whatsapp-icon {
width: 48px;
height: 48px;


flex-shrink: 0;

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

background: #25D366;
color: #ffffff;

border-radius: 50%;

font-size: 22px;


}

.whatsapp-content {
flex: 1;
}

.whatsapp-content strong {
display: block;


margin-bottom: 3px;

color: var(--text-dark);
font-size: 14px;


}

.whatsapp-content p {
margin: 0;


color: var(--text-muted);
font-size: 12px;


}

.whatsapp-button {
display: inline-flex;
align-items: center;
gap: 7px;


padding: 10px 14px;

background: var(--light-blue);
color: var(--primary-blue);

border-radius: 7px;

font-size: 12px;
font-weight: 700;

text-decoration: none;

transition: all 0.25s ease;


}

.whatsapp-button:hover {
background: var(--primary-blue);
color: var(--white);
}

/* =========================================================
ENQUIRY FORM
========================================================= */

.enquiry-card {
padding: 42px;


background: var(--white);

border: 1px solid var(--border);
border-radius: 20px;

box-shadow: var(--shadow);


}

.enquiry-header {
margin-bottom: 30px;
}

.enquiry-header h2 {
margin-bottom: 8px;


color: var(--text-dark);
font-size: 30px;
font-weight: 800;


}

.enquiry-header p {
margin: 0;


color: var(--text-muted);
font-size: 14px;


}

/* Form Labels */

.enquiry-card label {
display: block;


margin-bottom: 8px;

color: var(--text-dark);

font-size: 12px;
font-weight: 700;


}

/* Form Inputs */

.modern-form-control {
width: 100%;


min-height: 54px;

padding: 14px 16px;

background: #fbfcfe;

border: 1px solid var(--border);
border-radius: 9px;

color: var(--text-dark);

font-size: 14px;

outline: none;

transition: all 0.25s ease;


}

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

select.modern-form-control {
appearance: auto;
}

.modern-form-control::placeholder {
color: #98a2b3;
}

.modern-form-control:focus {
background: var(--white);


border-color: var(--primary-blue);

box-shadow: 0 0 0 4px rgba(8,102,214,0.08);


}

/* Submit Button */

.modern-submit-button {
width: 100%;


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

padding: 7px 7px 7px 22px;

margin-top: 8px;

background: var(--primary-blue);
color: var(--white);

border: none;
border-radius: 9px;

font-size: 14px;
font-weight: 700;

cursor: pointer;

transition: all 0.3s ease;


}

.modern-submit-button span {
width: 42px;
height: 42px;


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

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

border-radius: 7px;


}

.modern-submit-button:hover {
background: var(--dark-blue);
transform: translateY(-2px);


box-shadow: 0 10px 25px rgba(8,102,214,0.2);


}

.modern-submit-button i {
transition: transform 0.25s ease;
}

.modern-submit-button:hover i {
transform: translateX(4px);
}

/* =========================================================
BOTTOM CTA
========================================================= */

.contact-bottom-cta {
padding: 70px 0;


background: var(--light-blue);


}

.contact-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;


gap: 30px;


}

.contact-cta-inner > div:first-child span {
display: block;


margin-bottom: 8px;

color: var(--primary-blue);

font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;


}

.contact-cta-inner h2 {
margin: 0;


color: var(--text-dark);

font-size: 30px;
font-weight: 800;


}

.cta-buttons {
display: flex;
gap: 10px;
}

.cta-phone,
.cta-whatsapp {
display: inline-flex;
align-items: center;
gap: 9px;


padding: 13px 20px;

border-radius: 8px;

font-size: 13px;
font-weight: 700;

text-decoration: none;

transition: all 0.25s ease;


}

.cta-phone {
background: var(--primary-blue);
color: var(--white);
}

.cta-phone:hover {
background: var(--dark-blue);
color: var(--white);
}

.cta-whatsapp {
background: var(--white);
color: var(--text-dark);


border: 1px solid var(--border);


}

.cta-whatsapp:hover {
border-color: #25D366;
color: #25D366;
}

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

@media (max-width: 991px) {


.modern-contact-section {
    padding: 75px 0;
}

.contact-intro h2 {
    font-size: 34px;
}

.contact-cta-inner {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.modern-page-header {
    padding: 70px 0;
}

.modern-page-header h1 {
    font-size: 38px;
}

.modern-page-header p {
    font-size: 15px;
}

.modern-contact-section {
    padding: 60px 0;
}

.contact-intro h2 {
    font-size: 30px;
}

.contact-info-card {
    padding: 5px 20px;
}

.contact-info-item {
    align-items: flex-start;
}

.contact-icon {
    width: 46px;
    height: 46px;
}

.whatsapp-contact-card {
    flex-wrap: wrap;
}

.whatsapp-button {
    width: 100%;
    justify-content: center;
}

.enquiry-card {
    padding: 28px 20px;
    border-radius: 15px;
}

.enquiry-header h2 {
    font-size: 26px;
}

.contact-bottom-cta {
    padding: 55px 0;
}

.contact-cta-inner h2 {
    font-size: 25px;
}

.cta-buttons {
    width: 100%;
    flex-direction: column;
}

.cta-phone,
.cta-whatsapp {
    width: 100%;
    justify-content: center;
}


}


/* =========================================================
LOCATION SECTION
========================================================= */

.location-section {
padding-top: 90px;
background: #ffffff;
}

.location-heading {
max-width: 650px;
margin: 0 auto 45px;
}

.location-heading h2 {
margin-bottom: 12px;
color: #172033;
font-size: 38px;
font-weight: 800;
}

.location-heading p {
margin: 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

/* Map */

.map-wrapper {
position: relative;
overflow: hidden;
}

.map-wrapper iframe {
display: block;
width: 100%;
height: 450px;
filter: grayscale(15%);
}

/* Floating Location Card */

.map-location-card {
position: absolute;
left: 6%;
bottom: 30px;


display: flex;
align-items: center;
gap: 15px;

padding: 16px 20px;

background: #ffffff;
border-radius: 12px;

box-shadow: 0 12px 35px rgba(20, 50, 90, 0.15);


}

.map-location-icon {
width: 48px;
height: 48px;


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

flex-shrink: 0;

background: #0866d6;
color: #ffffff;

border-radius: 10px;


}

.map-location-card span {
display: block;


margin-bottom: 3px;

color: #0866d6;

font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;


}

.map-location-card strong {
display: block;


color: #172033;

font-size: 14px;


}

.map-location-card p {
margin: 2px 0 0;


color: #667085;

font-size: 12px;


}

/* =========================================================
MODERN FOOTER
========================================================= */

.modern-footer {
padding: 75px 0 0;


background: #071a33;
color: #ffffff;


}

.footer-main {
display: grid;


grid-template-columns:
    1.5fr
    1fr
    1fr
    1.2fr;

gap: 55px;

padding-bottom: 60px;


}

/* Company */

.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;


margin-bottom: 20px;

color: #ffffff;

text-decoration: none;


}

.footer-logo img {
width: 42px;
height: 42px;


object-fit: contain;


}

.footer-logo span {
max-width: 170px;


font-size: 18px;
line-height: 1.2;
font-weight: 800;


}

.footer-company > p {
max-width: 310px;


margin-bottom: 25px;

color: #9baabd;

font-size: 14px;
line-height: 1.8;


}

/* Quote Button */

.footer-quote-button {
display: inline-flex;
align-items: center;
gap: 10px;


padding: 12px 18px;

background: #0866d6;
color: #ffffff;

border-radius: 7px;

font-size: 13px;
font-weight: 700;

text-decoration: none;

transition: all 0.25s ease;


}

.footer-quote-button:hover {
background: #ffffff;
color: #0866d6;


transform: translateY(-2px);


}

/* Footer Columns */

.footer-column h3 {
margin-bottom: 22px;


color: #ffffff;

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


}

.footer-column > a {
display: block;


width: fit-content;

margin-bottom: 12px;

color: #9baabd;

font-size: 13px;

text-decoration: none;

transition: all 0.2s ease;


}

.footer-column > a:hover {
color: #ffffff;
transform: translateX(4px);
}

/* Contact */

.footer-contact > a {
display: flex;
align-items: flex-start;
gap: 12px;


width: 100%;

margin-bottom: 17px;


}

.footer-contact > a i {
width: 17px;


margin-top: 2px;

color: #4d9cff;


}

.footer-contact > a span {
flex: 1;
}

/* WhatsApp */

.footer-contact .footer-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;


width: auto;

margin-top: 5px;
padding: 10px 15px;

background: #ffffff;
color: #172033;

border-radius: 7px;

font-size: 12px;
font-weight: 700;

transition: all 0.25s ease;


}

.footer-contact .footer-whatsapp i {
width: auto;
margin: 0;


color: #25D366;


}

.footer-contact .footer-whatsapp:hover {
background: #25D366;
color: #ffffff;


transform: none;


}

.footer-contact .footer-whatsapp:hover i {
color: #ffffff;
}

/* =========================================================
FOOTER BOTTOM
========================================================= */

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;


gap: 20px;

padding: 22px 0;

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


}

.footer-bottom p {
margin: 0;


color: #7f91a7;

font-size: 11px;


}

.footer-bottom-links {
display: flex;
gap: 20px;
}

.footer-bottom-links a {
color: #7f91a7;


font-size: 11px;

text-decoration: none;


}

.footer-bottom-links a:hover {
color: #ffffff;
}

/* Social */

.footer-social {
display: flex;
gap: 7px;
}

.footer-social a {
width: 34px;
height: 34px;


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

background: rgba(255,255,255,0.06);
color: #9baabd;

border-radius: 6px;

font-size: 12px;

text-decoration: none;

transition: all 0.25s ease;


}

.footer-social a:hover {
background: #0866d6;
color: #ffffff;
}

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

@media (max-width: 991px) {


.footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 45px;
}

.footer-company {
    grid-column: span 2;
}


}

@media (max-width: 767px) {


.location-section {
    padding-top: 60px;
}

.location-heading {
    padding: 0 20px;
    margin-bottom: 30px;
}

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

.map-wrapper iframe {
    height: 380px;
}

.map-location-card {
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.footer-main {
    display: block;
    padding-bottom: 40px;
}

.footer-company,
.footer-column {
    margin-bottom: 40px;
}

.footer-company {
    grid-column: auto;
}

.footer-bottom {
    flex-direction: column;
    align-items: flex-start;
}

.footer-bottom-links {
    flex-wrap: wrap;
}


}
/* =========================================================
   CONTAINER SERVICES SHOWCASE
========================================================= */

:root {
    --container-navy: #071a2d;
    --container-blue: #1479d1;
    --container-blue-dark: #0d5fa8;
    --container-light-blue: #eaf4fc;

    --container-white: #ffffff;
    --container-light: #f5f7f9;

    --container-text: #64717d;
    --container-heading: #172532;

    --container-border: #e2e8ed;

    --container-transition: all 0.4s ease;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.container-showcase {
    position: relative;

    background: #ffffff;

    overflow: hidden;
}


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

.showcase-heading {
    padding: 110px 0 80px;

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

    align-items: end;

    gap: 80px;
}

.showcase-heading-left {
    max-width: 700px;
}

.showcase-heading-right {
    max-width: 470px;
    padding-bottom: 5px;
}


.showcase-label {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--container-blue);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.showcase-heading h2 {
    margin: 0;

    color: var(--container-heading);

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

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.showcase-heading h2 span {
    display: block;

    color: var(--container-blue);
}


.showcase-heading-right p {
    margin: 0;

    color: var(--container-text);

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   FEATURE SERVICE
========================================================= */

.container-feature {
    position: relative;

    padding: 50px 0;
}


.container-feature-inner {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    min-height: 570px;

    align-items: stretch;
}


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

.feature-image {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    background: var(--container-navy);
}


.feature-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.container-feature:hover .feature-image img {
    transform: scale(1.05);
}


/* IMAGE OVERLAY */

.image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 45, 0.05) 25%,
            rgba(7, 26, 45, 0.7) 100%
        );
}


/* =========================================================
   NUMBER
========================================================= */

.feature-number {
    position: absolute;

    top: 30px;
    left: 30px;

    z-index: 3;

    color: #ffffff;

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

    font-size: 72px;

    line-height: 1;

    font-weight: 800;

    opacity: 0.9;
}


/* =========================================================
   IMAGE TAG
========================================================= */

.image-tag {
    position: absolute;

    bottom: 28px;
    left: 30px;

    z-index: 3;

    padding: 9px 14px;

    background: var(--container-blue);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


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

.feature-content {
    position: relative;

    padding: 70px 65px;

    background: var(--container-light);

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-top: 1px solid var(--container-border);
    border-right: 1px solid var(--container-border);
    border-bottom: 1px solid var(--container-border);
}


.feature-kicker {
    display: block;

    margin-bottom: 18px;

    color: var(--container-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   ICON
========================================================= */

.feature-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 25px;

    background: #ffffff;

    border: 1px solid var(--container-border);

    box-shadow:
        0 10px 30px rgba(7, 26, 45, 0.08);
}


.feature-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


/* =========================================================
   TITLE
========================================================= */

.feature-content h3 {
    margin: 0 0 20px;

    color: var(--container-heading);

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

    font-size: clamp(30px, 3vw, 43px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.feature-content h3 span {
    display: block;

    color: var(--container-blue);
}


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

.feature-description {
    max-width: 510px;

    margin: 0 0 28px;

    color: var(--container-text);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   POINTS
========================================================= */

.feature-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-bottom: 32px;
}


.feature-points div {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #3e4b57;

    font-size: 12px;

    font-weight: 600;
}


.feature-points i {
    color: var(--container-blue);

    font-size: 11px;
}


/* =========================================================
   BUTTON
========================================================= */

.feature-button {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 50px;

    padding: 0 21px;

    background: var(--container-navy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.feature-button i {
    transition: transform 0.3s ease;
}


.feature-button:hover {
    background: var(--container-blue);

    color: #ffffff;

    transform: translateY(-2px);
}


.feature-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   REVERSE LAYOUT
========================================================= */

.container-feature-reverse .container-feature-inner {
    grid-template-columns: 0.85fr 1.15fr;
}


.container-feature-reverse .feature-image {
    order: 2;
}


.container-feature-reverse .feature-content {
    order: 1;

    border-left: 1px solid var(--container-border);
    border-right: 0;
}


/* =========================================================
   CONVERSION FEATURE
========================================================= */

.conversion-feature {
    position: relative;

    min-height: 700px;

    margin: 70px 0 0;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--container-navy);
}


.conversion-image {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.conversion-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.conversion-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 26, 45, 0.98) 0%,
            rgba(7, 26, 45, 0.9) 38%,
            rgba(7, 26, 45, 0.55) 65%,
            rgba(7, 26, 45, 0.3) 100%
        );
}


.conversion-content {
    position: relative;

    z-index: 2;

    max-width: 650px;

    padding: 110px 0;
}


.conversion-content .showcase-label {
    color: #64b4ef;
}


.conversion-content h2 {
    margin: 0 0 25px;

    color: #ffffff;

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;
}


.conversion-content h2 span {
    display: block;

    color: #52a8e8;
}


.conversion-content > p {
    max-width: 570px;

    margin: 0 0 35px;

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

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   CONVERSION FEATURES
========================================================= */

.conversion-features {
    display: grid;

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

    gap: 12px;

    margin-bottom: 35px;
}


.conversion-features div {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

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

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

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


.conversion-features i {
    color: #52a8e8;

    font-size: 15px;
}


/* =========================================================
   CONVERSION BUTTON
========================================================= */

.conversion-button {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 24px;

    background: var(--container-blue);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.conversion-button:hover {
    background: #ffffff;

    color: var(--container-navy);
}


.conversion-button i {
    transition: transform 0.3s ease;
}


.conversion-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   CUSTOM SOLUTION
========================================================= */

.custom-solution {
    padding: 90px 0;
}


.custom-solution-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 65px;

    background: var(--container-light-blue);

    border-left: 5px solid var(--container-blue);
}


.custom-solution h2 {
    margin: 0 0 15px;

    color: var(--container-heading);

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

    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.custom-solution h2 span {
    color: var(--container-blue);
}


.custom-solution p {
    max-width: 620px;

    margin: 0;

    color: var(--container-text);

    font-size: 14px;

    line-height: 1.8;
}


/* CUSTOM BUTTON */

.custom-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 24px;

    background: var(--container-navy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.custom-button:hover {
    background: var(--container-blue);

    color: #ffffff;

    transform: translateY(-2px);
}


.custom-button i {
    transition: transform 0.3s ease;
}


.custom-button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 991px) {

    .showcase-heading {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 0 60px;
    }


    .container-feature-inner,
    .container-feature-reverse .container-feature-inner {
        grid-template-columns: 1fr;
    }


    .feature-image {
        min-height: 450px;

        order: 1 !important;
    }


    .feature-content,
    .container-feature-reverse .feature-content {
        order: 2;

        padding: 55px 45px;

        border: 1px solid var(--container-border);
        border-top: 0;
    }


    .conversion-feature {
        min-height: 650px;
    }


    .custom-solution-inner {
        align-items: flex-start;

        flex-direction: column;

        padding: 45px;
    }

}


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

@media (max-width: 767px) {

    .showcase-heading {
        padding: 65px 0 45px;
    }


    .showcase-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .showcase-heading-right p {
        font-size: 14px;

        line-height: 1.8;
    }


    .container-feature {
        padding: 25px 0;
    }


    .feature-image {
        min-height: 350px;
    }


    .feature-number {
        top: 20px;
        left: 20px;

        font-size: 55px;
    }


    .image-tag {
        left: 20px;
        bottom: 20px;
    }


    .feature-content {
        padding: 40px 25px !important;
    }


    .feature-icon {
        width: 55px;
        height: 55px;
    }


    .feature-content h3 {
        font-size: 32px;
    }


    .feature-points {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .feature-button {
        width: 100%;

        justify-content: center;
    }


    .conversion-feature {
        min-height: 700px;

        margin-top: 45px;
    }


    .conversion-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7, 26, 45, 0.96),
                rgba(7, 26, 45, 0.75)
            );
    }


    .conversion-content {
        padding: 70px 0;
    }


    .conversion-content h2 {
        font-size: 42px;
    }


    .conversion-features {
        grid-template-columns: 1fr;
    }


    .conversion-button {
        width: 100%;

        justify-content: center;
    }


    .custom-solution {
        padding: 55px 0;
    }


    .custom-solution-inner {
        padding: 35px 25px;

        border-left-width: 4px;
    }


    .custom-button {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .showcase-heading h2 {
        font-size: 33px;
    }


    .feature-image {
        min-height: 300px;
    }


    .feature-content h3 {
        font-size: 29px;
    }


    .conversion-content h2 {
        font-size: 36px;
    }

}
/* =========================================================
   CONTAINER SERVICES SHOWCASE
========================================================= */

:root {
    --container-navy: #071a2d;
    --container-blue: #1479d1;
    --container-blue-dark: #0d5fa8;
    --container-light-blue: #eaf4fc;

    --container-white: #ffffff;
    --container-light: #f5f7f9;

    --container-text: #64717d;
    --container-heading: #172532;

    --container-border: #e2e8ed;

    --container-transition: all 0.4s ease;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.container-showcase {
    position: relative;

    background: #ffffff;

    overflow: hidden;
}


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

.showcase-heading {
    padding: 110px 0 80px;

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

    align-items: end;

    gap: 80px;
}

.showcase-heading-left {
    max-width: 700px;
}

.showcase-heading-right {
    max-width: 470px;
    padding-bottom: 5px;
}


.showcase-label {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--container-blue);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.showcase-heading h2 {
    margin: 0;

    color: var(--container-heading);

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

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;
}

.showcase-heading h2 span {
    display: block;

    color: var(--container-blue);
}


.showcase-heading-right p {
    margin: 0;

    color: var(--container-text);

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   FEATURE SERVICE
========================================================= */

.container-feature {
    position: relative;

    padding: 50px 0;
}


.container-feature-inner {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    min-height: 570px;

    align-items: stretch;
}


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

.feature-image {
    position: relative;

    min-height: 570px;

    overflow: hidden;

    background: var(--container-navy);
}


.feature-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.container-feature:hover .feature-image img {
    transform: scale(1.05);
}


/* IMAGE OVERLAY */

.image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 45, 0.05) 25%,
            rgba(7, 26, 45, 0.7) 100%
        );
}


/* =========================================================
   NUMBER
========================================================= */

.feature-number {
    position: absolute;

    top: 30px;
    left: 30px;

    z-index: 3;

    color: #ffffff;

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

    font-size: 72px;

    line-height: 1;

    font-weight: 800;

    opacity: 0.9;
}


/* =========================================================
   IMAGE TAG
========================================================= */

.image-tag {
    position: absolute;

    bottom: 28px;
    left: 30px;

    z-index: 3;

    padding: 9px 14px;

    background: var(--container-blue);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


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

.feature-content {
    position: relative;

    padding: 70px 65px;

    background: var(--container-light);

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-top: 1px solid var(--container-border);
    border-right: 1px solid var(--container-border);
    border-bottom: 1px solid var(--container-border);
}


.feature-kicker {
    display: block;

    margin-bottom: 18px;

    color: var(--container-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================================
   ICON
========================================================= */

.feature-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 25px;

    background: #ffffff;

    border: 1px solid var(--container-border);

    box-shadow:
        0 10px 30px rgba(7, 26, 45, 0.08);
}


.feature-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


/* =========================================================
   TITLE
========================================================= */

.feature-content h3 {
    margin: 0 0 20px;

    color: var(--container-heading);

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

    font-size: clamp(30px, 3vw, 43px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.feature-content h3 span {
    display: block;

    color: var(--container-blue);
}


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

.feature-description {
    max-width: 510px;

    margin: 0 0 28px;

    color: var(--container-text);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   POINTS
========================================================= */

.feature-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-bottom: 32px;
}


.feature-points div {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #3e4b57;

    font-size: 12px;

    font-weight: 600;
}


.feature-points i {
    color: var(--container-blue);

    font-size: 11px;
}


/* =========================================================
   BUTTON
========================================================= */

.feature-button {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 50px;

    padding: 0 21px;

    background: var(--container-navy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.feature-button i {
    transition: transform 0.3s ease;
}


.feature-button:hover {
    background: var(--container-blue);

    color: #ffffff;

    transform: translateY(-2px);
}


.feature-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   REVERSE LAYOUT
========================================================= */

.container-feature-reverse .container-feature-inner {
    grid-template-columns: 0.85fr 1.15fr;
}


.container-feature-reverse .feature-image {
    order: 2;
}


.container-feature-reverse .feature-content {
    order: 1;

    border-left: 1px solid var(--container-border);
    border-right: 0;
}


/* =========================================================
   CONVERSION FEATURE
========================================================= */

.conversion-feature {
    position: relative;

    min-height: 700px;

    margin: 70px 0 0;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--container-navy);
}


.conversion-image {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.conversion-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.conversion-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 26, 45, 0.98) 0%,
            rgba(7, 26, 45, 0.9) 38%,
            rgba(7, 26, 45, 0.55) 65%,
            rgba(7, 26, 45, 0.3) 100%
        );
}


.conversion-content {
    position: relative;

    z-index: 2;

    max-width: 650px;

    padding: 110px 0;
}


.conversion-content .showcase-label {
    color: #64b4ef;
}


.conversion-content h2 {
    margin: 0 0 25px;

    color: #ffffff;

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

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.05;

    letter-spacing: -2px;
}


.conversion-content h2 span {
    display: block;

    color: #52a8e8;
}


.conversion-content > p {
    max-width: 570px;

    margin: 0 0 35px;

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

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   CONVERSION FEATURES
========================================================= */

.conversion-features {
    display: grid;

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

    gap: 12px;

    margin-bottom: 35px;
}


.conversion-features div {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

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

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

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


.conversion-features i {
    color: #52a8e8;

    font-size: 15px;
}


/* =========================================================
   CONVERSION BUTTON
========================================================= */

.conversion-button {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 24px;

    background: var(--container-blue);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.conversion-button:hover {
    background: #ffffff;

    color: var(--container-navy);
}


.conversion-button i {
    transition: transform 0.3s ease;
}


.conversion-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   CUSTOM SOLUTION
========================================================= */

.custom-solution {
    padding: 90px 0;
}


.custom-solution-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 65px;

    background: var(--container-light-blue);

    border-left: 5px solid var(--container-blue);
}


.custom-solution h2 {
    margin: 0 0 15px;

    color: var(--container-heading);

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

    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.custom-solution h2 span {
    color: var(--container-blue);
}


.custom-solution p {
    max-width: 620px;

    margin: 0;

    color: var(--container-text);

    font-size: 14px;

    line-height: 1.8;
}


/* CUSTOM BUTTON */

.custom-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding: 0 24px;

    background: var(--container-navy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--container-transition);
}


.custom-button:hover {
    background: var(--container-blue);

    color: #ffffff;

    transform: translateY(-2px);
}


.custom-button i {
    transition: transform 0.3s ease;
}


.custom-button:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 991px) {

    .showcase-heading {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 0 60px;
    }


    .container-feature-inner,
    .container-feature-reverse .container-feature-inner {
        grid-template-columns: 1fr;
    }


    .feature-image {
        min-height: 450px;

        order: 1 !important;
    }


    .feature-content,
    .container-feature-reverse .feature-content {
        order: 2;

        padding: 55px 45px;

        border: 1px solid var(--container-border);
        border-top: 0;
    }


    .conversion-feature {
        min-height: 650px;
    }


    .custom-solution-inner {
        align-items: flex-start;

        flex-direction: column;

        padding: 45px;
    }

}


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

@media (max-width: 767px) {

    .showcase-heading {
        padding: 65px 0 45px;
    }


    .showcase-heading h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .showcase-heading-right p {
        font-size: 14px;

        line-height: 1.8;
    }


    .container-feature {
        padding: 25px 0;
    }


    .feature-image {
        min-height: 350px;
    }


    .feature-number {
        top: 20px;
        left: 20px;

        font-size: 55px;
    }


    .image-tag {
        left: 20px;
        bottom: 20px;
    }


    .feature-content {
        padding: 40px 25px !important;
    }


    .feature-icon {
        width: 55px;
        height: 55px;
    }


    .feature-content h3 {
        font-size: 32px;
    }


    .feature-points {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .feature-button {
        width: 100%;

        justify-content: center;
    }


    .conversion-feature {
        min-height: 700px;

        margin-top: 45px;
    }


    .conversion-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7, 26, 45, 0.96),
                rgba(7, 26, 45, 0.75)
            );
    }


    .conversion-content {
        padding: 70px 0;
    }


    .conversion-content h2 {
        font-size: 42px;
    }


    .conversion-features {
        grid-template-columns: 1fr;
    }


    .conversion-button {
        width: 100%;

        justify-content: center;
    }


    .custom-solution {
        padding: 55px 0;
    }


    .custom-solution-inner {
        padding: 35px 25px;

        border-left-width: 4px;
    }


    .custom-button {
        width: 100%;

        justify-content: center;
    }

}


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

@media (max-width: 480px) {

    .showcase-heading h2 {
        font-size: 33px;
    }


    .feature-image {
        min-height: 300px;
    }


    .feature-content h3 {
        font-size: 29px;
    }


    .conversion-content h2 {
        font-size: 36px;
    }

}