/* IMPORTS & VARIABLES */

/* =======================================================
   FONT BACKUP (POPPINS) - Uncomment these to revert
   ======================================================= */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); */

/* =======================================================
   CURRENT FONT (HIND MADURAI)
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #0d6efd;       /* Professional Blue */
    --secondary: #6c757d;     /* Grey */
    --dark: #212529;          /* Dark Text */
    --light: #f8f9fa;         /* Light Background */
    --accent:  #ffc107;        /* Gold for Calls to Action */
    
    /* FONT TOGGLE - Switch the comments below to change fonts */
    /* --font-main: 'Poppins', sans-serif; */  /* <-- OLD FONT */
    --font-main: 'Hind Madurai', sans-serif;   /* <-- CURRENT FONT */
    
    --transition: all 0.3s ease;
}

/* RESET & GLOBAL */
* { margin: 0; padding: 0; box-sizing: border-box; }

/*
html {
    font-size: 105%;  This tells the browser: Take EVERY font size and scale it up by 10% 
}*/

/* Prevent horizontal scrolling on mobile devices */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure images never break out of their containers */
img {
    max-width: 100%;
    height: auto;
}


body { 
    font-family: var(--font-main); 
    font-size: 110%;  /*Increases global font size by 10% */
    line-height: 1.6; 
    color: var(--dark); 
    background: #fff; 
    overflow-x: hidden; 
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; }



/* UTILITIES (Updated Container & Fonts) */
/* 1. Container is now 80% of the screen width */
.container { 
    max-width: 80%; 
    margin: 0 auto; 
    padding: 0 15px; /* Minimal padding since width is percentage-based */
}

/* 2. Global Font Size Reduction */
body { 
    font-family: var(--font-main); 
    line-height: 1.6; 
    color: var(--dark); 
    background: #fff; 
    overflow-x: hidden; 
    font-size: 15px; /* Reduced from default 16px */
}

.btn { display: inline-block; padding: 8px 22px; border-radius: 5px; font-weight: 600; cursor: pointer; border: none; font-size: 14px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #0b5ed7; transform: translateY(-2px); }
.section-padding { padding: 60px 0; } /* Slightly reduced padding */
.text-center { text-align: center; }




/* --- NAVBAR --- */
.navbar { 
    background: #fff; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    padding: 12px 0; 
}

.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* =========================================
   NAVBAR "NEW" BADGE
   ========================================= */

/* Simple Superscript "New" Text */
.text-new {
    color: #ef4444; /* Red text */
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    margin-left: 2px;
}

/* 1. Logo (Left) */
.logo { 
    font-size: 22px; 
    font-weight: 800; 
    color: var(--primary); 
    flex: 0 0 auto; /* Don't shrink */
}

/* 2. Navigation Links (Centered) */
.nav-links { 
    display: flex; 
    gap: 20px; 
    flex: 1; /* Takes up all available space */
    justify-content: center; /* Centers the items */
    align-items: center;
}

.nav-links a { 
    font-weight: 500; 
    color: var(--dark); 
    font-size: 14.5px; /* Matches your smaller font request */
}
.nav-links a:hover { color: var(--primary); }



/* Dropdown Menu Fixes */
.dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Directly below */
    left: 50%; /* Center relative to parent */
    transform: translateX(-50%); /* Perfect center alignment */
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    border-radius: 8px;
    padding: 10px 0;
    border-top: 3px solid var(--primary);
}
.dropdown:hover .dropdown-menu { display: block; animation: fadeIn 0.3s; }

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }



/* =========================================
   MOBILE SIDE DRAWER & ACCORDION MENU
   ========================================= */

/* Desktop: Hide the close button */
@media (min-width: 993px) {
    .mobile-close-btn {
        display: none;
    }
}

/* Mobile & Tablet Logic */
@media (max-width: 992px) {
    /* 1. The Slide-in Drawer (Hardware Accelerated) */
    .nav-links {
        position: fixed !important;
        top: 0;
        right: 0 !important; 
        transform: translateX(100%) !important; 
        width: 65%;
        max-width: 320px;
        
        /* MODIFIED: Changed from 100vh to 100dvh. This forces it to respect the mobile browser's bottom URL bar! */
        height: 100dvh !important; 
        
        background-color: #fff;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        
        /* MODIFIED: Increased bottom padding from 80px to 120px for a massive safe zone */
        padding: 60px 20px 120px !important; 
        
        box-shadow: -5px 0 20px rgba(0,0,0,0.15);
        transition: transform 0.4s ease-in-out !important; 
        z-index: 9999;
        overflow-y: auto;
    }

    /* 2. Slide it in when the hamburger icon is clicked */
    .nav-links.active {
        transform: translateX(0) !important; /* Slides perfectly into view */
    }

    /* 3. Position the Enquire button right below the menu options */
    .mobile-only-btn {
        display: block !important; 
        margin-top: 10px !important; /* MODIFIED: Reduced to pull button up slightly */
        margin-bottom: 20px !important; 
        padding-top: 15px; /* MODIFIED: Reduced gap above the button */
        border-top: 1px solid #f1f5f9; 
        width: 100%;
    }

    /* Perfectly format the Enquire Now button inside the drawer */
    .mobile-only-btn .btn-enquire {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        padding: 10px 0 !important; /* MODIFIED: Slightly tighter button height */
        border-radius: 8px !important; 
    }

    /* 4. Menu Items Spacing */
    .nav-links li {
        width: 100%;
        margin: 2px 0; /* MODIFIED: Reduced from 5px to tighten gaps */
    }
    
    .nav-links li a {
        display: block;
        padding: 8px 0; /* MODIFIED: Reduced from 12px to close the huge spaces */
        border-bottom: 1px solid #f1f5f9;
        font-size: 1.05rem; /* MODIFIED: Slightly smaller for a cleaner look */
        font-weight: 500;
    }

    /* 5. Mobile Accordion Dropdowns (Smooth Slide) */
    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        
        /* THE SLIDE ANIMATION LOGIC */
        display: block !important;     
        max-height: 0 !important;      
        overflow: hidden !important;   
        transition: max-height 0.4s ease-in-out !important; 
        
        padding: 0 0 0 15px !important; 
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important; 
        border-radius: 0;
        margin-top: 0;
        width: 100%;
        text-align: left !important;
        border: none !important;
    }

    
    .dropdown-menu li a {
        border-bottom: none;
        padding: 6px 0; /* MODIFIED: Reduced from 8px to keep dropdowns compact */
        font-size: 0.95rem;
        color: var(--secondary);
    }

    /* Prevent CSS hover opening on mobile, rely on JS instead */
    .dropdown:hover .dropdown-menu {
        display: none; 
    }
    
    /* Reveal dropdown smoothly by increasing max-height */
    .dropdown.active .dropdown-menu {
        max-height: 350px !important; 
    }
}


/* FOOTER */
footer { background: var(--dark); color: #fff; padding: 60px 0 20px; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-col h4 { margin-bottom: 20px; color: var(--accent); }
.footer-col ul li { margin-bottom: 10px; }


/* =========================================
   FOOTER TEXT LINK HOVER ANIMATION (FIXED)
   ========================================= */

/* Target ALL anchor links inside ALL un-ordered lists within the footer tag */
footer ul li a,
.footer ul li a {
    display: inline-block; /* Crucial for transform to work */
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* On Hover: Slide right by 8px and turn blue */
footer ul li a:hover,
.footer ul li a:hover {
    color: var(--primary) !important; 
    transform: translateX(8px); 
}

/* Optional: Add a tiny invisible arrow that appears on hover */
footer ul li a::before,
.footer ul li a::before {
    content: '\f105'; /* FontAwesome right arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: -15px;
    opacity: 0;
    color: var(--primary);
    transition: all 0.3s ease-in-out;
}

footer ul li a:hover::before,
.footer ul li a:hover::before {
    left: -12px;
    opacity: 1;
}


.social-links a { margin-right: 15px; font-size: 18px; }
.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 14px; }


/* --- DROPDOWN MENU STYLES --- */
.dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 220px;
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
}

.dropdown:hover .dropdown-menu { display: block; } /* Show on Hover */

.dropdown-menu li { display: block; width: 100%; }
.dropdown-menu li a {
    padding: 10px 20px;
    display: block;
    color: #333;
    font-size: 14.5px;
    border-bottom: 1px solid #f1f1f1;
    transition: 0.2s;
}
.dropdown-menu li a:hover { background-color: #f8f9fa; color: var(--primary); padding-left: 25px; }


/* --- FOOTER UPDATES --- */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 Columns */
    gap: 30px;
}
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    margin-right: 10px;
    transition: 0.3s;
    color: #fff;
}
.social-icons a:hover { background: var(--primary); transform: translateY(-3px); }

/* --- MOBILE MENU FIX --- */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: 1fr 1fr; } /* 2 cols on tablet */
}
@media (max-width: 576px) {
    .footer-grid { grid-template-columns: 1fr; } /* 1 col on phone */
    .dropdown-menu { position: static; box-shadow: none; padding-left: 20px; background: #f9f9f9; }
}


/* --- HERO SECTION (Updated for 80% Layout & Smaller Fonts) --- */
.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0; /* Reduced vertical padding */
    position: relative;
    overflow: hidden;
    min-height: 70vh; 
    display: flex;
    align-items: center;
}

.hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%; /* Percentage gap for better spacing */
    width: 100%;
}

/* Top Features (Smaller badges) */
.hero-top-features {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.feature-tag {
    display: flex;
    align-items: center;
    font-size: 0.85rem; /* Smaller font */
    font-weight: 600;
    color: var(--secondary);
    background: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.feature-tag i {
    color: var(--primary);
    margin-right: 6px;
    font-size: 0.9rem;
}
.feature-tag:hover { transform: translateY(-3px); }

/* Typography (Significantly Smaller) */
.hero-content {
    flex: 0 0 45%; /* Limits text width to 45% */
}

.hero-content h1 {
    font-size: 2.4rem; /* Reduced from 3.2rem */
    line-height: 1.3;
    margin-bottom: 15px;
    color: var(--dark);
    font-weight: 700;
}
.hero-content h1 span { color: var(--primary); }

.hero-content p.subheadline {
    font-size: 1rem; /* Reduced from 1.15rem */
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* CTA Buttons (Adjusted Size) */
.cta-group .btn {
    font-size: 0.95rem; /* Smaller button text */
    padding: 10px 25px !important;
}

/* Hero Section Outline Button */
.btn-outline-hero {
    display: inline-block;
    background: #fff;
    border: 2px solid #ddd;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    border-radius: 8px; /* Matches the Thank You page curves */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Dim starting shadow */
    transition: all 0.3s ease-in-out; /* Smooth animation */
}

/* Hover Effect (No background fill) */
.btn-outline-hero:hover {
    transform: translateY(-3px); /* Gentle lift effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Stronger shadow on hover */
    border-color: var(--primary); /* Changes border color instead of filling */
    color: var(--primary); /* Changes text color to match border */
    background: #fff; /* Ensures background stays white */
}

/* Trust Line */
.trust-line {
    font-size: 0.85rem; /* Smaller text */
    margin-top: 20px;
    padding-top: 15px;
}

/* Image */
.hero-image-container {
    flex: 0 0 50%; /* Image takes 50% width */
    display: flex;
    justify-content: flex-end;
}

.hero-main-img {
    width: 100%;
    max-width: 550px; 
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1));
}

/* Responsive */
@media (max-width: 992px) {
    .container { max-width: 90%; } /* On tablets, go a bit wider */
    .hero-grid { flex-direction: column-reverse; }
    .hero-content { flex: 0 0 100%; max-width: 100%; text-align: center; }
    .hero-image-container { flex: 0 0 100%; justify-content: center; margin-bottom: 30px; }
    .hero-top-features { justify-content: center; }
}




/* The "Free Consultation" Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: #eef2ff;
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(13, 110, 253, 0.2);
}
.hero-badge i { margin-right: 8px; color: var(--accent); }

/* Typography */
.hero-content h1 {
    font-size: 3.5rem; /* Big & Bold for SEO */
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--dark);
}
.hero-content h1 span { color: var(--primary); } /* Highlight Color */

.hero-content p.subheadline {
    font-size: 1.25rem;
    color: var(--secondary);
    margin-bottom: 30px;
    max-width: 90%;
}

/* Trust Line */
.trust-line {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #555;
    font-weight: 500;
}
.trust-line i { color: #28a745; margin-right: 8px; }

/* Hero Image & Floating Elements */
.hero-image-container {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}
.hero-main-img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Soft shadow for depth */
    animation: float 6s ease-in-out infinite;
}

/* Floating Animation Keyframes */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Responsive Fixes */
@media (max-width: 992px) {
    .hero-grid { flex-direction: column; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-badge { display: inline-flex; margin: 0 auto 20px; }
    .subheadline { margin: 0 auto 30px; }
    .trust-line { justify-content: center; }
}

/* --- STATS SECTION (Refined) --- */
.stats-section {
    padding: 100px 0; /* More vertical space above/below */
    background: #fff;
    position: relative;
    z-index: 2;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px; /* Increased gap between cards */
}

.stat-card {
    background: #fff;
    padding: 45px 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #eaeaea;
    
    /* Force the transition to be active for transform */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s;
    
    /* Optimization for smooth animation */
    will-change: transform, box-shadow; 
    position: relative;
    z-index: 1;
}

/* Hover Effects */
.stat-card:hover {
    /* Use !important to force the lift if something else is blocking it */
    transform: translateY(-15px) !important; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
    border-color: var(--primary);
    z-index: 2; /* Brings it above other cards */
}

/* The Number */
.stat-number-wrapper {
    font-size: 3.5rem; /* Slightly larger */
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-number-wrapper .symbol {
    font-size: 2rem; /* Smaller + symbol for balance */
    margin-left: 5px;
    color: var(--accent);
    transform: translateY(-10px); /* Lift the symbol slightly */
}

/* The Headings */
.stat-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* The Description */
.stat-card p {
    font-size: 0.95rem;
    color: #666; /* Softer text color */
    line-height: 1.7; /* More line height for readability */
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px; 
    }
}

@media (max-width: 576px) {
    .stats-grid { 
        grid-template-columns: 1fr; 
    }
    .stats-section { padding: 60px 0; }
    .stat-card { padding: 30px 20px; }
}

/* --- SERVICES GRID SECTION (Fast Hover & Ample Spacing) --- */
.services-section {
    padding: 100px 0; /* Increased global section padding */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Increased gap between cards */
    margin-top: 80px; /* Ample whitespace BEFORE the rows */
    margin-bottom: 60px; /* Ample whitespace AFTER the rows */
}

.service-card {
    background: #fff;
    padding: 40px 35px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    
    /* FASTER TRANSITION: Changed to 0.25s for a snappy feel */
    transition: all 0.25s ease-out; 
}

/* HOVER STATE */
.service-card:hover {
    transform: translateY(-10px) !important; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-color: var(--primary);
    z-index: 10;
}

/* Header Styling */
.service-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
}

.icon-box {
    width: 55px;
    height: 55px;
    background: #eef2ff;
    color: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: 0.2s ease; /* Faster icon color switch */
}

.service-card:hover .icon-box {
    background: var(--primary);
    color: #fff;
}

/* Text Styling */
.header-text h3 {
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}

.header-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
    line-height: 1.3;
}

.service-body p {
    font-size: 0.95rem;
    color: var(--secondary);
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1;
}

.micro-cta {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.0rem;
    transition: 0.2s; /* Faster link hover */
    margin-top: auto;
}

.micro-cta i { margin-left: 8px; transition: transform 0.2s; }
.service-card:hover .micro-cta i { transform: translateX(5px); }
.micro-cta:hover { color: #0b5ed7; }

/* Responsive */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
    .service-card { padding: 30px; }
}

/* --- PROCESS SECTION (Metro Map) --- */
.process-section {
    background: #fff;
    overflow: hidden; /* Prevents horizontal scroll on mobile */
}

.timeline-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding: 20px 0;
}

/* The Connecting Line (Grey Background) */
.timeline-line {
    position: absolute;
    top: 50px; /* Aligns with center of icons */
    left: 0;
    width: 100%;
    height: 4px;
    background: #e9ecef;
    z-index: 0;
}

/* Individual Step */
.timeline-step {
    position: relative;
    z-index: 1;
    width: 18%; /* 5 steps fit in 100% */
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
}

.timeline-step:hover {
    transform: translateY(-10px);
}

/* The Icon Circle */
.step-icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 4px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px; /* Centers it horizontally */
    color: var(--secondary);
    font-size: 24px;
    transition: 0.3s;
    position: relative;
}

.step-number {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 10px;
    color: #666;
}

/* Hover State: Icon turns Blue */
.timeline-step:hover .step-icon {
    border-color: var(--primary);
    color: var(--primary);
    background: #eef2ff;
    box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.1);
}

/* Content Styling */
.step-content h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
}

.step-content .highlight {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.step-content p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* --- TOOLTIP FOR STEP 3 --- */
.step-with-tooltip {
    position: relative;
    cursor: help; /* Shows ? cursor */
}

.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 110%; /* Shows above the step */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--dark);
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    transition: 0.3s ease;
}

/* Tiny Triangle for Tooltip */
.custom-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark) transparent transparent transparent;
}

.step-with-tooltip:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- RESPONSIVE VERTICAL TIMELINE --- */
@media (max-width: 992px) {
    .timeline-container {
        flex-direction: column;
        padding-left: 20px; /* Space for vertical line */
    }

    /* Vertical Line */
    .timeline-line {
        width: 4px;
        height: 100%;
        left: 58px; /* Aligns line with icon center */
        top: 0;
    }

    .timeline-step {
        width: 100%;
        display: flex;
        text-align: left;
        margin-bottom: 30px;
        align-items: flex-start;
    }

    .step-icon {
        margin: 0 20px 0 0; /* Margin right instead of auto */
        flex-shrink: 0; /* Prevents icon squishing */
    }
}

/* --- WHY CHOOSE US SECTION (Split Layout + Smooth Hover) --- */
.why-choose-section {
    position: relative;
    overflow: hidden;
}

/* The Split Grid (Left Text / Right Cards) */
.why-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Left 40%, Right 60% */
    gap: 60px; /* Gap between the two columns */
    align-items: flex-start; /* Align to top */
}

/* Right Column: The 2x2 Card Grid */
.why-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Feature Box Styling */
.feature-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid transparent; /* Start with invisible border */
    
    /* SMOOTH ANIMATION CONFIGURATION */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                border-color 0.3s ease;
    position: relative;
    z-index: 1;
}

/* HOVER EFFECT: Lift + Blue Border */
.feature-box:hover {
    transform: translateY(-12px) !important; /* Force smooth lift */
    box-shadow: 0 25px 50px rgba(0,0,0,0.1) !important; /* Deeper shadow */
    border-color: var(--primary) !important; /* Highlight with brand color */
    z-index: 10;
}

/* --- CARD HEADER: Icon Left | Heading Right --- */
.feature-header {
    display: flex;
    align-items: center; /* Vertically center them */
    gap: 15px; /* Space between Icon and Text */
    margin-bottom: 15px; /* Space below header */
}

/* Icon Styling */
.feature-icon {
    width: 45px;
    height: 45px;
    background: rgba(13, 110, 253, 0.1); /* Very light blue */
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0; /* Prevents icon squishing */
    transition: 0.3s;
}

.feature-box:hover .feature-icon {
    background: var(--primary);
    color: #fff;
}

/* Heading Styling */
.feature-header h3 {
    font-size: 1.05rem; /* Slightly compact to fit side-by-side */
    font-weight: 700;
    margin: 0;
    color: var(--dark);
    line-height: 1.3;
}

/* Description Text */
.feature-box p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .why-grid {
        grid-template-columns: 1fr; /* Stack Left/Right columns vertically */
        gap: 40px;
    }
    
    .why-left {
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .why-features-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
    }
}


/* --- BLOG / INSIGHTS SECTION --- */
.blog-section {
    background: #fff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Container */
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden; /* Keeps image inside rounded corners */
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

/* Hover Effect: Lift */
.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #e0e0e0;
}

/* Image Area */
.blog-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Image Zoom on Hover */
.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.05);
}

/* Category Tags */
.blog-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.tag-guide { background: #0d6efd; color: #fff; } /* Blue */
.tag-update { background: #ffc107; color: #000; } /* Yellow/Gold */
.tag-checklist { background: #198754; color: #fff; } /* Green */

/* Content Area */
.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-content h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 700;
}

.blog-content h3 a {
    color: var(--dark);
    text-decoration: none;
    transition: 0.3s;
}

.blog-content h3 a:hover {
    color: var(--primary);
}

.blog-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes Read More to bottom */
}

/* Read More Link */
.read-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
}

.read-more i {
    margin-left: 6px;
    transition: transform 0.3s;
}

.read-more:hover { color: #004494; }
.blog-card:hover .read-more i { transform: translateX(5px); }

/* --- GHOST BUTTON (Outline Style) --- */
.btn-outline {
    display: inline-block;
    padding: 12px 35px;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 50px;
    font-weight: 600;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-img-wrapper { height: 200px; }
}

/* --- TESTIMONIALS SPLIT LAYOUT (Fixed Heights & Avatar) --- */
.testimonial-section {
    background: #fff;
    overflow: hidden;
}

.testimonials-split-wrapper {
    display: grid;
    /* CHANGED: Reduced from 350px to 300px */
    grid-template-columns: 300px 1fr; 
    gap: 30px;
    align-items: stretch; 
}

/* --- LEFT SIDE: TRUST CARD (Compacted) --- */
.trust-card {
    background: #003366;
    color: #fff;
    border-radius: 12px;
    padding: 30px 25px; /* Reduced Padding to shrink height */
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.trust-content h3 {
    font-size: 1.2rem; /* Slightly smaller font */
    line-height: 1.4;
    margin-bottom: 10px; /* Less space */
    font-weight: 600;
}

.trust-content p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 15px; /* Less space */
}

.trust-divider {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 20px; /* Less space */
}

/* Rating Badges (Compacted) */
.rating-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px; /* Reduced gap between badges */
}

.rating-badge:last-child { margin-bottom: 0; }

.rating-icon {
    width: 40px; /* Smaller Icon Circle */
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.google-icon { color: #4285F4; }
.jd-icon { 
    color: #ff7e00; 
    border: 2px solid #ff7e00;
    background: transparent;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}

.rating-text strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.stars-row {
    display: flex;
    align-items: center;
    color: #ffc107;
    font-size: 13px;
}

.score {
    font-weight: 800;
    color: #fff;
    margin-right: 8px;
    font-size: 1rem;
}

/* --- RIGHT SIDE: SLIDER --- */
.slider-viewport {
    position: relative;
    overflow: hidden;
    height: 100%; /* Forces viewport to match Left Card height */
    padding: 5px; /* Slight padding to prevent shadow clipping */
}

.reviews-slider {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    height: 100%; /* Forces slider track to match viewport */
    padding-bottom: 0;
    scrollbar-width: none;
}

.reviews-slider::-webkit-scrollbar { display: none; }


/* --- REVIEW CARD STYLING (Compacted) --- */
.testi-card {
    min-width: calc(33.333% - 17px);
    scroll-snap-align: start;
    background: #fff;
    padding: 25px 20px; /* Reduced Padding */
    border-radius: 12px;
    
    border: 1px solid #e0e0e0; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes Avatar to bottom */
    
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.testi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

.quote-icon {
    font-size: 24px; /* Smaller Quote Icon */
    color: rgba(13, 110, 253, 0.2);
    margin-bottom: 10px;
}

.review-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px; /* Reduced gap */
    font-style: italic;
    flex-grow: 1; 
}

/* Avatar Section */
.client-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
    margin-top: auto; /* Ensures it sits at the bottom */
}

/* Avatar Circle */
.client-avatar {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary), #0a58ca); /* Gradient Blue */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.client-details h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.client-details span {
    font-size: 0.8rem;
    color: #888;
    display: block;
}

/* Slider Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    transition: 0.3s;
}

.slider-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.prev-btn { left: 0; }
.next-btn { right: 0; }

/* Responsive */
@media (max-width: 1200px) {
    .testi-card { min-width: calc(50% - 15px); }
}

@media (max-width: 992px) {
    .testimonials-split-wrapper { grid-template-columns: 1fr; }
    .trust-card { height: auto; margin-bottom: 30px; }
    .slider-viewport { height: auto; }
    .slider-btn { display: none; }
    .testi-card { min-width: 85%; height: auto; } /* Reset height for mobile */
}

/* =======================================================
   1. RESTORED HOME PAGE CONTACT SECTION (Do Not Remove)
   ======================================================= */
.cta-section {
    position: relative;
    color: #fff;
    /* Background handled inline in PHP */
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 60px;
    align-items: center;
}

.cta-content { padding-right: 30px; }

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.contact-item:hover .icon-circle {
    background: #fff;
    color: var(--primary);
    transform: scale(1.1);
}

.label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value {
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}

/* Home Page Form Card */
.cta-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    color: var(--dark);
}

.inquiry-form h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
}

/* Common Form Elements (Used by Home Page) */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.form-group input, 
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: #f9f9f9;
    transition: 0.3s;
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

@media (max-width: 992px) {
    .cta-grid { grid-template-columns: 1fr; }
    .cta-form-wrapper { margin-top: 30px; padding: 30px 20px; }
}


/* =======================================================
   2. NEW CONTACT PAGE STYLES (Isolated with 'cp-' prefix)
   ======================================================= */
.cp-page-header {
    background: linear-gradient(135deg, #003366 0%, #0d6efd 100%);
    padding: 120px 0 80px; 
    color: #fff;
    text-align: center;
}

.cp-page-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.cp-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.cp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Info Side */
.cp-sub-title {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.cp-title-wrap h2 {
    font-size: 2.5rem;
    margin: 10px 0 20px;
    color: var(--dark);
}

.cp-info-cards { margin-top: 40px; }

.cp-info-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid #eee;
}

.cp-icon {
    width: 50px;
    height: 50px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cp-text h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
}

.cp-text p, .cp-text a {
    color: #666;
    font-size: 0.95rem;
    margin: 0;
    text-decoration: none;
}

/* Contact Page Form Card */
.cp-form-card {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

.cp-form-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--dark);
}

.cp-form-desc {
    color: #666;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.cp-form-group { margin-bottom: 20px; }

.cp-form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
    display: block;
}

.cp-form-group input, 
.cp-form-group select, 
.cp-form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: #fcfcfc;
    font-family: inherit;
    outline: none;
    transition: 0.3s;
}

.cp-form-group input:focus, 
.cp-form-group select:focus, 
.cp-form-group textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.cp-submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.cp-submit-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.cp-map-section { line-height: 0; }

@media (max-width: 992px) {
    .cp-grid { grid-template-columns: 1fr; gap: 50px; }
    .cp-page-header { padding: 100px 0 60px; }
}



/* =========================================
   ABOUT PAGE STYLES (Prefix: ap-)
   ========================================= */

/* 1. Header Banner */
.ap-page-header {
    background: linear-gradient(135deg, #003366 0%, #0d6efd 100%);
    padding: 120px 0 80px;
    color: #fff;
    text-align: center;
}

.ap-page-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.ap-page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. Intro Section (Who We Are) */
.ap-section {
    background: #fff;
    padding: 80px 0;
}

.ap-grid-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.ap-subtitle {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.ap-content h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
    color: var(--dark);
}

.ap-desc {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.7;
    font-size: 1rem;
}

/* Stats Row */
.ap-stats-row {
    display: flex;
    gap: 50px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.ap-stat-item h3 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 5px;
    font-weight: 800;
}

.ap-stat-item span {
    font-size: 0.9rem;
    color: #777;
    font-weight: 500;
}

/* Image Wrapper */
.ap-image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.ap-image-wrapper img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.ap-image-wrapper:hover img {
    transform: scale(1.03);
}

/* Floating Badge */
.ap-img-badge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.ap-img-badge i {
    font-size: 24px;
    color: #ffc107; /* Gold */
}

.ap-img-badge span {
    font-weight: 700;
    color: var(--dark);
    font-size: 0.95rem;
}

/* 3. Mission & Vision Section */
.ap-mission-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.ap-grid-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.ap-mv-card {
    background: #fff;
    padding: 50px 40px;
    border-radius: 15px;
    border-bottom: 4px solid var(--primary);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: 0.3s;
}

.ap-mv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.ap-icon-box {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 25px;
}

.ap-mv-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark);
}

.ap-mv-card p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* 4. CTA Banner */
.ap-cta-banner {
    padding: 80px 0;
    text-align: center;
    background: #fff;
}

.ap-cta-banner h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: var(--dark);
}

.ap-cta-banner p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.ap-btn {
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 992px) {
    .ap-grid-intro { grid-template-columns: 1fr; gap: 40px; }
    .ap-image-wrapper { order: -1; /* Image on top for mobile */ }
    .ap-page-header h1 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    .ap-grid-mission { grid-template-columns: 1fr; }
    .ap-stats-row { gap: 30px; }
}

/* =========================================
   SERVICE PAGE STYLES (Prefix: sp-)
   ========================================= */

/* 1. Header */
.sp-page-header {
    background: linear-gradient(135deg, #003366 0%, #0d6efd 100%);
    padding: 120px 0 80px;
    color: #fff;
    text-align: center;
}

.sp-page-header h1 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.sp-page-header p { font-size: 1.2rem; opacity: 0.9; }

/* 2. Overview */
.sp-grid-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sp-subtitle {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.sp-content h2 { font-size: 2.2rem; margin: 10px 0 20px; color: var(--dark); }
.sp-content p { color: #555; margin-bottom: 15px; line-height: 1.7; }

.sp-check-list { margin-top: 20px; }
.sp-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--dark);
}
.sp-check-list i { color: #198754; } /* Green Check */

.sp-image img {
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* 3. Features Grid */
.sp-features-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.sp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.sp-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
    border-bottom: 3px solid transparent;
}

.sp-card:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.sp-icon {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 20px;
}

.sp-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; }
.sp-card p { font-size: 0.9rem; color: #666; line-height: 1.6; }

/* 4. FAQ Accordion */
.sp-faq-section { background: #fff; }

.faq-item {
    border: 1px solid #eee;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    background: #fff;
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.faq-question:hover { background: #f9f9f9; color: var(--primary); }

.faq-answer {
    padding: 0 20px;
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    color: #555;
    background: #fcfcfc;
    transition: all 0.3s ease;
}

/* Active State for FAQ */
.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 200px; /* Expands */
    border-top: 1px solid #eee;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg); /* Plus becomes X */
}

/* 5. CTA Banner */
.sp-cta-banner {
    padding: 80px 0;
    text-align: center;
    background: #003366;
    color: #fff;
}

.sp-cta-banner h2 { font-size: 2.2rem; margin-bottom: 15px; }
.sp-cta-banner p { opacity: 0.9; margin-bottom: 30px; font-size: 1.1rem; }
.sp-btn { padding: 15px 40px; border-radius: 50px; }

/* Responsive */
@media (max-width: 992px) {
    .sp-grid-overview { 
        grid-template-columns: 1fr; 
        gap: 40px; /* Slightly tighter gap for mobile */
    }
    
    /* FORCE CORRECT STACKING ON MOBILE */
    .sp-grid-overview .sp-content {
        order: 1 !important; /* Text ALWAYS goes first on mobile */
    }
    
    .sp-grid-overview .sp-image {
        order: 2 !important; /* Image ALWAYS goes second on mobile */
        margin-top: 10px; /* Adds a little breathing room above the image */
    }
}

@media (max-width: 576px) {
    .sp-features-grid { grid-template-columns: 1fr; }
}


/* =========================================
   TRAINING PAGE STYLES (Prefix: tp-)
   ========================================= */

/* 1. Hero Section */
.tp-hero {
    background: linear-gradient(rgba(0,51,102,0.9), rgba(0,51,102,0.8)), url('https://placehold.co/1920x600/003366/ffffff?text=Training+Workshop');
    background-size: cover;
    background-position: center;
    padding: 50px 0 80px; /* Reduced from 150px/100px to match Services height */
    color: #fff;
    text-align: center;
}

.tp-badge {
    background: #ffc107;
    color: #000;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px; /* Tighter spacing */
}

.tp-hero h1 { 
    font-size: 2.5rem; /* Slightly reduced for a cleaner look */
    font-weight: 700; 
    margin-bottom: 15px; 
}

.tp-hero p { 
    font-size: 1.1rem; 
    opacity: 0.9; 
    max-width: 700px; 
    margin: 0 auto 20px; /* Tighter bottom margin */
}

.tp-btn {
    padding: 15px 40px; border-radius: 50px; font-weight: 600;
}

/* 2. Highlights */
.tp-highlights {
    margin-top: -50px; position: relative; z-index: 10; padding-bottom: 50px;
}
.tp-grid-3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}

.tp-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.tp-card:hover { transform: translateY(-10px); }

.tp-main-icon { font-size: 40px; color: var(--primary); margin-bottom: 20px; }

/* New styles for the "View Details" link */
.tp-card-link {
    color: var(--primary);
    font-weight: 700;
    margin-top: 15px;
    display: inline-flex; /* Key for alignment */
    align-items: center;  /* Vertically centers text and icon */
    gap: 8px;             /* Space between text and arrow */
    text-decoration: none;
    transition: 0.3s;
}

/* Force the arrow inside the link to be small */
.tp-card-link i {
    font-size: 0.9rem !important; /* Overrides any bigger size */
    margin-bottom: 0 !important;   /* Removes inherited margin */
}

/* Nice hover effect */
.tp-card-link:hover {
    gap: 12px; /* Arrow moves away slightly on hover */
}



.tp-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.tp-card p { color: #666; font-size: 0.95rem; }

/* 3. Curriculum */
.tp-curriculum { background: #f8f9fa; }
.tp-flex-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; }

.tp-curr-text h2 { font-size: 2.2rem; margin-bottom: 15px; }
.tp-curr-text p { color: #666; margin-bottom: 30px; }

.tp-list { list-style: none; }
.tp-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-weight: 600; color: var(--dark); }
.tp-list li i { color: #198754; background: #e8f5e9; padding: 5px; border-radius: 50%; font-size: 12px; }

/* Modules (Accordion Style) */
.tp-module-item { background: #fff; border-radius: 10px; margin-bottom: 20px; border: 1px solid #eee; overflow: hidden; }
.tp-mod-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #fff; font-weight: 700; }
.tp-mod-header:hover { background: #fcfcfc; color: var(--primary); }

.tp-mod-body { padding: 0 20px 20px; color: #555; }
.tp-mod-body ul { padding-left: 20px; list-style: disc; }
.tp-mod-body li { margin-bottom: 8px; }

/* 4. Registration Form */
.tp-register-section { background: #fff; }
.tp-reg-box { max-width: 600px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 15px; border: 1px solid #e0e0e0; box-shadow: 0 20px 60px rgba(0,0,0,0.05); }

.tp-reg-header { text-align: center; margin-bottom: 30px; }
.tp-reg-header h2 { font-size: 2rem; margin-bottom: 5px; }
.tp-reg-header p { color: var(--primary); font-weight: 600; }

.tp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tp-group { margin-bottom: 20px; }
.tp-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.tp-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; outline: none; transition: 0.3s; }
.tp-group input:focus {
    border-color: var(--primary);

}

.tp-submit { width: 100%; padding: 15px; border-radius: 8px; font-size: 1.1rem; }

/* Responsive */
@media (max-width: 992px) {
    .tp-flex-row { grid-template-columns: 1fr; }
    .tp-grid-3 { grid-template-columns: 1fr; }
    .tp-highlights { margin-top: 30px; }
    .tp-hero { padding: 120px 0 50px; }
}
/* =========================================
   FIX: CTA BUTTON ICON SIZE ALIGNMENT
   ========================================= */

/* Fix for Home Page CTA Button Icon */
.submit-btn i {
    font-size: 0.85em; /* Makes icon 85% the size of the text */
    margin-top: 2px;   /* Tiny adjustment for perfect vertical centering */
}

/* Fix for Contact Page CTA Button Icon */
.cp-submit-btn i {
    font-size: 0.85em; /* Makes icon 85% the size of the text */
    margin-top: 2px;   /* Tiny adjustment for perfect vertical centering */
}


/* =========================================
   BLOG PAGE STYLES (Prefix: bp-)
   ========================================= */

/* 1. Header */
.bp-page-header {
    background: linear-gradient(135deg, #003366 0%, #0d6efd 100%);
    padding: 120px 0 80px;
    color: #fff;
    text-align: center;
}
.bp-page-header h1 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.bp-page-header p { font-size: 1.2rem; opacity: 0.9; }

/* 2. Featured Post */
.bp-featured-section { margin-top: -50px; position: relative; z-index: 10; padding-bottom: 50px; }

.bp-featured-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Image wider than text */
    cursor: pointer;
    transition: 0.3s;
}

.bp-featured-card:hover { transform: translateY(-5px); }

.bp-feat-img img { width: 100%; height: 100%; object-fit: cover; min-height: 350px; }

.bp-feat-content { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.bp-badge {
    background: #ffc107; color: #000; font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; padding: 5px 10px; border-radius: 4px;
    display: inline-block; width: fit-content; margin-bottom: 15px;
}
.bp-feat-content h2 { font-size: 2rem; margin-bottom: 15px; color: var(--dark); line-height: 1.3; }
.bp-feat-content p { color: #666; margin-bottom: 25px; line-height: 1.6; }

.bp-read-btn {
    color: var(--primary); font-weight: 700; display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.bp-read-btn:hover { gap: 12px; }

/* 3. Grid Section */
.bp-grid-section { background: #f8f9fa; }
.bp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }

.bp-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s;
}
.bp-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }

.bp-card-img { position: relative; height: 200px; overflow: hidden; }
.bp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.bp-card:hover .bp-card-img img { transform: scale(1.05); }

.bp-cat {
    position: absolute; top: 15px; right: 15px;
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 5px 10px; font-size: 0.75rem; border-radius: 4px; font-weight: 600;
}

.bp-card-body { padding: 20px; }
.bp-date { font-size: 0.85rem; color: #999; display: block; margin-bottom: 10px; }
.bp-card-body h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; line-height: 1.4; color: var(--dark); }
.bp-card-body p { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 20px; }

.bp-link {
    color: var(--primary); font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.bp-link:hover { text-decoration: underline; }

/* Pagination */
.bp-pagination { display: flex; justify-content: center; gap: 10px; }
.bp-pagination a {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #ddd; border-radius: 50%;
    color: var(--dark); font-weight: 600; transition: 0.3s;
}
.bp-pagination a.active, .bp-pagination a:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* CTA Bar */
.bp-cta-bar { background: #003366; padding: 60px 0; text-align: center; color: #fff; }
.bp-cta-bar h2 { margin-bottom: 10px; }
.bp-cta-bar p { margin-bottom: 30px; opacity: 0.8; }

.bp-sub-form {
    max-width: 500px; margin: 0 auto; display: flex; gap: 10px;
    background: rgba(255,255,255,0.1); padding: 5px; border-radius: 50px;
}
.bp-sub-form input {
    flex: 1; background: transparent; border: none; padding: 15px 20px; color: #fff; outline: none;
}
.bp-sub-form input::placeholder { color: rgba(255,255,255,0.6); }
.bp-sub-form button {
    background: var(--primary); color: #fff; border: none; padding: 12px 30px; border-radius: 50px; font-weight: 600; cursor: pointer;
}
.bp-sub-form button:hover { background: #fff; color: var(--primary); }

/* Responsive */
@media (max-width: 992px) {
    .bp-featured-card {
        grid-template-columns: 1fr;
    }
    
    /* Fix for both Featured and Grid images to prevent cropping */
    .bp-feat-img img, .bp-card-img img { 
        height: auto !important; 
        min-height: auto !important; 
        aspect-ratio: 16 / 9 !important;
        object-fit: cover;
    }

    .bp-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .bp-grid-3 { grid-template-columns: 1fr; }
    .bp-sub-form { flex-direction: column; background: transparent; padding: 0; }
    .bp-sub-form input { background: #fff; color: #333; margin-bottom: 10px; border-radius: 8px; }
    .bp-sub-form button { width: 100%; border-radius: 8px; }
}

/* =========================================
   LEGAL PAGES STYLES
   ========================================= */
.legal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 30px;
    margin-bottom: 15px;
}

.legal-content h3:first-child { margin-top: 0; }

.legal-content p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
}

.legal-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-content ul li {
    list-style: disc;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* =========================================
   DSC PAGE PRICING TABLES
   ========================================= */
.pricing-grid { margin-top: 30px; }

.price-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    text-align: center;
    position: relative;
    transition: 0.3s;
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Popular Card Style */
.price-card.popular {
    border: 2px solid var(--primary);
    background: #fff;
    transform: scale(1.05); /* Make it slightly bigger */
}

.badge-pop {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.pc-header h4 { font-size: 1.3rem; margin-bottom: 5px; color: var(--dark); }
.pc-header p { color: #666; font-size: 0.9rem; margin-bottom: 20px; }

.pc-price { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 30px; }
.pc-price span { font-size: 1rem; color: #999; font-weight: 500; }

.pc-features { list-style: none; margin-bottom: 30px; text-align: left; padding-left: 10px; }
.pc-features li { margin-bottom: 12px; color: #555; display: flex; align-items: center; gap: 10px; }
.pc-features li i { color: #198754; } /* Green Check */

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
    padding: 12px 30px;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
    font-weight: 600;
}
.btn-outline:hover { background: var(--primary); color: #fff; }

/* Responsive */
@media (max-width: 992px) {
    .pricing-grid { grid-template-columns: 1fr; gap: 50px; }
    .price-card.popular { transform: scale(1); }
}

/* =========================================
   DSC PAGE STYLES
   ========================================= */

.dsc-hero {
    /* Changed Background Text to 'Digital Security' */
    background: linear-gradient(rgba(0,51,102,0.9), rgba(0,51,102,0.8)), url('https://placehold.co/1920x600/003366/ffffff?text=Digital+Security');
    background-size: cover;
    background-position: center;
    padding: 50px 0 50px;
    color: #fff;
    text-align: center;
}

/* Inherit styles for the text inside */
.dsc-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 20px; }
.dsc-hero p { font-size: 1.2rem; opacity: 0.9; max-width: 700px; margin: 0 auto 30px; }

/* =========================================
   LEGAL PAGES STYLING
   ========================================= */
.legal-content h3 {
    font-size: 1.5rem;
    color: var(--dark);
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.legal-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

.legal-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
    color: #555;
}

.legal-content ul li {
    margin-bottom: 10px;
}

/* =========================================
   SCROLL TO TOP BUTTON
   ========================================= */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: var(--primary); /* Uses your brand color */
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0;           /* Hidden by default */
    visibility: hidden;   /* Hidden by default */
    transition: all 0.3s ease-in-out;
    transform: translateY(10px);
}

/* Class added by JS to show the button */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: #000;     /* Darker color on hover */
    color: #fff;
    transform: translateY(-5px); /* Slight lift effect */
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* =========================================
   HEADER FIXES (Breathability & Mobile Toggle)
   ========================================= */

/* 1. Increase Header Space (Breathability) */
.navbar {
    padding: 25px 0 !important; /* increased from standard 10-15px */
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Softer shadow */
}


/* =========================================
   NAVBAR RIGHT SIDE (BUTTON & TOGGLE)
   ========================================= */

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto; /* Prevents shrinking */
}

/* Enquire Button Style (Matching Thank You Page) */
.btn-enquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #222 !important; /* Black text */
    background-color: transparent;
    border: 2px solid var(--primary); /* Primary color border */
    padding: 8px 20px;
    border-radius: 50px; /* Kept original pill shape */
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Dim, soft shadow */
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* Enquire Button Hover */
.btn-enquire:hover {
    background-color: var(--primary); /* Fill on hover */
    color: #fff !important; /* White text on hover */
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2); /* Glowing shadow */
    transform: translateY(-3px); /* Gentle lift effect */
}

/* Mobile Toggle (Hamburger Icon) */
.mobile-toggle {
    display: none; /* Hidden by default on big screens */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
}

/* Visibility Utilities (Desktop default) */
.mobile-only-btn { display: none; }
.desktop-btn { display: inline-block; }

/* =========================================
   MOBILE RESPONSIVE LOGIC (Max 992px)
   ========================================= */
@media (max-width: 992px) {
    /* Show the Toggle Button on Mobile/Tablets */
    .mobile-toggle {
        display: block !important; 
    }
    
    /* Hide the extra Desktop button in the header */
    .desktop-btn {
        display: none !important;
    }

    /* Reveal the mobile-only button (usually inside the mobile menu) */
    .mobile-only-btn { 
        display: inline-block; 
    }
}

/* =========================================
   TOP BAR STYLES (With Animations)
   ========================================= */
.top-bar {
    background-color: #001529; 
    color: #d1d5db;
    font-size: 0.95rem;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    /* Page Load Animation */
    opacity: 0;
    transform: translateY(-10px);
    animation: slideDownFade 0.6s ease-out forwards;
}

@keyframes slideDownFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left span {
    margin-right: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.top-bar-left span:hover {
    color: #fff; /* Smooth text brighten on hover */
}

.top-bar-left i {
    color: var(--primary); 
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 25px;
}


/* =========================================
   TOP BAR RESPONSIVE FIX
   ========================================= */

/* Tablet View (Stacks Left and Right sections) */
@media (max-width: 992px) {
    .top-bar-container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .top-bar-left {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px; /* Adds even spacing between items */
    }
    .top-bar-left span {
        margin: 0 !important; /* Removes old awkward margins */
    }
    .top-bar-right {
        justify-content: center;
    }
}

/* Mobile View (Perfectly stacks everything for small screens) */
@media (max-width: 576px) {
    .top-bar {
        display: block !important; /* Un-hides the top bar */
        padding: 12px 0;
    }
    
    .top-bar-left {
        flex-direction: column; /* Stacks Phone, Mobile, and Email vertically */
        gap: 8px;
        font-size: 0.8rem;
    }
    
    .top-bar-right {
        flex-direction: column; /* Stacks WhatsApp and Socials vertically */
        gap: 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Adds a subtle divider line */
    }
    
    .top-social-icons {
        justify-content: center;
        display: flex;
    }
}


/* =========================================
   TOP BAR & FOOTER REFINEMENTS
   ========================================= */

/* 1. Top Bar Social Icons (Circular with Blue Hover) */
.top-social-icons a {
    color: #a6adb4;
    margin-left: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); /* Subtle dark circle */
    text-decoration: none;
}

.top-social-icons a:hover {
    background: var(--primary); /* Fills with your brand blue */
    color: #fff;
    transform: translateY(-3px); /* Smooth lift effect */
}

/* 2. Unified WhatsApp Channel Button (For Top Bar & Footer) */
.wa-channel-btn {
    color: #22c55e; /* WhatsApp Green text */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1); /* Light green transparent background */
    padding: 6px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.wa-channel-btn:hover {
    background: #22c55e; /* Solid Green on hover */
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================
   FOOTER PERFECT SPACING & SOCIALS
   ========================================= */

/* Footer Social Icons */
.footer-socials {
    margin-bottom: 25px; /* Gap below social icons */
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    color: #a6adb4;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Footer WhatsApp Channel Button Wrapper */
.footer-wa-wrapper {
    margin-bottom: 25px; /* Gap below the channel button */
}

/* Footer Contact List */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    margin-bottom: 12px; /* Perfect breathing room between phone and email */
    display: flex;
    align-items: center;
    color: #a6adb4;
}

.footer-contact-list li i {
    color: var(--primary);
    margin-right: 10px;
    font-size: 1rem;
}


/* =========================================
   CREDENTIALS / INFINITE LOGO SLIDER
   ========================================= */

.credentials-section {
    background-color: #f8fafc; /* Very light cool grey */
    padding: 80px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}

/* --- PERFECTLY CENTERED HEADER STYLES --- */
.credentials-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Forces perfect center alignment */
}

.credentials-subtitle {
    color: var(--primary); /* Uses your brand blue */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: inline-block;
}

.credentials-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 15px;
    line-height: 1.3;
    max-width: 900px;
}

.credentials-description {
    color: #666;
    line-height: 1.6;
    font-size: 1.1rem;
    max-width: 750px;
    margin: 0 auto; /* mathematically centers the paragraph block */
}

/* --- INFINITE SLIDER LOGIC --- */
/* The outer container masks the edges for a fade-in/fade-out effect */
.logo-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* The moving track */
.logo-slider-track {
    display: flex;
    align-items: center;
    /* Formula: Width of slide (200px) * Total number of slides (14) */
    width: calc(200px * 14); 
    animation: scrollLogos 35s linear infinite;
}

.logo-slider-track:hover {
    animation-play-state: paused;
}

/* Individual logo blocks */
.logo-slide {
    width: 200px; 
    flex-shrink: 0;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-slide img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    /* Professional styling: Muted grey until hovered */
    /* filter: grayscale(100%) opacity(0.5);  */
    transition: all 0.4s ease-in-out;
}

.logo-slide:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* THE INFINITE SCROLL MATH */
@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 7)); } /* Moves exactly the width of Set 1 */
}

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
    .credentials-section { padding: 60px 0; }
    .credentials-title { font-size: 1.8rem; }
    
    /* Shrink the logos slightly for mobile screens */
    .logo-slide { width: 150px; padding: 0 15px; }
    .logo-slider-track { width: calc(150px * 14); }
    
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-150px * 7)); }
    }
}


/* =========================================
   DSC PLANS PAGE STYLES
   ========================================= */

/* Main Layout Setup */
.dsc-calculator-section { background: #fff; border-top: 1px solid #e2e8f0; }
.dsc-info-section { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.dsc-features-section { background: #fff; }
.dsc-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* Calculator Left Section Text */
.calc-text h2 { font-size: 2.2rem; font-weight: 700; color: var(--dark); margin-bottom: 15px; }
.calc-subtitle { color: #555; font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; }

/* Support Box & Buttons */
.support-box { background: #f8fafc; padding: 25px; border-radius: 12px; border-left: 4px solid var(--primary); }
.support-box h3 { font-size: 1.3rem; margin-bottom: 15px; }
.support-buttons { display: flex; gap: 15px; flex-wrap: wrap; }
.btn-call { background: #fff; color: var(--dark); border: 1px solid #ddd; padding: 12px 25px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.btn-call i { color: var(--primary); }
.btn-whatsapp { background: #25D366; color: #fff; padding: 12px 25px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Calculator Card UI */
.price-calculator-card { background: #f8fafc; padding: 40px; border-radius: 20px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.calc-header { margin-bottom: 25px; text-align: center; }
.calc-form-group { margin-bottom: 20px; }
.calc-form-group label { font-weight: 600; margin-bottom: 8px; display: block; }
.calc-select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; }

/* Validity Toggle Buttons */
.validity-toggle { display: flex; gap: 10px; margin-bottom: 25px; }
.validity-btn { flex: 1; padding: 10px; border: 1px solid #ddd; background: #fff; border-radius: 5px; cursor: pointer; transition: 0.3s; font-weight: 600; }
.validity-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.validity-btn:hover:not(.active) { background: #f0f0f0; }

/* Calculator Price Display Box */
.price-display-box { text-align: center; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eef2ff; }
.calc-price { font-size: 2.5rem; font-weight: 800; color: var(--primary); }
.calc-warning { color: #fff; background: #dc3545; padding: 10px; border-radius: 6px; font-weight: 600; display: none; margin-top: 15px; font-size: 0.9rem; }
.calc-tax-note { font-size: 0.85rem; color: #777; margin-top: 10px; }
.calc-order-btn { width: 100%; margin-top: 15px; }

/* Info Section (Word Doc Content) */
.dsc-info-section h2 { margin-bottom: 20px; }
.dsc-info-subheader { margin-top: 30px; margin-bottom: 15px; font-size: 1.5rem; }
.dsc-security-img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }


/* Features Grid */
.dsc-features-section .section-header { margin-bottom: 50px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.feature-box { padding: 25px; background: #f8fafc; border-radius: 8px; text-align: left; }
.feature-box h4 { color: var(--primary); }
.feature-box p { margin-top: 10px; color: #555; }

/* Partner CTA Banner */
.partner-banner { background: linear-gradient(135deg, var(--primary), #001f3f); color: #fff; text-align: center; }
.partner-banner h2 { color: #fff; margin-bottom: 15px; }
.partner-banner p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 30px; }
.partner-btn { background: #fff; color: var(--primary); padding: 15px 40px; border-radius: 50px; font-weight: 700; font-size: 1.1rem; }
.partner-btn i { margin-left: 8px; }


/* =========================================
   DSC USAGE SECTION
   ========================================= */
.dsc-usage-section {
    background: #fff;
}

.usage-subtitle {
    margin-bottom: 50px;
    color: #666;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns for Desktop */
    gap: 20px;
}

.use-box {
    padding: 30px 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #fff;
}

.use-box:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.use-box i {
    font-size: 30px;
    color: var(--primary);
}

.use-box h5 {
    margin-top: 15px;
    font-weight: 600;
    color: #333;
}

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

/* Tablets (landscape) */
@media (max-width: 992px) {
    .usage-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    }
}

/* Tablets (portrait) */
@media (max-width: 768px) {
    .usage-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
        /* grid-template-columns: repeat(2, 1fr); 2 Columns */
        gap: 15px;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .usage-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Columns */
        /* grid-template-columns: 1fr; 1 Column (Full Width) */
    }
    
    .use-box {
        padding: 20px;
    }
}


/* Mobile Responsive Adjustments */
@media (max-width: 992px) {
    .dsc-split-row { grid-template-columns: 1fr; gap: 40px; }
    .price-calculator-card { padding: 25px; }
    .support-buttons { flex-direction: column; }
    .btn-call, .btn-whatsapp { width: 100%; justify-content: center; }
    .img-wrapper { order: -1; margin-bottom: 20px; } 
}

/* =========================================
   DSC PAGE: TOP HALF (FEATURES, PRICING, DOCS)
   ========================================= */

/* 1. Top 4 Features Grid */
.dsc-top-features-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    text-align: center;
}

/* 2. Pricing Section & Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.price-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    position: relative;
    transition: 0.3s;
}

.price-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

.price-card.popular {
    border: 2px solid var(--primary);
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.1);
}

.badge-pop {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.pc-header h4 { margin-bottom: 5px; font-size: 1.2rem; color: var(--dark); }
.pc-header p { color: #666; font-size: 0.9rem; }
.pc-price { font-size: 2.5rem; font-weight: 700; margin: 20px 0; color: var(--dark); }
.pc-price span { font-size: 1rem; color: #666; font-weight: 400; }
.pc-features { list-style: none; margin-bottom: 30px; text-align: left; padding: 0; }
.pc-features li { margin-bottom: 12px; color: #555; display: flex; align-items: center; gap: 10px; }
.pc-features li i { width: 16px; text-align: center; }

/* 3. Documents Grid */
.dsc-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.doc-text h2 { margin-bottom: 15px; color: var(--dark); }
.doc-text p { color: #555; margin-bottom: 20px; }

/* --- MOBILE RESPONSIVE RULES FOR TOP HALF --- */
@media (max-width: 992px) {
    /* Compress 4 items to 2 rows of 2 on Tablets/Mobiles */
    .dsc-top-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    /* Stack Pricing Cards into a single column */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto; 
    }

    /* Stack Documents Section */
    .dsc-doc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Move Image above text on mobile for better flow */
    .dsc-doc-grid .doc-img {
        order: -1;
    }
}

@media (max-width: 576px) {
    /* On very small screens, force the 4 top icons into a single column */
    .dsc-top-features-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   DOCUMENT GENERATOR STYLES (Prefix: dg-)
   ========================================= */

/* 1. Hero Section */
.dg-hero {
    background: linear-gradient(rgba(0,51,102,0.9), rgba(0,51,102,0.8)), url('https://placehold.co/1920x600/003366/ffffff?text=Document+Generator');
    background-size: cover;
    background-position: center;
    padding: 100px 0 60px; /* Compact height matching services page */
    color: #fff;
    text-align: center;
}

.dg-badge {
    background: #ffc107;
    color: #000;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}

.dg-hero h1 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    margin-bottom: 15px; 
}

.dg-hero p { 
    font-size: 1.1rem; 
    opacity: 0.9; 
    max-width: 700px; 
    margin: 0 auto; 
}

/* 2. Tools Grid Section */
.dg-tools-section {
    background: #f8f9fa;
}

.dg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 3. Document Cards */
.dg-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s ease;
    cursor: pointer;
    border: 1px solid #e2e8f0;
}

.dg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--primary);
}

.dg-card i {
    font-size: 40px;
    margin-bottom: 20px;
}

/* Specific Icon Colors */
.dg-card .icon-blue { color: var(--primary); }
.dg-card .icon-green { color: #198754; }
.dg-card .icon-yellow { color: #ffc107; }

.dg-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--dark);
}

.dg-card p {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- MOBILE RESPONSIVE RULES --- */
@media (max-width: 992px) {
    /* Tablet: 2 columns */
    .dg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Mobile: 1 column, centered */
    .dg-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* 4. Info Section (Why Use Doc Gen) */
.dg-info-section { 
    background: #fff; 
}

.dg-info-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
}

.dg-info-text h2 { 
    color: var(--dark); 
    margin-bottom: 15px; 
}

.dg-info-text p { 
    color: #555; 
    margin-bottom: 25px; 
    line-height: 1.6; 
}

/* Custom Check List */
.dg-check-list { 
    list-style: none; 
    padding: 0; 
}
.dg-check-list li { 
    margin-bottom: 12px; 
    color: #333; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.dg-check-list li i { 
    color: #198754; /* Green checkmarks */
    font-size: 1.1rem; 
}

/* Dashed Template Card */
.dg-template-card { 
    text-align: center; 
    border: 2px dashed #cbd5e1; 
    padding: 40px 30px; 
    border-radius: 12px; 
    background: #f8fafc; 
    transition: 0.3s ease; 
}

/* Add a nice hover effect to the dashed box */
.dg-template-card:hover { 
    border-color: var(--primary); 
    background: #fff; 
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.08); 
}

.dg-template-card i { 
    font-size: 50px; 
    color: #94a3b8; 
    margin-bottom: 20px; 
    transition: 0.3s; 
}

.dg-template-card:hover i { 
    color: var(--primary); 
}

.dg-template-card h3 { 
    color: var(--dark); 
    margin-bottom: 10px; 
}

.dg-template-card p { 
    color: #666; 
    margin-bottom: 20px; 
    font-size: 0.95rem; 
}

/* Mobile Responsive Adjustments */
@media (max-width: 992px) {
    .dg-info-grid { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
}

/* 5. Download Modal Styles */
.dg-modal-overlay {
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.7); /* Dark background */
    z-index: 1000; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(3px);
}

.dg-modal-box {
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: modalSlideDown 0.3s ease-out forwards;
}

@keyframes modalSlideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.dg-close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #94a3b8;
    line-height: 1;
    transition: 0.3s;
}

.dg-close-modal:hover {
    color: #ef4444; /* Turns red on hover */
}

.dg-form-group {
    margin-bottom: 15px;
    text-align: left;
}

.dg-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #475569;
}

.dg-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 20px;
    text-align: left;
}

.dg-checkbox-group input {
    margin-top: 4px; /* Aligns checkbox with the text */
}

.dg-checkbox-group a {
    color: var(--primary);
    text-decoration: underline;
}

/* Explicit Form Styling for the Download Modal */
.dg-form-group input.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    color: #334155;
    background: #f8fafc;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Ensures padding doesn't push width outside the box */
}

.dg-form-group input.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.dg-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 2px;
}

.dg-modal-box .btn-primary {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* =========================================
   6. DOCUMENT FORM SIDEBAR STYLES
   ========================================= */

.dg-sidebar-wrapper {
    position: sticky;
    top: 100px;
}

/* Download Card */
.dg-download-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.dg-download-card h4 {
    margin-bottom: 15px;
    color: var(--dark);
}

.dg-download-card p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.dg-btn-download {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
}

.dg-btn-download i {
    margin-right: 10px;
}

.dg-download-card hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.dg-back-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: block;
    text-align: center;
    transition: 0.3s;
}

.dg-back-link:hover {
    color: var(--dark);
}

/* Call To Action (CTA) Card */
.dg-cta-card {
    background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%);
    padding: 35px 25px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.2);
}

.dg-cta-icon {
    font-size: 35px;
    margin-bottom: 15px;
    color: #ffc107;
}

.dg-cta-card h4 {
    color: #fff;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 1.3rem;
}

.dg-cta-card p {
    font-size: 0.95rem;
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.5;
}

.dg-cta-btn {
    background: #fff;
    color: var(--primary);
    width: 100%;
    padding: 12px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: 0.3s ease;
    display: inline-block;
}

.dg-cta-btn:hover {
    background: #f8f9fa;
    color: #000;
    transform: translateY(-2px);
}

/* =========================================
   7. DOCUMENT FORM LAYOUT & RESPONSIVE
   ========================================= */

/* Main 2-column layout */
.dg-layout-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start; /* Prevents sidebar from stretching vertically */
}

/* The white document preview paper */
.dg-preview-box {
    background: #fff;
    padding: 50px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    font-family: 'Times New Roman', Times, serif;
    color: #000;
    line-height: 1.6;
    overflow-x: auto; /* Ensures wide tables don't break the design */
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 991px) {
    /* Stack columns vertically on smaller screens */
    .dg-layout-wrapper {
        grid-template-columns: 1fr;
    }
    
    /* Remove sticky behavior on mobile so users can scroll past it */
    .dg-sidebar-wrapper {
        position: static;
        margin-top: 20px;
    }
}

/* Very small mobile screens */
@media (max-width: 576px) {
    .dg-preview-box {
        padding: 25px 15px; /* Less padding on small phones */
    }
}

/* =========================================
   THANK YOU PAGE STYLES
   ========================================= */
.thank-you-section {
    padding: 100px 15px; 
    text-align: center; 
    background: #fff;
}

.thank-you-content {
    max-width: 600px; 
    margin: 0 auto;
}

.ty-icon {
    font-size: 80px; 
    color: #198754; 
    margin-bottom: 30px;
}

.ty-heading {
    margin-bottom: 20px;
}

.ty-text {
    font-size: 1.2rem; 
    color: #666; 
    margin-bottom: 40px;
}

/* Button Container & Default State */
.ty-btn-container {
    display: flex; 
    justify-content: center; 
    gap: 20px;
}

.ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #222; 
    background-color: transparent;
    border: 2px solid var(--primary); 
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); 
    text-decoration: none;
    transition: all 0.3s ease-in-out; 
}

.ty-btn:hover {
    background-color: var(--primary); 
    color: #fff; 
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2); 
    transform: translateY(-3px); 
}

/* Tablet Responsiveness */
@media (max-width: 768px) {
    .thank-you-section {
        padding: 60px 15px; /* Shrinks the huge top/bottom gap on mobile */
    }
    .ty-icon {
        font-size: 60px; /* Shrinks the checkmark */
        margin-bottom: 20px;
    }
    .ty-heading {
        font-size: 2rem;
    }
    .ty-text {
        font-size: 1.05rem;
    }
}

/* Mobile Phone Responsiveness */
@media (max-width: 576px) {
    .ty-btn-container {
        flex-direction: column; /* Stacks the buttons perfectly */
        gap: 15px;
    }
    .ty-btn {
        width: 100%; /* Makes buttons stretch to fill the screen */
        min-width: 100%;
    }
}

/* =========================================
   CHECKOUT PAGE STYLES
   ========================================= */
.checkout-hero {
    padding: 100px 0 60px; 
    min-height: auto;
}

.cp-hero {
    background: linear-gradient(rgba(0,51,102,0.9), rgba(0,51,102,0.8)), url('https://placehold.co/1920x600/003366/ffffff?text=Secure+Payment');
    background-size: cover;
    background-position: center;
    padding: 100px 0 80px; /* Reduced from 150px/100px to match Services height */
    
}


.checkout-section {
    background: #fff;
}

.checkout-container {
    max-width: 900px;
}

.checkout-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Side-by-side on desktop */
    gap: 40px;
}

.checkout-card {
    padding: 30px; 
    border: 1px solid #eee; 
    border-radius: 12px;
}

.checkout-card h3 {
    margin-bottom: 20px;
}

/* Bank Table Styles */
.bank-details-table {
    width: 100%; 
    margin-bottom: 20px;
}

.bank-details-table td {
    padding: 10px 0; 
    color: #666;
}

.bank-details-table th {
    padding: 10px 0;
    font-weight: 700;
    text-align: right; /* Aligns data nicely to the right */
}

/* Alert Box */
.info-alert {
    background: #e7f1ff; 
    color: #0d6efd; 
    padding: 15px; 
    border-radius: 6px; 
    font-size: 0.9rem;
    line-height: 1.5;
}

/* QR Code Section */
.qr-card {
    text-align: center;
}

.qr-image {
    max-width: 250px; /* Prevents the QR code from becoming massively pixelated */
    width: 100%;
    border: 1px solid #ddd; 
    padding: 10px; 
    border-radius: 8px;
    margin: 0 auto;
}

.upi-id {
    margin-top: 20px; 
    font-weight: 600;
}

.accepted-payments {
    color: #666; 
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.whatsapp-confirm-btn {
    width: 100%;
    background: #25D366; /* WhatsApp Green */
    border: none;
    color: white;
}

.whatsapp-confirm-btn:hover {
    background: #1da851;
    color: white;
}

/* =========================================
   MOBILE RESPONSIVENESS (Crucial Fix)
   ========================================= */
@media (max-width: 768px) {
    .checkout-hero {
        padding: 80px 15px 40px; /* Smaller hero on mobile */
    }
    
    .checkout-grid {
        grid-template-columns: 1fr; /* Stacks the boxes vertically on mobile! */
        gap: 25px;
    }
    
    .checkout-card {
        padding: 20px; /* Slightly less padding on small screens */
    }
    
    .bank-details-table th {
        text-align: left; /* Changes alignment so text doesn't hit each other on small screens */
    }
}


/* =========================================
   BLOG CONTENT FORMATTING
   ========================================= */
.blog-formatted-content p {
    margin-bottom: 20px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    font-size: 1.15rem !important;
}

.blog-formatted-content h1,
.blog-formatted-content h2,
.blog-formatted-content h3,
.blog-formatted-content h4 {
    color: var(--primary) !important; 
    font-weight: 700 !important;
    margin-top: 40px !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
}

.blog-formatted-content ul {
    margin-bottom: 25px !important;
    padding-left: 30px !important;
    list-style-type: disc !important; /* Forces bullet points to show */
}

.blog-formatted-content ol {
    margin-bottom: 25px !important;
    padding-left: 30px !important;
    list-style-type: decimal !important; /* Forces numbers to show */
}

.blog-formatted-content li {
    margin-bottom: 10px !important;
    display: list-item !important;
}

.blog-formatted-content ul li::marker,
.blog-formatted-content ol li::marker {
    color: var(--primary) !important;
    font-weight: bold !important;
}

.blog-formatted-content a {
    color: #0d6efd !important;
    text-decoration: underline !important;
}

.blog-formatted-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
}

/* =========================================
   ACCESSIBILITY (Fixes Lighthouse Link Errors)
   ========================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}