/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css?family=Barlow:300,400,500,600,700,800|Teko:300,400,500,600,700&display=swap");

/* ============================================================
   CSS VARIABLES / ROOT
   NEW COLOUR SCHEME: Black + Gold
   ============================================================ */
:root {
    --primary-color:  #000000;   /* WAS #1A365D navy  → now BLACK */
    --accent-color:   #D4AF37;   /* GOLD — unchanged  */
    --accent-light:   #F4E4BA;   /* LIGHT GOLD — new  */
    --dark-card:      #111827;   /* DARK GRAY cards   */
    --mid-gray:       #1F2937;   /* MED GRAY borders  */
    --border-gray:    #374151;   /* SUBTLE DIVIDERS   */
    --text-muted:     #9CA3AF;   /* BODY / SECONDARY  */
    --text-light:     #D1D5DB;   /* LIGHTER SECONDARY */
    --light-bg:       #111827;   /* PAGE BACKGROUND   */
    --black:          #000000;
    --text-color:     #FFFFFF;   /* WAS DARK → now OFF-WHITE */
}

/* ============================================================
   GLOBAL / BASE
   ============================================================ */
html {
    scroll-behavior: smooth;
    font-size: 105%;
}

body {
    font-family: "Barlow", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 19px;
    color: var(--text-color);
    background-color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Teko", sans-serif;
    color: #FFFFFF;
    margin-top: 0;
    font-style: normal;
    font-weight: 500;
}

p {
    font-family: "Barlow", sans-serif;
    font-size: 19px;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 15px;
    font-weight: normal;
}

a, .button { transition: all 0.3s ease-out 0s; }
a:focus, .button:focus { text-decoration: none; outline: none; }
a { color: var(--text-muted); }
a:hover { color: var(--accent-color); }
a:focus, a:hover, .portfolio-cat a:hover, .footer-menu li a:hover { text-decoration: none; }
a, button { outline: medium none; }

button:focus, input:focus, textarea, textarea:focus { outline: 0; }

ul { margin: 0; padding: 0; }
li { list-style: none; }

hr {
    border-bottom: 1px solid var(--border-gray);
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
input:focus::-moz-placeholder { opacity: 0; transition: 0.4s; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

.fix   { overflow: hidden; }
.clear { clear: both; }
.f-left  { float: left; }
.f-right { float: right; }
.img { max-width: 100%; transition: all 0.3s ease-out 0s; }

/* ============================================================
   BACKGROUND COLOURS & THEMES
   ============================================================ */
.white-bg       { background: var(--dark-card); }     /* was white */
.gray-bg        { background: var(--mid-gray); }
.black-bg       { background: #000000; }
.theme-bg       { background: var(--accent-color); }
.brand-bg       { background: var(--dark-card); }
.testimonial-bg { background: var(--mid-gray); }

.white-color { color: #fff; }
.black-color { color: #000; }
.theme-color { color: var(--accent-color); }

/* ============================================================
   BACKGROUND IMAGES & OVERLAYS
   ============================================================ */
.bg-img-1 { background-image: url(../img/slider/slider-img-1.jpg); }
.bg-img-2 { background-image: url(../img/background-img/bg-img-2.jpg); }
.cta-bg-1 { background-image: url(../img/background-img/bg-img-3.jpg); }

[data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; }
[data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; }
[data-opacity="1"]::before { opacity: 0.1; }
[data-opacity="5"]::before { opacity: 0.5; }
[data-opacity="9"]::before { opacity: 0.9; }

.overlay { position: relative; z-index: 0; }
.overlay::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(170deg, rgba(0,0,0,0) 0%, #000 100%); }

.theme-overlay { position: relative; }
.theme-overlay::before { background: #000000; content: ""; height: 100%; width: 100%; left: 0; top: 0; opacity: 0.7; position: absolute; }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-tittle span { font-size: 18px; display: block; color: var(--accent-color); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 17px; }
.section-tittle h2 { font-size: 50px; display: block; font-weight: 600; text-transform: capitalize; line-height: 1.3; color: #FFFFFF; }
.section-tittle p   { color: var(--text-muted); }
.section-tittle2 h2, .section-tittle2 p { color: #fff; }

@media (max-width: 575px) { .section-tittle { margin-bottom: 50px; } .section-tittle h2 { font-size: 30px; line-height: 1.6; } }
@media only screen and (min-width: 576px) and (max-width: 767px) { .section-tittle { margin-bottom: 50px; } .section-tittle h2 { font-size: 31px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .section-tittle h2 { font-size: 42px; } }

/* ============================================================
   SECTION PADDING UTILITIES
   ============================================================ */
.section-padding    { padding-top: 100px; padding-bottom: 100px; }
.section-padding30  { padding-top: 120px; padding-bottom: 80px; }
.section-paddingt30 { padding-top: 120px; padding-bottom: 60px; }
.section-padding3   { padding-top: 100px; padding-bottom: 0; }
.section-padding2   { padding-top: 120px; padding-bottom: 120px; }
.services-padding   { padding-top: 100px; padding-bottom: 80px; }
.w-padding2         { padding-top: 100px; padding-bottom: 100px; }
.testimonial-padding{ padding-top: 120px; padding-bottom: 100px; }
.footer-padding     { padding-top: 60px; padding-bottom: 20px; }
.padding-bottom     { padding-bottom: 100px; }
.pb-bottom          { padding-bottom: 100px; }
.pb-top             { padding-top: 100px; }

@media only screen and (min-width: 1200px) and (max-width: 1600px) { .section-padding30 { padding-top: 120px; padding-bottom: 80px; } .section-padding2  { padding-top: 120px; padding-bottom: 120px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .section-padding30  { padding-top: 100px; padding-bottom: 60px; } .section-paddingt30 { padding-top: 100px; padding-bottom: 50px; } .section-padding3   { padding-top: 100px; } .section-padding2   { padding-top: 100px; padding-bottom: 100px; } .services-padding   { padding-top: 80px; padding-bottom: 60px; } .padding-bottom     { padding-bottom: 80px; } .pb-bottom          { padding-bottom: 100px; } .w-padding2         { padding-top: 100px; padding-bottom: 100px; } .testimonial-padding{ padding-top: 100px; padding-bottom: 80px; } .footer-padding     { padding-top: 50px; padding-bottom: 20px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { .section-padding30  { padding-top: 80px; padding-bottom: 50px; } .section-paddingt30 { padding-top: 80px; padding-bottom: 40px; } .section-padding3   { padding-top: 60px; } .section-padding2   { padding-top: 80px; padding-bottom: 80px; } .services-padding   { padding-top: 60px; padding-bottom: 50px; } .padding-bottom     { padding-bottom: 60px; } .pb-bottom          { padding-bottom: 50px; } .pb-top             { padding-top: 60px; } .w-padding2         { padding-top: 80px; padding-bottom: 80px; } .testimonial-padding{ padding-top: 70px; padding-bottom: 60px; } .footer-padding     { padding-top: 40px; padding-bottom: 20px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) { .section-padding30  { padding-top: 60px; padding-bottom: 30px; } .section-paddingt30 { padding-top: 60px; padding-bottom: 10px; } .section-padding3   { padding-top: 60px; } .section-padding2   { padding-top: 60px; padding-bottom: 60px; } .services-padding   { padding-top: 50px; padding-bottom: 40px; } .padding-bottom     { padding-bottom: 50px; } .pb-bottom          { padding-bottom: 10px; } .pb-top             { padding-top: 50px; } .w-padding2         { padding-top: 60px; padding-bottom: 60px; } .testimonial-padding{ padding-top: 60px; padding-bottom: 40px; } .footer-padding     { padding-top: 40px; padding-bottom: 20px; } }
@media (max-width: 575px) { .section-padding30  { padding-top: 60px; padding-bottom: 30px; } .section-paddingt30 { padding-top: 60px; padding-bottom: 10px; } .section-padding3   { padding-top: 50px; } .section-padding2   { padding-top: 60px; padding-bottom: 60px; } .services-padding   { padding-top: 50px; padding-bottom: 40px; } .padding-bottom     { padding-bottom: 50px; } .pb-bottom          { padding-bottom: 10px; } .pb-top             { padding-top: 50px; } .w-padding2         { padding-top: 60px; padding-bottom: 60px; } .testimonial-padding{ padding-top: 50px; padding-bottom: 40px; } .footer-padding     { padding-top: 40px; padding-bottom: 20px; } }

.separator { border-top: 1px solid var(--border-gray); }
.mb-90     { margin-bottom: 50px; }

@media (max-width: 767px) { .mb-90 { margin-bottom: 30px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { .mb-90 { margin-bottom: 40px; } }

/* ============================================================
   MOBILE VIEW FIXES
   ============================================================ */
.mobile_menu { position: relative !important; right: auto; top: auto; width: 100%; z-index: 99; }
.mobile_menu .slicknav_menu { background: #000000 !important; margin: 0 !important; padding: 0 !important; }
.mobile_menu .slicknav_menu .slicknav_btn { display: block !important; margin: 10px 15px !important; top: auto !important; right: auto !important; }
.mobile_menu .slicknav_menu .slicknav_nav { background: #111827 !important; margin-top: 0 !important; }

@media (max-width: 767px) {
    .slider-area .hero__caption h1 { font-size: 40px !important; line-height: 1.2 !important; margin-bottom: 20px !important; word-wrap: break-word; }
    .slider-area .hero-pera p { font-size: 18px !important; line-height: 1.5 !important; padding-right: 0 !important; }
    body, p, li, span, a { font-size: 16px !important; }
    h1 { font-size: 32px !important; }
    h2 { font-size: 28px !important; }
    .section-tittle h2 { font-size: 30px !important; }
    .hero-btns { display: flex; flex-direction: column; gap: 15px; }
    .hero-btns .btn, .btn-hero-primary, .btn-hero-secondary { padding: 15px 20px !important; font-size: 16px !important; width: 100%; text-align: center; margin: 0 !important; }
    .single-cat { padding: 30px 20px !important; }
    .white-bg.rounded.shadow-sm.p-5.mb-5 { padding: 30px !important; }
    .white-bg h4 { font-size: 24px !important; }
    .white-bg ul li { font-size: 16px !important; }
    .about-main-title { font-size: 32px !important; }
    .about-text-box p { font-size: 16px !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    background: var(--accent-color);
    padding: 27px 44px;
    text-transform: uppercase;
    font-family: "Barlow", sans-serif;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 0;
    margin: 0;
    transition: color 0.4s linear;
    position: relative;
    z-index: 1;
    border: 0;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 101%; height: 101%;
    background: var(--accent-light);
    z-index: 1;
    border-radius: 0;
    transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.4, 0.7);
    transform: scaleX(0);
    transform-origin: 0 0;
}

.btn:hover::before { transform: scaleX(1); color: #000 !important; z-index: -1; }
.btn.focus, .btn:focus { outline: 0; box-shadow: none; }

.submit-btn {
    background: var(--accent-color);
    border: 0; color: #000000; padding: 15px 30px; cursor: pointer; width: 100%; text-transform: uppercase; font-family: "Barlow", sans-serif; font-size: 14px; border-radius: 5px; font-weight: 700;
}

.submit-btn2 {
    background: var(--accent-color);
    width: 100%; height: 60px; padding: 10px 20px; border: 0; color: #000000; text-transform: capitalize; cursor: pointer; font-size: 16px; border-radius: 0; font-weight: 700;
}

.border-btn {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background: none; border-radius: 5px; text-transform: capitalize; padding: 25px 57px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 1px; margin: 0; position: relative; overflow: hidden; transition: color 0.4s linear;
}

.border-btn::before {
    content: ""; position: absolute; left: 0; top: 0; width: 101%; height: 101%; background: var(--accent-color); z-index: -1; transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.4, 0.7); transform: scaleY(0); transform-origin: 0 0;
}
.border-btn:hover { color: #000; }
.border-btn:hover::before { transform: scaleY(1); }

.boxed-btn {
    background: transparent;
    color: var(--accent-color) !important;
    display: inline-block; padding: 18px 44px; font-family: "Teko", sans-serif; font-size: 14px; font-weight: 400; border: 1px solid var(--accent-color); letter-spacing: 3px; text-align: center; text-transform: uppercase; cursor: pointer;
}
.boxed-btn:hover { background: var(--accent-color); color: #000 !important; border: 1px solid var(--accent-color); }
.boxed-btn:focus { outline: none; }

.learn-more-btn { display: inline-block; margin-top: 10px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--accent-color); }
.learn-more-btn:hover { text-decoration: underline; }

/* ============================================================
   SCROLL / BACK TO TOP
   ============================================================ */
#scrollUp, #back-top { background: var(--accent-color); height: 50px; width: 50px; right: 31px; bottom: 18px; position: fixed; z-index: 10; color: #000000; font-size: 20px; text-align: center; border-radius: 50%; line-height: 48px; border: 2px solid transparent; box-shadow: 0 0 10px 3px rgba(212,175,55,0.3); }
#scrollUp a, #back-top a { color: #000000 !important; }
#scrollUp a i, #back-top a i { color: #000000 !important; display: block; line-height: 50px; }
#scrollUp a i, #back-top a i { display: block; line-height: 50px; }
#scrollUp:hover { color: #000; }
@media (max-width: 575px) { #scrollUp, #back-top { right: 16px; } }

/* ============================================================
   STICKY BAR — DISABLED
   ============================================================ */
.sticky-bar { display: none !important; }

/* ============================================================
   NEW CARGOPRESS-STYLE HEADER & NAVIGATION
   ============================================================ */
.custom-header-wrapper { display: flex; background-color: #000000; position: relative; z-index: 99; box-shadow: 0 2px 10px rgba(212,175,55,0.15); border-bottom: 1px solid var(--border-gray); }
.header-logo-section { width: 320px; display: flex; align-items: center; justify-content: center; background: #000000; z-index: 2; padding: 15px; }
.logo-link { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo-link img { max-height: 130px; width: auto; }
.logo-text { color: #FFFFFF; font-weight: 800; font-size: 24px; white-space: nowrap; }

.header-right-section { flex-grow: 1; display: flex; flex-direction: column; }
.header-top-bar { display: flex; justify-content: flex-end; align-items: center; padding: 15px 30px; background-color: #000000; gap: 40px; border-bottom: 1px solid var(--border-gray); }
.contact-info-group { display: flex; gap: 30px; }
.contact-item { display: flex; align-items: center; gap: 15px; border-right: 1px solid var(--border-gray); padding-right: 30px; }
.contact-item:last-child { border-right: none; padding-right: 0; }
.contact-item i { color: var(--accent-color); font-size: 22px; }
.contact-text { display: flex; flex-direction: column; }
.contact-text .title { font-size: 13px; color: var(--text-muted); line-height: 1.2; }
.contact-text .detail { font-size: 15px; font-weight: 700; color: #FFFFFF; line-height: 1.4; }
.header-btn-top { background-color: var(--accent-color); color: #000000; padding: 12px 25px; border: none; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: 0.3s; }
.header-btn-top:hover { background-color: var(--accent-light); color: #000000; }

.header-nav-bar { background-color: #111827; display: flex; justify-content: space-between; align-items: center; margin-left: 0; padding: 0 40px; min-height: 60px; border-top: 2px solid var(--accent-color); }
#navigation { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; }
#navigation li a { white-space: nowrap; padding: 20px 15px !important; position: relative; color: var(--text-light) !important; font-size: 15px; font-weight: 600; display: block; transition: color 0.3s ease; text-decoration: none; }
#navigation li a:hover { color: var(--accent-color) !important; }
#navigation li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background-color: var(--accent-color); transition: width 0.3s ease; }
#navigation li a:hover::after { width: 100%; }

.social-icons-nav a { color: var(--text-muted); font-size: 16px; background: rgba(255,255,255,0.05); padding: 8px 12px; margin-left: 5px; transition: 0.3s; border: 1px solid var(--border-gray); }
.social-icons-nav a:hover { background: var(--accent-color); color: #000; border-color: var(--accent-color); }

.mobile_menu { position: absolute; right: 0; width: 100%; z-index: 99; }
.mobile_menu .slicknav_menu { background: #000000; margin-top: 0 !important; }
.mobile_menu .slicknav_menu .slicknav_btn { top: -34px; }
.mobile_menu .slicknav_menu .slicknav_btn .slicknav_icon-bar { background-color: var(--accent-color) !important; }
.mobile_menu .slicknav_menu .slicknav_nav { margin-top: 9px !important; box-shadow: 0 0 10px 3px rgba(212,175,55,0.2); background: #111827; }
.mobile_menu .slicknav_menu .slicknav_nav a { color: var(--text-light); }
.mobile_menu .slicknav_menu .slicknav_nav a:hover { background: transparent; color: var(--accent-color); }
.mobile_menu .slicknav_menu .slicknav_nav a { font-size: 15px; padding: 7px 10px; }
.mobile_menu .slicknav_menu .slicknav_nav .slicknav_item a { padding: 0 !important; }
@media (max-width: 991px) {
    .header-top-bar, .header-nav-bar { display: none !important; }
    .custom-header-wrapper { justify-content: space-between; display: flex; align-items: center; padding: 10px 15px; position: relative; min-height: 70px; }
    .mobile_menu { position: relative !important; right: auto; top: auto; width: 100%; z-index: 99; }
    .mobile_menu .slicknav_menu { display: block !important; visibility: visible !important; background: #000000 !important; margin: 0 !important; padding: 0 !important; }
    .mobile_menu .slicknav_btn { display: block !important; visibility: visible !important; background-color: var(--accent-color) !important; padding: 10px 15px !important; }
    .mobile_menu .slicknav_icon-bar { background-color: #000000 !important; display: block !important; width: 25px !important; height: 3px !important; margin: 5px 0 !important; }
    .mobile_menu .slicknav_nav { background: #111827 !important; margin-top: 0 !important; }
    .slicknav_btn { position: fixed !important; top: 15px !important; right: 15px !important; z-index: 9999 !important; }
    .slicknav_icon-bar { display: block !important; width: 22px !important; height: 2px !important; margin: 5px 0 !important; background-color: #000000 !important; }
.slicknav_menutxt { display: none !important; }
}
.slicknav_icon-bar { background-color: #000000 !important; }
.slicknav_icon-bar {
    font-size: 0 !important;
    line-height: 0 !important;
    background-color: #000000 !important;
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    margin: 5px 0 !important;
}
.slicknav_btn { background-color: #000000 !important; border: 2px solid var(--accent-color) !important; }
.slicknav_icon-bar { background-color: var(--accent-color) !important; }
/* ============================================================
   HERO / SLIDER
   ============================================================ */
.slider-height { background-image: url(../img/Website\ MK\ Global/MK_Global_Logistics_Depot_Hero.png); min-height: 65vh !important; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.slider-height2 { background-image: url(../img/hero/hero2.jpg); min-height: 460px; background-repeat: no-repeat; background-size: cover; }
.slider-area { position: relative; }
/*.slider-area::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 1; }*/
.slider-area .single-slider { position: relative; z-index: 2; padding-top: 60px; }

.hero__caption h1 { font-size: 78px !important; font-weight: 900 !important; color: #fff !important; line-height: 1.1 !important; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }
.hero__caption h1 span, .hero__caption h1 sup, .hero__caption h1 b { color: var(--accent-color) !important; font-size: inherit !important; vertical-align: baseline !important; display: inline-block !important; }
.hero-pera p { font-size: 22px !important; font-weight: 400; color: rgba(255,255,255,0.9) !important; line-height: 1.6; max-width: 850px; margin-bottom: 40px; }

.hero-btns { display: flex; gap: 20px; flex-wrap: wrap; }
.btn-hero-primary { background: var(--accent-color); color: #000000 !important; padding: 20px 45px; text-transform: uppercase; font-weight: 800; font-size: 15px; letter-spacing: 1px; border: 2px solid var(--accent-color); transition: all 0.3s ease; text-decoration: none; }
.btn-hero-primary:hover { background: transparent; color: var(--accent-color) !important; }
.btn-hero-secondary { background: transparent; color: #fff !important; padding: 20px 45px; text-transform: uppercase; font-weight: 800; font-size: 15px; letter-spacing: 1px; border: 2px solid rgba(255,255,255,0.6); transition: all 0.3s ease; text-decoration: none; }
.btn-hero-secondary:hover { background: #fff; color: #000 !important; border-color: #fff; }

@media (max-width: 991px) { .hero__caption h1 { font-size: 52px !important; } .hero-pera p { font-size: 18px !important; } }
@media (max-width: 575px) { .hero__caption h1 { font-size: 40px !important; } .btn-hero-primary, .btn-hero-secondary { width: 100%; text-align: center; } }
@media (max-width: 768px) {
    .hero-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
}
/* ============================================================
   WHATSAPP FLOAT BUTTON
   ============================================================ */
.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 75px; right: 30px; background-color: #25D366; color: #fff; border-radius: 50%; text-align: center; font-size: 30px; line-height: 60px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); z-index: 100; transition: 0.3s; }
.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.single-cat { border: 1px solid var(--border-gray); padding: 30px; transition: 0.3s; background: var(--dark-card); }
.single-cat:hover { box-shadow: 0 12px 25px rgba(212,175,55,0.15); border-color: var(--accent-color); }

.categories-area .single-cat { border: 1px solid var(--border-gray); border-radius: 6px; padding: 85px 22px; transition: all 0.4s ease-out 0s; position: relative; z-index: 1; background: var(--dark-card); }
@media (max-width: 575px) { .categories-area .single-cat { padding: 50px 22px; } }
.categories-area .single-cat::before { position: absolute; content: ""; width: 100%; height: 0; background: linear-gradient(135deg, var(--accent-color), var(--accent-light)); transition: 0.6s; bottom: 0; left: 0; z-index: -1; border-radius: 6px; }
.categories-area .single-cat .cat-icon span { color: var(--accent-color); font-size: 50px; margin-bottom: 30px; display: block; }
.categories-area .single-cat .cat-cap h5 > a { font-size: 36px; font-weight: 700; margin-bottom: 21px; display: block; transition: all 0.2s ease-out 0s; font-family: "Barlow", sans-serif; color: #FFFFFF; }
.categories-area .single-cat .cat-cap p { margin-bottom: 36px; color: var(--text-muted); font-size: 16px; transition: all 0.2s ease-out 0s; }
.categories-area .single-cat .cat-cap a { color: var(--accent-color); font-size: 16px; font-weight: 600; transition: all 0.2s ease-out 0s; }
.categories-area .single-cat:hover { border: 1px solid transparent; }
.categories-area .single-cat:hover::before { height: 100%; }
.categories-area .single-cat:hover .cat-icon span { color: #000; }
.categories-area .single-cat:hover .cat-cap h5 { color: #000; }
.categories-area .single-cat:hover .cat-cap h5 > a { color: #000; }
.categories-area .single-cat:hover .cat-cap p   { color: #000; }
.categories-area .single-cat:hover .cat-cap a   { color: #000; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-low-area .about-caption p { font-size: 16px; color: var(--text-light); line-height: 1.6; margin-bottom: 35px; padding-right: 50px; }
.about-low-area .about-img { position: relative; }
.about-low-area .about-img .about-font-img { position: absolute; z-index: 1; right: 47px; top: 0; }
.about-low-area .about-img .about-back-img { position: absolute; top: -45px; right: 0; z-index: 0; }

/* ============================================================
   OUR INFO AREA
   ============================================================ */
.our-info-area { background: var(--dark-card); }
.our-info-area .single-info { display: flex; align-items: center; }
.our-info-area .single-info .info-icon span { color: var(--accent-color); font-size: 44px; margin-bottom: 0; display: block; }
.our-info-area .single-info .info-caption { padding-left: 20px; }
.our-info-area .single-info .info-caption p { color: var(--text-muted); font-size: 16px; font-weight: 400; margin-bottom: 0; }
.our-info-area .single-info .info-caption span { color: #FFFFFF; font-size: 20px; margin-bottom: 0; display: block; font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-area { background: #000000; border-top: 2px solid var(--accent-color); }
.footer-area .footer-padding { padding-top: 30px !important; padding-bottom: 0px !important; }
.footer-area .text-center.mb-5.pb-3 { margin-bottom: 25px !important; padding-bottom: 15px !important; }
.footer-area h2 { font-size: 26px !important; margin-bottom: 5px !important; line-height: 1.2 !important; color: #fff !important; }
.footer-area .single-footer-caption.mb-50 { margin-bottom: 10px !important; }
.footer-area .footer-tittle h4 { margin-bottom: 15px !important; font-size: 18px !important; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; }
.footer-area .footer-tittle ul li { margin-bottom: 2px !important; line-height: 1.3 !important; font-size: 16x !important;}
.footer-area .footer-tittle ul li a { font-size: 16px !important; color: var(--text-muted); }
.footer-area .footer-tittle ul li a:hover { color: var(--accent-color); padding-left: 5px; }
.footer-area .info1 { margin-bottom: 10px !important; line-height: 1.4 !important; font-size: 14px !important; color: var(--text-muted); }
.footer-area .footer-logo img { max-height: 55px !important; margin-bottom: 5px !important; }
.footer-area .footer-bottom { padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 0 !important; border-top: 1px solid var(--border-gray); }
.footer-area .footer-bottom p { margin-bottom: 0 !important; line-height: 1.2 !important; font-size: 14px !important; color: var(--text-muted); }
.footer-area .footer-social a { color: var(--text-muted); font-size: 18px; text-align: center; margin-left: 24px; transition: 0.3s; }
.footer-area .footer-social a:hover { color: var(--accent-color); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form-area .contact-form-wrapper { background: var(--dark-card); padding: 80px; border-radius: 8px; border: 1px solid var(--border-gray); }
.contact-form-area .contact-form-wrapper form.contact-form input { height: 60px; width: 100%; color: #FFFFFF; font-size: 18px; font-weight: 400; padding: 9px 33px 9px 32px; border-radius: 5px; border: 1px solid var(--border-gray); background: var(--mid-gray); margin-bottom: 20px; }
.contact-form-area .contact-form-wrapper form.contact-form input::placeholder { color: var(--text-muted); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.bounce-animate { animation-name: float-bob; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes float-bob { 0% { transform: translateY(-20px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(-20px); } }

/* ============================================================
   BIGGER, BOLDER FONTS & WIDER LAYOUT (OVERRIDES) — UNCHANGED
   ============================================================ */
body, p, li, span, a { font-size: 21px !important; line-height: 1.7; }
h1 { font-size: 90px !important; letter-spacing: -2px; font-weight: 800 !important; }
h2 { font-size: 65px !important; letter-spacing: -1px; font-weight: 700 !important; }
h3 { font-size: 48px !important; letter-spacing: -0.5px; font-weight: 700 !important; }
h4 { font-size: 36px !important; font-weight: 600 !important; }
h5 { font-size: 28px !important; font-weight: 600 !important; }
.section-tittle h2 { font-size: 70px !important; margin-bottom: 25px; }
.section-tittle span { font-size: 22px !important; }
@media (min-width: 1400px) { .container { max-width: 1320px !important; } }

.slider-area .hero__caption h1 { font-size: 110px !important; line-height: 1 !important; margin-bottom: 35px; }
.slider-area .hero-pera p { font-size: 26px !important; line-height: 1.5; max-width: 950px; opacity: 0.95; }
.hero-btns .btn { padding: 24px 55px !important; font-size: 18px !important; }

.white-bg.rounded.shadow-sm.p-5.mb-5 { padding: 70px !important; max-width: 1000px !important; margin-left: auto; margin-right: auto; background: var(--dark-card) !important; border: 1px solid var(--border-gray) !important; }
.white-bg h4 { font-size: 38px !important; margin-bottom: 35px !important; color: #FFFFFF !important; }
.white-bg ul li { font-size: 22px !important; margin-bottom: 18px !important; display: flex; align-items: center; color: var(--text-light) !important; }
.white-bg ul li i { font-size: 26px !important; margin-right: 15px !important; color: var(--accent-color) !important; }

.contact-form-area .section-tittle h2 { font-size: 60px !important; }
form .form-group label { font-size: 20px !important; font-weight: 600; color: var(--accent-color); margin-bottom: 10px; }
form .form-control { height: 70px !important; font-size: 20px !important; padding: 15px 25px !important; background: var(--mid-gray) !important; border: 1px solid var(--border-gray) !important; color: #FFFFFF !important; }
form textarea.form-control { height: 180px !important; }
form .form-control::placeholder { color: var(--text-muted) !important; }

.single-cat { padding: 50px 40px !important; }
.single-cat .cat-icon span { font-size: 70px !important; }
.single-cat .cat-cap h5 > a { font-size: 34px !important; margin-bottom: 25px; }
.single-cat ul li { font-size: 21px !important; line-height: 1.6; margin-bottom: 15px; }



/* ============================================================
   ABOUT SECTION — ROLSO STYLE
   ============================================================ */
.about-accent-title { color: var(--accent-color); font-weight: 700; font-size: 18px !important; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 15px; }
.about-main-title { font-size: 55px !important; line-height: 1.1 !important; margin-bottom: 30px; color: #FFFFFF; font-weight: 800; }
.about-text-box { border-left: 4px solid var(--accent-color); padding-left: 25px; margin-bottom: 35px; }
.about-text-box p { font-size: 20px !important; color: var(--text-light); margin-bottom: 15px; }
.about-image-wrapper { position: relative; padding-right: 40px; padding-bottom: 40px; z-index: 1; }
.about-main-img { width: 100%; height: 550px; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.shuffle-btn { position: absolute; top: 20px; right: 60px; background-color: var(--accent-color); color: #000; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(212,175,55,0.4); transition: all 0.3s ease; z-index: 3; display: flex; align-items: center; justify-content: center; }
.shuffle-btn:hover { background-color: var(--accent-light); transform: scale(1.1); }
.about-accent-box { position: absolute; bottom: 0; right: 0; background-color: var(--dark-card); padding: 20px; border-radius: 4px; display: flex; align-items: center; gap: 15px; max-width: 270px; border-left: 4px solid var(--accent-color); box-shadow: 0 15px 35px rgba(0,0,0,0.5); z-index: 2; }
.accent-box-icon i { font-size: 30px; color: var(--accent-color); }

/* GAP FIX */
#services { padding-top: 50px !important; }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-image-wrapper img.main-faq-img { height: auto !important; width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.expert-box { position: absolute; bottom: -30px !important; right: 10px !important; background: var(--dark-card) !important; padding: 30px; border-radius: 4px; box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important; max-width: 320px; border-top: 4px solid var(--accent-color) !important; z-index: 5; }
.custom-accordion .card { background-color: transparent !important; border: none !important; margin-bottom: 15px !important; }
.custom-accordion .card-body { background-color: var(--mid-gray) !important; color: var(--text-light) !important; font-size: 16px !important; line-height: 1.8 !important; padding: 25px 30px !important; border-radius: 0 0 4px 4px !important; border: 1px solid var(--border-gray) !important; border-top: none !important; margin-top: -2px !important; }

#faqAccordion .card-header,
#faqAccordion .card-header .btn,
#faqAccordion .card-header .btn-link,
#faqAccordion .card-header .btn-link.collapsed {
    background: var(--accent-color) !important;
    background-color: var(--accent-color) !important;
    background-image: none !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 25px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#faqAccordion .card-header .btn:not(.collapsed),
#faqAccordion .card-header .btn-link:not(.collapsed),
#faqAccordion .card-header .btn:hover,
#faqAccordion .card-header .btn-link:hover,
#faqAccordion .card-header .btn:focus,
#faqAccordion .card-header .btn-link:focus,
#faqAccordion .card-header .btn:active,
#faqAccordion .card-header .btn-link:active,
#faqAccordion .card-header .btn[aria-expanded="true"],
#faqAccordion .card-header .btn-link[aria-expanded="true"] {
    background: var(--dark-card) !important;
    background-color: var(--dark-card) !important;
    background-image: none !important;
    color: var(--accent-color) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#faqAccordion .card-header .btn-link.collapsed i { color: #000000 !important; transition: transform 0.3s ease; }
#faqAccordion .card-header .btn-link:not(.collapsed) i,
#faqAccordion .card-header .btn-link:hover i { color: var(--accent-color) !important; transition: transform 0.3s ease; transform: rotate(180deg); }

@media (max-width: 991px) {
    .faq-image-wrapper img.main-faq-img { height: auto !important; }
    .expert-box { position: relative !important; bottom: auto !important; right: auto !important; margin-top: -40px !important; margin-left: auto !important; margin-right: auto !important; width: 90%; }
    .faq-image-wrapper { margin-bottom: 50px !important; }
}

/* ============================================================
   GENERAL SECTION BACKGROUNDS
   ============================================================ */
section { background-color: var(--primary-color); }
section:nth-child(even) { background-color: var(--dark-card); }

/* Cards, modals, panels */
.card, .modal-content, .panel { background-color: var(--dark-card) !important; border-color: var(--border-gray) !important; color: var(--text-color) !important; }

/* Inputs globally */
input, textarea, select { background-color: var(--mid-gray) !important; border-color: var(--border-gray) !important; color: #FFFFFF !important; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* ============================================================
   DROPDOWN / SELECT OPTIONS — dark theme fix
   ============================================================ */
select option {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

select option:checked {
    background-color: var(--accent-color) !important;
    color: #000000 !important;
}

/* Nice-select plugin override */
.nice-select {
    background-color: var(--mid-gray) !important;
    border-color: var(--border-gray) !important;
    color: #FFFFFF !important;
}

.nice-select .list {
    background-color: #1F2937 !important;
    border: 1px solid var(--border-gray) !important;
}

.nice-select .option {
    background-color: #1F2937 !important;
    color: #FFFFFF !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected {
    background-color: var(--accent-color) !important;
    color: #000000 !important;
}
/* ============================================================
   MOBILE VIEW FAILSAFE FIXES
   ============================================================ */
@media screen and (max-width: 991px) {
    /* 1. Nuke the 21px global font size that is breaking mobile */
    body, p, li, span, a {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* 2. Force the giant hero text to shrink and wrap */
    .slider-area .hero_caption h1, 
    .slider-area .hero__caption h1,
    .slider-area .hero_caption {
        font-size: 32px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        margin-bottom: 15px !important;
    }

    /* 3. Hide the desktop nav completely */
    .header-right-section {
        display: none !important;
    }

    /* 4. Force the Hamburger container to the top right */
    .custom-header-wrapper {
        position: relative !important;
    }
    
    .mobile_menu {
        display: block !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 99999 !important;
    }

    /* 5. Style the Hamburger Button so it is visible */
    .slicknav_btn {
        background-color: #D4AF37 !important; /* Gold */
        padding: 10px !important;
        border-radius: 4px !important;
    }
    
    .slicknav_btn .slicknav_icon-bar {
        background-color: #000000 !important; /* Black */
        width: 25px !important;
        height: 3px !important;
        margin: 4px 0 !important;
        display: block !important;
    }
}
@media (max-width: 991px) {

.hero__caption h1 {
    font-size: 52px !important;
}

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

/* make hero use full width */
.slider-area,
.slick-slider,
.slick-list,
.slick-track {
    width: 100%;
}

/* remove side spacing from slick */
.slick-list {
    padding: 0 !important;
}

}

@media (max-width: 768px) {

.hero-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
}

/* ensure hero fills mobile screen */
.slider-area {
    min-height: 100vh;
}

}

@media (max-width: 575px) {

.hero__caption h1 {
    font-size: 40px !important;
}

.btn-hero-primary,
.btn-hero-secondary {
    width: 100%;
    text-align: center;
}

/* ensure image fits properly on small phones */
.slider-area {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

}
@media (max-width: 768px) {

.slider-area .container{
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.slider-area{
    width:100% !important;
}

}
@media (max-width:768px){

.hero__caption h1{
    white-space: normal !important;
}

}
/* ============================================================
   MOBILE RESPONSIVENESS FIXES (Applies only to screens < 991px)
   ============================================================ */
@media screen and (max-width: 991px) {
    
    /* 1. HEADER RESTRUCTURE */
    header .custom-header-wrapper {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important; /* The anchor for absolute positioning */
        padding: 0 !important;
        background-color: #000000 !important;
    }

    /* 2. LOGO BAR */
    .header-logo-section {
        width: 100% !important;
        padding: 15px 20px !important;
        display: flex !important;
        justify-content: flex-start !important;
        background-color: #000000 !important;
    }
    .logo-link img { max-height: 55px !important; width: auto !important; }

    /* 3. NEUTRALIZE THE TRAPS */
    header .custom-header-wrapper .col-12,
    header .mobile_menu,
    header .slicknav_menu {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. THE BUTTON (MAXIMUM SPECIFICITY TO OVERRIDE OLD CODE) */
    header .custom-header-wrapper .col-12 .mobile_menu .slicknav_menu .slicknav_btn {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        margin: 0 !important;
        background-color: var(--accent-color) !important;
        padding: 10px !important;
        border-radius: 4px !important;
        z-index: 99999 !important;
        border: none !important;
        display: block !important;
    }

    /* 5. THE 3 LINES (MAXIMUM SPECIFICITY) */
    header .custom-header-wrapper .col-12 .mobile_menu .slicknav_menu .slicknav_btn .slicknav_icon-bar {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background-color: #000000 !important;
        margin: 4px 0 !important;
        border-radius: 2px !important;
    }
    .slicknav_menutxt { display: none !important; }

    /* 6. CONTACT INFO & INLINE SOCIAL ICONS */
    .header-right-section {
        position: relative !important; 
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        background-color: #000000 !important; /* Changed from navy to pure black */
        border-top: 1px solid #1F2937 !important; 
        padding-bottom: 25px !important; 
    }
   .header-top-bar { 
        display: flex !important; 
        flex-direction: column !important; 
        padding: 20px 20px 0 20px !important; 
        gap: 15px !important; 
        border-bottom: none !important; 
    }
    .contact-info-group { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 100% !important; }
    .contact-item { border: none !important; padding: 0 !important; gap: 15px !important; justify-content: flex-start !important; }
    .contact-text .title { font-size: 13px !important; color: var(--accent-color) !important; margin-bottom: 2px !important; }
    .contact-text .detail { font-size: 15px !important; color: #FFFFFF !important; white-space: normal !important; }
    .contact-item i { font-size: 20px !important; }
    
    /* Push the button to the far right */
    .header-action { 
        width: calc(100% - 115px) !important; 
        margin-top: 15px !important; 
        margin-left: auto !important; 
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    .header-btn-top { 
        box-sizing: border-box !important; /* Forces height to stay strictly exact */
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important; 
        height: 46px !important; /* Locked exact height */
        padding: 0 10px !important; 
        font-size: 14px !important; 
        border-radius: 4px !important; 
        border: none !important;
    }

    /* 6.5 POSITION SOCIAL ICONS ON THE FAR LEFT */
    .header-nav-bar nav { display: none !important; }
    .header-nav-bar { 
        position: absolute !important; 
        bottom: 25px !important; /* Perfectly matches the 25px padding of the container! */
        left: 20px !important; 
        right: auto !important; 
        display: flex !important; 
        justify-content: flex-start !important;
        padding: 0 !important; 
        background-color: transparent !important; 
        border-top: none !important;
        min-height: auto !important;
        width: auto !important;
        margin: 0 !important;
    }
    .social-icons-nav { 
        display: flex !important; 
        gap: 10px !important; 
        margin: 0 !important;
    }
    
    /* Force both icons to be identical twins to the button */
    .social-icons-nav a { 
        box-sizing: border-box !important; /* Absorbs the border into the height */
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        width: 46px !important; 
        height: 46px !important; /* Locked exact height to match yellow button */
        margin: 0 !important; 
        font-size: 18px !important; 
        border-radius: 4px !important; 
        background-color: #1F2937 !important; 
        color: #9CA3AF !important; 
        border: 1px solid #374151 !important; 
    }

    /* 7. DROPDOWN MENU OPENS BELOW THE HEADER */
    header .custom-header-wrapper .col-12 .mobile_menu .slicknav_menu .slicknav_nav {
        position: absolute !important;
        top: 100% !important; /* Drops right below contact bar */
        left: 0 !important;
        width: 100% !important;
        background-color: #1F2937 !important;
        z-index: 99999 !important;
        margin: 0 !important;
        border-top: 2px solid var(--accent-color) !important;
    }
/* 8. HERO IMAGE (BEAUTIFUL CROPPED DESKTOP-STYLE LAYOUT) */
    .slider-height { 
        background-size: cover !important; /* This crops the sides but makes it tall! */
        background-position: center right !important; /* Keeps focus on the trucks */
        background-repeat: no-repeat !important;
        min-height: 80vh !important; /* Makes the image take up 80% of the screen height */
        position: relative !important;
    }
    
    /* Add a subtle dark overlay so the white text is always readable over the photo */
    .slider-height::before {
        content: "";
        position: absolute !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important; /* 40% darkness */
        z-index: 0 !important;
    }

    .slider-area .single-slider { 
        padding-top: 120px !important; /* Pushes text down to the middle of the screen */
        padding-bottom: 60px !important;
        position: relative !important;
        z-index: 1 !important; /* Keeps text above the dark overlay */
    }
    
    /* Big, bold headline inside the image */
    .slider-area .hero__caption h1 {
        font-size: 44px !important; /* Nice and big again! */
        line-height: 1.1 !important;
        text-align: left !important;
        margin-top: 0 !important; 
        margin-bottom: 15px !important;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important;
        white-space: normal !important; 
    }
    
    /* Paragraph right below the headline */
    .slider-area .hero-pera p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
        margin-top: 0 !important; 
        margin-bottom: 30px !important;
        color: rgba(255,255,255,0.95) !important;
    }
    
    /* Stack the buttons so they are big, clickable, and comfortable */
    .slider-area .hero-btns {
        display: flex !important;
        flex-direction: column !important; /* Stacked looks incredibly professional on mobile */
        gap: 15px !important;
        width: 100% !important;
    }
    
    .btn-hero-primary, .btn-hero-secondary {
        width: 100% !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        letter-spacing: 1px !important;
    }

    /* Restore your button colors */
    .btn-hero-primary {
        background-color: var(--accent-color) !important;
        color: #000000 !important;
        border: none !important;
    }
    .btn-hero-secondary {
        background-color: transparent !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
    }
    /* 9. FAQ SECTION FIXES */
    #faqAccordion .card-header .btn, 
    #faqAccordion .card-header .btn-link { white-space: normal !important; font-size: 14px !important; padding: 15px !important; text-align: left !important; line-height: 1.4 !important; }
    .expert-box { position: relative !important; margin: 20px auto 40px auto !important; width: 100% !important; max-width: 100% !important; bottom: auto !important; right: auto !important; }

    /* 10. 2x2 DYNAMIC SERVICES GRID */
    .categories-area .row:nth-of-type(2) { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .categories-area .col-lg-6 { width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .categories-area .single-cat { padding: 20px 10px !important; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
    .categories-area .single-cat .cat-icon span { font-size: 35px !important; margin-bottom: 10px !important; }
    .categories-area .single-cat .cat-cap h5 > a { font-size: 16px !important; margin-bottom: 10px !important; line-height: 1.2 !important; }
    .categories-area .single-cat .cat-cap p { font-size: 13px !important; margin-bottom: 10px !important; line-height: 1.4 !important; }
    .categories-area .single-cat ul { display: none !important; }

    /* 11. FIX FONT SIZES */
    h2, .section-tittle h2, .about-main-title, .contact-form-area .section-tittle h2 { font-size: 32px !important; line-height: 1.2 !important; }
    h1, .hero__caption h1 { font-size: 36px !important; margin-top: 15px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 20px !important; }

    /* 12. LAYOUT SPACING AND OVERLAPPING FIXES */
    .about-btn-wrap { margin-bottom: 40px !important; display: block !important; position: relative; z-index: 10; }
    .container { padding-left: 15px !important; padding-right: 15px !important; max-width: 100% !important; overflow-x: hidden !important; }
    .card, .contact-form-wrapper, .process-section .card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
}
/* 14. PERFECTLY ALIGNED FLOATING BUTTONS */
    .whatsapp-float, 
    #back-top, 
    #scrollUp {
        width: 50px !important;
        height: 50px !important;
        right: 20px !important; 
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 50% !important; /* Ensures perfect circles */
    }

    /* Position WhatsApp strictly above the yellow button */
    .whatsapp-float {
        bottom: 85px !important; 
    }

    /* Position Yellow button at the bottom */
    #back-top, 
    #scrollUp {
        bottom: 20px !important;
    }

    /* Size the icons perfectly inside */
    .whatsapp-float i {
        font-size: 30px !important; /* Perfectly scaled for the 50px circle */
        margin: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    #back-top i, 
    #scrollUp i {
        font-size: 20px !important;
        margin: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }

    #back-top, 
    #scrollUp,
    #back-top i,
    #scrollUp i {
        animation: none !important;
        -webkit-animation: none !important;
    }
    
   
    #back-top::before, 
    #scrollUp::before,
    #back-top::after, 
    #scrollUp::after {
        display: none !important;
        animation: none !important;
    }
    /* --- KILL THE INVISIBLE HERO OVERLAY SHIELD --- */
    .slider-height::before {
        display: none !important; 
    }

    /* 15. ABSOLUTE ANIMATION KILLER (SCORCHED EARTH) */
    #back-top, 
    #scrollUp, 
    #back-top a, 
    #scrollUp a, 
    #back-top i, 
    #scrollUp i {
        animation: none !important;
        -webkit-animation: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 0 !important;
        transition: none !important;
        /* Force visual stability */
        opacity: 1 !important;
        visibility: visible !important;
        transform: scale(1) !important;
        box-shadow: none !important;
    }

    /* Target the common "pulse" effect elements created by plugins */
    #back-top::before, #back-top::after, 
    #scrollUp::before, #scrollUp::after,
    .heartbit, .ripple {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        animation: none !important;
    }