@import url('./branding.css');

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

.navbar-premium{

position:fixed;
top:0;
left:0;

width:100%;
max-width:100vw;

z-index:9999;

padding:0 !important;

background:rgba(255,255,255,0.97);
backdrop-filter:blur(20px) saturate(180%);

border-bottom:2px solid var(--gold-primary);
box-shadow:0 12px 40px rgba(212,160,23,0.15);

transition:var(--transition);

}

/* ==================================================
NAV CONTAINER
================================================== */

.nav-container{

width:100%;
max-width:1320px;

margin:0 auto;

padding-left:16px;
padding-right:16px;

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

height:88px;

transition:var(--transition);

box-sizing:border-box;

min-width:0;
overflow:visible; /* IMPORTANT */

}

.navbar-premium.scrolled .nav-container{
height:72px;
}


/* ==================================================
LOGO
================================================== */

.nav-logo{

display:flex;
align-items:center;

gap:10px;

text-decoration:none;

flex-shrink:1;
min-width:0;

max-width:80%;

}

.nav-logo img{

height:72px;
max-width:100%;

transition:var(--transition);

}

.navbar-premium.scrolled .nav-logo img{
height:60px;
}


/* ==================================================
BRAND TEXT
================================================== */

.brand-text{

display:flex;
flex-direction:column;

line-height:1.1;

align-items:center;   /* centers subtitle */
text-align:center;

}

.brand-title{

font-size:1.4rem;
font-weight:800;

letter-spacing:2px;

display:flex;
gap:6px;

text-transform:uppercase;

}

.brand-gold{
color:var(--gold-primary);
}

.brand-silver{
color:var(--silver-primary);
}

.brand-subtitle{

font-size:.7rem;
font-weight:700;

letter-spacing:6px;

color:var(--text-muted);

margin-top:2px;

text-align:center;

}

/* hide text on scroll */

.navbar-premium.scrolled .brand-text{

opacity:0;
visibility:hidden;

transform:translateX(-10px);

width:0;
overflow:hidden;

}


/* ==================================================
DESKTOP MENU
================================================== */

.nav-menu{

list-style:none;

display:flex;
align-items:center;

gap:20px;

}

.nav-link{

text-decoration:none;

font-weight:700;
color:var(--text-dark);

font-size:.95rem;

letter-spacing:.3px;

position:relative;

padding:10px 6px;

transition:var(--transition);

}

.nav-link::after{

content:"";

position:absolute;
bottom:-5px;

left:50%;

width:0;
height:3px;

background:linear-gradient(
90deg,
var(--gold-primary),
var(--gold-primary-light)
);

border-radius:2px;

transition:var(--transition);

transform:translateX(-50%);

}

.nav-link:hover::after{
width:85%;
}

.nav-link:hover{
color:var(--gold-primary);
}

.nav-link i{

font-size:.75rem;
margin-left:6px;

}


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

.nav-item{
position:relative;
}

.nav-dropdown{

position:absolute;

top:115%;
left:50%;

width:680px;

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

background:var(--luxury-white);

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

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

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

overflow:hidden;

opacity:0;
visibility:hidden;

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

transition:var(--transition);

z-index:10000;

}

.nav-item:hover .nav-dropdown{

opacity:1;
visibility:visible;

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

}


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

.dropdown-column{

padding:32px;

display:flex;
flex-direction:column;

gap:16px;

}

.dropdown-link{

font-size:1rem;
font-weight:600;

color:var(--text-dark);

text-decoration:none;

padding:10px 0;

position:relative;

transition:var(--transition);

}

.dropdown-link::before{

content:"";

position:absolute;

left:0;
top:50%;

width:4px;
height:0;

background:var(--gold-primary);

border-radius:2px;

transition:var(--transition);

transform:translateY(-50%);

}

.dropdown-link:hover{

color:var(--gold-primary);
padding-left:18px;

}

.dropdown-link:hover::before{
height:26px;
}


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

.dropdown-media{

position:relative;
min-height:260px;

}

.dropdown-media img{

position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:cover;

}

.dropdown-media::after{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
135deg,
rgba(212,160,23,.9),
rgba(15,15,15,.95)
);

}

.dropdown-media-content{

position:relative;

padding:28px;

color:#fff;

z-index:2;

}

.dropdown-media-content h6{

font-size:.9rem;
font-weight:700;

letter-spacing:1.5px;

margin-bottom:8px;

text-transform:uppercase;

}

.dropdown-media-content p{

font-size:.9rem;

line-height:1.6;

opacity:.96;

}

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

.nav-toggle{

display:none;

background:none;
border:none;

cursor:pointer;

flex-direction:column;

gap:6px;

padding:6px;

flex-shrink:0;

}

.hamburger{

width:26px;
height:3px;

background:var(--gold-primary);

border-radius:6px;

transition:var(--transition);

}


/* ==================================================
OFFCANVAS
================================================== */

.offcanvas{

position:fixed;

top:0;
right:-100%;

width:320px;
max-width:85%;

height:100vh;

background:var(--luxury-white);

border-left:3px solid var(--gold-primary);

box-shadow:-12px 0 50px rgba(212,160,23,0.15);

transition:right .4s ease;

z-index:99999;

display:flex;
flex-direction:column;

}

.offcanvas.active{
right:0;
}


/* HEADER */

.offcanvas-header{

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

padding:24px 26px;

border-bottom:2px solid var(--gold-primary);

}

.offcanvas-logo img{
height:56px;
}


/* CLOSE BUTTON */

.offcanvas-close{

background:none;

border:2px solid var(--text-muted);

border-radius:50%;

font-size:24px;

cursor:pointer;

color:var(--text-dark);

width:40px;
height:40px;

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

transition:var(--transition);

}

.offcanvas-close:hover{

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

transform:rotate(90deg);

}


/* MENU */

.offcanvas-menu{

list-style:none;

margin:0;
padding:30px 26px;

display:flex;
flex-direction:column;

gap:20px;

overflow-y:auto;

flex:1;

}

.offcanvas-link{

text-decoration:none;

font-weight:700;

color:var(--text-dark);

font-size:1.05rem;

}

.offcanvas-parent{

display:flex;
justify-content:space-between;

align-items:center;

font-weight:700;

cursor:pointer;

font-size:1.05rem;

padding:0;

}


/* SUBMENU */

.offcanvas-submenu{

list-style:none;

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

padding-left:16px;

margin-top:8px;

}

.offcanvas-item.active .offcanvas-submenu{
max-height:320px;
}

.offcanvas-submenu li a{

display:block;

padding:8px 0;

text-decoration:none;

font-size:.95rem;

color:var(--text-muted);

}


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

.overlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(6px);

opacity:0;
visibility:hidden;

transition:var(--transition);

z-index:9999;

}

.overlay.active{

opacity:1;
visibility:visible;

}


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

@media (max-width:1024px){

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

.nav-menu{
display:none;
}

.nav-toggle{
display:flex;
}

.brand-text{
display:none;
}

.nav-container{
height:72px;
padding-left:16px;
padding-right:16px;
}

.nav-logo img{
height:52px;
}

}

@media (max-width:480px){

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

.nav-container{
padding-left:12px;
padding-right:12px;
}

.nav-logo img{
height:48px;
}

.hamburger{
width:24px;
height:3px;
}

}

/* =========================================
   HERO – LEFT OVERLAY | RIGHT FULL VISIBLE
   SAME STRUCTURE | PERFECT CONTRAST
========================================= */
.hero {
    position: relative;
    width: 100%;
    height: clamp(650px, 88vh, 800px);
    overflow: hidden;
    background: linear-gradient(135deg, var(--luxury-black), var(--gold-primary-dark));
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 9% 70px 9%;
    opacity: 0;
    transition: opacity 1s var(--transition-easing);
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

/* LEFT ONLY OVERLAY - RIGHT FULLY VISIBLE */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(15,15,15,0.98) 0%,          /* PURE BLACK FAR LEFT */
        rgba(15,15,15,0.95) 15%,         /* HEAVY DARK */
        rgba(15,15,15,0.85) 25%,         /* DARK */
        rgba(15,15,15,0.65) 35%,         /* MEDIUM */
        rgba(15,15,15,0.4) 45%,          /* LIGHT */
        rgba(15,15,15,0.15) 55%,         /* VERY LIGHT */
        transparent 65%                   /* FULL IMAGE RIGHT SIDE */
    );
    z-index: 1;
}

/* PREMIUM CONTENT */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: 540px;
    text-align: left;
    color: var(--luxury-white) !important;
}

/* AUTHORITY TITLES */
.hero h1,
.hero h2 {
    font-size: clamp(3.2rem, 4.5vw, 5rem);
    font-weight: 900;
    margin-bottom: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 6px 20px rgba(0,0,0,0.9);
    background: linear-gradient(135deg, #FFFFFF 0%, var(--gold-primary-light) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* EXECUTIVE BODY TEXT */
.hero p {
    font-size: 1.2rem;
    margin-bottom: 36px;
    line-height: 1.65;
    opacity: 1 !important;
    font-weight: 400;
    text-shadow: 0 4px 15px rgba(0,0,0,0.85);
    color: #FFFFFF !important;
    max-width: 460px;
}

/* BANK-GRADE CTA BUTTON */
.hero-btn {
    display: inline-flex;
    padding: 18px 44px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-primary-light));
    color: var(--luxury-black) !important;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: 3px solid var(--gold-primary-light);
    box-shadow: var(--shadow-gold);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.hero-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.hero-btn:hover::before {
    left: 100%;
}

.hero-btn:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--shadow-hover);
    color: var(--luxury-black) !important;
}

/* EXECUTIVE DOTS */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.hero-dots button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.hero-dots button.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary-light);
    transform: scale(1.25);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.5);
}

/* =========================================
   HERO – MOBILE PERFECTLY CENTERED
========================================= */

/* ================= TABLET & MOBILE - FULL CENTER ================= */
@media (max-width: 992px) {
    .hero {
        height: 75vh;
        min-height: 480px;
    }

    .hero-slide {
        background-position: center 25%;
        padding: 0 22px 55px;
        justify-content: center !important;
        align-items: flex-end !important;
    }

    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(15,15,15,0.25) 0%,
            rgba(15,15,15,0.75) 35%,
            rgba(15,15,15,0.95) 75%,
            rgba(15,15,15,0.98) 100%
        );
    }

    .hero-content {
        max-width: 95%;
        text-align: center !important;     /* CENTER ALL */
        display: flex;
        flex-direction: column;
        align-items: center !important;    /* CENTER ALIGN */
        justify-content: flex-end;
    }

    .hero h1,
    .hero h2 {
        font-size: clamp(2.5rem, 6vw, 3.75rem);
        margin-bottom: 20px;
        letter-spacing: 0;
        text-align: center !important;     /* FORCE CENTER */
        width: 100%;
    }

    .hero p {
        font-size: 1.1rem;
        margin-bottom: 28px;
        max-width: 100%;
        text-align: center !important;     /* FORCE CENTER */
        width: 100%;
    }

    .hero-btn {
        padding: 16px 38px;
        font-size: 1rem;
        margin: 0 auto !important;         /* PERFECT CENTER */
        display: inline-flex;
    }
}

/* ================= MOBILE - ENHANCED CENTER ================= */
@media (max-width: 576px) {
    .hero-slide {
        padding: 0 18px 100px;
        justify-content: center !important;
        align-items: flex-end !important;
    }

    .hero h1,
    .hero h2 {
        font-size: clamp(2rem, 8vw, 2.875rem);
        margin-bottom: 18px;
        text-align: center !important;
    }

    .hero p {
        font-size: 1.05rem;
        margin-bottom: 24px;
        text-align: center !important;
    }

    .hero-btn {
        padding: 15px 34px;
        font-size: 0.98rem;
        margin: 0 auto !important;
    }

    .hero-dots {
        bottom: 18px;
        gap: 10px;
    }

    .hero-dots button {
        width: 12px;
        height: 12px;
    }
}

/* ==================================================
   SRI GANESH – EXACT BRAND LOGO TITLES
================================================== */

.section-title{
text-align:center;
margin-bottom:4rem;
padding:2rem 0;
}

.section-title .brand-text{
display:flex;
flex-direction:column;
line-height:1.1;
margin-bottom:1.5rem;
transition:var(--transition);
}

.section-title .brand-title{

font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:800;

letter-spacing:2px;

display:flex;
gap:8px;

text-transform:uppercase;

justify-content:center;
flex-wrap:wrap;

margin-bottom:.5rem;

}

.section-title .brand-gold{
color:var(--gold-primary);
text-shadow:0 2px 8px rgba(212,160,23,.3);
}

.section-title .brand-silver{
color:var(--silver-primary);
}

.section-title .brand-subtitle{

font-size:clamp(.65rem,1.2vw,.85rem);
font-weight:700;

letter-spacing:clamp(4px,.8vw,8px);

color:var(--text-muted);

margin-top:3px;

}

.section-title .section-divider{

width:140px;
height:3px;

background:linear-gradient(90deg,var(--gold-primary),var(--silver-primary));

margin:2rem auto 1rem;

border-radius:2px;

box-shadow:0 4px 15px rgba(212,160,23,.25);

}

.section-title p{

max-width:580px;

margin:0 auto;

font-size:1.15rem;

color:var(--text-muted);

line-height:1.7;

padding:0 1rem;

}


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

.about-grid{

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

gap:4rem;

align-items:center;

}

.about-image img{

width:100%;

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

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

}

.about-content h2{

font-size:2rem;
margin-bottom:1rem;

}

.about-content p{

margin-bottom:1rem;

color:var(--text-muted);

}

.about-features{

list-style:none;
padding:0;

margin:1.5rem 0;

}

.about-features li{

margin-bottom:.5rem;

}

.about-features i{

color:var(--gold-primary);
margin-right:8px;

}


/* MOBILE */

@media(max-width:992px){

.about-grid{
grid-template-columns:1fr;
text-align:center;
}

}


/* ==================================================
   SRI GANESH – BEST PRICE PROMISE
================================================== */

.best-rate-section{

display:grid;

grid-template-columns:1fr 1fr;

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

align-items:center;

padding:1rem 0;

max-width:1320px;
margin:0 auto;

}

.best-rate-content{
text-align:left;
}

.best-rate-content h3{

font-size:2.2rem;
font-weight:700;

color:var(--text-dark);

margin-bottom:1.5rem;

line-height:1.2;

}

.rates-subtitle{

font-size:1.1rem;

color:var(--text-muted);

margin-bottom:2.5rem;

line-height:1.7;

}

.price-comparison{

background:linear-gradient(135deg,var(--luxury-white),#fdfbf5);

border:2px solid rgba(212,160,23,.15);

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

padding:2.5rem;

margin-bottom:2.5rem;

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

}

.price-comparison h4{

font-size:1.3rem;

color:var(--gold-primary);

margin-bottom:1rem;

font-weight:700;

}

.price-difference{

font-size:3rem;

font-weight:900;

background:linear-gradient(135deg,var(--gold-primary),var(--gold-primary-light));

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;

line-height:1;

margin-bottom:.5rem;

display:block;

}

.price-note{

font-size:.95rem;

color:var(--text-muted);

font-style:italic;

}


/* TRUST FEATURES */

.trust-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:1.5rem;

margin-bottom:2.5rem;

}

.feature-item{

display:flex;

align-items:flex-start;

gap:12px;

}

.feature-icon{

width:50px;
height:50px;

background:linear-gradient(135deg,var(--gold-primary),var(--gold-primary-light));

border-radius:12px;

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

color:var(--luxury-white);

font-size:1.1rem;
font-weight:700;

flex-shrink:0;

box-shadow:0 6px 16px rgba(212,160,23,.25);

}

.feature-text h5{

font-size:1.05rem;
font-weight:700;

margin-bottom:4px;

color:var(--text-dark);

}

.feature-text p{

font-size:.9rem;

color:var(--text-muted);

line-height:1.6;

margin:0;

}


/* BUTTON AREA */

.action-buttons{

display:flex;

gap:1rem;

flex-wrap:wrap;

}


/* IMAGE SIDE */

.best-rate-image{
display:flex;
justify-content:center;
}

.best-rate-photo{

position:relative;

overflow:hidden;

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

}

.best-rate-photo img{

width:100%;

height:auto;

display:block;

object-fit:cover;

}


/* BADGE */

.best-rate-badge{

position:absolute;

left:20px;
bottom:20px;

padding:12px 18px;

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

border-radius:16px;

border:1px solid rgba(212,160,23,.7);

backdrop-filter:blur(6px);

color:#fff;

}

.best-rate-badge .badge-text{

font-size:.75rem;

text-transform:uppercase;

letter-spacing:1px;

opacity:.8;

display:block;

}

.best-rate-badge .badge-highlight{

font-size:.95rem;

font-weight:700;

color:var(--gold-primary-light);

}


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

@media (max-width:992px){

.best-rate-section{

grid-template-columns:1fr;

gap:4rem;

text-align:center;

}

.best-rate-content{
text-align:center;
order:2;
}

.best-rate-image{
order:1;
}

.best-rate-photo img{
height:400px;
}

.trust-features{

grid-template-columns:1fr;

gap:1rem;

}

.action-buttons{
justify-content:center;
}

}

@media (max-width:576px){

.best-rate-section{
gap:3rem;
padding:1rem 0;
}

.best-rate-photo img{
height:320px;
}

.best-rate-badge{

left:12px;
bottom:12px;

padding:10px 14px;

}

}

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

#process {
 background:var(--white) !important;   
}

.process-grid{

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

gap:3rem;

margin-top:3rem;

}

.process-card{

background:var(--luxury-white);

padding:2.5rem;

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

text-align:center;

border:2px solid rgba(212,160,23,.15);

transition:var(--transition);

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

}

.process-card:hover{

transform:translateY(-8px);

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

}

.process-icon{

width:70px;
height:70px;

margin:0 auto 1.5rem;

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

font-size:1.6rem;

border-radius:50%;

background:linear-gradient(
135deg,
var(--gold-primary),
var(--gold-primary-light)
);

color:var(--luxury-white);

}

.process-card h4{

font-size:1.3rem;

margin-bottom:.8rem;

}

.process-card p{

font-size:.95rem;

color:var(--text-muted);

}


/* MOBILE */

@media(max-width:992px){

.process-grid{
grid-template-columns:1fr;
gap:2rem;
}

}


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

.counter-section{

background:#822513;

padding:80px 0;

position:relative;

}

/* subtle luxury pattern glow */

.counter-section::before{

content:"";

position:absolute;
inset:0;

background:radial-gradient(
circle at center,
rgba(212,160,23,0.15),
transparent 70%
);

pointer-events:none;

}

/* GRID */

.counter-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:2rem;

position:relative;
z-index:2;

text-align:center;

}

/* CARD */

.counter-item{

background:#ffffff;

padding:2.4rem 2rem;

border-radius:14px;

border:2px solid rgba(212,160,23,.25);

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

transition:all .35s ease;

}

/* hover effect */

.counter-item:hover{

transform:translateY(-6px);

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

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

}

/* ICON */

.counter-item i{

font-size:2.2rem;

color:var(--gold-primary);

margin-bottom:1rem;

display:block;

}

/* NUMBER */

.counter-item h3{

font-size:2.4rem;
font-weight:900;

color:#111;

margin-bottom:.4rem;

}

/* LABEL */

.counter-item p{

font-size:.95rem;

color:#666;

letter-spacing:.3px;

}


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

@media(max-width:992px){

.counter-grid{

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

}

}

@media(max-width:576px){

.counter-grid{

grid-template-columns:1fr;

}

.counter-item{

padding:2rem;

}

}



/* =========================================
TESTIMONIALS
========================================= */
#testimonials {
 background:var(--white) !important;  
}
.testimonial-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:2.5rem;

margin-top:3rem;

}

.testimonial-card{

background:var(--luxury-white);

padding:2.2rem;

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

border:2px solid rgba(212,160,23,.15);

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

transition:var(--transition);

}

.testimonial-card:hover{

transform:translateY(-6px);

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

}

.testimonial-stars{

color:var(--gold-primary);

font-size:1rem;

margin-bottom:1rem;

}

.testimonial-text{

font-size:.95rem;

color:var(--text-muted);

line-height:1.7;

margin-bottom:1.5rem;

}

.testimonial-user{

display:flex;
align-items:center;
gap:12px;

}

.testimonial-user h6{

margin:0;
font-size:.95rem;

}

.testimonial-user span{

font-size:.8rem;
color:var(--text-muted);

}


/* RESPONSIVE */

@media(max-width:992px){

.testimonial-grid{
grid-template-columns:1fr;
gap:1.8rem;
}

}

/* =========================================
CTA SECTION – PROFESSIONAL
========================================= */

.cta-section{
padding-top:40px;
}

.cta-box{

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

gap:3rem;

background:linear-gradient(
135deg,
var(--luxury-white),
#fdfbf5
);

border:2px solid rgba(212,160,23,.2);

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

padding:3rem;

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

position:relative;
overflow:hidden;

}

/* CONTENT */

.cta-content{
max-width:520px;
}

.cta-content h2{

font-size:2rem;
font-weight:800;

margin-bottom:1rem;

}

.cta-content p{

font-size:1.05rem;

color:var(--text-muted);

margin-bottom:1.8rem;

line-height:1.6;

}

/* HOVER EFFECT */

.cta-box:hover{

box-shadow:var(--shadow-hover);
transform:translateY(-4px);

transition:var(--transition);

}


/* RESPONSIVE */

@media (max-width:992px){

.cta-box{
flex-direction:column;
text-align:center;
gap:2rem;
}

.cta-content{
max-width:100%;
}

}
/* ==================================================
   SRI GANESH – DARK FOOTER SYSTEM
================================================== */

.main-footer {
    background: #09111d;
    color: #ffffff;
    padding-top: 70px;
    padding-bottom: 20px;
    font-family: var(--font-primary);
}

/* FIXED CONTAINER */
.footer-container {
    max-width: 1320px; /* FIXED: was 13200px */
    margin: 0 auto !important;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* OVERRIDE GLOBAL P MARGINS IN FOOTER */
.main-footer p,
.footer-bottom p,
.footer-desc {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* ===== BRAND COLUMN ===== */
.white-brand .brand-white { color: #ffffff !important; }
.white-brand .footer-desc {
    color: #ffffff !important;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-top: 1rem;
    margin-left: 0 !important;
}

.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.white-brand .footer-logo img {
    height: 80px;
}

.footer-brand .footer-brand-text {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.footer-brand-title {
    display: flex;
    flex-direction: row;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
    gap: 8px;
}
.footer-brand-title .brand-gold { 
    color: var(--gold-primary) !important; 
}
.footer-brand-title .brand-silver { 
    color: var(--silver-primary) !important; 
}

.footer-brand-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 6px;
    margin-top: 2px;
    opacity: 0.95;
    color: #ffffff !important;
}

/* ===== COLUMNS ===== */
.footer-col h5 {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: #ffffff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.footer-col ul li a {
    text-decoration: none;
    color: #cbd5e1;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover { 
    color: #ffffff !important; 
}

.footer-contact-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.btn-get-touch {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-primary-light));
    color: var(--luxury-black);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-gold);
    width: fit-content;
}

.btn-get-touch:hover { 
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: var(--luxury-black);
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--luxury-black);
    font-size: 18px;
    transition: var(--transition);
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.social-icons a:hover {
    background: var(--gold-primary);
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ===== PERFECT FOOTER BOTTOM ===== */
.footer-bottom {
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    margin-top: 60px;
    padding: 25px 20px 15px;
    text-align: center !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    max-width: 1320px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.footer-bottom p {
    font-size: 0.85rem !important;
}

.footer-bottom a {
    color: var(--gold-primary) !important;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.footer-bottom a:hover {
    color: var(--gold-primary-light) !important;
    text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        gap: 40px;
    }
    
    .footer-bottom {
        padding: 25px 30px 40px;
    }
}

@media (max-width: 576px) {
    .main-footer {
        padding-top: 50px;
        padding-bottom: 40px;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
        padding: 0 20px;
    }
    
    .footer-bottom {
        padding: 20px 20px 30px;
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    /* MOBILE CENTERING */
    .footer-brand .footer-logo {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .footer-brand .footer-brand-text {
        margin-left: 0;
        align-items: center;
    }
    
    .footer-col ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .footer-col ul li {
        text-align: center;
    }
    
    .footer-contact-social {
        align-items: center;
    }
    
    .btn-get-touch {
        margin: 0 auto 20px !important;
        display: block !important;
    }
    
    .social-icons {
        justify-content: center;
        width: 100%;
    }
    
    .footer-col h5 {
        text-align: center;
    }
    
    .main-footer p {
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


.whatsapp-float {
    position: fixed;
    right: 20px;
    width: 45px;
    height: 45px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 99999;
    bottom: 20px;
    text-decoration: none; /* Kill link underline */
}

.whatsapp-float i {
    font-size: 24px;      /* Fixed size */
    color: white;
    line-height: 1;       /* Reset Bootstrap icon line-height */
    display: block;       /* Force block for centering */
    width: 24px;          /* Match font-size */
    height: 24px;         /* Match font-size */
}

/* Mobile */
@media (max-width: 639px) {
    .whatsapp-float {
        right: 15px;
        bottom: 20px;
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-float i {
        font-size: 26px;
        width: 26px;
        height: 26px;
    }
}