/* =====================================================================
   GOSM — v5 design system
   Reskinned to match the "Constra" construction-template reference:
   bright orange on dark charcoal, rounded icon-circle cards, photo-style
   hero, filterable gallery, animated counters, testimonial cards.
   Class names are kept stable across pages, so most page-level markup
   (About/Services/Business/Education/Contact/Partner) inherits this
   look automatically without needing per-page HTML changes.
   ===================================================================== */
:root {
    --dark-950: #15171A;
    --dark-900: #1B1D21;
    --dark-800: #24262B;
    --dark-700: #2E3036;
    --orange-600: #FF7A1A;
    --orange-700: #E86A0C;
    --orange-glow: rgba(255,122,26,.4);
    --gold-500: #F2A93B;
    --bg: #F7F7F9;
    --ink: #1B1D21;
    --slate: #6B7280;
    --border: #E7E7EA;
    --shadow: 0 18px 40px -18px rgba(27,29,33,.28);

    --primary-orange: #FF6B1A;
    --primary-orange-hover: #E55A0D;
    --deep-navy: #15171A;
    --body-bg: #F7F7F9;
    --border-light: #E0E0E0;
    --text-muted: #666666;
    /* Compatibility aliases — earlier pages reference the old navy/green
     variable names inline; pointing them at the new palette keeps every
     page in sync without editing each inline style individually. */
    --navy-900: var(--dark-900);
    --navy-950: var(--dark-950);
    --navy-800: var(--dark-800);
    --navy-700: var(--dark-700);
    --green-600: var(--orange-600);
    --green-700: var(--orange-700);
    --green-glow: var(--orange-glow);
    --amber-500: var(--gold-500);
    --slate-200: var(--border);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;
overflow-x:hidden ;}
body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;}
h1,h2,h3,h4,.brand,.stat-num,.step-num,.price-big{font-family:'Jost',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:95%;margin:0 auto;padding:0 24px;}
.uc{text-transform:uppercase;letter-spacing:.06em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-600);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange-600);display:inline-block;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-weight:700;font-size:14.5px;letter-spacing:.02em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;transition:.18s ease;border-radius:6px;
  white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden;
}
.btn-primary{background:var(--orange-600);color:#fff;}
.btn-primary:hover{background:var(--orange-700);transform:translateY(-2px);}
.btn-line{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-dark{background:var(--dark-900);color:#fff;}
.btn-dark:hover{background:var(--dark-950);}
.btn-block{width:100%;}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.2);transform:translateX(-105%);transition:transform .45s ease;}
.btn:hover::after{transform:translateX(0);}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--dark-950);color:#B7BABE;font-size:12.5px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;flex-wrap:wrap;gap:6px;}
.topbar .item{display:flex;align-items:center;gap:8px;}
.topbar .item b{color:#fff;}
.topbar .social{display:flex;gap:14px;}

/* ---------- HEADER ---------- */
header{background:var(--dark-900);position:sticky;top:0;z-index:50;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.02em;}
.brand-mark{width:38px;height:38px;background:var(--orange-600);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Jost';font-size:18px;}
nav.links{display:flex;gap:22px;color:#C7C9CD;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;flex-wrap:nowrap;align-items:center;}
nav.links a{position:relative;padding-bottom:4px;white-space:nowrap;}
nav.links a:hover{color:#fff;}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--orange-600);transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
.nav-dropdown{position:relative;}
.nav-dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:14px;background:#fff;border-radius:8px;box-shadow:var(--shadow);
  min-width:210px;padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:6px;color:var(--ink);font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:0;white-space:nowrap;
}
.nav-dropdown-menu a::after{display:none;}
.nav-dropdown-menu a:hover{background:#FFF1E6;color:var(--orange-600);}
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-phone{display:flex;align-items:center;gap:10px;color:#fff;white-space:nowrap;}
.nav-phone .ic{width:40px;height:40px;border-radius:50%;background:var(--orange-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-phone .txt div:first-child{font-size:11px;color:#9A9DA2;text-transform:uppercase;}
.nav-phone .txt div:last-child{font-weight:700;font-family:'Jost';font-size:16px;white-space:nowrap;}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;flex-shrink:0;}


/*strip emial animate icons*/
.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--dark-800);
    color: var(--bg);
    border-radius: 50%;
    border: 1px solid var(--dark-700);
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .social-icon-btn:hover {
        background-color: var(--orange-600);
        color: #ffffff;
        border-color: var(--orange-600);
        transform: translateY(-3px);
        box-shadow: 0 0 12px var(--orange-glow);
    }

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

.slide-in-right {
    animation: slideInFromRight 0.8s ease-out forwards;
}

/*strip ismade responsive*/

@media (max-width: 991.98px) {

    .contact-info {
        gap: 10px 14px !important;
    }
}

@media (max-width: 767.98px) {

    .contact-info {
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 575.98px) {

    .main-header + div,
    .main-header ~ div {
        overflow-x: hidden;
    }
}


/*nav link rewsponsve */
.nav-item-link {
    font-size: 1.15rem;
    color: var(--bg, #F7F7F9);
    transition: color 0.3s ease;
}

    .nav-item-link:hover {
        color: var(--orange-600, #FF7A1A);
    }

.navbar-toggler:focus {
    box-shadow: none;
}

/* Header Container */
.main-header {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.wrap.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Styling */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 80px; /* Adjust height according to your logo aspect ratio */
    width: auto;
    object-fit: contain;
}

/* Navigation Links */
.links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

    .links a {
        text-decoration: none;
        color: #2d3748;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.25s ease;
        position: relative;
    }

        .links a:hover {
            background-color:black;
            color:white;
            padding:5px;
            border-radius:10%;
        }

        /* Hover indicator line */
        .links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #2563eb;
            transition: width 0.25s ease;
        }

        .links a:hover::after {
            width: 100%;
        }

/* Action Area & Buttons */
.nav-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-primary {
    background-color: #2563eb;
    color: #ffffff !important;
    padding: 0.6rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

    .btn-primary:hover {
        background-color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #1a202c;
    cursor: pointer;
    padding: 0;
}

/* Mobile Responsive Adjustments */
@media (max-width: 991px) {
    .wrap.nav {
        position: relative;
    }

    .menu-toggle {
        display: block;
    }

    .links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        padding: 1.5rem;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        border-top: 1px solid #f1f5f9;
        gap: 1.25rem;
        align-items: flex-start;
    }

        .links.active {
            display: flex;
        }

        .links a::after {
            display: none;
        }
}

@media (max-width: 480px) {
    .btn-primary {
        display: none; /* Hide primary CTA on tiny screens to avoid crowding */
    }
}
/* ---------- HERO ---------- */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    min-height: 80vh; /* Increased height to make hero background images larger */
    padding: 140px 0 160px; /* Increased vertical padding */
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 85% 20%, rgba(255,122,26,.18), transparent 55%), linear-gradient(120deg, var(--dark-950), var(--dark-800));
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease;
    z-index: 0;
    
}

    .hero-slide.active {
        opacity: 1;
    }

.hero-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: .2s ease;
}

    .hero-dot.active {
        background: var(--orange-600);
        width: 24px;
        border-radius: 5px;
    }

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    z-index: 1;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.06;
    margin: 20px 0 22px;
    font-weight: 700;
}

    .hero h1 .accent {
        color: var(--orange-600);
    }

.hero p.lede {
    color: #C9CBCF;
    font-size: 17px;
    max-width: 480px;
    margin-bottom: 34px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-side {
    position: relative;
}

.badge-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.badge-item {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

    .badge-item .num {
        font-size: 30px;
        font-weight: 700;
        color: var(--orange-600);
        min-width: 64px;
        font-family: 'Jost';
    }

    .badge-item .lbl {
        font-size: 12.5px;
        color: #C9CBCF;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

/* Responsiveness adjustments for smaller devices */
@media (max-width: 768px) {
    .hero {
        min-height: 60vh;
        padding: 80px 0 100px;
    }
}
/* Floating quick-enquiry card overlapping hero bottom */
.quick-card{
  position:relative;z-index:5;background:#fff;border-radius:12px;box-shadow:var(--shadow);
  margin-top:-92px;padding:34px 40px;
}
.quick-card-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.quick-card-title{font-family:'Jost';font-weight:700;font-size:20px;text-transform:uppercase;color:var(--dark-900);}
.quick-card-sub{font-size:13px;color:var(--slate);}
.quick-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.quick-card .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:6px;font-weight:700;}
.quick-card input,.quick-card select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:14px;color:var(--ink);
}
.quick-card .icon-badge{width:48px;height:48px;background:var(--orange-600);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}

/* ---------- POPULAR CATEGORIES (photo cards) ---------- */
.popular-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.popular-cat-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 10px 26px -14px rgba(27,29,33,.25);}
.popular-cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.popular-cat-card:hover img{transform:scale(1.06);}
.popular-cat-label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(0deg, rgba(21,23,26,.88), transparent);
  color:#fff;font-weight:700;font-family:'Jost';font-size:16px;
}

/* ---------- USP STRIP ---------- */
.usp{padding:120px 0 70px;}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.usp-card{
  background:#fff;padding:30px 24px;border-radius:10px;box-shadow:0 10px 26px -16px rgba(27,29,33,.2);
  transition:.18s;border:1px solid var(--border);
}
.usp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.usp-icon{width:56px;height:56px;background:#FFF1E6;color:var(--orange-600);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:16px;}
.usp-card h4{margin:0 0 8px;font-size:18px;color:var(--dark-900);}
.usp-card p{margin:0;font-size:13.5px;color:var(--slate);}

/* ---------- SECTION GENERIC ---------- */
section{padding:90px 0;}
.section-head{max-width:640px;margin-bottom:46px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 14px;color:var(--dark-900);line-height:1.1;font-weight:700;}
.section-head p{color:var(--slate);font-size:15.5px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- ABOUT / STATS SPLIT ---------- */
.about{background:var(--dark-900);color:#fff;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:70px 0;}
.about ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px;}
.about li{display:flex;gap:12px;font-size:14.5px;color:#D6D8DB;align-items:flex-start;}
.about li .chk{width:22px;height:22px;background:var(--orange-600);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.1);border-radius:12px;overflow:hidden;}
.stat-box{background:var(--dark-950);padding:34px 24px;text-align:center;}
.stat-num{font-size:42px;font-weight:700;color:var(--orange-600);}
.stat-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9A9DA2;margin-top:6px;}

/* ---------- SERVICES (icon-circle cards, Constra-style) ---------- */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px;}
.cat-tab{
  padding:10px 20px;border:1px solid var(--border);background:#fff;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--slate);cursor:pointer;text-transform:uppercase;letter-spacing:.02em;
  transition:.15s;
}
.cat-tab.active,.cat-tab:hover{background:var(--orange-600);color:#fff;border-color:var(--orange-600);}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-card{
  background:#fff;border:1px solid var(--border);border-radius:12px;position:relative;overflow:hidden;transition:.2s;
  padding:30px 24px;
}
.svc-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent;}
.svc-top{display:flex;justify-content:center;background:none;height:auto;padding:0;}
.svc-icon{width:60px;height:60px;background:#FFF1E6;color:var(--orange-600);display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:50%;margin:0 auto 18px;transition:.25s;}
.svc-card:hover .svc-icon{background:var(--orange-600);color:#fff;}
.svc-body{padding:0;text-align:center;}
.svc-body h4{margin:0 0 8px;font-size:17px;color:var(--dark-900);}
.svc-body p{margin:0 0 12px;font-size:13.5px;color:var(--slate);}
.svc-body .more{font-size:12.5px;font-weight:700;color:var(--orange-600);text-transform:uppercase;letter-spacing:.03em;}

/* ---------- PROCESS ---------- */
.steps{display:flex;gap:0;position:relative;}
.step{flex:1;position:relative;padding:0 24px;text-align:center;}
.step:not(:first-child)::before{content:"";position:absolute;left:-24px;top:34px;width:48px;border-top:2px dashed var(--border);}
.step-num{
  width:68px;height:68px;border-radius:50%;background:var(--dark-900);color:var(--orange-600);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;margin:0 auto 20px;border:3px solid var(--orange-600);
}
.step h4{margin:0 0 8px;color:var(--dark-900);font-size:18px;}
.step p{color:var(--slate);font-size:13.5px;margin:0;}

/* ---------- WHY CHOOSE ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.why-card{padding:30px;background:#fff;border:1px solid var(--border);border-radius:12px;position:relative;}
.why-card .n{font-family:'Jost';font-weight:700;color:#F0F0F2;font-size:52px;position:absolute;top:10px;right:18px;line-height:1;}
.why-card h4{margin:0 0 10px;color:var(--dark-900);position:relative;}
.why-card p{color:var(--slate);font-size:13.5px;margin:0;position:relative;}

/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.testi{background:#fff;padding:30px;border:1px solid var(--border);border-radius:12px;position:relative;}
.testi .quote-mark{position:absolute;top:16px;right:20px;font-size:52px;color:var(--border);font-family:Georgia,serif;line-height:1;}
.stars{color:var(--gold-500);letter-spacing:2px;margin-bottom:14px;font-size:14px;}
.testi p{font-size:14px;color:var(--ink);margin:0 0 20px;position:relative;z-index:1;}
.testi .who{display:flex;align-items:center;gap:10px;}
.avatar{width:42px;height:42px;background:var(--orange-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border-radius:50%;}
.who-name{font-weight:700;font-size:13.5px;color:var(--dark-900);}
.who-city{font-size:12px;color:var(--slate);}

/* ---------- LOCATION / PRESENCE STRIP (replaces "client logos") ---------- */
.presence-strip{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.presence-badge{
  padding:12px 26px;border:1px solid var(--border);border-radius:999px;font-weight:700;font-size:13.5px;
  color:var(--dark-900);background:#fff;display:flex;align-items:center;gap:8px;
}
.presence-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--orange-600);}

/* ---------- FINAL CTA ---------- */
.cta-band{background:var(--orange-600);color:#fff;padding:56px 0;}
.cta-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-grid h2{font-size:28px;margin:0;}
.cta-grid p{margin:6px 0 0;color:rgba(255,255,255,.92);}

footer{background:var(--dark-950);color:#9A9DA2;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;}
.footer-grid h5{color:#fff;font-size:15px;margin:0 0 16px;text-transform:uppercase;letter-spacing:.03em;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:13.5px;}
.footer-brand p{font-size:13.5px;color:#83868B; text-align:justify;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;flex-wrap:wrap;gap:10px;}

/* ---------- PARTNER APPLICATION FORM ---------- */
.partner-form{background:#fff;border:1px solid var(--border);border-radius:14px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.partner-form .full{grid-column:1 / -1;}
.partner-form label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:6px;font-weight:700;}
.partner-form input[type=text],.partner-form input[type=email],.partner-form input[type=number],
.partner-form input[type=file],.partner-form select,.partner-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
}
.partner-form textarea{resize:vertical;}
.partner-checkbox{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--slate);}
.partner-checkbox input{width:18px;height:18px;}

/* =====================================================================
   ANIMATION LAYER
   ===================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-fade{opacity:0;transition:opacity .8s ease;}
.reveal-fade.in{opacity:1;}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .6s ease, transform .6s ease;}
.reveal-scale.in{opacity:1;transform:scale(1);}
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.stagger.in > *{opacity:1;transform:translateY(0);}
.stagger.in > *:nth-child(1){transition-delay:.05s;}
.stagger.in > *:nth-child(2){transition-delay:.13s;}
.stagger.in > *:nth-child(3){transition-delay:.21s;}
.stagger.in > *:nth-child(4){transition-delay:.29s;}
.stagger.in > *:nth-child(5){transition-delay:.37s;}
.stagger.in > *:nth-child(6){transition-delay:.45s;}
.stagger.in > *:nth-child(7){transition-delay:.53s;}
.stagger.in > *:nth-child(8){transition-delay:.61s;}

.hero-fade-1{opacity:0;animation:heroUp .7s .1s cubic-bezier(.22,.61,.36,1) forwards;}
.hero-fade-2{opacity:0;animation:heroUp .7s .25s cubic-bezier(.22,.61,.36,1) forwards;}
.hero-fade-3{opacity:0;animation:heroUp .7s .4s cubic-bezier(.22,.61,.36,1) forwards;}
.hero-fade-4{opacity:0;animation:heroUp .7s .55s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes heroUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

.hero::before{animation:driftGrid 14s linear infinite;}
@keyframes driftGrid{from{background-position:0 0, 0 0;}to{background-position:46px 46px, 46px 46px;}}

.svc-card:hover .svc-icon{animation:pulseIcon .5s ease;}
@keyframes pulseIcon{50%{transform:scale(1.1);}}

.stat-num, .badge-item .num{transition:color .3s ease;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-fade,.reveal-scale,.stagger > *,.hero-fade-1,.hero-fade-2,.hero-fade-3,.hero-fade-4{
    opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;
  }
  .hero::before{animation:none !important;}
  .svc-card:hover .svc-icon{animation:none !important;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1400px){
  .nav-phone{display:none;}
}
@media (max-width:1300px){
  nav.links{display:none;}
  .menu-toggle{display:block;}
  nav.links.mobile-open{
    display:flex !important;flex-direction:column;gap:0;position:absolute;
    left:0;right:0;top:100%;background:var(--dark-900);padding:8px 24px 18px;
    border-top:1px solid rgba(255,255,255,.08);max-height:70vh;overflow-y:auto;
  }
  nav.links.mobile-open a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal;}
  nav.links.mobile-open .nav-dropdown{width:100%;}
  nav.links.mobile-open .nav-dropdown > a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);}
  nav.links.mobile-open .nav-dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.04);
    display:none;margin-top:0;padding:4px 0 4px 14px;
  }
  nav.links.mobile-open .nav-dropdown.open .nav-dropdown-menu{display:block;}
  nav.links.mobile-open .nav-dropdown-menu a{color:#C7C9CD;border-bottom:0;padding:10px 0;}
  header{position:relative;}
}
@media (max-width:960px){
  .hero-grid,.about-grid{grid-template-columns:1fr;}
  .quick-card-grid{grid-template-columns:1fr 1fr;}
  .usp-grid,.svc-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid,.testi-grid,.footer-grid,.stat-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .usp-grid,.svc-grid,.why-grid,.testi-grid,.footer-grid,.stat-grid,.quick-card-grid{grid-template-columns:1fr;}
  .steps{flex-direction:column;gap:30px;}
  .step:not(:first-child)::before{display:none;}
  .about-grid{padding:30px;}
  .topbar .wrap{justify-content:center;text-align:center;}
  .quick-card{padding:26px 20px;}
  .partner-form{grid-template-columns:1fr;padding:28px;}
}

/* ---------- BACK TO TOP ---------- */
#backToTop{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--orange-600);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:19px;border:0;cursor:pointer;box-shadow:0 12px 26px -8px rgba(255,122,26,.55);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:90;
}
#backToTop.show{opacity:1;visibility:visible;transform:translateY(0);}
#backToTop:hover{background:var(--orange-700);}
@media (max-width:640px){
  #backToTop{right:16px;bottom:16px;width:44px;height:44px;font-size:17px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none;}
}


/*service card in the service section */
body {
    background-color: var(--body-bg);
    color: var(--deep-navy);
}

/* Base Utility Classes */
.deep-navy-bg {
    background-color: var(--deep-navy);
}

.deep-navy-text {
    color: var(--deep-navy);
}

.deep-navy-border {
    border-color: var(--deep-navy);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-overlay {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

/* Card Hover Animations */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-hover:hover {
        box-shadow: 0 18px 40px -18px rgba(27, 29, 33, 0.28);
        transform: translateY(-4px);
    }

.btn-pressed:active {
    transform: scale(0.97);
    box-shadow: none !important;
}

/* ==========================================================================
   Button Styling Fixes (Orange Background & Hover State Fixes)
   ========================================================================== */

/* "Book Now" Primary Button */
.bg-primary-container,
button[onclick*="openBookingModal"] {
    background-color: var(--primary-orange) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

    .bg-primary-container:hover,
    button[onclick*="openBookingModal"]:hover {
        background-color: var(--primary-orange-hover) !important;
        box-shadow: 0 6px 20px rgba(255, 107, 26, 0.35);
        transform: translateY(-1px);
    }

/* "Call Now" Secondary Outline Button */
.deep-navy-border.deep-navy-text {
    border: 1.5px solid var(--deep-navy) !important;
    color: var(--deep-navy) !important;
    background-color: transparent !important;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

    .deep-navy-border.deep-navy-text:hover {
        background-color: var(--deep-navy) !important;
        color: #FFFFFF !important;
        border-color: var(--deep-navy) !important;
        transform: translateY(-1px);
    }

/* ==========================================================================
   Hero Section Font Size Enhancements
   ========================================================================== */
.font-display-lg,
main section.container h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--deep-navy);
}

.font-body-lg,
main section.container p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .font-display-lg,
    main section.container h1 {
        font-size: 3.25rem;
    }
}

@media (min-width: 1024px) {
    .font-display-lg,
    main section.container h1 {
        font-size: 4rem;
    }
}

/* ==========================================================================
   Modal Form Styling (Exact Match to Image design)
   ========================================================================== */

#bookingModal[data-state="open"] {
    display: flex !important;
}

body.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
}



/* Header Section */
#bookingModal h2 {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: var(--deep-navy) !important;
    margin-bottom: 2px !important;
}

#modalServiceName {
    color: var(--primary-orange) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Input Fields */
.form-input {
    width: 100%;
    border: 1px solid var(--border-light) !important;
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    color: var(--deep-navy) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-input:focus {
        border-color: var(--primary-orange) !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.15) !important;
        outline: none !important;
    }

#bookingForm label {
    font-weight: 600 !important;
    color: var(--deep-navy) !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
}

/* Modal Submit Button */
#bookingForm button[type="submit"] {
    background-color: var(--primary-orange) !important;
    color: #FFFFFF !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

    #bookingForm button[type="submit"]:hover {
        background-color: var(--primary-orange-hover) !important;
        box-shadow: 0 8px 24px rgba(255, 107, 26, 0.4) !important;
        transform: translateY(-1px);
    }

/* ==========================================================================
   Responsive Layout Rules
   ========================================================================== */

.container {
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1280px;
}

@media (min-width: 768px) {
    .container {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-right: 40px;
        padding-left: 40px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.col-12, .col-md-6, .col-lg-4 {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

/* Scroll Animation Initial States */
.scroll-animate {
    opacity: 0;
}

.animate__animated {
    opacity: 1;
}

/* Custom Scroll Animation Handler for the how to contact us in home page */
/* Default Initial State */
.gosm-circle-card {
    opacity: 0;
    transform: translate(-70px, -70px);
    will-change: opacity, transform;
}

    /* Animation Trigger Class */
    .gosm-circle-card.gosm-animate {
        animation: gosmFadeInTopLeft 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    /* Staggered Delay Intervals */
    .gosm-circle-card.gosm-delay-1 {
        animation-delay: 0.1s;
    }

    .gosm-circle-card.gosm-delay-2 {
        animation-delay: 0.35s;
    }

    .gosm-circle-card.gosm-delay-3 {
        animation-delay: 0.6s;
    }

/* Custom fadeInTopLeft Keyframe */
@@keyframes gosmFadeInTopLeft {
    0% {
        opacity: 0;
        transform: translate(-70px, -70px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* Responsive adjustments for smaller screens */
@@media (max-width: 576px) {
    .gosm-circle-card {
        width: 300px !important;
        height: 300px !important;
        padding: 1.5rem !important;
    }
}

/* ==========================================
   BOOKING MODAL (Glassy Overlay & Clean Form)
   ========================================== */

/* 1. Glassy Blurred Backdrop Overlay */
#bookingModal.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1055 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

    #bookingModal.modal:not(.show) {
        display: none !important;
    }

    #bookingModal.modal.show {
        display: block !important;
    }

.modal-backdrop {
    z-index: 1050 !important;
}

/* 2. REMOVE OUTER WHITE BACKGROUND & BORDER (Bootstrap defaults) */
#bookingModal .modal-content,
#bookingModal .modal-body {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. SOLID WHITE FORM CARD ONLY */
#bookingModal .quick-card {
/*    background-color: #ffffff !important;*/
    border-radius: 12px !important;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Close Button Styling */
#bookingModal .btn-close {
    z-index: 10;
    cursor: pointer;
    opacity: 0.75;
}

    #bookingModal .btn-close:hover {
        opacity: 1;
    }


/*    about section why choose us GOSM */
/* Card Hover Lift & Glow Effect */
.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px -18px rgba(27, 29, 33, 0.28) !important;
}

    .why-card:hover .icon-box {
        transform: scale(1.1) rotate(5deg);
        transition: transform 0.3s ease;
    }


/* Hero Image Hover Zoom Effect about us */
.hero-img {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-section:hover .hero-img {
    transform: scale(1.03);
}

/* Hide floating badges on extra small screens to prevent overflow */
@media (max-width: 576px) {
    .hero-section .position-absolute.p-3 {
        display: none !important;
    }
}


@media (max-width: 991.98px) {

    .gosm-about-section > .container > div {
        flex-direction: column !important;
    }

        .gosm-about-section > .container > div > div {
            width: 100% !important;
            flex: 1 1 100% !important;
        }

            .gosm-about-section > .container > div > div:last-child {
                margin-top: 20px;
            }
}

/*resposive about section below the hero image */
@media (max-width: 767.98px) {

    .gosm-about-section {
        padding: 70px 0 !important;
    }

        .gosm-about-section h2 {
            font-size: 2.3rem !important;
            letter-spacing: -1px !important;
        }

        .gosm-about-section p {
            font-size: 0.97rem !important;
            line-height: 1.75 !important;
        }

        .gosm-about-section > .container > div {
            gap: 35px !important;
        }

            .gosm-about-section > .container > div > div:last-child {
                margin-top: 0 !important;
            }

        .gosm-about-section img {
            height: 390px !important;
        }

        .gosm-about-section a {
            width: 100%;
        }
}

/* Hero section container */
.hero {
    position: relative;
    overflow: hidden;
}

/* Side button base styling using design variables */
.membership-side-btn {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    z-index: 99 !important;
    /* Vertical reading mode matching reference */
    writing-mode: vertical-rl !important;
    transform: translateY(-50%) rotate(180deg) !important;
    padding: 18px 10px !important;
    border-radius: 0 100px 0 !important;
    /* Theme Variables Applied */
    background-color: #ff7a1a ;
    color: white !important;
    border: 2px solid var(--orange-600, #FF7A1A) !important;
    border-left: none !important; /* Flush against right container edge */

    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    animation: membershipPulse 2.2s ease-in-out infinite;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    /* Icon orientation fix for vertical layout */
    .membership-side-btn i {
        transform: rotate(90deg);
        display: inline-block;
        margin-bottom: 8px;
    }

/* Scale Up & Down Pulsing Animation using theme variables */
@keyframes membershipPulse {
    0%, 100% {
        transform: translateY(-50%) rotate(180deg) scale(1);
        box-shadow: -4px 0 12px var(--orange-glow, rgba(255,122,26,.4)), 0 0 0 0 rgba(0,0,0,0);
    }

    50% {
        transform: translateY(-50%) rotate(180deg) scale(1.08); /* Smooth scaling */
        box-shadow: -8px 0 22px var(--orange-glow, rgba(255,122,26,.4)), -2px 0 10px var(--orange-600, #FF7A1A);
    }
}

/* High-Contrast Hover State using primary hover variables */
.membership-side-btn:hover {
    background-color: var(--orange-600, #FF7A1A) !important;
    border-color: var(--orange-600, #FF7A1A) !important;
    box-shadow: -8px 0 25px var(--orange-glow, rgba(255,122,26,.6)) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .membership-side-btn {
        font-size: 11px !important;
        padding: 14px 8px !important;
    }
}

/* =========================================================
   SKILLS DESCRIPTION POPUP
   ========================================================= */

.skills-description-popup {
    color: #212529;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-height: 50px;
    max-height: 400px;
    overflow-y: auto;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
}

/* =========================================================
   STUDENT SKILLS DESCRIPTION POPUP
   ========================================================= */

.student-skills-description-popup {
    color: #212529;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-height: 50px;
    max-height: 400px;
    overflow-y: auto;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
}


/* =========================================================
   GOSM POPULAR SERVICES
   ========================================================= */

:root {
    --dark-950: #15171A;
    --dark-900: #1B1D21;
    --dark-800: #24262B;
    --dark-700: #2E3036;
    --orange-600: #FF7A1A;
    --orange-700: #E86A0C;
    --orange-glow: rgba(255, 122, 26, .4);
    --gold-500: #F2A93B;
    --bg: #F7F7F9;
    --ink: #1B1D21;
    --slate: #6B7280;
    --border: #E7E7EA;
    --white: #FFFFFF;
    --shadow: 0 18px 40px -18px rgba(27,29,33,.28);
}


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

.popular-cat-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: radial-gradient( circle at 10% 20%, rgba(255,122,26,.07), transparent 30% ), radial-gradient( circle at 90% 80%, rgba(27,29,33,.06), transparent 30% ), var(--bg);
}


/* =========================================================
   BOOTSTRAP ROW FIX
   ========================================================= */

.popular-cat-row {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
   IMPORTANT:
   These rules prevent other CSS from accidentally
   making the Bootstrap columns full width.
*/

.popular-cat-column {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
}


/* Desktop - EXACTLY 4 */

@media (min-width: 992px) {

    .popular-cat-column {
        width: 25% !important;
    }
}


/* Tablet - 2 */

@media (min-width: 576px) and (max-width: 991.98px) {

    .popular-cat-column {
        width: 50% !important;
    }
}


/* Mobile - 1 */

@media (max-width: 575.98px) {

    .popular-cat-column {
        width: 100% !important;
    }
}


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

.popular-cat-card {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--dark-900);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 40px -18px rgba(27,29,33,.35);
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease, border-color .4s ease;
    transform: translateZ(0);
}


    .popular-cat-card:hover {
        transform: translateY(-12px) scale(1.015);
        border-color: rgba(255,122,26,.7);
        box-shadow: 0 30px 60px -20px rgba(27,29,33,.45), 0 0 35px rgba(255,122,26,.20);
    }


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.popular-cat-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


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

.popular-cat-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
    transition: transform 1s cubic-bezier(.16,1,.3,1), filter .6s ease;
}


.popular-cat-card:hover .popular-cat-image {
    transform: scale(1.13);
    filter: saturate(1.1) contrast(1.05);
}


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

.popular-cat-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 180deg, rgba(21,23,26,.03) 0%, rgba(21,23,26,.08) 30%, rgba(21,23,26,.62) 65%, rgba(21,23,26,.97) 100% );
}


/* =========================================================
   SHINE
   ========================================================= */

.popular-cat-shine {
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent );
    transform: skewX(-18deg);
    transition: left .9s cubic-bezier(.16,1,.3,1);
}


.popular-cat-card:hover .popular-cat-shine {
    left: 140%;
}


/* =========================================================
   CONTENT BAR
   ========================================================= */

.popular-cat-content {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    min-height: 76px;
    padding: 12px 12px 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 17px;
    background: rgba(21,23,26,.76);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 35px rgba(0,0,0,.28);
    transition: transform .4s ease, background .4s ease;
}


.popular-cat-card:hover .popular-cat-content {
    transform: translateY(-3px);
    background: rgba(21,23,26,.90);
}


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

.popular-cat-service {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


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

.popular-cat-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--white);
    font-size: 1.15rem;
    background: linear-gradient( 135deg, var(--orange-600), var(--orange-700) );
    box-shadow: 0 8px 22px rgba(255,122,26,.38);
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}


.popular-cat-card:hover .popular-cat-icon {
    transform: rotate(-7deg) scale(1.1);
    box-shadow: 0 10px 30px rgba(255,122,26,.55);
}


/* =========================================================
   SERVICE NAME
   ========================================================= */

.popular-cat-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


    .popular-cat-name span {
        color: rgba(255,255,255,.60);
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.2;
    }


    .popular-cat-name strong {
        margin-top: 3px;
        color: var(--white);
        font-size: 1.18rem;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
    }


/* =========================================================
   ARROW
   ========================================================= */

.popular-cat-arrow {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease;
}


    .popular-cat-arrow i {
        transition: transform .35s ease;
    }


.popular-cat-card:hover .popular-cat-arrow {
    background: var(--orange-600);
    border-color: var(--orange-600);
    box-shadow: 0 8px 24px rgba(255,122,26,.45);
    transform: translateX(5px);
}


    .popular-cat-card:hover .popular-cat-arrow i {
        transform: translateX(3px);
    }


/* =========================================================
   REVEAL FROM LEFT
   ========================================================= */

.reveal-from-left {
    opacity: 0;
    transform: translateX(var(--reveal-x,-80px));
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay,0s);
    will-change: opacity, transform;
}


/* =========================================================
   REVEAL FROM RIGHT
   ========================================================= */

.reveal-from-right {
    opacity: 0;
    transform: translateX(var(--reveal-x,80px));
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--delay,0s);
    will-change: opacity, transform;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.reveal-active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}


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

@media (max-width: 991.98px) {

    .popular-cat-section {
        padding: 75px 0;
    }

    .popular-cat-card {
        height: 350px;
    }
}


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

@media (max-width: 575.98px) {

    .popular-cat-section {
        padding: 60px 0;
    }

    .popular-cat-card {
        height: 320px;
        border-radius: 18px;
    }

    .popular-cat-content {
        left: 10px;
        right: 10px;
        bottom: 10px;
        min-height: 68px;
        padding: 9px 9px 9px 10px;
    }

    .popular-cat-icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .popular-cat-name strong {
        font-size: 1rem;
    }

    .popular-cat-arrow {
        width: 40px;
        height: 40px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .popular-cat-card,
    .popular-cat-image,
    .popular-cat-icon,
    .popular-cat-arrow,
    .popular-cat-shine,
    .reveal-from-left,
    .reveal-from-right {
        transition: none !important;
    }

    .reveal-from-left,
    .reveal-from-right {
        opacity: 1 !important;
        transform: none !important;
    }
}



@media (max-width:575.98px) {

    .popular-cat-eyebrow {
        gap: 8px !important;
        font-size: 0.68rem !important;
        letter-spacing: 1.5px !important;
    }

        .popular-cat-eyebrow .eyebrow-line {
            width: 25px !important;
        }

    .popular-cat-description {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }
}

/*.alignment {
    text-align: justify;
    text-justify: inter-word;
    overflow-wrap: break-word;
    word-break: break-all;
       line-height: 1.65;
    letter-spacing: 0;
    word-spacing: 0;
}*/

/*.alignment {
    text-align: justify;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.65;
    letter-spacing: 0;
    word-spacing: 0;
}*/

.alignment {
    text-align: justify;
    text-justify: inter-word;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
    hyphens: auto;
    line-height: 1.65;
    letter-spacing: 0;
    word-spacing: normal;
}


@media (max-width: 500px) {
    #btnDisplay button {
        display: block !important;
        width: 100%;
        visibility: visible !important;
        opacity: 1 !important;
    }
}