/* =========================================================
   AJANTA PIPES - PREMIUM WEBSITE
========================================================= */

:root {
    --navy: #071A38;
    --navy-2: #0B244B;
    --navy-3: #103A66;

    --blue: #168AC4;
    --blue-light: #38A8E5;

    --white: #FFFFFF;
    --text-light: #EAF2F8;
    --text-muted: #91A4B8;

    --border-navy: #23466B;
}

/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Inter", "Segoe UI", sans-serif;

    color: var(--text);

    background: var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}


body.modal-open {

    overflow: hidden;

}


img {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


.container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline: auto;

}


/* =========================================================
   SPLASH
========================================================= */

.splash-screen {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 40%,
            #123A6B,
            var(--navy) 65%
        );

    opacity: 1;

    visibility: visible;

    transition:
        opacity .6s ease,
        visibility .6s ease;

}


.splash-screen.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.splash-content {

    text-align: center;

    color: white;

    animation: splashIn .8s ease;

}


.splash-logo-wrap {

    width: 210px;

    height: 120px;

    margin: auto;

    background: white;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

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

}


.splash-logo {

    width: 175px;

    max-height: 90px;

    object-fit: contain;

}


.splash-content h2 {

    margin-top: 24px;

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

    font-size: 22px;

    letter-spacing: 3px;

}


.splash-content p {

    margin-top: 4px;

    opacity: .7;

    font-size: 13px;

}


.splash-loader {

    width: 55px;

    height: 3px;

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

    margin: 24px auto 0;

    position: relative;

    overflow: hidden;

}


.splash-loader::after {

    content: "";

    position: absolute;

    inset: 0;

    width: 45%;

    background: var(--red);

    animation: loading 1.1s infinite ease-in-out;

}


@keyframes loading {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(230%);
    }

}


@keyframes splashIn {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.topbar {

    background: var(--navy);

    color: white;

    font-size: 12px;

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

}


.topbar-inner {

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.topbar-left,
.topbar-right {

    display: flex;

    align-items: center;

    gap: 20px;

}


.topbar span,
.topbar a {

    display: flex;

    align-items: center;

    gap: 7px;

    opacity: .85;

}


.topbar i {

    color: #64B5F6;

}


.topbar a:hover {

    color: white;

    opacity: 1;

}


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

.main-header {

    position: sticky;

    top: 0;

    z-index: 5000;

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

    backdrop-filter: blur(18px);

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

    transition: .3s ease;

}


.main-header.scrolled {

    box-shadow:
        0 8px 30px rgba(7,26,56,.10);

}


.navbar {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* Logo */

.brand {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.brand-logo {

    width: 100px;


    height: auto;

    max-height: 60px;

    object-fit: contain;

}


/* Navigation */

.main-nav {

    display: flex;

    align-items: center;

    gap: 4px;

}


.nav-link,
.dropdown-btn {

    border: 0;

    background: transparent;

    color: var(--text);

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    border-radius: 9px;

    transition: .25s ease;

}


.nav-link i,
.dropdown-btn > i:first-child {

    color: var(--blue);

    font-size: 14px;

}


.nav-link:hover,
.dropdown-btn:hover {

    background: #F0F5FB;

    color: var(--blue);

}


.nav-link.active {

    color: var(--red);

}


.nav-link.active i {

    color: var(--red);

}


.dropdown-arrow {

    font-size: 9px !important;

    color: var(--muted) !important;

    margin-left: 2px;

}


.nav-dropdown {

    position: relative;

}


.dropdown-menu {

    position: absolute;

    top: calc(100% + 12px);

    left: 0;

    min-width: 235px;

    padding: 10px;

    background: white;

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

    border-radius: 14px;

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

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

    transition: .25s ease;

}


.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.dropdown-menu a {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 12px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    color: var(--text);

}


.dropdown-menu a:hover {

    background: #F1F6FC;

    color: var(--blue);

}


.dropdown-menu a i {

    font-size: 6px;

    color: var(--red);

}


/* Quote */

/* ================= GET A QUOTE - RED BOX ================= */

.nav-quote {
    white-space: nowrap !important;
    min-width: 135px !important;
    width: max-content !important;
    height: 46px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    padding: 0 20px !important;

    color: #ffffff !important;
    background: #E53935 !important;

    border: none !important;
    border-radius: 7px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    box-shadow: 0 6px 16px rgba(229, 57, 53, 0.25) !important;

    flex-shrink: 0 !important;
}

.nav-quote:hover {
    color: #ffffff !important;
    background: #C62828 !important;
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(229, 57, 53, 0.32) !important;
}

.nav-quote * {
    white-space: nowrap !important;
}

/* Mobile */

.mobile-menu-btn {

    display: none;

    width: 45px;

    height: 45px;

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

    background: white;

    color: var(--navy);

    border-radius: 10px;

    font-size: 18px;

}


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

.hero {

    min-height: 700px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: var(--navy);

}


.hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,38,.94) 0%,
            rgba(5,24,52,.76) 48%,
            rgba(5,24,52,.35) 100%
        );

}


.hero-pattern {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

}


.hero-content {

    position: relative;

    z-index: 2;

    color: white;

    padding:
        105px 0
        130px;

    max-width: 850px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 13px;

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

    border-radius: 50px;

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

    backdrop-filter: blur(10px);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.hero-badge > span:first-child {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #5CE1A7;

    box-shadow:
        0 0 12px #5CE1A7;

}


.badge-line {

    width: 25px;

    height: 1px;

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

}


.hero h1 {

    margin-top: 24px;

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

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

    line-height: 1.08;

    letter-spacing: -2.5px;

    font-weight: 800;

}


.hero h1 span {

    color: #FF6965;

}


.hero-content > p {

    max-width: 680px;

    margin-top: 23px;

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

    font-size: 17px;

    line-height: 1.8;

}


.hero-buttons {

    display: flex;

    gap: 13px;

    margin-top: 32px;

}


.btn {

    min-height: 52px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 10px;

    font-weight: 800;

    font-size: 13px;

    transition: .25s ease;

}


.btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    color: white;

    box-shadow:
        0 12px 30px rgba(229,57,53,.25);

}


.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 17px 35px rgba(229,57,53,.35);

}


.btn-outline {

    color: white;

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

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

}


.btn-outline:hover {

    background: white;

    color: var(--navy);

}


.btn-white {

    background: white;

    color: var(--navy);

}


.btn-white:hover {

    transform: translateY(-3px);

}


.hero-trust {

    display: flex;

    gap: 35px;

    margin-top: 48px;

}


.hero-trust div {

    padding-left: 18px;

    border-left:
        2px solid rgba(255,255,255,.25);

}


.hero-trust strong {

    display: block;

    font-family: "Manrope";

    font-size: 22px;

}


.hero-trust span {

    display: block;

    margin-top: 2px;

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

    font-size: 11px;

}


.hero-scroll {

    position: absolute;

    bottom: 25px;

    right: 40px;

    z-index: 3;

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

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    writing-mode: vertical-rl;

}


.hero-scroll i {

    color: #FF6965;

}


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

.section {

    padding: 105px 0;

}


.section-tag {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--red);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.section-tag > span {

    width: 27px;

    height: 2px;

    background: var(--red);

}


.section-tag.center {

    justify-content: center;

}


.section-heading {

    text-align: center;

    max-width: 720px;

    margin:
        0 auto 55px;

}


.section-heading h2,
.about-content h2,
.partner-text h2 {

    margin-top: 14px;

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

    font-size: clamp(32px, 4vw, 45px);

    line-height: 1.15;

    letter-spacing: -1.5px;

}


.section-heading h2 span,
.about-content h2 span,
.partner-text h2 span {

    color: var(--blue);

}


.section-heading > p {

    margin-top: 16px;

    color: var(--muted);

    font-size: 15px;

}


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

.about-section {

    background: white;

}


.about-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 90px;

    align-items: center;

}


.about-image {

    position: relative;

    padding-right: 35px;

}


.image-frame {

    border-radius: 22px;

    overflow: hidden;

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

    position: relative;

}


.image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,26,56,.28)
        );

}


.image-frame img {

    width: 100%;

    aspect-ratio: 1 / .9;

    object-fit: cover;

}


/* =========================================
   ABOUT - EXPERIENCE CARD FIX
========================================= */

.about-image {
    position: relative !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

.image-frame {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.experience-card {
    position: absolute !important;

    /* Keep the complete card inside the image */
    right: 20px !important;
    bottom: 20px !important;

    width: 210px !important;
    min-height: 105px !important;

    padding: 18px 20px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: rgba(7, 26, 56, 0.94) !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-left: 4px solid #E53935 !important;

    border-radius: 14px !important;

    box-shadow: 0 15px 35px rgba(0,0,0,.28) !important;

    z-index: 5 !important;
}

.experience-card strong {
    display: block !important;

    margin: 0 !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: #64B5F6 !important;
}

.experience-card span {
    display: block !important;

    margin-top: 8px !important;

    color: #ffffff !important;

    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

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

    .experience-card {
        right: 15px !important;
        bottom: 15px !important;
        width: 190px !important;
        min-height: 95px !important;
        padding: 16px !important;
    }

    .experience-card strong {
        font-size: 32px !important;
    }
}

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

    .about-image {
        padding: 0 !important;
    }

    .experience-card {
        right: 12px !important;
        bottom: 12px !important;
        width: 175px !important;
        min-height: 88px !important;
        padding: 14px !important;
    }

    .experience-card strong {
        font-size: 29px !important;
    }

    .experience-card span {
        font-size: 10px !important;
    }
}

.about-content .lead {

    margin-top: 20px;

    font-size: 17px;

    font-weight: 600;

    color: var(--text);

}


.about-content > p:not(.lead) {

    margin-top: 13px;

    color: var(--muted);

    font-size: 14px;

}


.about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 25px;

}


.about-features div {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 13px;

    font-weight: 700;

}


.about-features i {

    color: var(--red);

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 28px;

    color: var(--blue);

    font-size: 13px;

    font-weight: 800;

}


.text-link:hover {

    color: var(--red);

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #0C315E
        );

    color:#075985;

    padding: 45px 0;

}


.stats-grid {

    display: grid;

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

}


.stat-item {

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        8px 28px;

    border-right:
        1px solid rgba(255,255,255,.13);

}


.stat-item:last-child {

    border-right: 0;

}


.stat-item > i {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #64B5F6;

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

}


.stat-item strong {

    display: block;

    font-family: "Manrope";

    font-size: 25px;
    color: #064B70;

}


.stat-item span {

    display: block;

    color:#075985;

    font-size: 11px;

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {

    background: var(--bg);

}


.product-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

}


.product-filters {

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

}


.filter-btn {

    padding: 9px 13px;

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

    border-radius: 8px;

    background: white;

    color: var(--muted);

    font-size: 14px;

    font-weight: 800;

    transition: .2s ease;

}


.filter-btn:hover,
.filter-btn.active {

    background: var(--navy);

    border-color: var(--navy);

    color: white;

}


.product-search {

    width: 230px;

    height: 42px;

    background: white;

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

    border-radius: 9px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    gap: 8px;

}


.product-search i {

    color: var(--muted);

    font-size: 13px;

}


.product-search input {

    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    font-size: 12px;

}


.products-grid {

    display: grid;

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

    gap: 23px;

}


.product-card {

    background: white;

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

    border-radius: var(--radius);

    overflow: hidden;

    transition: .35s ease;

}


.product-card:hover {

    transform: translateY(-7px);

    border-color: transparent;

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

}


.product-card.hidden {

    display: none;

}


.product-image {

    height: 245px;

    position: relative;

    overflow: hidden;

    background: #E8EEF5;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;

}


.product-card:hover .product-image img {

    transform: scale(1.06);

}


.product-label {

    position: absolute;

    top: 14px;

    left: 14px;

    padding: 6px 9px;

    background: var(--navy);

    color: white;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;

}


.product-view {

    position: absolute;

    right: 14px;

    top: 14px;

    width: 35px;

    height: 35px;

    border: 0;

    border-radius: 50%;

    background: white;

    color: var(--navy);

    opacity: 0;

    transform: translateY(5px);

    transition: .25s ease;

}


.product-card:hover .product-view {

    opacity: 1;

    transform: translateY(0);

}


.product-content {

    position: relative;

    padding: 23px;

}


.product-icon {

    width: 40px;

    height: 40px;

    margin-top: -43px;

    margin-bottom: 15px;

    position: relative;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background: var(--red);

    box-shadow:
        0 7px 15px rgba(229,57,53,.25);

}


.product-content h3 {

    font-family: "Manrope";

    font-size: 19px;

}


.product-content p {

    margin-top: 7px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

}


.product-link {

    border: 0;

    background: transparent;

    margin-top: 16px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;

}


.product-link:hover {

    color: var(--red);

}


.no-products {

    display: none;

    text-align: center;

    padding: 60px 20px;

    color: var(--muted);

}


.no-products.show {

    display: block;

}


.no-products i {

    font-size: 35px;

    color: var(--border);

}


.no-products h3 {

    margin-top: 10px;

    color: var(--text);

}


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

.why-section {

    background: white;

}


.why-grid {

    display: grid;

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

    gap: 18px;

}


.why-card {

    padding: 28px;

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

    border-radius: 15px;

    transition: .3s ease;

}


.why-card:hover {

    border-color: #BCD2E8;

    box-shadow: var(--shadow);

    transform: translateY(-5px);

}


.why-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blue);

    background: #EAF3FC;

    border-radius: 11px;

    font-size: 19px;

}


.why-card h3 {

    margin-top: 20px;

    font-family: "Manrope";

    font-size: 17px;

}


.why-card p {

    margin-top: 7px;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   ROLSON
========================================================= */

.rolson-section {

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #0C315E
        );

    color:#075985;

    padding: 100px 0;

    overflow: hidden;

}


.rolson-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items: center;

    gap: 80px;

}


.section-tag.light {

    color: #64B5F6;

}


.section-tag.light > span {

    background: #64B5F6;

}


.rolson-content h2 {

    margin-top: 15px;

    font-family: "Manrope";

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

    line-height: 1.12;

    letter-spacing: -1.5px;
    color: #075985;
}


.rolson-content h2 span {

    color: #168AC4;

}


.rolson-content > p {

    margin-top: 20px;

    max-width: 600px;

    color: #164E63;

    font-size: 14px;

}


.rolson-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 11px;

    margin: 27px 0;

}


.rolson-list div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #164E63;


    font-size: 12px;

}


.rolson-list i {

    color: #5CE1A7;

}


.rolson-visual {

    display: flex;

    justify-content: center;

}


.rolson-circle {

    width: 350px;

    height: 350px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            #173E6E,
            #0A2449
        );

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);

}


.rolson-inner {

    width: 260px;

    height: 260px;

    border-radius: 50%;

    border:
        1px dashed rgba(255,255,255,.3);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}


.rolson-inner span {

    font-family: "Manrope";

    font-size: 38px;

    font-weight: 800;

    letter-spacing: 2px;

}


.rolson-inner small {

    margin-top: 8px;

    color: #168AC4;

    font-size: 8px;

    letter-spacing: 1.5px;

}


/* =========================================================
   PARTNER
========================================================= */

.partner-section {

    background: var(--bg);

}


.partner-box {

    padding: 45px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 30px;

    background: white;

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

    border-radius: 20px;

    box-shadow: var(--shadow);

}


.partner-icon {

    width: 72px;

    height: 72px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--navy);

    color: #64B5F6;

    font-size: 27px;

}


.partner-text h2 {

    font-size: 31px;

}


.partner-text p {

    margin-top: 7px;

    color: var(--muted);

    font-size: 13px;

}


/* =========================================================
   NEWS
========================================================= */

.news-section {

    background: white;

}


.news-grid {

    display: grid;

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

    gap: 18px;

}


.news-card {

    padding: 25px;

    display: flex;

    gap: 18px;

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

    border-radius: 15px;

    transition: .3s ease;

}


.news-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}


.news-icon {

    width: 47px;

    height: 47px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--red);

    background: #FFF0EF;

    border-radius: 11px;

}


.news-date {

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


.news-card h3 {

    margin-top: 4px;

    font-family: "Manrope";

    font-size: 16px;

}


.news-card p {

    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;

}


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

.contact-section {

    background:
        linear-gradient(
            135deg,
            #071A38,
            #0C315E
        );

    color:#168AC4;

    padding: 100px 0;

}


.contact-grid {

    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    gap: 80px;

    align-items: center;

}


.contact-info h2 {

    margin-top: 15px;

    font-family: "Manrope";

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

    line-height: 1.12;

    letter-spacing: -1.5px;
    color: #168AC4;

}


.contact-info h2 span {

    color: #FF6965;

}


.contact-info > p {

    max-width: 580px;

    margin-top: 18px;

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

    font-size: 14px;

}


.contact-details {

    margin-top: 30px;

    display: grid;

    gap: 15px;

}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 13px;

}


.contact-detail-icon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

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

    color: #64B5F6;

}


.contact-detail small {

    display: block;

    color: #168AC4;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}


.contact-detail strong {

    display: block;

    margin-top: 2px;

    font-size: 13px;

}


.whatsapp-contact {

    margin-top: 28px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #5CE1A7;

    font-size: 12px;

    font-weight: 800;

}


.whatsapp-contact i {

    font-size: 20px;

}


/* Quote Card */

.quote-card {

    background: white;

    color: var(--text);

    padding: 32px;

    border-radius: 20px;

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

}


.quote-card-header span {

    color: var(--red);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.quote-card-header h3 {

    margin-top: 5px;

    font-family: "Manrope";

    font-size: 27px;

}


.quote-card-header p {

    color: var(--muted);

    font-size: 11px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.form-group {

    margin-top: 15px;

}


.form-group label {

    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 10px;

    font-weight: 800;

}


.input-wrap {

    height: 43px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 12px;

    
    border: 1px solid #D1D5DB;

    border-radius: 8px;

    transition: .2s ease;
    background: #FFFFFF;

}


.input-wrap:focus-within {
    border-color: #9CA3AF;
    box-shadow: 0 0 0 2px rgba(156,163,175,.10);
}

.input-wrap i {

    color: #93A0B3;

    font-size: 12px;

}


.input-wrap input,
.input-wrap select {

    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 11px;

}


textarea {

    width: 100%;

    resize: vertical;

    border: 1px solid #D1D5DB;

    border-radius: 8px;

    padding: 11px;

    outline: none;

    font-size: 11px;
    background: #FFFFFF;

}


textarea:focus {
    border-color: #9CA3AF;
    box-shadow: 0 0 0 2px rgba(156,163,175,.10);
}

.submit-btn {

    width: 100%;

    height: 48px;

    margin-top: 17px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 12px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(229,57,53,.22);

}


.submit-btn:hover {

    transform: translateY(-2px);

}


.form-message {

    text-align: center;

    margin-top: 10px;

    font-size: 11px;

    font-weight: 700;

}


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

.footer {

    background: #041329;

    color: white;

    padding-top: 65px;

}


.footer-grid {

    display: grid;

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

    gap: 45px;

    padding-bottom: 50px;

}


.footer-brand img {

    width: 150px;

    background: white;

    padding: 8px;

    border-radius: 7px;

}


.footer-brand p {

    max-width: 300px;

    margin-top: 18px;

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

    font-size: 11px;

}


.social-links {

    display: flex;

    gap: 8px;

    margin-top: 20px;

}


.social-links a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

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

    color: white;

    font-size: 12px;

    transition: .2s ease;

}


.social-links a:hover {

    background: var(--red);

    transform: translateY(-3px);

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.footer-column h4 {

    margin-bottom: 8px;

    font-family: "Manrope";

    font-size: 13px;

}


.footer-column a,
.footer-column span {

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

    font-size: 11px;

}


.footer-column a:hover {

    color: white;

}


.footer-bottom {

    min-height: 60px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 10px;

}


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

.floating-actions {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 4000;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.floating-actions a {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 19px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

    transition: .25s ease;

}


.floating-phone {

    background: var(--blue);

}


.floating-whatsapp {

    background: #20B15A;

}


.floating-actions a:hover {

    transform: scale(1.08);

}


/* =========================================================
   MODAL
========================================================= */

.product-modal {

    position: fixed;

    inset: 0;

    z-index: 9000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.product-modal.show {

    display: flex;

}


.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(3,13,29,.75);

    backdrop-filter: blur(7px);

}


.modal-box {

    width: min(850px, 100%);

    position: relative;

    z-index: 2;

    background: white;

    border-radius: 20px;

    overflow: hidden;

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

    animation: modalIn .3s ease;

}


@keyframes modalIn {

    from {

        opacity: 0;

        transform: translateY(20px) scale(.97);

    }

    to {

        opacity: 1;

        transform: none;

    }

}


.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 5;

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: white;

    color: var(--navy);

    box-shadow: var(--shadow);

}


.modal-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

}


.modal-image {

    min-height: 390px;

    background: var(--bg);

}


.modal-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.modal-content {

    padding: 45px;

}


.modal-category {

    color: var(--red);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.modal-content h2 {

    margin-top: 10px;

    font-family: "Manrope";

    font-size: 31px;

    line-height: 1.15;

}


.modal-content > p {

    margin-top: 15px;

    color: var(--muted);

    font-size: 13px;

}


.modal-specs {

    margin-top: 25px;

    display: grid;

    gap: 10px;

}


.modal-specs div {

    display: flex;

    gap: 9px;

    color: var(--text);

    font-size: 12px;

    font-weight: 600;

}


.modal-specs i {

    color: var(--blue);

}


.modal-whatsapp {

    margin-top: 28px;

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background: #20B15A;

    color: white;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 800;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


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

@media (max-width: 1100px) {

    .main-nav {

        gap: 0;

    }


    .nav-link,
    .dropdown-btn {

        padding-inline: 8px;

        font-size: 12px;

    }


    .nav-quote {

        padding-inline: 13px;

    }


    .about-grid,
    .rolson-grid,
    .contact-grid {

        gap: 45px;

    }


    .products-grid {

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

    }


    .why-grid {

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

    }

}


@media (max-width: 900px) {

    .topbar-left span:nth-child(2),
    .topbar-left span:nth-child(3) {

        display: none;

    }


    .topbar-right a:first-child {

        display: flex;

    }


    .mobile-menu-btn {

        display: flex;

        align-items: center;

        justify-content: center;

    }


    .main-nav {

        position: absolute;

        left: 20px;

        right: 20px;

        top: calc(100% + 8px);

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 12px;

        background: white;

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

        border-radius: 14px;

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

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

        overflow-y: auto;

    }


    .main-nav.open {

        display: flex;

    }


    .nav-link,
    .dropdown-btn {

        width: 100%;

        padding: 13px;

        justify-content: flex-start;

    }


    .nav-quote {

        margin: 6px 0 0;

        justify-content: center;

    }


    .nav-dropdown {

        width: 100%;

    }


    .dropdown-menu {

        position: static;

        display: none;

        box-shadow: none;

        border: 0;

        padding: 4px 10px;

        min-width: 0;

        transform: none;

        opacity: 1;

        visibility: visible;

    }


    .nav-dropdown.open .dropdown-menu {

        display: block;

    }


    .nav-dropdown:hover .dropdown-menu {

        display: none;

    }


    .nav-dropdown.open:hover .dropdown-menu {

        display: block;

    }


    .about-grid,
    .rolson-grid,
    .contact-grid {

        grid-template-columns: 1fr;

    }


    .about-image {

        max-width: 650px;

    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;

    }


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

        border-right: 0;

    }


    .stat-item {

        padding: 18px;

    }


    .partner-box {

        grid-template-columns:
            auto 1fr;

    }


    .partner-box .btn {

        grid-column: 2;

        justify-self: start;

    }


    .news-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 650px) {

    .container {

        width:
            min(
                calc(100% - 28px),
                var(--container)
            );

    }


    .topbar {

        display: none;

    }


    .navbar {

        min-height: 72px;

    }


    .brand-logo {

        width: 135px;

        max-height: 55px;

    }


    .hero {

        min-height: 680px;

    }


    .hero-content {

        padding:
            80px 0
            90px;

    }


    .hero h1 {

        font-size: 38px;

        letter-spacing: -1.5px;

    }


    .hero-content > p {

        font-size: 14px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .hero-trust {

        gap: 17px;

        flex-wrap: wrap;

    }


    .hero-scroll {

        display: none;

    }


    .section {

        padding: 75px 0;

    }


    .about-features {

        grid-template-columns: 1fr;

    }


    .experience-card {

        right: 5px;

        width: 165px;

        padding: 15px;

    }


    .experience-card strong {

        font-size: 29px;

    }


    .stats-grid {

        grid-template-columns: 1fr;

    }


    .stat-item {

        border-right: 0;

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

    }


    .stat-item:last-child {

        border-bottom: 0;

    }


    .product-controls {

        flex-direction: column;

        align-items: stretch;

    }


    .product-search {

        width: 100%;

    }


    .products-grid {

        grid-template-columns: 1fr;

    }


    .why-grid {

        grid-template-columns: 1fr;

    }


    .rolson-list {

        grid-template-columns: 1fr;

    }


    .rolson-circle {

        width: 280px;

        height: 280px;

    }


    .rolson-inner {

        width: 210px;

        height: 210px;

    }


    .rolson-inner span {

        font-size: 30px;

    }


    .partner-box {

        grid-template-columns: 1fr;

        padding: 30px;

    }


    .partner-box .btn {

        grid-column: auto;

    }


    .form-row {

        grid-template-columns: 1fr;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .footer-bottom {

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        padding: 18px 0;

        text-align: center;

    }


    .modal-grid {

        grid-template-columns: 1fr;

    }


    .modal-image {

        min-height: 220px;

        max-height: 250px;

    }


    .modal-content {

        padding: 28px;

    }


    .floating-actions {

        right: 14px;

        bottom: 14px;

    }


    .floating-actions a {

        width: 46px;

        height: 46px;

    }

}
/* =========================================================
   AJANTA PIPES - FONT & EYE CATCHING UPGRADE
   Paste this at the VERY BOTTOM of style.css
========================================================= */

/* ---------- NAVBAR ---------- */

.nav-link,
.dropdown-btn {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
}

.nav-link i,
.dropdown-btn > i:first-child {
    font-size: 18px !important;
    font-weight: 900 !important;
}

.dropdown-arrow {
    font-size: 12px !important;
}

.nav-quote {
    font-size: 15px !important;
    font-weight: 800 !important;
}


/* ---------- HERO MAIN HEADING ---------- */

.hero h1 {
    font-size: clamp(42px, 5vw, 72px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.5px;
    text-shadow:
        0 4px 20px rgba(0,0,0,.55);
}


/* ---------- HERO SMALL TITLE ---------- */

.hero .eyebrow,
.hero .hero-eyebrow,
.hero .hero-label {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}


/* ---------- HERO DESCRIPTION ---------- */

.hero p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}


/* ---------- ALL SECTION HEADINGS ---------- */

.section-title,
section h2 {
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px;
}


/* ---------- SECTION SMALL LABEL ---------- */

.section-label,
.section-tag,
.section-kicker {
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
}


/* ---------- SECTION DESCRIPTION ---------- */

.section-subtitle,
.section-description {
    font-size: 17px !important;
    line-height: 1.8 !important;
}


/* ---------- PRODUCT TITLES ---------- */

.product-card h3 {
    font-size: 21px !important;
    font-weight: 850 !important;
}


/* ---------- PRODUCT DESCRIPTION ---------- */

.product-card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* ---------- PRODUCT CATEGORY ---------- */

.product-card .product-category {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.3px;
}


/* ---------- NORMAL BUTTONS ---------- */

.btn,
button,
.cta-button {
    font-weight: 800 !important;
}


/* ---------- ABOUT / FEATURE HEADINGS ---------- */

.feature-card h3,
.about-card h3 {
    font-size: 20px !important;
    font-weight: 850 !important;
}


/* ---------- GENERAL BODY TEXT ---------- */

body {
    font-size: 16px;
}


/* ---------- LINKS ---------- */

a {
    transition:
        color .25s ease,
        transform .25s ease;
}


/* ---------- RED HOVER EFFECT ---------- */

.nav-link:hover,
.dropdown-btn:hover {
    color: #ff3b36 !important;
}


/* ---------- ACTIVE NAV ---------- */

.nav-link.active {
    color: #ffffff !important;

    box-shadow:
        inset 0 -3px 0 #e53935;
}


/* ---------- ICON EYE-CATCHING EFFECT ---------- */

.nav-link:hover i,
.dropdown-btn:hover > i:first-child {
    transform: scale(1.15);
}


/* ---------- PRODUCT CARD HOVER ---------- */

.product-card:hover {
    transform: translateY(-7px);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* ---------- IMPORTANT INFO TEXT ---------- */

strong,
b {
    font-weight: 800;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    .nav-link,
    .dropdown-btn {
        font-size: 17px !important;
    }

    .nav-link i,
    .dropdown-btn > i:first-child {
        font-size: 19px !important;
    }

    .hero h1 {
        font-size: 42px !important;
    }

    .hero p {
        font-size: 17px !important;
    }

    section h2,
    .section-title {
        font-size: 34px !important;
    }

}


/* ---------- SMALL MOBILE ---------- */

@media (max-width: 600px) {

    .hero h1 {
        font-size: 36px !important;
    }

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

    section h2,
    .section-title {
        font-size: 30px !important;
    }

}
/* ===== REMOVE NAVBAR SCROLL EFFECT ===== */

.main-header,
.main-header.scrolled {
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
}

/* Keep navbar text/icons unchanged while scrolling */
.main-header.scrolled .nav-link,
.main-header.scrolled .dropdown-btn {
    color: #222 !important;
}

.main-header.scrolled .nav-link i,
.main-header.scrolled .dropdown-btn i {
    color: #222 !important;
}

/* Remove any red active/scroll underline */
.main-header.scrolled .nav-link::after {
    display: none !important;
}
/* ===== REMOVE HOME NAVBAR ACTIVE EFFECT ===== */

.nav-link.active,
.nav-link.active:hover {
    color: #222 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove active red underline */
.nav-link.active::after,
.nav-link.active:hover::after {
    display: none !important;
    content: none !important;
}

/* Home icon stays normal */
.nav-link.active i,
.nav-link.active:hover i {
    color: #222 !important;
    transform: none !important;
}
/* ================= NAVBAR - MOVE OPTIONS CLOSER TO LOGO ================= */

.navbar {
    gap: 15px !important;
}

.main-nav {
    margin-left: -10px !important;
    gap: 2px !important;
}

.nav-link,
.dropdown-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.nav-quote {
    margin-left: 5px !important;
}
/* =========================================================
   NAVBAR - COMPACT HEIGHT
========================================================= */

.navbar {
    min-height: 70px !important;
    height: 70px !important;
    gap: 12px !important;
}

.brand-logo {
    width: 285px !important;
    max-height: 65px !important;
}

.main-nav {
    gap: 7px !important;
}

.nav-link,
.dropdown-btn {
    padding: 9px 10px !important;
    font-size: 13px !important;
}

.nav-link i,
.dropdown-btn > i:first-child {
    font-size: 15px !important;
}

.nav-quote {
    height: 40px !important;
    min-width: 125px !important;
    padding: 0 16px !important;
}
/* =========================================================
   NAVBAR SEARCH
========================================================= */

.nav-search {
    position: relative;

    display: flex;
    align-items: center;

    margin-left: 4px;

    flex-shrink: 0;
}


/* SEARCH ICON */

.nav-search-btn {
    width: 38px;
    height: 38px;

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

    color: #0B5CAD;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 8px;

    cursor: pointer;

    font-size: 15px;

    transition: .25s ease;
}


.nav-search-btn:hover {
    color: #E53935;

    background: #f7f9fc;

    border-color: #e2e8f0;
}


/* SEARCH BOX */

.nav-search-box {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 260px;

    display: flex;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #dce4ef;

    border-radius: 9px;

    box-shadow:
        0 15px 35px rgba(7, 26, 56, .15);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition: .25s ease;

    z-index: 9999;
}


.nav-search-box.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* SEARCH INPUT */

.nav-search-box input {
    flex: 1;

    min-width: 0;

    padding: 10px 12px;

    color: #172033;

    background: #f8fafc;

    border: none;

    outline: none;

    border-radius: 6px;

    font-family: inherit;

    font-size: 13px;
}


.nav-search-box input::placeholder {
    color: #94a3b8;
}


/* SEARCH SUBMIT */

.nav-search-box button {
    width: 38px;

    margin-left: 5px;

    color: #ffffff;

    background: #E53935;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    transition: .25s ease;
}


.nav-search-box button:hover {
    background: #C62828;
}


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

@media (max-width: 900px) {

    .navbar {
        min-height: 68px !important;
        height: 68px !important;
    }

    .brand-logo {
        width: 220px !important;
        max-height: 55px !important;
    }

    .nav-search {
        margin-left: auto;
        margin-right: 8px;
    }

}


@media (max-width: 650px) {

    .navbar {
        min-height: 65px !important;
        height: 65px !important;
    }

    .brand-logo {
        width: 180px !important;
        max-height: 50px !important;
    }

    .nav-search-box {
        position: fixed;

        top: 72px;
        left: 15px;
        right: 15px;

        width: auto;
    }

}
/* =========================================================
   AJANTA PIPES - LOGO + COMPANY NAME
========================================================= */

.brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.brand-logo {
    width: 235px !important;
    max-height: 62px !important;
    height: auto !important;
    object-fit: contain !important;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.brand-name {
    color: #075985;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .5px;
}

.brand-tagline {
    margin-top: 4px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    line-height: 1.2;
}


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

@media (max-width: 900px) {

    .brand {
        gap: 8px !important;
    }

    .brand-logo {
        width: 180px !important;
        max-height: 52px !important;
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-tagline {
        font-size: 7px;
    }

}


@media (max-width: 650px) {

    .brand-logo {
        width: 145px !important;
        max-height: 45px !important;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-tagline {
        font-size: 6px;
        letter-spacing: .4px;
    }

}
/* =========================================================
   NAVBAR - FIX SPACE AFTER ADDING COMPANY NAME
========================================================= */

/* Keep logo + company name compact */
.brand {
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.brand-logo {
    width: 205px !important;
    max-height: 58px !important;
}

/* Company name */
.brand-text {
    min-width: 135px !important;
}

.brand-name {
    font-size: 18px !important;
    letter-spacing: .3px !important;
}

.brand-tagline {
    font-size: 8px !important;
    letter-spacing: .5px !important;
}


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

.main-nav {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    margin-left: 8px !important;
    min-width: 0 !important;
}

.nav-link,
.dropdown-btn {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
}


/* ================= SEARCH ================= */

.nav-search {
    margin-left: 4px !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
}


/* ================= GET A QUOTE ================= */

.nav-quote {
    margin-left: 5px !important;

    min-width: 120px !important;
    width: 120px !important;

    height: 40px !important;

    padding: 0 12px !important;

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

    white-space: nowrap !important;
    flex-shrink: 0 !important;

    font-size: 12.5px !important;
}


/* Prevent quote text from wrapping */
.nav-quote span,
.nav-quote * {
    white-space: nowrap !important;
}
/* =========================================================
   AJANTA PIPES - FINAL NAVBAR LAYOUT
   LEFT LOGO | CENTER MENU + SEARCH | RIGHT QUOTE
   ========================================================= */

.main-header,
.main-header.scrolled {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(7, 26, 56, 0.08) !important;
}

/* Main navbar */
.navbar {
    min-height: 72px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;

    gap: 0 !important;
    width: 100%;
}

/* =========================================================
   LEFT SIDE
   ========================================================= */

.brand {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    flex: 0 0 auto !important;
    text-decoration: none !important;

    margin-right: auto !important;
}

.brand-logo {
    width: 185px !important;
    max-height: 54px !important;
    height: auto !important;

    object-fit: contain !important;
}

.brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    white-space: nowrap !important;
}

.brand-name {
    color: #075985 !important;

    font-size: 19px !important;
    font-weight: 900 !important;

    line-height: 1.1 !important;
    letter-spacing: .4px !important;
}

.brand-tagline {
    margin-top: 3px !important;

    color: #64748b !important;

    font-size: 8px !important;
    font-weight: 800 !important;

    letter-spacing: .7px !important;
    line-height: 1.2 !important;
}

/* =========================================================
   CENTER MENU
   ========================================================= */

.main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    flex: 0 1 auto !important;

    margin: 0 auto !important;

    min-width: 0 !important;
}

/* Menu items */
.nav-link,
.dropdown-btn {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

    padding: 9px 8px !important;

    color: #172033 !important;
    background: transparent !important;

    border: none !important;
    border-radius: 7px !important;

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

    white-space: nowrap !important;

    cursor: pointer;

    transition: .25s ease !important;
}

.nav-link i,
.dropdown-btn > i:first-child {
    color: #0B5CAD !important;
    font-size: 14px !important;
}

.nav-link:hover,
.dropdown-btn:hover {
    color: #E53935 !important;
    background: #f7f9fc !important;
}

.nav-link:hover i,
.dropdown-btn:hover > i:first-child {
    color: #E53935 !important;
}

.nav-link.active {
    color: #E53935 !important;
    background: transparent !important;
}

.nav-link.active i {
    color: #E53935 !important;
}

.dropdown-arrow {
    color: #64748b !important;
    font-size: 8px !important;

    margin-left: 1px !important;
}

/* =========================================================
   DROPDOWN
   ========================================================= */

.dropdown-menu {
    min-width: 215px !important;

    background: #ffffff !important;

    border: 1px solid #dce4ef !important;
    border-top: 3px solid #E53935 !important;

    border-radius: 10px !important;

    box-shadow: 0 18px 45px rgba(7, 26, 56, .15) !important;
}

.dropdown-menu a {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    padding: 10px 12px !important;

    color: #172033 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

.dropdown-menu a:hover {
    background: #f1f6fc !important;
    color: #0B5CAD !important;
}

.dropdown-menu a i {
    color: #E53935 !important;
    font-size: 5px !important;
}

/* =========================================================
   SEARCH - CENTER
   ========================================================= */

.nav-search {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    margin-left: 5px !important;
    margin-right: 5px !important;

    flex: 0 0 auto !important;
}

.nav-search-btn {
    width: 36px !important;
    height: 36px !important;

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

    color: #0B5CAD !important;
    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 7px !important;

    cursor: pointer;

    font-size: 15px !important;

    transition: .25s ease !important;
}

.nav-search-btn:hover {
    color: #E53935 !important;
    background: #f7f9fc !important;
    border-color: #e2e8f0 !important;
}

/* Search box */
.nav-search-box {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    right: 0 !important;

    width: 250px !important;

    display: flex !important;

    padding: 6px !important;

    background: #ffffff !important;

    border: 1px solid #dce4ef !important;
    border-radius: 9px !important;

    box-shadow: 0 15px 35px rgba(7,26,56,.15) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(-5px) !important;

    transition: .25s ease !important;

    z-index: 9999 !important;
}

.nav-search-box.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.nav-search-box input {
    flex: 1 !important;
    min-width: 0 !important;

    padding: 10px 12px !important;

    color: #172033 !important;
    background: #f8fafc !important;

    border: none !important;
    outline: none !important;
    border-radius: 6px !important;

    font-family: inherit !important;
    font-size: 13px !important;
}

.nav-search-box button {
    width: 38px !important;

    margin-left: 5px !important;

    color: #ffffff !important;
    background: #E53935 !important;

    border: none !important;
    border-radius: 6px !important;

    cursor: pointer !important;
}

.nav-search-box button:hover {
    background: #C62828 !important;
}

/* =========================================================
   RIGHT SIDE - GET A QUOTE
   ========================================================= */

.nav-quote {
    margin-left: auto !important;

    flex: 0 0 auto !important;

    width: 125px !important;
    min-width: 125px !important;

    height: 40px !important;

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

    gap: 7px !important;

    padding: 0 12px !important;

    color: #ffffff !important;

    background: #E53935 !important;

    border: none !important;
    border-radius: 7px !important;

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

    white-space: nowrap !important;

    box-shadow: 0 6px 16px rgba(229,57,53,.25) !important;

    transition: .25s ease !important;
}

.nav-quote:hover {
    color: #ffffff !important;
    background: #C62828 !important;

    transform: translateY(-2px);

    box-shadow: 0 9px 20px rgba(229,57,53,.32) !important;
}

.nav-quote span {
    white-space: nowrap !important;
}

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

@media (max-width: 1250px) {

    .brand-logo {
        width: 160px !important;
    }

    .brand-name {
        font-size: 17px !important;
    }

    .brand-tagline {
        font-size: 7px !important;
    }

    .nav-link,
    .dropdown-btn {
        padding-left: 6px !important;
        padding-right: 6px !important;

        font-size: 11px !important;
    }

    .nav-quote {
        width: 115px !important;
        min-width: 115px !important;
    }
}

@media (max-width: 1100px) {

    .brand-text {
        display: none !important;
    }

    .brand-logo {
        width: 175px !important;
        max-height: 55px !important;
    }

    .main-nav {
        gap: 0 !important;
    }

    .nav-link,
    .dropdown-btn {
        padding-left: 5px !important;
        padding-right: 5px !important;

        font-size: 11px !important;
    }

    .nav-link i,
    .dropdown-btn > i:first-child {
        display: none !important;
    }
}

@media (max-width: 900px) {

    .navbar {
        min-height: 68px !important;
        height: 68px !important;
    }

    .brand-logo {
        width: 180px !important;
        max-height: 52px !important;
    }

    .brand {
        margin-right: 0 !important;
    }

    .nav-quote {
        display: none !important;
    }

    .nav-search {
        margin-left: auto !important;
    }
}

@media (max-width: 650px) {

    .navbar {
        min-height: 64px !important;
        height: 64px !important;
    }

    .brand-logo {
        width: 145px !important;
        max-height: 45px !important;
    }

    .nav-search-box {
        position: fixed !important;

        top: 72px !important;
        left: 15px !important;
        right: 15px !important;

        width: auto !important;
    }
}
/* =========================================================
   AJANTA PIPES - FULL LIGHT BLUE WEBSITE THEME
   ========================================================= */

:root {
    --light-blue: #DFF3FF;
    --light-blue-2: #EAF7FF;
    --light-blue-3: #F4FBFF;
    --blue-border: #B9E3F8;
    --blue-text: #075985;
    --blue-primary: #168AC4;
    --blue-dark: #064B70;
}

/* =========================================================
   FULL WEBSITE BACKGROUND
   ========================================================= */

html,
body {
    background: var(--light-blue) !important;
}

/* All main sections */
section,
.about-section,
.products-section,
.partner-section,
.news-section,
.contact-section {
    background: var(--light-blue) !important;
}

/* Alternate sections */
section:nth-of-type(even) {
    background: var(--light-blue-2) !important;
}


/* =========================================================
   TOP INFORMATION BAR
   ========================================================= */

.topbar {
    background: #DFF3FF !important;
    color: #075985 !important;
    border-bottom: 1px solid #A9DDF4 !important;
}

.topbar a,
.topbar span,
.topbar i {
    color: #075985 !important;
}

.topbar a:hover {
    color: #064B70 !important;
}


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

.main-header,
.main-header.scrolled {
    background: #DFF3FF !important;

    border-bottom: 1px solid #B9E3F8 !important;

    box-shadow:
        0 4px 18px rgba(7, 89, 133, .10) !important;
}


/* Logo company name */

.brand-name {
    color: #075985 !important;
}

.brand-tagline {
    color: #39738F !important;
}


/* Navigation */

.nav-link,
.dropdown-btn {
    color: #164E63 !important;
}

.nav-link i,
.dropdown-btn > i:first-child {
    color: #168AC4 !important;
}

.nav-link:hover,
.dropdown-btn:hover {
    color: #075985 !important;
    background: rgba(255,255,255,.65) !important;
}

.nav-link:hover i,
.dropdown-btn:hover > i:first-child {
    color: #075985 !important;
}

.nav-link.active {
    color: #075985 !important;
}

.nav-link.active i {
    color: #075985 !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.nav-search-btn {
    color: #075985 !important;
}

.nav-search-btn:hover {
    color: #075985 !important;
    background: #FFFFFF !important;
    border-color: #B9E3F8 !important;
}

.nav-search-box {
    background: #FFFFFF !important;
    border: 1px solid #B9E3F8 !important;
}

.nav-search-box input {
    background: #F4FBFF !important;
}

.nav-search-box button {
    background: #168AC4 !important;
}

.nav-search-box button:hover {
    background: #075985 !important;
}


/* =========================================================
   GET A QUOTE
   ========================================================= */

.nav-quote {
    background: #168AC4 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(22,138,196,.20) !important;
}

.nav-quote:hover {
    background: #075985 !important;
    color: #FFFFFF !important;
}


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

.hero {
    background: var(--light-blue) !important;
}

/* Keep video visible, use a soft light-blue overlay */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7,89,133,.55),
            rgba(22,138,196,.28),
            rgba(223,243,255,.08)
        ) !important;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-title,
section h2 {
    color: #075985 !important;
}

.section-label,
.section-tag,
.section-kicker {
    color: #168AC4 !important;
}

section p {
    color: #365B6B;
}


/* =========================================================
   WHITE CARDS ON LIGHT BLUE BACKGROUND
   ========================================================= */

.product-card,
.feature-card,
.about-card,
.partner-form-card,
.news-card,
.contact-card {
    background: #FFFFFF !important;

    border: 1px solid #B9E3F8 !important;

    box-shadow:
        0 8px 25px rgba(7,89,133,.08) !important;
}

.product-card:hover,
.feature-card:hover,
.about-card:hover,
.news-card:hover {
    border-color: #168AC4 !important;

    box-shadow:
        0 12px 30px rgba(7,89,133,.14) !important;
}


/* Card icons */

.product-card i,
.feature-card i,
.about-card i {
    color: #168AC4 !important;
}


/* =========================================================
   PRODUCT IMAGES
   ========================================================= */

.product-image,
.product-card img {
    border-color: #B9E3F8 !important;
}


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

.btn,
.cta-button {
    background: #168AC4 !important;
    border-color: #168AC4 !important;
    color: #FFFFFF !important;
}

.btn:hover,
.cta-button:hover {
    background: #075985 !important;
    border-color: #075985 !important;
}


/* =========================================================
   DROPDOWN MENUS
   ========================================================= */

.dropdown-menu {
    background: #FFFFFF !important;

    border: 1px solid #B9E3F8 !important;

    border-top: 3px solid #168AC4 !important;

    box-shadow:
        0 18px 40px rgba(7,89,133,.13) !important;
}

.dropdown-menu a {
    color: #164E63 !important;
}

.dropdown-menu a:hover {
    background: #EAF7FF !important;
    color: #075985 !important;
}

.dropdown-menu a i {
    color: #168AC4 !important;
}


/* =========================================================
   PARTNER
   ========================================================= */

.partner-section {
    background: #DFF3FF !important;
}

.partner-form-card {
    background: #FFFFFF !important;
}

.partner-submit {
    background: #168AC4 !important;
    color: #FFFFFF !important;
}

.partner-submit:hover {
    background: #075985 !important;
}


/* =========================================================
   FORM INPUTS
   ========================================================= */

input,
textarea,
select {
    background: #F4FBFF !important;

    border: 1px solid #B9E3F8 !important;

    color: #164E63 !important;
}

input:focus,
textarea:focus,
select:focus {
    background: #FFFFFF !important;

    border-color: #168AC4 !important;

    box-shadow:
        0 0 0 3px rgba(22,138,196,.12) !important;
}


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

.contact-section {
    background: #EAF7FF !important;
}


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

footer {
    background: #B9E3F8 !important;

    color: #075985 !important;

    border-top: 1px solid #A5D7EE !important;
}

footer h3,
footer h4,
footer strong {
    color: #075985 !important;
}

footer p,
footer span {
    color: #285C72 !important;
}

footer a {
    color: #166A8E !important;
}

footer a:hover {
    color: #075985 !important;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float {
    background: #25D366 !important;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.scroll-top,
.back-to-top {
    background: #168AC4 !important;
    color: #FFFFFF !important;
}


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

.mobile-menu-btn {
    color: #075985 !important;

    background: #FFFFFF !important;

    border: 1px solid #B9E3F8 !important;
}

@media (max-width: 900px) {

    .main-nav {
        background: #DFF3FF !important;

        border: 1px solid #B9E3F8 !important;
    }

    .nav-link,
    .dropdown-btn {
        color: #164E63 !important;
    }
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-content,
.product-modal-content {
    background: #FFFFFF !important;

    border: 1px solid #B9E3F8 !important;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {
    background: #168AC4 !important;
    color: #FFFFFF !important;
}
/* FORCE REQUEST BOX FIELDS TO WHITE/GRAY */
.quote-card .input-wrap {
    background: #FFFFFF !important;
    border: 1px solid #9CA3AF !important;
    box-shadow: none !important;
}

.quote-card .input-wrap:focus-within {
    background: #FFFFFF !important;
    border: 1px solid #6B7280 !important;
    box-shadow: none !important;
}

.quote-card .input-wrap input,
.quote-card .input-wrap select {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #172033 !important;
}

.quote-card textarea {
    background: #FFFFFF !important;
    border: 1px solid #9CA3AF !important;
    color: #172033 !important;
    box-shadow: none !important;
}

.quote-card textarea:focus {
    border: 1px solid #6B7280 !important;
    box-shadow: none !important;
    outline: none !important;
}
html,
body {
    background: var(--light-navy-bg) !important;
    color: var(--navy-text) !important;
}


/* =========================
   TOP BAR
   ========================= */

.topbar {
    background: #C7DCEB !important;
    color: #123B5D !important;
    border-bottom: 1px solid #AAC4D6 !important;
}

.topbar a,
.topbar span,
.topbar i {
    color: #123B5D !important;
}


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

.main-header,
.main-header.scrolled {
    background: #E8F1F8 !important;
    border-bottom: 1px solid var(--navy-border) !important;

    box-shadow:
        0 5px 20px rgba(18,59,93,.10) !important;
}

.brand-name {
    color: #123B5D !important;
}

.brand-tagline {
    color: #54758D !important;
}

.nav-link,
.dropdown-btn {
    color: #173F5B !important;
}

.nav-link i,
.dropdown-btn > i:first-child {
    color: #176B9E !important;
}

.nav-link:hover,
.dropdown-btn:hover {
    color: #0D304C !important;
    background: #D5E6F1 !important;
}

.nav-link.active,
.nav-link.active i {
    color: #176B9E !important;
}


/* =========================
   DROPDOWN
   ========================= */

.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #B9CDDC !important;
    border-top: 3px solid #176B9E !important;

    box-shadow:
        0 15px 35px rgba(18,59,93,.15) !important;
}

.dropdown-menu a {
    color: #173F5B !important;
}

.dropdown-menu a:hover {
    background: #E8F1F8 !important;
    color: #176B9E !important;
}


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

.hero {
    background: #BFD5E6 !important;
}

.hero-video {
    filter:
        brightness(.62)
        contrast(1.03)
        saturate(.80) !important;
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(18,59,93,.72),
            rgba(18,59,93,.45),
            rgba(18,59,93,.18)
        ) !important;
}

.hero h1 {
    color: #FFFFFF !important;
}

.hero h1 span {
    color: #8FD1F2 !important;
}

.hero p {
    color: #E7F1F7 !important;
}


/* =========================
   SECTIONS
   ========================= */

section,
.about-section,
.products-section,
.partner-section,
.news-section,
.contact-section {
    background: var(--light-navy-bg) !important;
    color: var(--navy-text) !important;
}

section:nth-of-type(even) {
    background: var(--light-navy-section) !important;
}


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

.section-title,
section h2,
section h3 {
    color: #123B5D !important;
}

.section-label,
.section-tag,
.section-kicker {
    color: #176B9E !important;
}

section p {
    color: #42657C !important;
}


/* =========================
   CARDS
   ========================= */

.product-card,
.feature-card,
.about-card,
.news-card,
.contact-card,
.partner-form-card,
.quote-card {
    background: #FFFFFF !important;
    color: #123B5D !important;

    border:
        1px solid #B9CDDC !important;

    box-shadow:
        0 10px 30px rgba(18,59,93,.09) !important;
}

.product-card:hover,
.feature-card:hover,
.about-card:hover,
.news-card:hover {
    border-color: #176B9E !important;

    box-shadow:
        0 15px 35px rgba(18,59,93,.14) !important;
}

.product-card h3,
.feature-card h3,
.about-card h3,
.news-card h3,
.contact-card h3,
.quote-card h3 {
    color: #123B5D !important;
}

.product-card p,
.feature-card p,
.about-card p,
.news-card p,
.contact-card p,
.quote-card p {
    color: #527086 !important;
}

.product-card i,
.feature-card i,
.about-card i {
    color: #176B9E !important;
}


/* =========================
   ROLSON
   ========================= */

.rolson-section {
    background: #DCEAF5 !important;
}

.rolson-content h2 {
    color: #123B5D !important;
}

.rolson-content h2 span {
    color: #176B9E !important;
}

.rolson-content > p {
    color: #42657C !important;
}

.rolson-list div {
    color: #315A73 !important;
}

.rolson-list i {
    color: #176B9E !important;
}

.rolson-circle {
    background:
        radial-gradient(
            circle,
            #B4D0E3,
            #7FA9C3
        ) !important;

    border: 1px solid #91B2C9 !important;

    box-shadow:
        0 25px 60px rgba(18,59,93,.15) !important;
}

.rolson-inner {
    border-color: rgba(18,59,93,.35) !important;
}

.rolson-inner span {
    color: #123B5D !important;
}

.rolson-inner small {
    color: #176B9E !important;
}


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

.quote-card,
.partner-form-card {
    background: #FFFFFF !important;
    border: 1px solid #B9CDDC !important;
}

.form-group label {
    color: #173F5B !important;
}

.quote-card .input-wrap,
.partner-form-card .input-wrap {
    background: #F3F8FC !important;
    border: 1px solid #B9CDDC !important;
    box-shadow: none !important;
}

.quote-card .input-wrap:focus-within,
.partner-form-card .input-wrap:focus-within {
    border-color: #176B9E !important;

    box-shadow:
        0 0 0 2px rgba(23,107,158,.10) !important;
}

.quote-card input,
.quote-card select,
.partner-form-card input,
.partner-form-card select {
    background: transparent !important;
    color: #123B5D !important;
}

.quote-card textarea,
.partner-form-card textarea {
    background: #F3F8FC !important;
    color: #123B5D !important;
    border: 1px solid #B9CDDC !important;
}

input::placeholder,
textarea::placeholder {
    color: #7B94A6 !important;
}


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

.btn,
.cta-button,
.nav-quote,
.submit-btn,
.partner-submit {
    background: #176B9E !important;
    color: #FFFFFF !important;
    border-color: #176B9E !important;

    box-shadow:
        0 6px 18px rgba(23,107,158,.18) !important;
}

.btn:hover,
.cta-button:hover,
.nav-quote:hover,
.submit-btn:hover,
.partner-submit:hover {
    background: #0D4F78 !important;
}


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

footer {
    background: #BFD5E6 !important;
    color: #315A73 !important;
    border-top: 1px solid #A8C1D3 !important;
}

footer h3,
footer h4,
footer strong {
    color: #123B5D !important;
}

footer p,
footer span {
    color: #42657C !important;
}

footer a {
    color: #176B9E !important;
}

footer a:hover {
    color: #0D304C !important;
}


/* =========================
   SEARCH
   ========================= */

.nav-search-btn {
    color: #176B9E !important;
}

.nav-search-box {
    background: #FFFFFF !important;
    border: 1px solid #B9CDDC !important;
}

.nav-search-box input {
    background: #F3F8FC !important;
    color: #123B5D !important;
}


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

@media (max-width: 900px) {

    .main-nav {
        background: #E8F1F8 !important;
        border: 1px solid #B9CDDC !important;
    }

    .nav-link,
    .dropdown-btn {
        color: #173F5B !important;
    }
}


/* =========================
   SELECTION
   ========================= */

::selection {
    background: #176B9E !important;
    color: #FFFFFF !important;
}

/* NAVBAR FONT SIZE */
.nav-link,
.dropdown-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.dropdown-menu a {
    font-size: 13px !important;
}

.nav-link i,
.dropdown-btn > i:first-child {
    font-size: 15px !important;
}
/* Make logo larger and clearer */
.brand-logo {
    width: 220px !important;
    height: 70px !important;
    max-width: none !important;
    max-height: 70px !important;
    object-fit: contain !important;
    transform: scale(1.18) !important;
    transform-origin: left center !important;
}

.navbar {
    min-height: 82px !important;
    height: 82px !important;
}
/* ===== LOGO + COMPANY NAME TO LEFTMOST ===== */

.main-header .container.navbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0px !important;
    padding-right: 10px !important;
}

/* Logo + text group */
.main-header .brand {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
}

/* Logo */
.main-header .brand-logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Company text */
.main-header .brand-text {
    margin-left: -5px !important;
}
/* =========================================
   ABOUT SECTION VIDEO
   ========================================= */

.about-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
}

/* Keep the existing About image container shape */
.about-image,
.about-visual {
    position: relative;
    overflow: hidden;
}

/* Video should fill the complete visual area */
.about-image .about-video,
.about-visual .about-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional dark cinematic effect */
.about-video {
    filter: brightness(.88) contrast(1.05) saturate(1.05);
}

/* Mobile */
@media (max-width: 768px) {
    .about-video {
        min-height: 320px;
    }
}
.stats-section {
    background: linear-gradient(
        135deg,
        #0B3155,
        #124D78
    ) !important;
}

.stats-section .stat-item strong {
    color: #ffffff !important;
}

.stats-section .stat-item span {
    color: #BBD6E6 !important;
}

.stats-section .stat-item > i {
    color: #5CC5F2 !important;
    background: rgba(255,255,255,.10) !important;
}

.stats-section .stat-item {
    border-right: 1px solid rgba(255,255,255,.15) !important;
}
.rolson-section .container {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

@media (max-width: 768px) {
    .rolson-section .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
/* =========================================
   WHY AJANTA - CARD DESIGN + HOVER
   ========================================= */

.why-section {
    background: #ffffff !important;
    padding: 90px 0 !important;
}

.why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

/* CARD */

.why-card {
    position: relative !important;
    padding: 32px !important;

    background: #ffffff !important;

    border: 1px solid #D9E3EB !important;
    border-radius: 20px !important;

    box-shadow: 0 6px 20px rgba(18, 59, 93, 0.06) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

/* HOVER CARD */

.why-card:hover {
    transform: translateY(-8px) !important;

    border-color: #168AC4 !important;

    box-shadow:
        0 20px 45px rgba(18, 59, 93, 0.15),
        0 5px 15px rgba(22, 138, 196, 0.10) !important;
}

/* ICON BOX */

.why-icon {
    width: 50px !important;
    height: 50px !important;

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

    margin-bottom: 18px !important;

    border-radius: 12px !important;

    background: #FCEBEC !important;
    color: #D9363E !important;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease !important;
}

/* ICON HOVER */

.why-card:hover .why-icon {
    background: #168AC4 !important;
    color: #ffffff !important;

    transform: scale(1.08) !important;
}

/* HEADING */

.why-card h3 {
    margin: 0 0 9px !important;

    color: #172033 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1.35 !important;

    transition: color 0.3s ease !important;
}

/* HEADING HOVER */

.why-card:hover h3 {
    color: #168AC4 !important;
}

/* DESCRIPTION */

.why-card p {
    margin: 0 !important;

    color: #64748B !important;

    font-size: 13px !important;
    line-height: 1.75 !important;
}

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

@media (max-width: 950px) {

    .why-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}

@media (max-width: 600px) {

    .why-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }

    .why-card {
        padding: 25px !important;
    }

}
/* =========================================
   PARTNER SECTION BACKGROUND
   ========================================= */

.partner-section {
    background: linear-gradient(
        135deg,
        #EAF4FA 0%,
        #D7EAF5 50%,
        #C7E0EF 100%
    ) !important;

    position: relative !important;
    overflow: hidden !important;
}

/* Soft decorative circles */
.partner-section::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(22, 138, 196, 0.08);
    top: -160px;
    left: -100px;
}

.partner-section::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(11, 92, 173, 0.06);
    bottom: -220px;
    right: -120px;
}

/* Keep content above decoration */
.partner-section .container {
    position: relative;
    z-index: 2;
}
/* =========================================================
   FINAL MOBILE NAVBAR FIX
========================================================= */

@media (max-width: 900px) {

    /* Keep header clean */
    .main-header {
        width: 100% !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
    }

    .navbar {
        min-height: 68px !important;
        height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important;
    }

    /* Logo */
    .brand {
        flex: 1 !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .brand-logo {
        width: 145px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Show hamburger */
    .mobile-menu-btn {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid #dce4ef !important;
        border-radius: 8px !important;
        color: #071A38 !important;
        font-size: 18px !important;
        z-index: 10001 !important;
    }

    /* IMPORTANT: hide complete desktop navigation */
    .main-nav {
        display: none !important;

        position: absolute !important;
        left: 15px !important;
        right: 15px !important;
        top: calc(100% + 8px) !important;

        width: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;

        padding: 10px !important;

        background: #ffffff !important;
        border: 1px solid #dce4ef !important;
        border-radius: 14px !important;

        box-shadow: 0 20px 50px rgba(7,26,56,.18) !important;

        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;

        z-index: 10000 !important;
    }

    /* Show menu ONLY after hamburger is clicked */
    .main-nav.open {
        display: flex !important;
    }

    .nav-link,
    .dropdown-btn {
        width: 100% !important;
        min-height: 46px !important;
        padding: 12px 13px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        font-size: 13px !important;
    }

    .nav-dropdown {
        width: 100% !important;
    }

    .nav-quote {
        width: 100% !important;
        margin: 6px 0 0 !important;
    }

    /* Mobile dropdown */
    .dropdown-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 4px 8px !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-dropdown.open .dropdown-menu {
        display: block !important;
    }

}


/* Extra-small phones */
@media (max-width: 500px) {

    .navbar {
        padding: 0 12px !important;
    }

    .brand-logo {
        width: 135px !important;
    }

    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

}
/* =========================================================
   FINAL MOBILE FULL-WIDTH FIX
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Every major section fills the screen */
    header,
    main,
    section,
    footer {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Main container */
    .container {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Navbar */
    .navbar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
    }

    /* Hero */
    .hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* About */
    .about-grid,
    .about-image,
    .about-content {
        width: 100% !important;
        max-width: none !important;
    }

    .image-frame {
        width: 100% !important;
        max-width: 100% !important;
    }

    .image-frame img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Products */
    .products-section,
    .product-controls,
    .products-grid,
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .products-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Why choose */
    .why-section,
    .why-grid,
    .why-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Rolson */
    .rolson-section,
    .rolson-grid,
    .rolson-content,
    .rolson-visual {
        width: 100% !important;
        max-width: none !important;
    }

    /* Partner */
    .partner-section,
    .partner-box,
    .partner-content,
    .partner-form-card {
        width: 100% !important;
        max-width: none !important;
    }

    /* News */
    .news-section,
    .news-grid,
    .news-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Contact */
    .contact-section,
    .contact-grid {
        width: 100% !important;
        max-width: none !important;
    }

    /* Footer */
    .footer,
    .footer-grid,
    .footer-brand,
    .footer-column {
        width: 100% !important;
        max-width: none !important;
    }

    /* Prevent elements from creating an invisible wider page */
    img,
    video,
    iframe,
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    /* Cards should never overflow */
    .product-card,
    .why-card,
    .news-card,
    .quote-card,
    .partner-form-card {
        box-sizing: border-box !important;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 650px) {

    .container {
        width: calc(100% - 28px) !important;
        max-width: none !important;
    }

    .hero-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-grid,
    .products-grid,
    .why-grid,
    .rolson-grid,
    .news-grid,
    .contact-grid,
    .footer-grid {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .product-card,
    .news-card,
    .why-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .partner-box {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* =========================================================
   MOBILE VISIBILITY + HERO + PRODUCT CARD FIX
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* HERO MUST BE VISIBLE */
    .hero {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 680px !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .hero-video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
    }

    .hero-overlay,
    .hero-pattern {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 90px 0 70px !important;
    }

    .hero h1,
    .hero-badge,
    .hero-content > p,
    .hero-buttons,
    .hero-trust {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* PRODUCT SECTION */
    .products-section {
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .products-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 22px !important;
    }

    /* IMPORTANT:
       Never hide product cards on mobile
       even if reveal JS fails */
    .product-card,
    .product-card.reveal {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-image {
        display: block !important;
        width: 100% !important;
        height: 230px !important;
        overflow: hidden !important;
    }

    .product-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .product-content {
        display: block !important;
        width: 100% !important;
        padding: 20px !important;
    }

    .product-content h3,
    .product-content p,
    .product-link {
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* SMALL PHONES */
@media (max-width: 650px) {

    .hero {
        min-height: 650px !important;
    }

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

    .hero h1 {
        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    .hero-content > p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .product-image {
        height: 210px !important;
    }

    .product-content {
        padding: 18px !important;
    }
}
/* =========================================================
   WHY AJANTA - MOBILE FINAL FIX
========================================================= */

@media (max-width: 900px) {

    .why-section {
        width: 100% !important;
        overflow: hidden !important;
    }

    .why-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .why-card,
    .why-card.reveal,
    .why-card.reveal.visible {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        padding: 22px !important;

        background: #ffffff !important;
        border: 1px solid #DCE4EF !important;
        border-radius: 16px !important;

        box-sizing: border-box !important;
    }

    .why-icon {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .why-card h3 {
        margin-top: 16px !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        color: #172033 !important;
    }

    .why-card p {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
        color: #657086 !important;
    }

}


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

@media (max-width: 500px) {

    .why-grid {
        gap: 14px !important;
    }

    .why-card {
        padding: 20px !important;
    }

    .why-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 17px !important;
    }

    .why-card h3 {
        font-size: 16px !important;
    }

    .why-card p {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

}

/* =========================================================
   CONTACT SECTION — SPACING AND ALIGNMENT FIX
========================================================= */

/* Contact section layout */
.contact-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* CONTACT US label */
.contact-info .section-tag {
    margin-bottom: 18px !important;
}

/* Main heading */
.contact-info h2 {
    margin: 0 0 20px !important;
    line-height: 1.25 !important;
}

/* Description */
.contact-info > p {
    margin: 0 0 28px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    max-width: 540px !important;
}

/* Space between phone, email and location */
.contact-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 0 28px !important;
}

/* Individual contact information row */
.contact-detail {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
}

/* Contact icons */
.contact-detail-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
}

/* Keep labels and values on separate lines */
.contact-detail > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.contact-detail small {
    display: block !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
    line-height: 1.4 !important;
}

.contact-detail strong {
    display: block !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
}

/* WhatsApp button spacing */
.whatsapp-contact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    min-height: 50px !important;
    margin-top: 0 !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
}

/* Mobile spacing */
@media (max-width: 650px) {
    .contact-info .section-tag {
        margin-bottom: 14px !important;
    }

    .contact-info h2 {
        margin-bottom: 16px !important;
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    .contact-info > p {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    .contact-details {
        gap: 13px !important;
        margin-bottom: 22px !important;
    }

    .contact-detail {
        gap: 12px !important;
        padding: 13px !important;
    }

    .contact-detail-icon {
        flex-basis: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .contact-detail strong {
        font-size: 12px !important;
    }

    .whatsapp-contact {
        max-width: 100% !important;
    }
}

/* CONTACT — FIX HEADING AND DESCRIPTION SPACING */

.contact-info .section-tag {
    display: flex !important;
    margin-bottom: 22px !important;
}

.contact-info h2 {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    max-width: 550px !important;
}

.contact-info h2 span {
    display: block !important;
    margin-top: 5px !important;
}

.contact-info > p {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
    padding: 0 !important;
    max-width: 540px !important;
    line-height: 1.9 !important;
}

.contact-info .contact-details {
    margin-top: 0 !important;
}

@media (max-width: 650px) {
    .contact-info .section-tag {
        margin-bottom: 17px !important;
    }

    .contact-info h2 {
        margin-bottom: 18px !important;
        font-size: 30px !important;
        line-height: 1.35 !important;
    }

    .contact-info h2 span {
        margin-top: 4px !important;
    }

    .contact-info > p {
        margin-bottom: 24px !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
    }
}

/* TOPBAR — LEFT AND RIGHT SPACING FIX */

.topbar .container {
    width: min(calc(100% - 48px), 1240px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

.topbar-left,
.topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Keep content from touching the screen edges */
@media (max-width: 900px) {
    .topbar .container {
        width: calc(100% - 32px) !important;
    }

    .topbar-inner {
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 12px !important;
    }

    .topbar-left,
    .topbar-right {
        gap: 12px !important;
    }
}
/* =========================================
   CONTACT — FORCE HEADING AND DESCRIPTION SPACING
========================================= */

#contact .contact-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* CONTACT US label */
#contact .contact-info > .section-tag {
    margin: 0 0 20px !important;
    margin-left: 14px !important;
}

/* Let's Build Something Reliable. */
#contact .contact-info > h2 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 0 0 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    margin-left: 50px !important;
}

/* Need product information... */
#contact .contact-info > p {
    display: block !important;
    width: 100% !important;
    max-width: 580px !important;
    margin: 0 0 32px !important;
    padding: 10px 0 0 !important;
    line-height: 1.9 !important;
    box-sizing: border-box !important;
    margin-left: 50px !important;
}

/* Space before phone, email and location */
#contact .contact-info > .contact-details {
    width: 100% !important;
    margin: 0 0 28px !important;
}

/* Mobile spacing */
@media (max-width: 650px) {
    #contact .contact-info > .section-tag {
        margin-bottom: 16px !important;
    }

    #contact .contact-info > h2 {
        margin-bottom: 20px !important;
        padding-bottom: 6px !important;
        line-height: 1.4 !important;
    }

    #contact .contact-info > p {
        margin-bottom: 24px !important;
        padding-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    #contact .contact-info > .contact-details {
        margin-bottom: 22px !important;
    }
}
/* NAVBAR LOGO + ISO CERTIFICATION TEXT */

.main-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.main-header .brand-logo {
    width: 120px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

.main-header .brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.main-header .brand-name {
    color: #071A38 !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.main-header .brand-tagline {
    color: #168AC4 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
}

/* Mobile navbar */
@media (max-width: 600px) {
    .main-header .brand {
        gap: 8px !important;
    }

    .main-header .brand-logo {
        width: 85px !important;
    }

    .main-header .brand-name {
        font-size: 12px !important;
    }

    .main-header .brand-tagline {
        font-size: 7px !important;
        letter-spacing: 0 !important;
    }
}
#products .product-card {
    margin-left: 20px !important;
}
/* LEFT MARGIN FOR NEWS & UPDATE CARDS */
#news .news-card {
    margin-left: 20px !important;
}
/* ABOUT SECTION VIDEO */

#about .image-frame {
    overflow: hidden;
    border-radius: 22px;
    position: relative;
}

#about .about-video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 0.9;
    object-fit: cover;
    border-radius: 22px;
    background: #071A38;
}

#about .image-frame::after {
    pointer-events: none;
}
/* LEFT SPACING FOR FOOTER CONTENTS */
footer .container {
    padding-left: 30px !important;
}
/* REMOVE WHITE LOGO BACKGROUND IN FOOTER */
.footer-brand img {
    mix-blend-mode: multiply !important;
    background: transparent !important;
}
/* INCREASE FOOTER LOGO SIZE */
.footer-brand img {
    width: 240px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
}
.why-section .why-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
}
/* LEFT MARGIN FOR ABOUT VIDEO */
#about .image-frame {
    margin-left: 25px !important;
}
/* INCREASE NAVBAR LOGO SIZE */
.main-header .brand-logo {
    width: 190px !important;
    max-height: 80px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* MOBILE LOGO SIZE */
@media (max-width: 600px) {
    .main-header .brand-logo {
        width: 105px !important;
        max-height: 65px !important;
    }
}

/* =====================================
   MOBILE-FRIENDLY RESPONSIVE DESIGN
===================================== */

* {
    box-sizing: border-box;
}

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

img,
video {
    max-width: 100%;
}

/* TABLETS AND SMALL LAPTOPS */
@media (max-width: 900px) {

    .about-grid,
    .rolson-grid,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .why-section .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 25px !important;
    }
}

/* MOBILE PHONES */
@media (max-width: 650px) {

    .container {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
    }

    /* Navbar and logo */
    .main-header .navbar {
        min-height: 78px !important;
        gap: 8px !important;
    }

    .main-header .brand {
        max-width: calc(100% - 55px);
        gap: 8px !important;
    }

    .main-header .brand-logo {
        width: 100px !important;
        max-height: 58px !important;
    }

    .main-header .brand-name {
        font-size: 11px !important;
    }

    .main-header .brand-tagline {
        font-size: 7px !important;
        white-space: normal !important;
    }

    .mobile-menu-btn {
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
    }

    /* Prevent cards from overflowing due to desktop margins */
    #products .product-card,
    #news .news-card,
    .why-section .why-card {
        margin-left: 0 !important;
        width: 100%;
        min-width: 0;
    }

    /* Product cards */
    .products-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .product-controls {
        gap: 16px !important;
    }

    .product-filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .product-search {
        width: 100% !important;
    }

    /* About video */
    #about .image-frame {
        width: 100%;
        margin-left: 0 !important;
    }

    #about .about-video {
        width: 100%;
        aspect-ratio: 1 / 0.9;
        object-fit: cover;
    }

    /* Why Ajanta cards */
    .why-section .why-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .why-section .why-card {
        padding: 24px !important;
    }

    /* Other sections */
    .about-grid,
    .rolson-grid,
    .contact-grid,
    .news-grid,
    .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .partner-box {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 24px !important;
    }

    .partner-box .btn {
        grid-column: auto !important;
        justify-self: stretch !important;
    }

    /* Footer */
    .footer .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .footer-brand img {
        max-width: 100%;
        height: auto;
    }

    /* Forms */
    .form-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }

    /* Comfortable spacing */
    .section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .section-heading h2 {
        font-size: clamp(27px, 7vw, 36px) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .floating-actions {
        right: 12px !important;
        bottom: 12px !important;
    }
}
/* FIX HERO SECTION ALIGNMENT ON MOBILE */
@media (max-width: 650px) {

    #home.hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    #home .hero-content {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 70px 0 85px !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #home .hero-content > * {
        margin-left: 0 !important;
    }

    #home .hero h1 {
        font-size: clamp(29px, 8vw, 38px) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    #home .hero-buttons {
        width: 100% !important;
    }

    #home .hero-buttons .btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
/* EXTRA COMPACT FOOTER */
.footer {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
}

.footer .footer-grid {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    gap: 18px !important;
}

.footer .footer-brand img {
    width: 180px !important;
    max-height: 65px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer .footer-brand p {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}

.footer .social-links {
    margin-top: 8px !important;
}

.footer .footer-bottom {
    padding: 8px 0 !important;
    margin: 0 !important;
}

/* COMPACT MOBILE FOOTER */
@media (max-width: 650px) {
    .footer {
        padding-top: 15px !important;
    }

    .footer .footer-grid {
        gap: 14px !important;
        padding-bottom: 10px !important;
    }

    .footer .footer-brand img {
        width: 160px !important;
    }
}
/* RESTORE ORIGINAL FOOTER LOGO COLOURS */
.footer-brand img {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    object-fit: contain !important;
}

/* FINAL FIX — Contact paragraph cut off on mobile */
@media screen and (max-width: 650px) {

    #contact.contact-section .contact-info {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    #contact.contact-section .contact-info > h2,
    #contact.contact-section .contact-info > p {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
    }

    #contact.contact-section .contact-info > h2 {
        font-size: 30px !important;
        line-height: 1.3 !important;
        margin-bottom: 18px !important;
    }

    #contact.contact-section .contact-info > p {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        -webkit-line-clamp: unset !important;
        text-overflow: clip !important;
    }
}
.contact-bottom-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.contact-bottom-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 8px;
    background: #168AC4;
    color: #FFFFFF !important;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 650px) {
    .contact-bottom-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .contact-bottom-buttons a {
        width: 100%;
    }
}