/* ==========================================================================

   TM Energy – Main Stylesheet

   Modern, fully responsive. Uses clamp() for fluid type/spacing.

   Breakpoints: 480px | 600px | 768px | 992px | 1200px | 1400px

   ========================================================================== */



/* --------------------------------------------------------------------------

   0. RESET & BOX MODEL

-------------------------------------------------------------------------- */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* --------------------------------------------------------------------------

   1. DESIGN TOKENS

-------------------------------------------------------------------------- */

:root {

    /* Brand colours */

    --clr-primary: #378AAD;

    --clr-primary-dark: #265E76;

    --clr-accent: #f9b234;

    --clr-accent-dark: #e5a022;

    --clr-text: #343F5A;

    --clr-text-muted: #888888;

    --clr-bg: #ffffff;

    --clr-bg-light: #f7f9fc;

    --clr-border: #E8E8E8;



    /* Fluid spacing tokens */

    --space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);

    --space-xs: clamp(0.5rem, 1vw, 0.75rem);

    --space-sm: clamp(0.75rem, 1.5vw, 1rem);

    --space-md: clamp(1rem, 2vw, 1.5rem);

    --space-lg: clamp(1.5rem, 3vw, 2.5rem);

    --space-xl: clamp(2rem, 4vw, 4rem);

    --space-2xl: clamp(3rem, 6vw, 6rem);

    --space-3xl: clamp(4rem, 8vw, 8rem);



    /* Section vertical padding */

    --section-pad: clamp(3rem, 7vw, 6rem);



    /* Fluid typography scale */

    --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);

    --text-sm: clamp(0.875rem, 1.8vw, 1rem);

    --text-base: clamp(0.9375rem, 2vw, 1.0625rem);

    --text-lg: clamp(1rem, 2.2vw, 1.25rem);

    --text-xl: clamp(1.125rem, 2.5vw, 1.5rem);

    --text-2xl: clamp(1.25rem, 3vw, 2rem);

    --text-3xl: clamp(1.5rem, 3.5vw, 2.5rem);

    --text-4xl: clamp(2rem, 4.5vw, 3.5rem);

    --text-hero: clamp(2.25rem, 5.5vw, 4rem);



    /* Shape */

    --radius-sm: 6px;

    --radius-md: 12px;

    --radius-lg: 20px;

    --radius-xl: 25px;

    --radius-pill: 50px;



    /* Elevation */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);

    --shadow-md: 0 8px 25px rgba(0, 0, 0, .08);

    --shadow-lg: 0 15px 40px rgba(0, 0, 0, .10);

    --shadow-xl: 0 25px 60px rgba(0, 0, 0, .12);



    --transition: 0.3s ease;



    /* Legacy aliases (keep for any inline references) */

    --primary-color: var(--clr-primary);

    --hover-color: var(--clr-primary-dark);

    --accent-color: var(--clr-accent);

    --text-primary: var(--clr-text);

    --text-secondary: var(--clr-text-muted);

    --background-light: var(--clr-bg-light);

    --white: var(--clr-bg);

    --border-color: var(--clr-border);

    --font-heading: 'Montserrat', sans-serif;

    --font-body: 'Poppins', sans-serif;

    --transition-speed: 0.3s;

}



/* Mobile typography boost (~2 size steps up) */

@media (max-width: 599px) {

    :root {

        --text-xs: 0.9375rem;

        --text-sm: 1.0625rem;

        --text-base: 1.125rem;

        --text-lg: 1.3125rem;

        --text-xl: 1.5rem;

        --text-2xl: 1.75rem;

        --text-3xl: 2rem;

        --text-4xl: 2.5rem;

        --text-hero: 2.75rem;

    }

}



/* --------------------------------------------------------------------------

   2. BASE

-------------------------------------------------------------------------- */

html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-body);

    font-size: var(--text-base);

    color: var(--clr-text);

    background-color: var(--clr-bg);

    line-height: 1.65;

    overflow-x: hidden;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-heading);

    font-weight: 700;

    line-height: 1.2;

    text-transform: uppercase;

    margin-top: 0;

}



h1 {

    font-size: var(--text-hero);

}



h2 {

    font-size: var(--text-4xl);

}



h3 {

    font-size: var(--text-2xl);

}



h4 {

    font-size: var(--text-xl);

}



h5 {

    font-size: var(--text-lg);

}



a {

    text-decoration: none;

    color: inherit;

    transition: color var(--transition);

}



img,

svg {

    max-width: 100%;

    height: auto;

    display: block;

}



ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



/* --------------------------------------------------------------------------

   3. LAYOUT UTILITIES

-------------------------------------------------------------------------- */

.container {

    width: 100%;

    max-width: 1200px;

    margin-inline: auto;

    padding-inline: clamp(1rem, 4vw, 1.5rem);

}



.container--wide {

    max-width: 95%;

    margin-inline: auto;

}



.section {

    padding-block: var(--section-pad);

}



.bg-light {

    background-color: var(--clr-bg-light);

}



.bg-dark {

    background-color: #222;

}



.text-white {

    color: var(--clr-bg) !important;

}



.text-center {

    text-align: center !important;

}



.text-left {

    text-align: left !important;

}



.mx-auto {

    margin-inline: auto !important;

}



/* --------------------------------------------------------------------------

   4. TYPOGRAPHY UTILITIES

-------------------------------------------------------------------------- */

.section-subtitle-small {

    display: block;

    text-align: center;

    color: var(--clr-primary);

    font-size: var(--text-xs);

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: var(--space-xs);

}



.section-title {

    text-align: center;

    color: var(--clr-primary);

    font-size: var(--text-3xl);

    margin-bottom: var(--space-lg);

}



.section-title-large {

    text-align: center;

    color: var(--clr-text);

    font-size: var(--text-3xl);

    font-weight: 700;

    margin-bottom: var(--space-md);

    text-transform: none;

}



.section-desc {

    font-size: var(--text-sm);

    line-height: 1.75;

    color: var(--clr-text-muted);

}



.section-header-premium {

    margin-bottom: var(--space-xl);

}



.subtitle-premium {

    display: block;

    color: var(--clr-accent);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: var(--text-xs);

    margin-bottom: var(--space-2xs);

}



.title-premium {

    font-size: var(--text-4xl);

    color: var(--clr-text);

    font-weight: 800;

    text-transform: none;

    line-height: 1.15;

    margin-top: 0;

}



.desc-premium {

    font-size: var(--text-base);

    color: var(--clr-text-muted);

    line-height: 1.8;

}



@media (max-width: 991px) {

    .section-header-premium {

        margin-bottom: var(--space-lg);

    }



    .title-premium {

        font-size: clamp(1.5rem, 4vw, 2rem);

    }



    .section-title-large {

        font-size: clamp(1.25rem, 4vw, 1.75rem);

        margin-bottom: var(--space-md);

    }



    body {

        overflow-x: hidden;

    }

}



/* --------------------------------------------------------------------------

   5. BUTTONS

-------------------------------------------------------------------------- */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.75rem 1.75rem;

    border-radius: var(--radius-pill);

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: var(--text-xs);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    cursor: pointer;

    border: none;

    transition: all var(--transition);

    white-space: nowrap;

    line-height: 1.4;

}



.btn-primary {

    background-color: var(--clr-primary);

    color: #fff;

}



.btn-primary:hover {

    background-color: var(--clr-primary-dark);

    color: #fff;

    transform: translateY(-2px);

}



.btn-secondary {

    background-color: var(--clr-primary);

    color: #fff;

}



.btn-secondary:hover {

    background-color: var(--clr-primary-dark);

}



.btn-accent {

    background-color: var(--clr-accent);

    color: #fff;

}



.btn-accent:hover {

    background-color: var(--clr-accent-dark);

    transform: translateY(-2px);

}



.btn-white {

    background-color: #fff;

    color: var(--clr-primary);

    border: 2px solid #fff;

}



.btn-white:hover {

    background-color: transparent;

    color: #fff;

}



.btn-lg {

    padding: 0.9rem 2.5rem;

    font-size: var(--text-sm);

}



/* Premium buttons */

.btn-premium {

    padding: 0.88rem 2rem;

    font-size: var(--text-sm);

    font-weight: 600;

    border-radius: var(--radius-sm);

    text-transform: uppercase;

    letter-spacing: 1px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border: none;

    transition: all var(--transition);

}



.btn-primary-premium {

    background: var(--clr-primary);

    color: #fff;

    box-shadow: 0 10px 20px rgba(55, 138, 173, .3);

}



.btn-primary-premium:hover {

    background: var(--clr-primary-dark);

    transform: translateY(-3px);

    box-shadow: 0 15px 25px rgba(55, 138, 173, .4);

}



.btn-outline-premium {

    background: transparent;

    color: #fff;

    border: 2px solid #fff;

}



.btn-outline-premium:hover {

    background: #fff;

    color: var(--clr-primary);

    transform: translateY(-3px);

}



/* CTA button */

.btn-cta {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    background-color: var(--clr-accent);

    color: #fff;

    padding: 0.88rem 2.25rem;

    border-radius: var(--radius-pill);

    font-weight: 700;

    font-size: var(--text-sm);

    text-transform: uppercase;

    letter-spacing: 0.5px;

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

    transition: all var(--transition);

    border: none;

}



.btn-cta:hover {

    background-color: var(--clr-accent-dark);

    color: #fff;

    transform: translateY(-2px);

}



.btn-cta .btn-icon svg {

    width: 14px;

    height: 14px;

    fill: currentColor;

    transition: transform var(--transition);

}



.btn-cta:hover .btn-icon svg {

    transform: translateX(4px);

}



.btn-text {

    margin-right: 0;

}



/* Hero CTA group */

.hero-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.hero-cta-buttons .btn-primary {

    background-color: var(--clr-primary);

    color: #fff;

    border: none;

}



.hero-cta-buttons .btn-primary:hover {

    background-color: var(--clr-primary-dark);

}



.hero-cta-buttons .btn-secondary {

    background-color: #fff;

    color: var(--clr-primary);

    border: 2px solid var(--clr-primary);

}



.hero-cta-buttons .btn-secondary:hover {

    background-color: var(--clr-primary);

    color: #fff;

}



/* Pulse */

.pulse-animation {

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(55, 138, 173, .8);

    }



    70% {

        box-shadow: 0 0 0 10px rgba(55, 138, 173, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(55, 138, 173, 0);

    }

}



/* --------------------------------------------------------------------------

   6. TOP BAR

-------------------------------------------------------------------------- */

.top-bar {

    background-color: var(--clr-primary);

    color: #fff;

    padding: 6px 0;

    font-size: var(--text-xs);

}



.top-bar-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-xs);

}



.top-contact {

    display: flex;

    gap: clamp(1rem, 3vw, 2.5rem);

    flex-wrap: wrap;

}



.top-contact a {

    color: #fff;

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: var(--text-xs);

    white-space: nowrap;

}



.top-contact a:hover {

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

}



.top-socials {

    display: flex;

    gap: 12px;

}



.top-socials a {

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

}



.top-socials a:hover {

    color: #fff;

}



@media (max-width: 1024px) {

    .top-bar {

        display: none !important;

    }

}



/* --------------------------------------------------------------------------

   7. HEADER & NAVIGATION

-------------------------------------------------------------------------- */

.site-header {

    background: transparent;

    position: absolute;

    width: 100%;

    z-index: 1000;

    padding: 16px 0;

    transition: all var(--transition);

}



.site-header .container,

.site-header .container--wide {

    max-width: 95%;

}



.site-header.scrolled {

    position: fixed;

    top: 0;

    background: #fff;

    box-shadow: 0 4px 20px rgba(52, 63, 90, .10);

    border-bottom: 4px solid var(--clr-primary);

    border-radius: 0 0 var(--radius-xl) var(--radius-xl);

    padding: 10px 0;

    animation: slideDownHeader .4s ease;

}



.site-header.header-solid {

    animation: none;

}



@keyframes slideDownHeader {

    from {

        transform: translateY(-100%);

    }



    to {

        transform: translateY(0);

    }

}



.site-header.scrolled .logo-img {

    max-height: 70px;

}



.header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Logo */

.logo {

    display: flex;

    align-items: center;

}



.logo-img {

    max-height: 90px;

    width: auto;

    transition: max-height var(--transition), opacity var(--transition);

}



.site-header:not(.scrolled) .logo-white {

    display: block;

}



.site-header:not(.scrolled) .logo-color {

    display: none;

}



.site-header.scrolled .logo-white {

    display: none;

}



.site-header.scrolled .logo-color {

    display: block;

}



/* Desktop nav colours when transparent */

@media (min-width: 1025px) {

    .site-header:not(.scrolled) .main-nav .menu>li>a {

        color: #fff;

    }



    .site-header:not(.scrolled) .main-nav .menu>li>a:hover {

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

        color: var(--clr-accent);

    }



    .site-header:not(.scrolled) .mobile-toggle {

        color: #fff;

    }

}



.site-header.scrolled .mobile-toggle {

    color: var(--clr-text);

}



/* Nav list */

.main-nav .menu {

    display: flex;

    list-style: none;

    gap: clamp(0.125rem, .8vw, .75rem);

    align-items: center;

    padding: 0;

    margin: 0;

}



.main-nav .menu li {

    position: relative;

}



.main-nav .menu a {

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: clamp(11px, 1.05vw, 15px);

    color: var(--clr-text);

    text-transform: uppercase;

    padding: 8px 10px;

    border-radius: var(--radius-sm);

    display: block;

    white-space: nowrap;

    transition: all var(--transition);

}



.main-nav .menu>li>a:hover,

.main-nav .menu>li.active>a {

    color: var(--clr-primary);

    background-color: #f0f7fa;

}



/* Dropdown indicator */

.has-dropdown>a {

    display: flex;

    align-items: center;

    gap: 5px;

}



.has-dropdown>a i {

    font-size: 10px;

    display: inline-block;

}



/* Dropdown panel */

.main-nav .menu .dropdown {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: #fff;

    min-width: 220px;

    box-shadow: var(--shadow-md);

    border-top: 3px solid var(--clr-primary);

    border-radius: 0 0 var(--radius-sm) var(--radius-sm);

    padding: 8px 0;

    z-index: 1001;

    list-style: none;

    flex-direction: column;

    gap: 0;

}



.main-nav .menu li:hover .dropdown {

    display: flex;

}



.main-nav .menu .dropdown li {

    width: 100%;

}



.main-nav .menu .dropdown a {

    font-size: var(--text-xs);

    padding: 10px 18px;

    color: var(--clr-text);

    text-transform: none;

    border-bottom: 1px solid #f0f0f0;

    border-radius: 0;

}



.main-nav .menu .dropdown li:last-child a {

    border-bottom: none;

}



.main-nav .menu .dropdown a:hover {

    background-color: var(--clr-bg-light);

    color: var(--clr-primary);

    padding-left: 24px;

}



.header-cta {

    margin-left: clamp(.75rem, 2vw, 2.5rem);

}



.mobile-toggle {

    display: none;

    font-size: 24px;

    cursor: pointer;

    color: var(--clr-text);

    padding: 8px;

    background: none;

    border: none;

    line-height: 1;

}



/* --------------------------------------------------------------------------

   8. MOBILE NAVIGATION (≤ 1024px)

-------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .mobile-toggle {

        display: block;

    }



    .header-cta {

        display: none;

    }



    .main-nav .menu {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        background: #fff;

        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);

        padding: 16px 0;

        gap: 0;

        max-height: calc(100vh - 80px);

        overflow-y: auto;

        z-index: 999;

    }



    .main-nav .menu.active {

        display: flex;

        animation: slideDown .3s ease forwards;

    }



    @keyframes slideDown {

        from {

            opacity: 0;

            transform: translateY(-10px);

        }



        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    .main-nav .menu li {

        width: 100%;

        border-bottom: 1px solid #f0f0f0;

        display: block;

    }



    .main-nav .menu li:last-child {

        border-bottom: none;

    }



    .main-nav .menu>li>a {

        padding: 14px 20px;

        display: flex;

        justify-content: center;

        align-items: center;

        width: 100%;

        font-size: var(--text-sm);

    }



    .main-nav .menu .dropdown {

        display: none;

        position: static;

        box-shadow: none;

        border-top: none;

        background-color: #f9f9f9;

        min-width: 100%;

        flex-direction: column;

    }



    .main-nav .menu li.active .dropdown {

        display: flex;

    }



    .main-nav .menu .dropdown a {

        padding: 12px 20px;

        text-align: center;

        color: var(--clr-primary-dark);

        border-bottom: 1px solid #eee;

    }



    .main-nav .menu .dropdown a:hover {

        padding-left: 24px;

    }



    .main-nav .menu .mobile-menu-contact {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 10px;

        padding: 16px 20px;

        background-color: #f0f7fa;

        border-top: 1px solid #e0e0e0;

        margin-top: 8px;

        width: 100%;

    }



    .mobile-contact-item {

        width: 100%;

    }



    .mobile-contact-item a {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        color: var(--clr-primary) !important;

        font-weight: 600;

        font-size: var(--text-xs) !important;

        padding: 8px 0 !important;

    }



    .mobile-contact-item i {

        color: var(--clr-primary);

    }

}



@media (min-width: 1025px) {

    .main-nav .menu .mobile-menu-contact {

        display: none;

    }

}



/* --------------------------------------------------------------------------

   9. HERO

-------------------------------------------------------------------------- */

.hero-premium {

    position: relative;

    background-size: cover;

    background-position: center;

    background-attachment: scroll;

    /* Fixed on iOS causes jitter */

    min-height: clamp(520px, 90vh, 900px);

    display: flex;

    align-items: center;

    color: #fff;

}



@media (min-width: 1025px) and (hover: hover) {

    .hero-premium {

        background-attachment: fixed;

    }

}



.hero-container {

    position: relative;

    z-index: 2;

}



.hero-content {

    max-width: min(980px, 95vw);

    padding-top: clamp(4rem, 10vw, 7rem);

    margin-inline: auto;

    text-align: center;

}



.hero-subtitle {

    display: block;

    font-size: var(--text-xs);

    letter-spacing: 4px;

    text-transform: uppercase;

    font-weight: 700;

    margin-bottom: var(--space-sm);

    color: var(--clr-accent);

}



.hero-title {

    font-size: clamp(1.9rem, 3.9vw, 3.25rem);

    line-height: 1.15;

    margin-bottom: var(--space-md);

    text-transform: none;

    font-weight: 800;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);

}



.hero-description {

    font-size: var(--text-lg);

    margin-bottom: var(--space-xl);

    opacity: .9;

    font-weight: 300;

    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);

}



.hero-description p {

    margin: 0;

}



.hero-actions {

    display: flex;

    gap: clamp(.75rem, 2vw, 1.25rem);

    flex-wrap: wrap;

    justify-content: center;

}



.hero-section h1,

.hero-section .lead {

    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);

}



.scroll-indicator {

    position: absolute;

    bottom: clamp(1rem, 3vw, 2rem);

    left: 50%;

    transform: translateX(-50%);

    animation: bounce 2.5s infinite;

}



.scroll-indicator a {

    color: #fff;

    font-size: 1.5rem;

    opacity: .7;

}



@keyframes bounce {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateX(-50%) translateY(0);

    }



    40% {

        transform: translateX(-50%) translateY(-12px);

    }



    60% {

        transform: translateX(-50%) translateY(-6px);

    }

}



/* Page hero (inner pages) */

.page-hero {

    position: relative;

    padding-block: clamp(5rem, 14vw, 9rem);

    color: #fff;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.page-hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .55);

}



.page-hero .container {

    position: relative;

    z-index: 2;

    text-align: center;

}



.page-title {

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 700;

    margin-bottom: 1rem;

    text-shadow: 0 2px 10px rgba(0, 0, 0, .3);

}



.breadcrumbs {

    font-size: var(--text-base);

    opacity: .9;

}



.breadcrumbs a {

    color: #fff;

    font-weight: 500;

}



.breadcrumbs .separator {

    margin-inline: 10px;

    opacity: .7;

}



/* --------------------------------------------------------------------------

   10. SERVICES ULTRA SECTION

-------------------------------------------------------------------------- */

.section-services-ultra {

    background-color: #ffffff;

    padding-block: var(--space-3xl);

    position: relative;

    overflow: hidden;

}



.section-services-ultra::before {

    content: "";

    position: absolute;

    top: -20%;

    left: -10%;

    width: 50%;

    height: 60%;

    background: radial-gradient(circle, rgba(55, 138, 173, .04) 0%, transparent 70%);

    pointer-events: none;

}



.section-services-ultra .subtitle-premium {

    letter-spacing: 4px;

}



.section-services-ultra .title-premium {

    font-size: clamp(1.75rem, 3.5vw, 3rem);

    letter-spacing: -.5px;

    margin-bottom: var(--space-xl);

}



/* --------------------------------------------------------------------------

   11. SERVICE GRIDS

-------------------------------------------------------------------------- */

.services-grid-3x3 {

    display: grid;

    gap: clamp(1rem, 2.5vw, 1.875rem);

    grid-template-columns: 1fr;

}



.services-grid-main-4 {

    display: grid;

    gap: clamp(1rem, 2.5vw, 1.875rem);

    grid-template-columns: 1fr;

}



@media (min-width: 768px) {

    .services-grid-main-4 {

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

    }

}



@media (min-width: 600px) {

    .services-grid-3x3 {

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

    }

}



@media (min-width: 1024px) {

    .services-grid-3x3 {

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

    }

}



.main-services-grid {

    display: grid;

    gap: clamp(1rem, 2.5vw, 1.875rem);

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

}



@media (max-width: 991px) {

    .main-services-grid {

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

    }

}



@media (max-width: 599px) {

    .main-services-grid {

        grid-template-columns: 1fr;

    }

}



.services-grid-ultra {

    display: grid;

    gap: clamp(1rem, 2.5vw, 1.875rem);

    grid-template-columns: 1fr;

}



.cooperation-grid-wide {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: stretch;

    gap: clamp(1.25rem, 2.5vw, 2rem);

    max-width: 1500px;

    margin-inline: auto;

}



.cooperation-grid-wide .service-card-ultra {

    width: min(100%, 470px);

    margin: 0;

}



@media (min-width: 900px) {

    .cooperation-grid-wide .service-card-ultra {

        width: min(100%, 460px);

    }

}



@media (min-width: 768px) {

    .services-grid-ultra {

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

    }

}



@media (min-width: 1200px) {

    .services-grid-ultra {

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

    }

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));

    gap: clamp(1rem, 2.5vw, 1.875rem);

}



/* --------------------------------------------------------------------------

   12. SERVICE CARD – ULTRA (Homepage premium)

-------------------------------------------------------------------------- */

.service-card-ultra {

    background-color: #fff;

    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);

    position: relative;

    display: flex;

    flex-direction: column;

    text-decoration: none;

    overflow: hidden;

    border-radius: var(--radius-md);

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

    box-shadow: 0 8px 30px rgba(55, 138, 173, .08);

    transition: all .5s cubic-bezier(.165, .84, .44, 1);

    z-index: 1;

}



.service-card-ultra::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: radial-gradient(circle, rgba(55, 138, 173, .04) 0%, transparent 70%);

    transform: translate(-50%, -50%);

    transition: width .7s ease, height .7s ease;

    border-radius: 50%;

    z-index: -1;

}



.service-card-ultra:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);

}



.service-card-ultra:hover::before {

    width: 150%;

    height: 150%;

}



.service-card-ultra .watermark {

    position: absolute;

    bottom: -1rem;

    right: 1rem;

    font-size: clamp(4rem, 6vw, 6rem);

    font-weight: 900;

    line-height: 1;

    color: rgba(0, 0, 0, .03);

    z-index: 0;

    transition: all .6s cubic-bezier(.165, .84, .44, 1);

    pointer-events: none;

    user-select: none;

}



.service-card-ultra:hover .watermark {

    color: rgba(0, 0, 0, .06);

    transform: translateY(-12px);

}



.service-card-ultra .content-wrapper {

    position: relative;

    z-index: 2;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.service-card-ultra .icon-wrapper {

    font-size: 2rem;

    color: rgba(0, 0, 0, .3);

    margin-bottom: var(--space-sm);

    transition: all .4s ease;

}



.service-card-ultra:hover .icon-wrapper {

    color: var(--clr-primary);

    transform: scale(1.1);

}



.service-card-ultra h3 {

    font-size: var(--text-xl);

    color: var(--clr-text);

    font-weight: 600;

    margin-bottom: var(--space-xs);

    letter-spacing: -.3px;

    text-transform: none;

}



.service-card-ultra p {

    color: var(--clr-text-muted);

    font-size: var(--text-sm);

    line-height: 1.55;

    margin-bottom: var(--space-lg);

    flex-grow: 1;

    transition: color .4s ease;

}



.service-card-ultra:hover p {

    color: var(--clr-text);

}



.service-card-ultra .explore-row {

    display: flex;

    align-items: center;

    gap: clamp(.75rem, 2vw, 1.5rem);

    margin-top: auto;

}



.service-card-ultra .explore-text {

    font-size: var(--text-xs);

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--clr-text-muted);

    transition: color .4s ease;

}



.service-card-ultra .explore-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--clr-text);

    transition: all .5s cubic-bezier(.165, .84, .44, 1);

    flex-shrink: 0;

}



.service-card-ultra:hover .explore-text {

    color: var(--clr-primary);

}



.service-card-ultra:hover .explore-icon {

    background-color: var(--clr-primary);

    color: #fff;

    transform: translateX(10px);

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

}



/* --------------------------------------------------------------------------

   13. SERVICE BOX (icon box)

-------------------------------------------------------------------------- */

.service-box {

    display: flex;

    flex-direction: column;

    background: #fff;

    padding: clamp(1.25rem, 2.5vw, 1.875rem) clamp(1rem, 2vw, 1.625rem);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    transition: transform var(--transition), box-shadow var(--transition);

    text-decoration: none;

    border: 1px solid transparent;

}



.service-box:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}



.service-icon {

    font-size: 2.5rem;

    color: var(--clr-primary);

    margin-bottom: var(--space-sm);

}



.service-content h3 {

    font-size: var(--text-lg);

    font-weight: 700;

    color: var(--clr-text);

    margin-bottom: var(--space-xs);

    text-transform: none;

}



.service-content p {

    font-size: var(--text-xs);

    color: #666;

    margin: 0;

    line-height: 1.6;

}



/* General service card */

.service-card {

    background: #fff;

    padding: clamp(1.25rem, 2.5vw, 1.875rem);

    box-shadow: var(--shadow-sm);

    border-radius: var(--radius-md);

    text-align: center;

    transition: transform var(--transition);

}



.service-card:hover {

    transform: translateY(-5px);

}



.service-card i,

.card-icon {

    font-size: 2.5rem;

    color: var(--clr-primary);

    margin-bottom: var(--space-md);

}



/* Premium service card (inner pages left accent) */

.service-card-premium {

    position: relative;

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

    border-left: 5px solid var(--clr-primary);

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .03);

    border-radius: var(--radius-md);

    background: #fff;

    padding: clamp(1.25rem, 2.5vw, 1.875rem);

    transition: transform var(--transition), box-shadow var(--transition);

}



.service-card-premium::before {

    content: '';

    position: absolute;

    inset: 0;

    width: 0;

    background-color: var(--clr-primary);

    opacity: .05;

    transition: width .4s ease;

    z-index: 0;

}



.service-card-premium:hover::before {

    width: 100%;

}



.service-card-premium>* {

    position: relative;

    z-index: 1;

}



/* --------------------------------------------------------------------------

   14. FEATURE CARDS

-------------------------------------------------------------------------- */

.features-grid {

    display: grid;

    gap: clamp(1rem, 2.5vw, 1.875rem);

    margin-top: var(--space-lg);

}



@media (min-width: 768px) {



    .features-grid.grid-3,

    .features-grid.grid-4 {

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

    }

}



@media (min-width: 1200px) {

    .features-grid.grid-4 {

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

    }



    .features-grid.grid-3 {

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

    }

}



.feature-card {

    background: #fff;

    padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);

    border-radius: var(--radius-md);

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    text-align: center;

    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

    border: 1px solid #eee;

    display: flex;

    flex-direction: column;

    align-items: center;

    height: 100%;

}



.feature-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(55, 138, 173, .15);

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

}



.feature-card .icon-wrapper {

    color: var(--clr-primary);

    margin-bottom: var(--space-md);

    transition: transform var(--transition);

}



.feature-card:hover .icon-wrapper {

    transform: scale(1.1);

}



.feature-card h4 {

    font-size: var(--text-lg);

    font-weight: 600;

    margin-bottom: var(--space-xs);

    color: #333;

    text-transform: none;

}



.feature-card p {

    color: #666;

    font-size: var(--text-sm);

    line-height: 1.55;

    margin: 0;

}



/* --------------------------------------------------------------------------

   15. WHY US

-------------------------------------------------------------------------- */

.why-us-section {

    padding-block: var(--section-pad);

}



.why-us-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(2rem, 5vw, 3.5rem);

    align-items: center;

}



@media (max-width: 991px) {

    .why-us-grid {

        grid-template-columns: 1fr;

    }

}



.why-us-image {

    width: 100%;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: linear-gradient(135deg, var(--clr-bg-light) 0%, #e8e8e8 100%);

    aspect-ratio: 16/9;

}



.why-us-content .section-subtitle-small,

.why-us-content .section-title-large {

    text-align: left;

}



.why-us-text {

    font-size: var(--text-base);

    line-height: 1.8;

    color: var(--clr-text);

    margin-bottom: var(--space-lg);

}



/* --------------------------------------------------------------------------

   16. STATS SECTION

-------------------------------------------------------------------------- */

.stats-section {

    padding-block: var(--section-pad);

    text-align: center;

    position: relative;

    background-color: transparent;

    z-index: 1;

}



.stats-section::before {

    content: '';

    position: absolute;

    inset: 0;

    background-color: #fff;

    background-image: url('../images/world-map-dots.svg');

    background-position: center;

    background-repeat: no-repeat;

    background-size: 70%;

    z-index: -1;

    opacity: .18;

}



.stats-section>.container {

    position: relative;

    z-index: 2;

}



.stats-header {

    max-width: 800px;

    margin-inline: auto;

    margin-bottom: var(--space-2xl);

}



.stats-header .section-subtitle-small {

    color: var(--clr-primary);

    font-weight: 700;

    font-size: var(--text-xs);

    letter-spacing: 1px;

    margin-bottom: 0;

}



.stats-header .section-title-large {

    font-size: clamp(1.75rem, 4vw, 2.75rem);

    margin-bottom: var(--space-md);

    color: #373a4d;

    font-weight: 800;

    line-height: 1.2;

}



.stats-header .section-desc {

    font-size: var(--text-sm);

    line-height: 1.7;

    color: #666;

    max-width: 700px;

    margin-inline: auto;

}



.stats-header .section-desc strong {

    font-weight: 700;

    color: #333;

}



.stats-grid {

    display: grid;

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

    gap: 0;

    position: relative;

    padding-block: var(--space-md);

    padding-inline: clamp(1.5rem, 5vw, 3.75rem);

    max-width: 900px;

    margin-inline: auto;

    margin-top: var(--space-xl);

}



.stats-grid::before,

.stats-grid::after {

    content: '';

    position: absolute;

    top: -4px;

    bottom: -4px;

    width: 28px;

    border: 3px solid #1f3c64;

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);

    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);

}



.stats-grid::before {

    left: 0;

    border-right: 0;

    border-radius: 40px 0 0 40px;

}



.stats-grid::after {

    right: 0;

    border-left: 0;

    border-radius: 0 40px 40px 0;

}



.stat-item {

    text-align: center;

    padding: var(--space-xs) var(--space-sm);

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.stat-item:not(:last-child)::after {

    content: '';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 60%;

    width: 1px;

    background-color: #e0e0e0;

}



.stat-number-wrapper {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    color: #ffb03b;

    margin-bottom: 4px;

    font-family: var(--font-heading);

    display: inline-block;

    transition: transform var(--transition);

}



.stat-item:hover .stat-number-wrapper {

    transform: scale(1.1);

}



.stat-suffix {

    font-size: clamp(1.25rem, 2.5vw, 1.75rem);

    color: #ffb03b;

    font-weight: 700;

    margin-left: 3px;

    transform: translateY(-4px);

    display: inline-block;

}



.stat-label {

    font-size: var(--text-xs);

    color: var(--clr-text-muted);

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

}



@media (max-width: 991px) {

    .stats-grid {

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

        padding-inline: clamp(1.5rem, 4vw, 2.5rem);

        margin-top: var(--space-lg);

    }



    .stat-item:nth-child(2n)::after {

        display: none;

    }



    .stat-item {

        padding-block: var(--space-sm);

    }

}



@media (max-width: 599px) {



    .stats-grid::before,

    .stats-grid::after {

        display: none;

    }



    .stat-item:not(:last-child)::after {

        display: none;

    }



    .stats-grid {

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

        padding-inline: var(--space-sm);

    }

}



/* Stats Premium (blue band) */

.stats-premium {

    background: var(--clr-primary);

    color: #fff;

    padding-block: var(--space-2xl);

    border-radius: var(--radius-xl);

    margin: var(--space-lg) auto;

    max-width: 95%;

}



.stats-grid-premium {

    display: flex;

    justify-content: space-around;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-lg);

    padding-inline: var(--space-lg);

}



.stat-box {

    text-align: center;

}



.stat-val {

    font-size: clamp(2.5rem, 5vw, 3.5rem);

    font-weight: 800;

    line-height: 1;

    margin-bottom: .4rem;

    font-family: var(--font-heading);

}



.stat-val-label {

    font-size: var(--text-sm);

    text-transform: uppercase;

    letter-spacing: 1px;

    opacity: .85;

}



.stat-divider {

    width: 1px;

    height: 60px;

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

}



@media (max-width: 767px) {

    .stats-grid-premium {

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding-inline: var(--space-sm);

    }



    .stat-divider {

        display: none;

    }



    .stat-box {

        display: flex;

        align-items: center;

        justify-content: space-between;

        text-align: left;

        padding: .9rem 1.2rem;

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

    }



    .stat-box:last-child {

        border-bottom: none;

    }



    .stat-val {

        font-size: 2.2rem;

        margin-bottom: 0;

    }



    .stat-val-label {

        text-align: right;

    }

}



/* --------------------------------------------------------------------------

   17. LOCATIONS CTA TEXT SECTION

-------------------------------------------------------------------------- */

.locations-cta-section {

    text-align: center;

    background-color: var(--clr-bg-light);

}



.max-width-800 {

    max-width: 800px;

    margin-inline: auto;

}



.locations-content {

    margin-top: var(--space-lg);

    font-size: var(--text-base);

    line-height: 1.8;

    color: #666;

}



.locations-content strong {

    color: #333;

    font-weight: 700;

}



.locations-content p {

    margin-bottom: var(--space-md);

}



.signature {

    font-style: italic;

    margin-top: var(--space-lg);

    margin-bottom: var(--space-xl);

    display: block;

    color: #888;

}



/* --------------------------------------------------------------------------

   18. REVIEWS SECTION

-------------------------------------------------------------------------- */

.reviews-section {

    padding-block: var(--space-3xl);

    background-color: #fff;

}



.reviews-layout {

    display: flex;

    gap: clamp(2rem, 5vw, 4rem);

    align-items: center;

    max-width: 1200px;

    margin-inline: auto;

}



@media (max-width: 1024px) {

    .reviews-layout {

        flex-direction: column-reverse;

    }

}



.reviews-slider-wrapper {

    flex: 1 1 55%;

    min-width: 0;

    position: relative;

    padding-inline: 10px;

}



@media (max-width: 1024px) {

    .reviews-slider-wrapper {

        flex: 1 1 100%;

        width: 100%;

    }

}



.reviews-content-side {

    flex: 0 1 38%;

    min-width: 0;

}



@media (max-width: 1024px) {

    .reviews-content-side {

        flex: 1 1 100%;

        width: 100%;

        text-align: center;

        margin-bottom: var(--space-lg);

    }

}



.review-slide {

    padding: 12px;

}



.review-card-modern {

    background-color: #fff;

    border: 1px solid #cce4f0;

    border-radius: var(--radius-md);

    padding: clamp(1.25rem, 3vw, 2rem);

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    display: flex;

    flex-direction: column;

    min-height: 220px;

    transition: transform var(--transition);

}



.review-card-modern:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(55, 138, 173, .1);

}



.review-text {

    font-size: var(--text-sm);

    line-height: 1.65;

    color: var(--clr-text-muted);

    margin-bottom: var(--space-lg);

    flex-grow: 1;

    font-style: italic;

}



.review-stars {

    color: var(--clr-primary);

    margin-bottom: var(--space-sm);

    font-size: var(--text-sm);

}



.review-author {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: auto;

}



.author-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

}



.author-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.author-name {

    font-weight: 700;

    color: var(--clr-text);

    font-size: var(--text-sm);

}



/* Slick arrows */

.slick-prev:before,

.slick-next:before {

    display: none !important;

}



.slick-prev,

.slick-next {

    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 38px !important;

    height: 38px !important;

    background: #fff !important;

    border: 1px solid var(--clr-primary) !important;

    border-radius: 50% !important;

    color: var(--clr-primary) !important;

    line-height: 38px !important;

    text-align: center !important;

    cursor: pointer !important;

    z-index: 9999 !important;

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;

}



.slick-prev {

    left: -22px !important;

}



.slick-next {

    right: -22px !important;

}



.slick-prev i,

.slick-next i {

    color: var(--clr-primary) !important;

}



.slick-prev:hover,

.slick-next:hover {

    background: var(--clr-primary) !important;

    border-color: var(--clr-primary) !important;

}



.slick-prev:hover i,

.slick-next:hover i {

    color: #fff !important;

}



.reviews-content-side .section-subtitle-small {

    color: var(--clr-primary);

    font-weight: 600;

    margin-bottom: 10px;

    display: block;

    text-align: left;

}



.reviews-content-side .section-title-large {

    color: var(--clr-text);

    text-align: left;

}



@media (max-width: 1024px) {

    .reviews-content-side .section-title-large {

        text-align: center;

    }



    .reviews-content-side .section-subtitle-small {

        text-align: center;

    }

}



.reviews-content-side .section-desc {

    color: var(--clr-text-muted);

    margin-bottom: var(--space-lg);

    line-height: 1.7;

}



.reviews-bottom-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: var(--space-md);

    gap: var(--space-sm);

    flex-wrap: wrap;

}



.bottom-bar-title {

    font-size: var(--text-lg);

    font-weight: 700;

    color: var(--clr-text);

    margin: 0;

}



@media (max-width: 599px) {

    .reviews-bottom-bar {

        flex-direction: column;

        text-align: center;

    }

}



/* --------------------------------------------------------------------------

   19. CONTACT SECTION

-------------------------------------------------------------------------- */

.contact-section {

    padding-block: var(--section-pad);

    background-color: #fff;

}



.contact-layout {

    display: flex;

    gap: clamp(2rem, 5vw, 3.75rem);

    align-items: flex-start;

    flex-wrap: wrap;

}



.contact-form-column,

.contact-info-column {

    flex: 1;

    min-width: min(280px, 100%);

}



@media (max-width: 900px) {

    .contact-layout {

        flex-direction: column;

    }

}



.custom-contact-form {

    background: var(--clr-bg-light);

    padding: clamp(1.5rem, 4vw, 2.5rem);

    border-radius: var(--radius-md);

}



.custom-contact-form .form-group {

    margin-bottom: var(--space-md);

}



.custom-contact-form label {

    display: block;

    margin-bottom: 7px;

    font-weight: 500;

    color: var(--clr-text);

    font-size: var(--text-sm);

}



.custom-contact-form .form-control {

    width: 100%;

    padding: 12px 18px;

    border: 1px solid #e1e1e1;

    border-radius: var(--radius-pill);

    font-family: inherit;

    font-size: var(--text-sm);

    background-color: #f8f8f8;

    transition: all var(--transition);

    color: var(--clr-text);

}



.custom-contact-form .form-control:focus {

    background-color: #fff;

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

    box-shadow: 0 0 0 3px rgba(55, 138, 173, .1);

    outline: none;

}



.custom-contact-form textarea.form-control {

    resize: vertical;

    min-height: 120px;

    border-radius: var(--radius-lg);

}



.custom-contact-form .btn-primary {

    width: 100%;

    justify-content: center;

    margin-top: 8px;

}



.contact-info-column .section-title {

    font-size: var(--text-xs);

    color: var(--clr-primary);

    text-transform: uppercase;

    font-weight: 700;

    margin-bottom: 12px;

    display: block;

}



.contact-info-column .section-title-large {

    font-size: clamp(1.75rem, 4vw, 2.75rem);

    line-height: 1.2;

    margin-bottom: var(--space-xl);

}



.contact-methods {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}



.contact-bubble {

    display: flex;

    align-items: center;

    background: #fff;

    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);

    transition: transform var(--transition), box-shadow var(--transition);

    border: 1px solid rgba(0, 0, 0, .03);

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    gap: clamp(.75rem, 2vw, 1.25rem);

}



.contact-bubble:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-lg);

}



.contact-bubble-icon {

    width: clamp(48px, 7vw, 68px);

    height: clamp(48px, 7vw, 68px);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: clamp(1.4rem, 2.8vw, 2rem);

    color: var(--clr-primary);

    flex-shrink: 0;

}



.contact-bubble-icon i,

.contact-bubble-icon svg {

    font-size: clamp(1.4rem, 2.8vw, 2rem);

    width: clamp(1.4rem, 2.8vw, 2rem);

    height: clamp(1.4rem, 2.8vw, 2rem);

    fill: currentColor;

}



.contact-bubble-content h3 {

    font-size: var(--text-base);

    font-weight: 700;

    color: var(--clr-text);

    margin: 0 0 4px 0;

    text-transform: none;

}



.contact-bubble-content span {

    font-size: var(--text-sm);

    color: var(--clr-text);

    display: block;

    font-weight: 500;

}



.contact-bubble:hover .contact-bubble-content span {

    color: var(--clr-primary);

}



.contact-item-premium {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);

    text-decoration: none;

    color: inherit;

    transition: transform var(--transition);

}



a.contact-item-premium:hover {

    transform: translateX(8px);

}



.contact-item-premium .icon {

    width: 54px;

    height: 54px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    color: var(--clr-primary);

    box-shadow: var(--shadow-sm);

    flex-shrink: 0;

}



.contact-item-premium .data span {

    display: block;

    color: var(--clr-text-muted);

    font-size: var(--text-xs);

}



.contact-item-premium .data strong {

    display: block;

    font-size: var(--text-lg);

    color: var(--clr-text);

}



.form-card-premium {

    background: #fff;

    padding: clamp(1.5rem, 4vw, 2.5rem);

    border-radius: var(--radius-md);

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

}



.form-row-premium {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.form-row-premium>div {

    flex: 1;

    min-width: min(200px, 100%);

}



.form-group-premium {

    margin-bottom: var(--space-md);

}



.form-group-premium input,

.form-group-premium textarea,

.form-group-premium select {

    width: 100%;

    padding: 14px 18px;

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

    border-radius: var(--radius-sm);

    font-family: inherit;

    font-size: var(--text-sm);

    color: var(--clr-text);

    background-color: #fff;

    transition: border-color var(--transition), box-shadow var(--transition);

}



.form-group-premium select {

    appearance: none;

    -webkit-appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 16px;

    cursor: pointer;

    padding-right: 44px;

}



.form-group-premium select:invalid {

    color: #757575;

}



.form-group-premium input:focus,

.form-group-premium textarea:focus,

.form-group-premium select:focus {

    outline: none;

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

    box-shadow: 0 0 0 3px rgba(55, 138, 173, .1);

}



/* --------------------------------------------------------------------------

   20. CTA SECTION

-------------------------------------------------------------------------- */

.cta-section {

    background: linear-gradient(90deg, #5CA9CC 0%, #265E76 100%);

    padding-block: clamp(1.5rem, 4vw, 3rem);

    color: #fff;

    border-top-left-radius: var(--radius-xl);

    border-top-right-radius: var(--radius-xl);

}



.cta-layout {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: clamp(1rem, 3vw, 2rem);

    flex-wrap: wrap;

}



.cta-text-column {

    flex: 1;

}



.cta-title {

    font-family: var(--font-heading);

    font-size: clamp(1.25rem, 3vw, 2.25rem);

    font-weight: 700;

    margin: 0 0 8px 0;

    color: #fff;

    text-transform: none;

}



.cta-subtitle {

    font-size: var(--text-base);

    margin: 0;

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

}



.cta-btn-column {

    flex-shrink: 0;

}



@media (max-width: 768px) {

    .cta-layout {

        flex-direction: column;

        text-align: center;

    }



    .cta-btn-column {

        width: 100%;

        display: flex;

        justify-content: center;

    }

}



/* --------------------------------------------------------------------------

   21. BRANDS / MARQUEE

-------------------------------------------------------------------------- */

.brands-section {

    padding-block: var(--section-pad);

    text-align: center;

}



.brands-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: clamp(1.5rem, 4vw, 2.5rem);

    align-items: center;

}



.brand-item {

    width: clamp(100px, 15vw, 150px);

    height: clamp(60px, 9vw, 100px);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform var(--transition);

}



.brand-item:hover {

    transform: scale(1.08);

}



.brand-item img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.brand-list {

    display: flex;

    flex-wrap: wrap;

    gap: .5em;

    justify-content: center;

    align-items: center;

    max-width: 100%;

}



.brand-box {

    padding-inline: clamp(8px, 2vw, 16px);

}



@media (max-width: 599px) {

    .brand-list {

        flex-direction: column;

        gap: .2em;

        align-items: flex-start;

    }

}



.marquee-wrapper {

    overflow: hidden;

    width: 100%;

    position: relative;

    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);

    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);

}



.marquee-track {

    display: flex;

    white-space: nowrap;

    width: max-content;

    animation: scrollMarquee 40s linear infinite;

    padding-block: 1rem;

}



.marquee-track:hover {

    animation-play-state: paused;

}



.marquee-content {

    display: flex;

    align-items: center;

    gap: clamp(2rem, 5vw, 4rem);

    padding-right: clamp(2rem, 5vw, 4rem);

}



@keyframes scrollMarquee {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.brand-logo-premium {

    max-height: 50px;

    width: auto;

    max-width: 180px;

    object-fit: contain;

    filter: none !important;

    opacity: 1 !important;

    transition: transform var(--transition);

}



.brand-logo-premium:hover {

    transform: scale(1.05);

}



/* --------------------------------------------------------------------------

   22. REALIZATIONS

-------------------------------------------------------------------------- */

.realizations-grid-premium {

    display: grid;

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

    gap: clamp(1rem, 2.5vw, 2rem);

}



@media (max-width: 991px) {

    .realizations-grid-premium {

        grid-template-columns: 1fr;

    }

}



.realization-card {

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    background: #fff;

    transition: transform var(--transition);

}



.realization-card:hover {

    transform: translateY(-5px);

}



.realization-img {

    height: clamp(180px, 25vw, 250px);

    background-size: cover;

    background-position: center;

}



.realization-info {

    padding: clamp(1rem, 2.5vw, 1.5rem);

}



.realization-info h3 {

    margin: 0 0 .4rem;

    font-size: var(--text-lg);

    text-transform: none;

}



.realization-info p {

    margin: 0;

    color: var(--clr-text-muted);

    font-size: var(--text-sm);

}



.realizations-carousel-premium {

    display: flex;

    overflow-x: auto;

    gap: clamp(1rem, 2.5vw, 2rem);

    padding-bottom: 1.5rem;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    -ms-overflow-style: none;

    scrollbar-width: none;

}



.realizations-carousel-premium::-webkit-scrollbar {

    display: none;

}



.realizations-carousel-premium .realization-card {

    flex: 0 0 calc(33.3333% - 1.35rem);

    scroll-snap-align: start;

}



@media (max-width: 991px) {

    .realizations-carousel-premium .realization-card {

        flex: 0 0 min(90vw, 400px);

    }

}



@media (max-width: 599px) {

    .realizations-carousel-premium .realization-card {

        flex: 0 0 calc(100% - 1rem);

    }

}



.carousel-wrapper-premium {

    position: relative;

    max-width: 1200px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}



.carousel-nav-btn {

    background: white;

    color: var(--clr-primary);

    border: 2px solid var(--clr-primary);

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    cursor: pointer;

    transition: all var(--transition);

    z-index: 10;

    position: absolute;

    box-shadow: var(--shadow-sm);

    flex-shrink: 0;

}



.carousel-nav-btn:hover {

    background: var(--clr-primary);

    color: white;

    transform: scale(1.08);

}



.prev-btn {

    left: -24px;

}



.next-btn {

    right: -24px;

}



@media (max-width: 992px) {

    .prev-btn {

        left: 8px;

    }



    .next-btn {

        right: 8px;

    }

}



.slider-wrapper {

    position: relative;

}



.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

    border: none;

    border-radius: 50%;

    width: 34px;

    height: 34px;

    font-size: 1.1rem;

    color: var(--clr-primary);

    cursor: pointer;

    z-index: 2;

    box-shadow: var(--shadow-sm);

    transition: background var(--transition), color var(--transition);

    display: flex;

    align-items: center;

    justify-content: center;

}



.slider-arrow.left {

    left: -5px;

}



.slider-arrow.right {

    right: -5px;

}



.slider-arrow:hover {

    background: var(--clr-primary);

    color: #fff;

}



/* --------------------------------------------------------------------------

   23. SPLIT LAYOUT & ROW-FLEX

-------------------------------------------------------------------------- */

.container-split {

    display: flex;

    align-items: center;

    gap: clamp(2rem, 5vw, 4rem);

    flex-wrap: wrap;

}



.container-split>div {

    flex: 1;

    min-width: min(280px, 100%);

}



@media (max-width: 991px) {

    .container-split {

        flex-direction: column;

    }

}



.row-flex {

    display: flex;

    flex-wrap: wrap;

    gap: clamp(1.5rem, 4vw, 2.5rem);

    margin-bottom: var(--space-lg);

}



.col-half {

    flex: 1;

    min-width: min(280px, 100%);

}



.reverse-mobile {}



@media (max-width: 768px) {

    .row-flex {

        flex-direction: column;

    }



    .reverse-mobile {

        flex-direction: column-reverse;

    }

}



.content-padding {

    padding-block: var(--space-md);

}



/* --------------------------------------------------------------------------

   24. GRID UTILITIES

-------------------------------------------------------------------------- */

.grid-3 {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));

    gap: clamp(1rem, 2.5vw, 1.875rem);

    margin-top: var(--space-lg);

}



/* --------------------------------------------------------------------------

   25. CUSTOM LISTS

-------------------------------------------------------------------------- */

.custom-list {

    list-style: none;

    padding: 0;

    margin: var(--space-md) 0;

}



.custom-list li {

    margin-bottom: var(--space-sm);

    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    font-size: var(--text-sm);

}



.custom-list li i {

    color: var(--clr-primary);

    margin-top: 4px;

}



.custom-icon svg {

    width: 18px;

    height: 18px;

    fill: var(--clr-primary);

    flex-shrink: 0;

    margin-top: 3px;

}



.features-list {

    list-style: none;

    padding: 0;

    margin: var(--space-lg) 0;

}



.features-list li {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    margin-bottom: var(--space-sm);

    font-size: var(--text-base);

    color: var(--clr-text);

    font-weight: 500;

}



.features-list li i {

    color: var(--clr-primary);

    font-size: 1.1rem;

    background: rgba(55, 138, 173, .1);

    padding: 7px;

    border-radius: 50%;

}



/* --------------------------------------------------------------------------

   26. IMAGE UTILITIES

-------------------------------------------------------------------------- */

.img-responsive,

.rounded-shadow {

    max-width: 100%;

    height: auto;

    display: block;

    margin-inline: auto;

}



.rounded-shadow {

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);

    width: 100%;

    object-fit: cover;

}



div.rounded-shadow {

    max-height: none;

    overflow: visible;

}



.img-premium {

    width: 100%;

    height: auto;

    display: block;

    border-radius: var(--radius-md);

}



.image-premium-wrapper {

    position: relative;

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: 0 16px 40px rgba(0, 0, 0, .1);

}



.img-backdrop {

    position: absolute;

    top: -20px;

    right: -20px;

    bottom: 20px;

    left: 20px;

    background: var(--clr-primary);

    z-index: -1;

    border-radius: var(--radius-md);

    opacity: .1;

}



.nzu-responsive-img {

    max-width: min(320px, 90vw);

    width: 100%;

    height: auto;

}



.small-responsive-img {

    max-width: min(350px, 95vw);

    width: 100%;

    height: auto;

}



@media (max-width: 599px) {



    img.img-responsive,

    img.rounded-shadow,

    .column-image img {

        max-height: 280px;

        height: auto;

    }



    .column-image .img-fluid {

        max-width: 270px !important;

        height: auto !important;

        display: block;

        margin-inline: auto;

    }

}



/* --------------------------------------------------------------------------

   27. BLOG

-------------------------------------------------------------------------- */

.blog-grid {

    display: flex;

    gap: clamp(1rem, 2.5vw, 1.875rem);

    flex-wrap: wrap;

    justify-content: center;

}



.blog-card {

    width: min(350px, 100%);

    background: #fff;

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

    border-radius: var(--radius-md);

    overflow: hidden;

    transition: transform var(--transition), box-shadow var(--transition);

}



.blog-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.blog-placeholder-img {

    height: 200px;

    background-color: #ddd;

}



.blog-content {

    padding: clamp(1rem, 2.5vw, 1.375rem);

}



.read-more {

    color: var(--clr-primary);

    font-weight: 600;

}



/* --------------------------------------------------------------------------

   28. FOOTER

-------------------------------------------------------------------------- */

.site-footer {

    background: linear-gradient(180deg, #0b1c3e 0%, #050e20 100%);

    color: #fff;

    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.25rem, 2.5vw, 1.875rem);

    font-size: var(--text-xs);

    border-top: 3px solid var(--clr-accent);

    margin-top: -1px;

}



.site-footer a {

    color: #fff;

    text-decoration: none;

    transition: color var(--transition);

}



.site-footer a:hover {

    color: var(--clr-accent);

}



.site-footer svg {

    max-width: 100%;

    height: auto;

}



.footer-container,

.site-footer>.container {

    max-width: 1200px;

    margin-inline: auto;

    padding-inline: clamp(1rem, 4vw, 1.5rem);

}



.footer-grid {

    display: grid;

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

    gap: clamp(1.25rem, 3vw, 2rem);

    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);

    align-items: start;

}



@media (max-width: 991px) {

    .footer-grid {

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

    }

}



@media (max-width: 576px) {

    .footer-grid {

        grid-template-columns: 1fr;

        gap: clamp(1.5rem, 5vw, 2.5rem);

    }

}



.footer-logo img {

    max-width: 150px;

    height: auto;

    display: block;

    margin-bottom: clamp(.75rem, 2vw, 1.25rem);

}



.footer-desc p {

    font-size: var(--text-xs);

    line-height: 1.65;

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

    margin-bottom: clamp(.75rem, 2vw, 1.25rem);

    max-width: 280px;

}



.footer-desc strong {

    color: #fff;

    font-weight: 600;

}



.footer-socials {

    display: flex;

    gap: 10px;

    margin-top: 8px;

    flex-wrap: wrap;

}



.footer-socials .social-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    background: transparent;

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

    border-radius: var(--radius-sm);

    color: #fff;

    transition: all var(--transition);

    text-decoration: none;

}



.footer-socials .social-icon:hover {

    background: var(--clr-primary);

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

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(55, 138, 173, .35);

    color: #fff;

}



.footer-socials .social-icon svg {

    width: 14px;

    height: 14px;

    fill: currentColor;

}



.footer-socials .social-icon[aria-label="Facebook"] svg {

    width: 10px;

}



.footer-col h3 {

    font-size: var(--text-base);

    font-weight: 700;

    margin-bottom: clamp(.75rem, 2vw, 1.5rem);

    color: #fff;

    text-transform: none;

    letter-spacing: .5px;

}



.elementor-icon-list-items,

.footer-links ul,

.contact-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.elementor-icon-list-item,

.footer-links li,

.contact-list li {

    margin-bottom: 10px;

    display: flex;

    align-items: flex-start;

}



.elementor-icon-list-item a,

.elementor-icon-list-item,

.footer-links li a,

.contact-list li a,

.contact-list li {

    display: flex;

    align-items: flex-start;

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

    font-size: var(--text-xs);

    text-decoration: none;

    transition: color var(--transition), padding-left var(--transition);

    width: 100%;

}



.footer-links li a:hover,

.contact-list li a:hover {

    color: #fff;

    padding-left: 4px;

}



.elementor-icon-list-text {

    line-height: 1.45;

}



.elementor-icon-list-icon,

.contact-list li .elementor-icon-list-icon,

.footer-links li .elementor-icon-list-icon {

    margin-right: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    flex-shrink: 0;

    color: var(--clr-primary);

    margin-top: 2px;

}



.elementor-icon-list-icon svg,

.contact-list li .elementor-icon-list-icon svg {

    width: 13px;

    height: 13px;

    fill: var(--clr-accent);

    transition: transform var(--transition);

}



.elementor-icon-list-item:hover .elementor-icon-list-icon svg {

    transform: scale(1.15);

}



/* Footer bottom */

.footer-divider {

    height: 1px;

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

    margin-bottom: clamp(.75rem, 2vw, 1.5rem);

}



.footer-copyright {

    text-align: center;

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

    font-size: 12px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    padding-top: clamp(.75rem, 2vw, 1.25rem);

    margin-top: clamp(1rem, 2.5vw, 1.5rem);

}



.footer-copyright p {

    margin: 0;

}



/* --------------------------------------------------------------------------

   29. FLOATING BUTTONS

-------------------------------------------------------------------------- */

.fixed-buttons-container {

    position: fixed;

    right: clamp(12px, 3vw, 20px);

    bottom: 0;

    z-index: 999;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding-bottom: 18px;

    pointer-events: none;

}



.floating-btn,

.back-to-top,

.fixed-phone-btn {

    position: relative;

    right: auto;

    bottom: auto;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);

    z-index: 999;

    transition: transform var(--transition), background var(--transition);

    color: #fff;

    text-decoration: none;

    pointer-events: all;

    flex-shrink: 0;

}



.back-to-top {

    background: var(--clr-primary);

}



.fixed-phone-btn {

    background: #fff;

}



.floating-btn {

    background: var(--clr-primary);

}



.btn-phone {

    background: var(--clr-primary);

}



\n .btn-phone svg {

    fill: #fff;

}



.btn-top {

    background: var(--clr-primary);

}



.back-to-top svg,

.floating-btn svg {

    width: 18px;

    height: 18px;

    fill: #fff;

}



.fixed-phone-btn svg {

    width: 18px;

    height: 18px;

    fill: var(--clr-primary);

}



.back-to-top:hover,

.fixed-phone-btn:hover,

.floating-btn:hover {

    transform: translateY(-4px);

}



.floating-btn.floating-btn:hover {

    background-color: #2b6e8f;

}



/* --------------------------------------------------------------------------

   30. ANIMATION UTILITIES

-------------------------------------------------------------------------- */

/* Disable scroll-triggered animations on small screens */

@media (max-width: 991px) {



    .fade-in-up,

    .fade-in-left,

    .fade-in-right,

    .reveal {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}



@media (min-width: 992px) {



    .fade-in-up,

    .reveal {

        opacity: 0;

        transform: translateY(28px);

        transition: opacity .8s ease-out, transform .8s ease-out;

    }



    .fade-in-up.active,

    .fade-in-up.in-view,

    .reveal.active,

    .reveal.in-view {

        opacity: 1;

        transform: translateY(0);

    }

}



.delay-100 {

    transition-delay: .1s;

    animation-delay: .1s;

}



.delay-200 {

    transition-delay: .2s;

    animation-delay: .2s;

}



.delay-300 {

    transition-delay: .3s;

    animation-delay: .3s;

}



.delay-400 {

    transition-delay: .4s;

    animation-delay: .4s;

}



.delay-500 {

    transition-delay: .5s;

    animation-delay: .5s;

}



.main-services-grid .service-box:nth-child(1) {

    transition-delay: .1s;

}



.main-services-grid .service-box:nth-child(2) {

    transition-delay: .2s;

}



.main-services-grid .service-box:nth-child(3) {

    transition-delay: .3s;

}



.main-services-grid .service-box:nth-child(4) {

    transition-delay: .1s;

}



.main-services-grid .service-box:nth-child(5) {

    transition-delay: .2s;

}



.main-services-grid .service-box:nth-child(6) {

    transition-delay: .3s;

}



.brands-grid .brand-item:nth-child(odd) {

    transition-delay: .1s;

}



.brands-grid .brand-item:nth-child(even) {

    transition-delay: .3s;

}



.stat-item:nth-child(1) {

    transition-delay: .1s;

}



.stat-item:nth-child(2) {

    transition-delay: .3s;

}



.stat-item:nth-child(3) {

    transition-delay: .5s;

}



.stat-item:nth-child(4) {

    transition-delay: .7s;

}



@keyframes fadeInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* --------------------------------------------------------------------------

   31. MISC UTILITIES

-------------------------------------------------------------------------- */

.breadcrumbs-dynamic {

    display: inline-block;

    transition: opacity .5s;

    opacity: 1;

}



.breadcrumbs-dynamic.fade {

    opacity: 0;

}



.text-accent {

    color: var(--clr-accent) !important;

}



.bg-accent {

    background-color: var(--clr-accent) !important;

}



/* --------------------------------------------------------------------------

   32. SPACING UTILITIES (Bootstrap-compatible: mt-*, mb-*, pt-*, pb-*, p-*, gap-*)

   Templates rely on these classes — they must be defined here.

-------------------------------------------------------------------------- */

.mt-0 {

    margin-top: 0 !important;

}



.mt-1 {

    margin-top: 0.375rem !important;

}



.mt-2 {

    margin-top: 0.75rem !important;

}



.mt-3 {

    margin-top: 1rem !important;

}



.mt-4 {

    margin-top: 2.25rem !important;

}



.mt-5 {

    margin-top: 3.5rem !important;

}



.mb-0 {

    margin-bottom: 0 !important;

}



.mb-1 {

    margin-bottom: 0.375rem !important;

}



.mb-2 {

    margin-bottom: 0.75rem !important;

}



.mb-3 {

    margin-bottom: 1rem !important;

}



.mb-4 {

    margin-bottom: 2rem !important;

}



.mb-5 {

    margin-bottom: 3rem !important;

}



.ms-0 {

    margin-left: 0 !important;

}



.ms-1 {

    margin-left: 0.375rem !important;

}



.ms-2 {

    margin-left: 0.75rem !important;

}



.ms-3 {

    margin-left: 1rem !important;

}



.ml-2 {

    margin-left: 0.75rem !important;

}



.pt-0 {

    padding-top: 0 !important;

}



.pt-1 {

    padding-top: 0.375rem !important;

}



.pt-2 {

    padding-top: 0.75rem !important;

}



.pt-3 {

    padding-top: 1rem !important;

}



.pt-4 {

    padding-top: 2rem !important;

}



.pt-5 {

    padding-top: 3rem !important;

}



.pb-0 {

    padding-bottom: 0 !important;

}



.pb-1 {

    padding-bottom: 0.375rem !important;

}



.pb-2 {

    padding-bottom: 0.75rem !important;

}



.pb-3 {

    padding-bottom: 1rem !important;

}



.pb-4 {

    padding-bottom: 2rem !important;

}



.pb-5 {

    padding-bottom: 3rem !important;

}



.p-0 {

    padding: 0 !important;

}



.p-2 {

    padding: 0.75rem !important;

}



.p-3 {

    padding: 1rem !important;

}



.p-4 {

    padding: 1.5rem !important;

}



.p-5 {

    padding: 2.5rem !important;

}



/* Flex utilities */

.d-flex {

    display: flex !important;

}



.d-none {

    display: none !important;

}



.align-items-start {

    align-items: flex-start !important;

}



.align-items-center {

    align-items: center !important;

}



.justify-content-center {

    justify-content: center !important;

}



.flex-wrap {

    flex-wrap: wrap !important;

}



.flex-column {

    flex-direction: column !important;

}



.gap-50 {

    gap: 50px !important;

}



.gap-3 {

    gap: 1rem !important;

}



.gap-4 {

    gap: 1.5rem !important;

}



/* Text utilities */

.font-weight-bold {

    font-weight: 700 !important;

}



.fw-bold {

    font-weight: 700 !important;

}



.text-primary {

    color: var(--clr-primary) !important;

}



.bg-white {

    background-color: #fff !important;

}



.border-0 {

    border: none !important;

}



.rounded {

    border-radius: var(--radius-md) !important;

}



/* Mobile column reverse */

.mobile-column-reverse {}



@media (max-width: 768px) {

    .mobile-column-reverse {

        flex-direction: column-reverse !important;

    }



    .grid-2-cols {

        flex-direction: column !important;

    }

}



.grid-2-cols {

    display: flex;

    gap: clamp(1.5rem, 4vw, 3rem);

    flex-wrap: wrap;

}



.grid-2-cols>* {

    flex: 1;

    min-width: min(280px, 100%);

}



/* Alert */

.alert {

    padding: 1rem 1.25rem;

    border-radius: var(--radius-sm);

    margin-block: var(--space-md);

}



.alert-warning {

    background-color: #fff3cd;

    color: #664d03;

    border: 1px solid #ffecb5;

}



/* --------------------------------------------------------------------------

   33. TEXT → BUTTON SPACING  

   Ensures a generous gap between any paragraph/heading and the next button,

   regardless of the wrapping element used.

-------------------------------------------------------------------------- */



/* Direct siblings: <p> or <h*> immediately followed by a button/anchor-button */

p+.btn,

p+.btn-premium,

p+.btn-cta,

p+a[class*="btn"],

p+div>.btn,

p+div>.btn-premium,

p+div>a[class*="btn"] {

    margin-top: var(--space-xl);

}



/* .wpr-button-wrap and similar wrapper divs that appear after text */

.elementor-widget-text-editor+.elementor-widget,

.elementor-widget-text-editor+div,

p+.wpr-button-wrap,

p+.mt-4,

p+.mt-5 {

    margin-top: 0;

    /* spacing handled by mt-* above */

}



/* CTA wrapper divs that contain buttons */

.cta-wrapper,

.btn-wrapper,

.wpr-button-wrap {

    margin-top: var(--space-xl);

}



/* When a button sits directly inside a section after descriptive text */

.section-desc+a[class*="btn"],

.section-desc+.btn,

.desc-premium+a[class*="btn"],

.why-us-text+a[class*="btn"],

.locations-content+a[class*="btn"] {

    margin-top: var(--space-xl);

}



/* Card paragraphs → explore row */

.service-card-ultra p {

    margin-bottom: var(--space-xl);

}



/* Hero description → hero actions gap */

.hero-description {

    margin-bottom: var(--space-2xl);

}



/* CTA section: add breathing room between subtitle and button */

.cta-subtitle {

    margin-bottom: 0;

}



.cta-btn-column {

    margin-top: 0;

}



@media (max-width: 768px) {

    .cta-btn-column {

        margin-top: var(--space-md);

    }

}



/* ==========================================================================

   END OF STYLESHEET

   ========================================================================== */