/* ==========================================================================
   GUJARAT PRINTLINK - LOGO-ALIGNED PREMIUM LIGHT MODE DESIGN SYSTEM
   Theme: Creative Print Spectrum (Vibrant Cyan-Blue, Energetic Orange & Slate)
   ========================================================================== */

/* Google Fonts Import: Cormorant Garamond (Serif) & Outfit (Sans-Serif) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Logo-Aligned Color Palette */
    --primary: #0072ff;
    /* Corporate Royal Blue */
    --primary-light: #00c6ff;
    /* Cyan Accent (from logo '30' and 'Gujarat') */
    --primary-hover: #005ecf;

    --accent: #ff5e00;
    /* Energetic Orange (from logo 'Printlink' and dots) */
    --accent-light: #ff9900;
    --accent-hover: #e05300;

    /* Spectrum Gradients representing printing ink wheel */
    --blue-gradient: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    --orange-gradient: linear-gradient(135deg, #ff5e00 0%, #ff9900 100%);
    --logo-gradient: linear-gradient(135deg, #00c6ff 0%, #0072ff 45%, #ff5e00 100%);

    /* Backgrounds & Bases */
    --bg-light: #ffffff;
    /* Clean White */
    --bg-slate: #f8fafc;
    /* Slate 50 (Soft Ice Blue) */
    --bg-card: #ffffff;
    --bg-dark: #0f172a;
    /* Slate 900 (Corporate Dark) */

    /* Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Outfit', sans-serif;

    /* Text Colors */
    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #334155;
    /* Slate 700 */
    --text-muted: #64748b;
    /* Slate 500 */

    /* Borders & Outlines */
    --border-color: rgba(0, 114, 255, 0.08);
    --border-color-hover: rgba(255, 94, 0, 0.25);

    /* Shadows & Glows */
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.1);
    --shadow-glow: 0 0 25px rgba(0, 114, 255, 0.08);
    --shadow-glow-hover: 0 0 35px rgba(0, 114, 255, 0.18);

    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & GLOBAL BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-light);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Custom Selection */
::selection {
    background: var(--primary);
    color: var(--bg-light);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--text-primary);
}

/* Text Gradient Effect */
.text-gradient {
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-blue-gradient {
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-header h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 3px;
    background: var(--blue-gradient);
    border-radius: 10px;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 18px;
    margin-top: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   NAVIGATION BAR (FLOATING FROSTED GLASS CAPSULE)
   ========================================================================== */

#progressBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--logo-gradient);
    z-index: 10001;
}

.custom-navbar {
    padding: 24px 0;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 114, 255, 0.04);
    z-index: 10000;
}

.custom-navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 12px 0;
}

.nav-hidden {
    transform: translateY(-100%);
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 26px;
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
}

.logo-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-right: 12px;
    transition: var(--transition);
    filter: drop-shadow(0 2px 8px rgba(0, 114, 255, 0.15));
}

.navbar-brand span {
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-nav {
    gap: 32px;
}

.navbar-nav li {
    list-style: none;
    position: relative;
}

.navbar-nav>li>a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    font-family: var(--font-sans);
    transition: var(--transition);
    position: relative;
    padding: 8px 0;
}

.navbar-nav>li>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blue-gradient);
    border-radius: 4px;
    transition: var(--transition);
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a.active {
    color: var(--primary);
}

.navbar-nav>li>a.active::after,
.navbar-nav>li>a:hover::after {
    width: 100%;
}

/* Call To Action Get Quote Button */
/* =====================================
   FLOATING WHATSAPP BUTTON
===================================== */

.quote-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 28px;

    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff !important;

    border: none;
    border-radius: 50px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(37, 211, 102, .35),
        0 4px 12px rgba(0, 0, 0, .15);

    overflow: hidden;

    transition: all .35s ease;

    animation: whatsappFloat 3s ease-in-out infinite;
}

/* Hover */

.quote-btn:hover {

    transform: translateY(-6px) scale(1.05);

    box-shadow:
        0 18px 45px rgba(37, 211, 102, .45),
        0 8px 20px rgba(0, 0, 0, .2);

    color: #fff;

}

/* Click */

.quote-btn:active {

    transform: scale(.96);

}

/* Shine Animation */

.quote-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);

    transition: .7s;

}

.quote-btn:hover::before {

    left: 140%;

}

/* Floating Animation */

@keyframes whatsappFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

.quote-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50px;
    border: 2px solid rgba(37, 211, 102, .45);
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {

    0% {
        transform: scale(.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }

}

/* Mobile */

@media (max-width:768px) {

    .quote-btn {

        right: 18px;
        bottom: 18px;

        padding: 13px 22px;

        font-size: 14px;

    }

}

/* ==========================================================================
   MEGA MENU SYSTEM
   ========================================================================== */

.mega-menu {
    position: absolute;
    top: 150%;
    left: -200px;
    width: 820px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.mega-parent:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    top: 110%;
    transform: translateY(0);
}

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

.mega-grid h6 {
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mega-grid a {
    display: block;
    margin-bottom: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}

.mega-grid a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

/* ==========================================================================
   MOBILE MENU & OFFCANVAS
   ========================================================================== */

.navbar-toggler {
    color: var(--text-primary);
    font-size: 24px;
    padding: 4px;
}

.offcanvas {
    width: 320px;
    border-left: 1px solid var(--border-color) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.offcanvas-header {
    border-bottom: 1px solid rgba(0, 114, 255, 0.05);
    padding: 24px;
}

.offcanvas-header h4 {
    font-size: 22px;
    font-weight: 800;
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
}

.offcanvas-body a {
    color: var(--text-secondary);
    text-decoration: none;
    margin: 12px 0;
    font-size: 18px;
    font-weight: 500;
    transition: var(--transition);
}

.offcanvas-body a:hover {
    color: var(--primary);
    padding-left: 8px;
}

.offcanvas-body .btn-warning {
    background: var(--logo-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: var(--transition) !important;
}

.offcanvas-body .btn-warning:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-glow-hover) !important;
}

.btn-close {
    filter: none;
}

/* ==========================================================================
   STATS SECTION (SLATE GRAY WITH BLUE COUNTERS)
   ========================================================================== */

#stats {
    background: var(--bg-slate);
    border-top: 1px solid rgba(0, 114, 255, 0.04);
    border-bottom: 1px solid rgba(0, 114, 255, 0.04);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.stat-card {
    text-align: center;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(40px);
}

.stat-card.show {
    opacity: 1;
    transform: translateY(0);
}

.stat-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-glow-hover);
}

.stat-card h2 {
    font-size: 52px;
    font-weight: 800;
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.stat-card p {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}

/* ==========================================================================
   PRODUCTS & SERVICES (PILL FILTERS & HIGH-FIDELITY GRID)
   ========================================================================== */

#products {
    background: var(--bg-light);
}

#categoryFilters {
    text-align: center;
    margin-bottom: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.filter-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-slate);
    color: var(--text-secondary);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
    cursor: pointer;
    font-family: var(--font-sans);
}

.filter-btn:hover {
    background: rgba(0, 114, 255, 0.05);
    color: var(--primary);
    border-color: var(--primary);
}

.filter-btn.active {
    background: var(--blue-gradient);
    color: #ffffff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.2);
}

/* Product Card Light Theme */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-glow-hover);
}

.product-image-container {
    overflow: hidden;
    position: relative;
    height: 250px;
    background: #f1f5f9;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-image {
    transform: scale(1.08);
}

.product-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-category {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0, 114, 255, 0.05);
    border: 1px solid rgba(0, 114, 255, 0.15);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-content h4 {
    margin-top: 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.product-content p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.5;
}

.product-buttons {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.product-buttons .btn-dark {
    background: var(--bg-slate);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    transition: var(--transition);
}

.product-buttons .btn-dark:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: #ffffff;
}

.product-buttons .btn-gold {
    flex: 1;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 50px;
    text-align: center;
    background: var(--orange-gradient);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 94, 0, 0.2);
}

.product-buttons .btn-gold:hover {
    background: var(--logo-gradient);
    box-shadow: 0 6px 16px rgba(255, 94, 0, 0.35);
}

.products-count-alert {
    background: var(--bg-slate);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
}

/* ==========================================================================
   ABOUT SECTION (EDITORIAL ASYMMETRY)
   ========================================================================== */

#about {
    background: var(--bg-slate);
    padding: 120px 0;
    border-top: 1px solid rgba(0, 114, 255, 0.04);
}

.about-tag {
    display: inline-block;
    background: rgba(0, 114, 255, 0.05);
    border: 1px solid rgba(0, 114, 255, 0.15);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 20px;
}

.about-image {
    position: relative;
    padding-left: 20px;
}

/* Overlaying brand border effect */
.about-image::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary);
    border-radius: 20px;
    z-index: 1;
    pointer-events: none;
    transition: var(--transition);
}

.about-image img {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.about-image:hover::before {
    transform: translate(8px, 8px);
    border-color: var(--accent);
}

.about-list {
    list-style: none;
    padding: 0;
}

.about-list li {
    margin-bottom: 14px;
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
    padding-left: 28px;
    font-size: 15px;
}

.about-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

/* Luxury Quote Box */
.about-quote {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.about-quote h5 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
}

.about-quote p {
    margin-top: 15px;
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* ==========================================================================
   CONTACT SECTION (LOGO SPECTRUM BANNER)
   ========================================================================== */

#contact {
    background: var(--logo-gradient);
    text-align: center;
    padding: 100px 0;
    color: #ffffff;
}

#contact h2 {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
}

#contact p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto 35px;
}

#contact .btn-gold {
    background: #ffffff;
    color: var(--primary) !important;
    padding: 16px 40px;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}

#contact .btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    color: var(--accent) !important;
}

/* ==========================================================================
   MODAL DIALOGS (WHITE FROSTED GLASS THEME)
   ========================================================================== */

.modal-backdrop {
    background-color: #0f172a !important;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    background: var(--bg-slate);
    border-bottom: 1px solid rgba(0, 114, 255, 0.05);
    padding: 24px 30px;
}

.modal-header h4 {
    font-size: 24px;
    font-weight: 800;
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-body {
    padding: 30px;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-body p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.modal-body h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 25px;
    margin-bottom: 15px;
}

.modal-body ul {
    list-style: none;
    padding-left: 0;
}

.modal-body li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.modal-body li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.modal-body hr {
    border-top: 1px solid rgba(0, 114, 255, 0.08);
    margin: 25px 0;
}

.modal-body .btn-dark {
    background: var(--bg-slate);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 50px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.modal-body .btn-dark:hover {
    background: var(--text-primary);
    color: #ffffff;
}

.modal-body .btn-gold {
    padding: 12px 28px;
    font-size: 14px;
    border-radius: 50px;
    background: var(--orange-gradient);
}

/* ==========================================================================
   FOOTER SECTION (CLEAN DARK SLATE)
   ========================================================================== */

.footer {
    background: #0b0f19;
    color: rgba(255, 255, 255, 0.7);
    padding: 90px 0 30px;
    border-top: 1px solid rgba(0, 114, 255, 0.05);
}

.footer-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 2px 8px rgba(0, 114, 255, 0.3));
}

.footer-brand h4 {
    font-size: 26px;
    font-weight: 800;
    background: var(--blue-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.7;
    margin-top: 15px;
}

.footer-title {
    color: #ffffff;
    margin-bottom: 22px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--primary-light);
    transform: translateX(4px);
    display: inline-block;
}

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

.footer-contact li {
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-contact a:hover {
    color: var(--primary-light);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 40px 0 25px;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

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

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-top: 10px;
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 9999;
}

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid rgba(0, 114, 255, 0.04);
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background: rgba(0, 114, 255, 0.05);
}

.search-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.search-category {
    color: var(--accent);
    font-size: 12px;
    background: rgba(255, 94, 0, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 94, 0, 0.1);
    font-weight: 600;
    text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVE DESIGN OVERRIDES
   ========================================================================== */

@media (max-width: 1200px) {
    #hero h1 {
        font-size: 52px;
    }

    .mega-menu {
        width: 720px;
        left: -150px;
    }
}

@media (max-width: 992px) {
    section {
        padding: 80px 0;
    }

    .section-header h2 {
        font-size: 38px;
    }

    #hero {
        text-align: center;
        padding-top: 100px;
    }

    #hero h1 {
        font-size: 46px;
    }

    #hero p {
        margin: 24px auto 0;
    }

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

    .hero-search {
        margin: 0 auto;
    }

    .hero-image {
        margin-top: 50px;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-collapse {
        display: none;
    }

    .mega-menu {
        display: none !important;
    }

    .about-title {
        font-size: 36px;
        text-align: center;
    }

    .about-tag {
        display: block;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }

    .about-image {
        max-width: 450px;
        margin: 0 auto 40px;
        padding-left: 0;
    }

    .about-image::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .section-header h2 {
        font-size: 32px;
    }

    #hero h1 {
        font-size: 36px;
    }

    #contact h2 {
        font-size: 38px;
    }

    #contact p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    #hero h1 {
        font-size: 30px;
    }

    .stat-card h2 {
        font-size: 40px;
    }

    .filter-btn {
        padding: 10px 18px;
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .btn-gold,
    .btn-dark-custom {
        text-align: center;
    }

    .product-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .product-buttons .btn-gold,
    .product-buttons .btn-dark {
        width: 100%;
        text-align: center;
    }
}

/*==========================================================================
    HERO SECTION
    Gujarat Printlink
==========================================================================*/

#hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 120px 0 80px;

    overflow: visible;

    isolation: isolate;

    background: var(--bg-light);

    z-index: 2;

}

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

#hero .container {

    position: relative;

    z-index: 20;

}

.hero-row {

    align-items: center;

    min-height: calc(100vh - 120px);

}

/*==========================================================================
    HERO BACKGROUND SLIDER
==========================================================================*/

.hero-slider {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 0;



}

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    transition: opacity 2s ease-in-out;

    transform: scale(1.05);

    will-change: transform, opacity;

}

/* Active */

.hero-slide.active {

    opacity: 1;

}

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

.hero-slide:nth-child(1) {

    background-image: url("../images/hero/hero 1.jpeg");

}

.hero-slide:nth-child(2) {

    background-image: url("../images/hero/hero 2.jpeg");

}

.hero-slide:nth-child(3) {

    background-image: url("../images/hero/hero 3.jpeg");

}

.hero-slide:nth-child(4) {

    background-image: url("../images/hero/hero 4.jpeg");

}

.hero-slide:nth-child(5) {

    background-image: url("../images/hero/hero 5.jpeg");

}

.hero-slide:nth-child(6) {

    background-image: url("../images/hero/hero 6.jpeg");

}

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

#hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(90deg,

            rgba(255, 255, 255, .96) 0%,

            rgba(255, 255, 255, .90) 20%,

            rgba(255, 255, 255, .75) 45%,

            rgba(255, 255, 255, .40) 70%,

            rgba(255, 255, 255, .15) 100%);

}

/*==========================================================================
    AMBIENT LIGHTING
==========================================================================*/

#hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        radial-gradient(circle at top left,

            rgba(0, 114, 255, .08),

            transparent 40%),

        radial-gradient(circle at bottom right,

            rgba(255, 94, 0, .08),

            transparent 45%);

}

/*==========================================================================
    HERO CONTENT WRAPPER
==========================================================================*/

.hero-content {

    position: relative;

    z-index: 30;

    max-width: 640px;

}

.hero-image {

    position: relative;

    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: center;

}

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

.hero-image-wrapper {

    position: relative;

    width: 100%;

    max-width: 720px;

}

/*==========================================================================
    BACKGROUND ANIMATION
==========================================================================*/

.hero-slide {

    animation: heroZoom 18s linear infinite;

}

@keyframes heroZoom {

    0% {

        transform: scale(1.05);

    }

    50% {

        transform: scale(1.10) translateX(-1%);

    }

    100% {

        transform: scale(1.15) translateX(1%);

    }

}

/*==========================================================================
    CONTENT ANIMATION
==========================================================================*/

.fade-up {

    opacity: 0;

    transform: translateY(40px);

    animation: fadeUp .9s ease forwards;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==========================================================================
    DELAYS
==========================================================================*/

.delay-1 {

    animation-delay: .15s;

}

.delay-2 {

    animation-delay: .3s;

}

.delay-3 {

    animation-delay: .45s;

}

.delay-4 {

    animation-delay: .6s;

}

.delay-5 {

    animation-delay: .75s;

}

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

.hero-content {

    position: relative;

    z-index: 30;

    max-width: 650px;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

}

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

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    margin-bottom: 30px;

    border-radius: 999px;

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

    border: 1px solid rgba(0, 114, 255, .18);

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 20px rgba(0, 114, 255, .08);

}

.hero-badge i {

    font-size: 14px;

    color: var(--accent);

}

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

.hero-content h1 {

    margin: 0;

    font-size: clamp(3rem, 6vw, 5.4rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.03em;

    color: var(--text-primary);

}

.hero-content h1 span {

    display: inline-block;

}

/*==========================================================================
    GRADIENT TEXT
==========================================================================*/

.gradient-text {

    background: var(--logo-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}

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

.hero-content p {

    margin-top: 28px;

    margin-bottom: 0;

    max-width: 580px;

    font-size: 19px;

    line-height: 1.9;

    font-weight: 400;

    color: var(--text-secondary);

}

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

.hero-tagline {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding-left: 18px;

    border-left: 4px solid var(--accent);

    font-size: 17px;

    font-style: italic;

    font-weight: 600;

    color: var(--accent);

}

.hero-tagline::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--accent);

    flex-shrink: 0;

}

/*==========================================================================
    TRUST BADGES
==========================================================================*/

.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 40px;

}

.hero-trust-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 50px;

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

    border: 1px solid rgba(15, 23, 42, .08);

    backdrop-filter: blur(10px);

    box-shadow:
        0 10px 25px rgba(15, 23, 42, .06);

    transition: .35s;

}

.hero-trust-item:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 35px rgba(15, 23, 42, .12);

}

.hero-trust-item i {

    color: var(--primary);

    font-size: 18px;

}

.hero-trust-item span {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-primary);

}

/*==========================================================================
    HERO TEXT ANIMATIONS
==========================================================================*/

.hero-content>* {

    opacity: 0;

    transform: translateY(40px);

    animation: fadeUp .8s ease forwards;

}

.hero-content>*:nth-child(1) {

    animation-delay: .10s;

}

.hero-content>*:nth-child(2) {

    animation-delay: .25s;

}

.hero-content>*:nth-child(3) {

    animation-delay: .40s;

}

.hero-content>*:nth-child(4) {

    animation-delay: .55s;

}

.hero-content>*:nth-child(5) {

    animation-delay: .70s;

}

.hero-content>*:nth-child(6) {

    animation-delay: .85s;

}

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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-top: 40px;

    margin-bottom: 45px;

}

/*==========================================================================
    PRIMARY BUTTON
==========================================================================*/

.btn-gold {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 190px;

    height: 58px;

    padding: 0 34px;

    border: none;

    border-radius: 60px;

    background: var(--logo-gradient);

    color: #ffffff !important;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .02em;

    text-decoration: none;

    overflow: hidden;

    transition: all .35s ease;

    box-shadow:

        0 12px 35px rgba(0, 114, 255, .22);

}

.btn-gold i {

    font-size: 15px;

}

.btn-gold::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .35),

            transparent);

    transform: translateX(-120%);

    transition: transform .8s;

}

.btn-gold:hover {

    transform:

        translateY(-4px);

    box-shadow:

        0 22px 50px rgba(0, 114, 255, .30);

}

.btn-gold:hover::before {

    transform: translateX(120%);

}

/*==========================================================================
    SECONDARY BUTTON
==========================================================================*/

.btn-dark-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 180px;

    height: 58px;

    padding: 0 34px;

    border-radius: 60px;

    border: 1px solid rgba(15, 23, 42, .08);

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

    backdrop-filter: blur(18px);

    color: var(--text-primary) !important;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

    transition: .35s;

    box-shadow:

        0 10px 28px rgba(15, 23, 42, .06);

}

.btn-dark-custom:hover {

    transform: translateY(-4px);

    background: #ffffff;

    border-color: var(--primary);

    color: var(--primary) !important;

    box-shadow:

        0 18px 42px rgba(0, 114, 255, .16);

}

.btn-dark-custom i {

    transition: .35s;

}

.btn-dark-custom:hover i {

    transform: translateX(4px);

}

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

.hero-search {

    position: relative;

    width: 100%;

    max-width: 620px;

    margin-top: 10px;

}

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

.hero-search input {

    width: 100%;

    height: 66px;

    padding:

        0 70px 0 28px;

    border-radius: 60px;

    border: 1px solid rgba(15, 23, 42, .08);

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

    backdrop-filter: blur(22px);

    font-size: 16px;

    color: var(--text-primary);

    transition: .35s;

    box-shadow:

        0 15px 35px rgba(15, 23, 42, .08);

}

.hero-search input:focus {

    outline: none;

    border-color: var(--primary);

    background: #ffffff;

    box-shadow:

        0 20px 50px rgba(0, 114, 255, .16);

}

.hero-search input::placeholder {

    color: var(--text-muted);

}

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

.hero-search i {

    position: absolute;

    right: 28px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    color: var(--primary);

    pointer-events: none;

}

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

.search-suggestions {

    position: absolute;

    top: 74px;

    left: 0;

    width: 100%;

    max-height: 380px;

    overflow-y: auto;

    display: none;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(15, 23, 42, .06);

    box-shadow:

        0 20px 55px rgba(15, 23, 42, .14);

    z-index: 200;

}

.search-suggestions.show {

    display: block;

}

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

.search-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 22px;

    cursor: pointer;

    transition: .3s;

}

.search-item:hover {

    background: #f8fbff;

}

.search-item img {

    width: 55px;

    height: 55px;

    border-radius: 12px;

    object-fit: cover;

}

.search-item-content {

    flex: 1;

}

.search-item-title {

    font-size: 15px;

    font-weight: 700;

    color: var(--text-primary);

}

.search-item-category {

    margin-top: 3px;

    font-size: 13px;

    color: var(--text-muted);

}

/*==========================================================================
    CUSTOM SCROLLBAR
==========================================================================*/

.search-suggestions::-webkit-scrollbar {

    width: 7px;

}

.search-suggestions::-webkit-scrollbar-thumb {

    background: rgba(0, 114, 255, .18);

    border-radius: 20px;

}

.search-suggestions::-webkit-scrollbar-track {

    background: transparent;

}

/*==========================================================================
    BUTTON ENTRANCE
==========================================================================*/

.hero-buttons {

    animation: fadeUp .8s ease .55s forwards;

    opacity: 0;

}

.hero-search {

    animation: fadeUp .8s ease .75s forwards;

    opacity: 0;

}

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

.hero-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    z-index: 25;

}

/*==========================================================================
    HERO IMAGE CARD
==========================================================================*/

.hero-image-card {

    position: relative;

    width: 100%;

    max-width: 700px;

    border-radius: 30px;

    overflow: hidden;

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

    backdrop-filter: blur(18px);

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

    box-shadow:

        0 25px 80px rgba(15, 23, 42, .18),

        0 10px 30px rgba(0, 114, 255, .10);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

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

.hero-image-card img {

    width: 100%;

    display: block;

    object-fit: cover;

    transition:

        transform .8s ease,

        filter .8s ease;

}

/*==========================================================================
    HOVER
==========================================================================*/

.hero-image-card:hover {

    transform:

        translateY(-8px) scale(1.01);

    box-shadow:

        0 40px 100px rgba(15, 23, 42, .22),

        0 15px 45px rgba(0, 114, 255, .18);

}

.hero-image-card:hover img {

    transform: scale(1.05);

}

/*==========================================================================
    GLASS BORDER
==========================================================================*/

.hero-image-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, .65),

            rgba(255, 255, 255, .15));

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

}

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

.hero-image-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -140%;

    width: 80%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .35),

            transparent);

    transition: left 1s ease;

}

.hero-image-card:hover::after {

    left: 150%;

}

/*==========================================================================
    BACKGROUND GLOW
==========================================================================*/

.hero-image-glow {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    pointer-events: none;

}

.hero-image-glow::before {

    content: "";

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(0, 114, 255, .18),

            transparent 70%);

    filter: blur(60px);

    animation: glowPulse 6s ease infinite;

}

@keyframes glowPulse {

    0% {

        transform: scale(1);

        opacity: .6;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

    100% {

        transform: scale(1);

        opacity: .6;

    }

}

/*==========================================================================
    FLOATING BADGE
==========================================================================*/

.hero-floating-card {

    position: absolute;

    padding: 14px 20px;

    border-radius: 18px;

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

    backdrop-filter: blur(18px);

    box-shadow:

        0 15px 35px rgba(15, 23, 42, .12);

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

    display: flex;

    align-items: center;

    gap: 12px;

    animation: floatBadge 5s ease-in-out infinite;

}

.hero-floating-card i {

    font-size: 20px;

    color: var(--primary);

}

.hero-floating-card h6 {

    margin: 0;

    font-size: 15px;

    font-weight: 700;

    color: var(--text-primary);

}

.hero-floating-card p {

    margin: 2px 0 0;

    font-size: 13px;

    color: var(--text-muted);

}

/*==========================================================================
    POSITIONING
==========================================================================*/

.hero-floating-card.top {

    top: -30px;

    left: -40px;

}

.hero-floating-card.bottom {

    bottom: -30px;

    right: -40px;

}

/*==========================================================================
    FLOAT
==========================================================================*/

@keyframes floatBadge {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================================================================
    DECORATIVE CIRCLE
==========================================================================*/

.hero-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}

.hero-circle.one {

    width: 110px;

    height: 110px;

    top: 5%;

    right: -20px;

    background:

        radial-gradient(circle,

            rgba(0, 114, 255, .12),

            transparent);

}

.hero-circle.two {

    width: 170px;

    height: 170px;

    bottom: -40px;

    left: -40px;

    background:

        radial-gradient(circle,

            rgba(255, 94, 0, .10),

            transparent);

}

/*==========================================================================
    DOT GRID
==========================================================================*/

.hero-dots {

    position: absolute;

    top: 50px;

    right: -60px;

    width: 150px;

    height: 150px;

    background-image:

        radial-gradient(rgba(0, 114, 255, .22) 1.5px,

            transparent 1.5px);

    background-size: 18px 18px;

    opacity: .6;

}

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

.hero-image {

    opacity: 0;

    transform: translateX(70px);

    animation:

        heroImageReveal 1s ease .5s forwards;

}

@keyframes heroImageReveal {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*==========================================================================
    HERO ENTRANCE ANIMATIONS
==========================================================================*/

.hero-content>* {

    opacity: 0;

    transform: translateY(40px);

    animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) forwards;

}

.hero-content>*:nth-child(1) {

    animation-delay: .10s;

}

.hero-content>*:nth-child(2) {

    animation-delay: .25s;

}

.hero-content>*:nth-child(3) {

    animation-delay: .40s;

}

.hero-content>*:nth-child(4) {

    animation-delay: .55s;

}

.hero-content>*:nth-child(5) {

    animation-delay: .70s;

}

.hero-content>*:nth-child(6) {

    animation-delay: .85s;

}

@keyframes heroFadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==========================================================================
    HERO IMAGE REVEAL
==========================================================================*/

.hero-image {

    opacity: 0;

    transform: translateX(60px);

    animation:

        heroImageReveal 1.2s cubic-bezier(.16, 1, .3, 1) .4s forwards;

}

@keyframes heroImageReveal {

    from {

        opacity: 0;

        transform:

            translateX(60px) scale(.96);

    }

    to {

        opacity: 1;

        transform:

            translateX(0) scale(1);

    }

}

/*==========================================================================
    HERO IMAGE HOVER
==========================================================================*/

.hero-image-card {

    transform-style: preserve-3d;

    perspective: 1200px;

}

.hero-image-card:hover {

    transform:

        translateY(-10px) rotateX(2deg) rotateY(-2deg) scale(1.015);

}

/*==========================================================================
    BUTTON HOVER EFFECT
==========================================================================*/

.hero-buttons a {

    position: relative;

    overflow: hidden;

}

.hero-buttons a::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .28),

            transparent);

    transition: left .8s ease;

}

.hero-buttons a:hover::after {

    left: 120%;

}

/*==========================================================================
    SCROLL INDICATOR
==========================================================================*/

.scroll-indicator {

    position: absolute;

    left: 50%;

    bottom: 28px;

    transform: translateX(-50%);

    z-index: 50;

    opacity: .8;

}

.scroll-indicator span {

    display: block;

    width: 30px;

    height: 52px;

    border-radius: 40px;

    border: 2px solid rgba(15, 23, 42, .20);

    position: relative;

}

.scroll-indicator span::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 9px;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--primary);

    transform: translateX(-50%);

    animation: scrollWheel 2s infinite;

}

@keyframes scrollWheel {

    0% {

        opacity: 1;

        transform:

            translate(-50%, 0);

    }

    100% {

        opacity: 0;

        transform:

            translate(-50%, 18px);

    }

}

/*==========================================================================
    FLOATING GLOW
==========================================================================*/

.hero-image-glow {

    animation:

        glowFloat 8s ease-in-out infinite;

}

@keyframes glowFloat {

    0% {

        transform:

            translateY(0) scale(1);

    }

    50% {

        transform:

            translateY(-12px) scale(1.06);

    }

    100% {

        transform:

            translateY(0) scale(1);

    }

}

/*==========================================================================
    FLOATING BADGES
==========================================================================*/

.hero-floating-card {

    animation:

        floatingCard 6s ease-in-out infinite;

}

.hero-floating-card.bottom {

    animation-delay: 2s;

}

@keyframes floatingCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================================================================
    BACKGROUND PARTICLE EFFECT
==========================================================================*/

.hero-particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;

}

.hero-particles span {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: rgba(0, 114, 255, .18);

    animation:

        particleMove 16s linear infinite;

}

.hero-particles span:nth-child(odd) {

    background: rgba(255, 94, 0, .18);

}

@keyframes particleMove {

    from {

        transform:

            translateY(120vh) scale(.4);

        opacity: 0;

    }

    15% {

        opacity: .7;

    }

    85% {

        opacity: .7;

    }

    to {

        transform:

            translateY(-120px) scale(1);

        opacity: 0;

    }

}

/*==========================================================================
    IMAGE SHADOW PULSE
==========================================================================*/

.hero-image-card {

    animation:

        heroShadow 6s ease-in-out infinite;

}

@keyframes heroShadow {

    0% {

        box-shadow:

            0 25px 70px rgba(15, 23, 42, .16);

    }

    50% {

        box-shadow:

            0 35px 90px rgba(0, 114, 255, .18);

    }

    100% {

        box-shadow:

            0 25px 70px rgba(15, 23, 42, .16);

    }

}

/*==========================================================================
    ACCESSIBILITY
==========================================================================*/

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

    * {

        /* animation: none !important;
         */
        animation: fadeIn 0.001ms ease forwards;
        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/*==========================================================================
    LARGE DESKTOP
    1600px - 1800px
==========================================================================*/

@media (max-width:3840px) {

    #hero {
        min-height: 100dvh;
        min-height: 100vh;
    }

    .hero-row {
        min-height: calc(100dvh - 120px);
    }

    .hero-content {

        max-width: 620px;

    }

    .hero-image-card {

        max-width: 680px;

    }

}

/*==========================================================================
    DESKTOP
    1400px
==========================================================================*/

@media (max-width:1400px) {

    #hero {
        min-height: 100dvh;
        min-height: 100vh;
    }

    .hero-row {
        min-height: calc(100dvh - 120px);
    }

    .hero-content {

        max-width: 580px;

    }

    .hero-content h1 {

        font-size: clamp(3.2rem, 5vw, 4.8rem);

    }

    .hero-content p {

        font-size: 18px;

        max-width: 520px;

    }

    .hero-image-card {

        max-width: 620px;

    }

}

/*==========================================================================
    LAPTOP
    1200px
==========================================================================*/

@media (max-width:1200px) {

    #hero {
        min-height: 100svh;
        min-height: 100dvh;
        min-height: 100vh;
    }

    .hero-row {
        min-height: calc(100dvh - 120px);
    }

    .hero-content {

        max-width: 520px;

    }

    .hero-content h1 {

        font-size: 3.5rem;

    }

    .hero-content p {

        font-size: 17px;

    }

    .hero-buttons {

        gap: 14px;

    }

    .btn-gold,

    .btn-dark-custom {

        min-width: 170px;

        height: 56px;

    }

    .hero-search {

        max-width: 100%;

    }

    .hero-image-card {

        max-width: 560px;

    }

}

/*==========================================================================
    SMALL LAPTOP
    992px
==========================================================================*/

@media (max-width:992px) {

    #hero {

        min-height: auto;

        padding: 120px 0 90px;

    }

    .hero-row {

        flex-direction: column;

        text-align: center;

        row-gap: 60px;

    }

    .hero-content {

        max-width: 100%;

        align-items: center;

    }

    .hero-content p {

        max-width: 650px;

        margin-left: auto;

        margin-right: auto;

    }

    .hero-tagline {

        justify-content: center;

        border-left: none;

        padding-left: 0;

    }

    .hero-tagline::before {

        display: none;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-search {

        max-width: 620px;

        margin: auto;

    }

    .hero-image {

        margin-top: 10px;

    }

    .hero-image-card {

        max-width: 650px;

    }

    .hero-floating-card.top {

        top: -20px;

        left: 0;

    }

    .hero-floating-card.bottom {

        right: 0;

        bottom: -20px;

    }

}

/*==========================================================================
    TABLET
    768px
==========================================================================*/

@media (max-width:768px) {

    #hero {

        padding: 110px 0 80px;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-content h1 {

        font-size: 3rem;

        line-height: 1.15;

    }

    .hero-content p {

        font-size: 16px;

        line-height: 1.8;

    }

    .hero-buttons {

        gap: 12px;

    }

    .btn-gold,

    .btn-dark-custom {

        min-width: 165px;

        height: 54px;

        font-size: 15px;

    }

    .hero-search input {

        height: 58px;

    }

    .hero-image-card {

        max-width: 100%;

    }

    .hero-floating-card {

        transform: scale(.9);

    }

}

/*==========================================================================
    MOBILE LARGE
    576px
==========================================================================*/

@media (max-width:576px) {

    #hero {

        min-height: auto;

        padding: 100px 0 70px;

    }

    .hero-row {

        flex-direction: column-reverse;

        row-gap: 45px;

        text-align: center;

    }

    .hero-content {

        max-width: 100%;

        align-items: center;

    }

    .hero-badge {

        padding: 8px 18px;

        font-size: 11px;

        letter-spacing: .08em;

        margin-bottom: 20px;

    }

    .hero-content h1 {

        font-size: 2.6rem;

        line-height: 1.15;

        margin-bottom: 18px;

    }

    .hero-content p {

        font-size: 15px;

        line-height: 1.8;

        max-width: 100%;

        margin: 20px auto 0;

    }

    .hero-tagline {

        justify-content: center;

        text-align: center;

        margin-top: 24px;

        font-size: 15px;

        padding-left: 0;

        border: none;

    }

    .hero-tagline::before {

        display: none;

    }

    .hero-buttons {

        width: 100%;

        justify-content: center;

        gap: 14px;

        margin: 35px 0;

    }

    .btn-gold,

    .btn-dark-custom {

        width: 100%;

        max-width: 280px;

        height: 54px;

        font-size: 15px;

    }

    .hero-search {

        width: 100%;

        max-width: 100%;

    }

    .hero-search input {

        height: 56px;

        padding: 0 60px 0 22px;

        font-size: 15px;

    }

    .hero-search i {

        right: 22px;

    }

    .hero-trust {

        justify-content: center;

        gap: 12px;

        margin-top: 30px;

    }

    .hero-trust-item {

        width: 100%;

        justify-content: center;

        padding: 12px 16px;

    }

    .hero-image {

        width: 100%;

        margin-top: 0;

    }

    .hero-image-card {

        max-width: 100%;

        border-radius: 22px;

    }

    .hero-image-card img {

        border-radius: 22px;

    }

    .hero-floating-card {

        display: none;

    }

    .hero-circle,

    .hero-dots {

        display: none;

    }

    .scroll-indicator {

        display: none;

    }

}

/*==========================================================================
    MOBILE SMALL
    480px
==========================================================================*/

@media (max-width:480px) {

    #hero {

        padding: 90px 0 60px;

    }

    .hero-content h1 {

        font-size: 2.3rem;

    }

    .hero-content p {

        font-size: 14px;

    }

    .hero-badge {

        font-size: 10px;

    }

    .hero-buttons {

        gap: 12px;

    }

    .btn-gold,

    .btn-dark-custom {

        max-width: 100%;

        height: 52px;

        padding: 0 20px;

    }

    .hero-search input {

        height: 54px;

        font-size: 14px;

    }

}

/*==========================================================================
    EXTRA SMALL DEVICES
    375px
==========================================================================*/

@media (max-width:375px) {

    .hero-content h1 {

        font-size: 2rem;

    }

    .hero-content p {

        font-size: 13px;

        line-height: 1.7;

    }

    .hero-badge {

        padding: 7px 14px;

    }

    .btn-gold,

    .btn-dark-custom {

        height: 50px;

        font-size: 14px;

    }

    .hero-search input {

        height: 52px;

        padding-left: 18px;

    }

}

/*==========================================================================
    EXTRA EXTRA SMALL
    320px
==========================================================================*/

@media (max-width:320px) {

    #hero {

        padding: 85px 0 55px;

    }

    .hero-content h1 {

        font-size: 1.85rem;

    }

    .hero-content p {

        font-size: 12.5px;

    }

    .hero-badge {

        font-size: 9px;

    }

    .btn-gold,

    .btn-dark-custom {

        font-size: 13px;

        height: 48px;

    }

}

/*==========================================================================
    TOUCH DEVICES
==========================================================================*/

@media (hover:none) {

    .hero-image-card:hover,

    .btn-gold:hover,

    .btn-dark-custom:hover {

        transform: none;

        box-shadow: inherit;

    }

}

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

/* Optimize Rendering */

.hero-slide,
.hero-image-card,
.hero-image-card img,
.hero-buttons a,
.hero-search input {

    will-change: transform, opacity;

    backface-visibility: hidden;

    transform: translateZ(0);

}

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

.hero-image img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

    image-rendering: auto;


}

/*==========================================================================
    FOCUS STATES
==========================================================================*/

.hero-buttons a:focus-visible,
.hero-search input:focus-visible {

    outline: 3px solid rgba(0, 114, 255, .25);

    outline-offset: 4px;

}

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

#hero ::selection {

    background: rgba(0, 114, 255, .15);

    color: var(--text-primary);

}

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

.hero-search input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;

    -webkit-text-fill-color: var(--text-primary);

}

/*==========================================================================
    SCROLL MARGIN
==========================================================================*/

#hero {

    scroll-margin-top: 90px;

}

/*==========================================================================
    SMOOTH IMAGE LOADING
==========================================================================*/

.hero-image img {

    opacity: 0;

    animation: imageLoaded .8s ease forwards;

}

@keyframes imageLoaded {

    to {

        opacity: 1;

    }

}

/*==========================================================================
    HERO SLIDER IMPROVEMENT
==========================================================================*/

.hero-slide {

    transition:

        opacity 2.5s ease,

        transform 18s linear;

}

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

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

    * {

        /* animation: none !important; */
        animation: fadeIn 0.001ms ease forwards;
        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/*==========================================================================
    HIGH RESOLUTION DISPLAY
==========================================================================*/

@media (min-width:1920px) {

    .hero-content {

        max-width: 720px;

    }

    .hero-content h1 {

        font-size: 5.6rem;

    }

    .hero-image-card {

        max-width: 780px;

    }

}

/*==========================================================================
    ULTRA WIDE DISPLAY
==========================================================================*/

@media (min-width:2400px) {

    #hero .container {

        max-width: 1800px;

    }

}

/*==========================================================================
    PRINT MODE
==========================================================================*/

@media print {

    .hero-slider,
    .hero-particles,
    .scroll-indicator,
    .hero-circle,
    .hero-dots,
    .hero-floating-card {

        display: none !important;

    }

    #hero {

        min-height: auto;

        padding: 30px 0;

    }

}

/*==========================================================================
    ACCESSIBILITY
==========================================================================*/

.hero-search input {

    caret-color: var(--primary);

}

.hero-buttons a {

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}

/*==========================================================================
    HOVER SUPPORT
==========================================================================*/

@media (hover:hover) {

    .hero-image-card:hover img {

        filter: brightness(1.03);

    }

}

/*==========================================================================
    FINAL POLISH
==========================================================================*/

.hero-content {

    text-wrap: balance;

}

.hero-content h1 {

    text-wrap: balance;

}

.hero-content p {

    text-wrap: pretty;

}

/* ===========================================================
   GUJARAT PRINTLINK
   PREMIUM CLIENT SECTION
===========================================================*/

:root {

    --client-radius: 22px;

    --client-border: #e8eef8;

    --client-shadow:

        0 15px 45px rgba(18, 38, 63, .06);

    --client-blue: #1b8cff;

    --client-dark: #12203a;

}

/* =========================================================== */

.clients-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:

        radial-gradient(circle at left top, #d9ebff 0%, transparent 32%),

        radial-gradient(circle at right bottom, #edf7ff 0%, transparent 40%),

        linear-gradient(180deg, #ffffff, #f8fbff);

    z-index: 1;

}

/* =========================================================== */

.clients-section::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    left: -280px;

    top: -250px;

    border-radius: 50%;

    background: #1b8cff10;

    filter: blur(90px);

    animation: floatGlow 12s ease-in-out infinite;

}

.clients-section::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -220px;

    bottom: -220px;

    border-radius: 50%;

    background: #53c2ff12;

    filter: blur(90px);

    animation: floatGlow 14s ease-in-out infinite reverse;

}

@keyframes floatGlow {

    50% {

        transform: translateY(35px);

    }

}

/* =========================================================== */

.clients-header {

    text-align: center;

    max-width: 820px;

    margin: auto auto 70px;

}

.clients-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 28px;

    border-radius: 50px;

    background: #e9f4ff;

    color: var(--client-blue);

    font-weight: 700;

    margin-bottom: 24px;

}

.clients-header h2 {

    font-size: clamp(42px, 5vw, 72px);

    font-weight: 800;

    color: var(--client-dark);

    letter-spacing: -2px;

    margin-bottom: 18px;

}

.clients-header h2::after {

    content: "";

    display: block;

    width: 90px;

    height: 5px;

    border-radius: 100px;

    margin: 24px auto 0;

    background: linear-gradient(90deg, #1b8cff, #52c4ff);

}

.clients-header p {

    font-size: 18px;

    line-height: 1.8;

    color: #67758f;

}

/* =========================================================== */

.clients-slider {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    overflow: visible;

}

/* =========================================================== */

.clients-mask {

    position: relative;

    flex: 1;

    width: 100%;

    overflow: hidden;

    border-radius: 35px;

    padding: 15px 0;
}

/* fade */

.clients-mask::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 180px;

    height: 100%;

    z-index: 5;

    background:

        linear-gradient(to right,

            #f8fbff,

            rgba(248, 251, 255, .85),

            transparent);

}

.clients-mask::after {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    width: 180px;

    height: 100%;

    z-index: 5;

    background:

        linear-gradient(to left,

            #f8fbff,

            rgba(248, 251, 255, .85),

            transparent);

}

/* =========================================================== */

.clients-track {

    display: flex;

    align-items: center;

    gap: 28px;

    width: max-content;

    will-change: transform;

    transform: translate3d(0, 0, 0);

}

/* =========================================================== */

.client-item {

    position: relative;

    overflow: hidden;

}

.client-item::before {

    content: "";

    position: absolute;

    left: -140%;

    top: 0;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .8),

            transparent);

    transition: 1s;

}

.client-item:hover::before {

    left: 160%;

}

/* =========================================================== */

.client-item img {

    width: 210px;

    height: 120px;

    object-fit: contain;

    padding: 24px;

    display: block;

}

/* =========================================================== */

.client-item:hover img {

    transform:

        translateY(-8px) scale(1.05);

    border-color: #cde5ff;

    box-shadow:

        0 30px 70px rgba(0, 119, 255, .14);

}

/* =========================================================== */

.client-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 64px;
    height: 64px;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #1b8cff;

    font-size: 24px;

    cursor: pointer;

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

    z-index: 100;

    transition: .35s ease;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .08);

}

.client-prev {

    left: 20px;

}

.client-next {

    right: 20px;

}

.client-arrow:hover {

    background: linear-gradient(135deg, #1b8cff, #4dc4ff);

    color: #fff;

    transform:

        translateY(-50%) scale(1.08);

}

/* =========================================================== */

@media(max-width:1200px) {

    .client-item img {

        width: 190px;

    }

}

@media(max-width:992px) {

    .clients-section {

        padding: 90px 0;

    }

    .client-item img {

        width: 170px;

        height: 100px;

        padding: 20px;

    }

    .clients-mask::before,

    .clients-mask::after {

        width: 100px;

    }

}

@media(max-width:768px) {

    .clients-header h2 {

        font-size: 40px;

    }

    .clients-header p {

        font-size: 16px;

    }

    .client-item img {

        width: 150px;

        height: 90px;

        padding: 18px;

    }

    .client-arrow {

        display: none;

    }

    .clients-mask::before,

    .clients-mask::after {

        width: 50px;

    }

}

/* ==========================================================
   INDUSTRIES WE SERVE
   Gujarat Printlink
========================================================== */

:root {

    --industry-primary: #1b8cff;
    --industry-secondary: #55c7ff;
    --industry-dark: #132238;
    --industry-text: #6b7280;

    --industry-border: #eaf2fb;

    --industry-radius: 24px;

    --industry-shadow:
        0 15px 45px rgba(17, 34, 56, .08);

}

/* ========================================================== */

.industries-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:

        radial-gradient(circle at top left, #ddebff 0%, transparent 32%),

        radial-gradient(circle at bottom right, #edf7ff 0%, transparent 35%),

        linear-gradient(180deg, #ffffff, #f8fbff);

}

/* ========================================================== */

.industries-section::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    left: -260px;
    top: -240px;

    border-radius: 50%;

    background: #1b8cff10;

    filter: blur(100px);

    animation: industryFloat 15s ease-in-out infinite;

}

.industries-section::after {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -200px;
    bottom: -220px;

    border-radius: 50%;

    background: #59d2ff12;

    filter: blur(90px);

    animation: industryFloat 18s ease-in-out infinite reverse;

}

@keyframes industryFloat {

    50% {

        transform: translateY(35px);

    }

}

/* ========================================================== */

.industries-section .container {

    position: relative;

    z-index: 2;

}

/* ========================================================== */

.industries-header {

    max-width: 850px;

    margin: auto auto 70px;

    text-align: center;

}

/* ========================================================== */

.industries-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 28px;

    background: #eaf5ff;

    color: var(--industry-primary);

    border-radius: 100px;

    font-weight: 700;

    margin-bottom: 24px;

    box-shadow:

        0 8px 25px rgba(27, 140, 255, .08);

}

/* ========================================================== */

.industries-header h2 {

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

    font-weight: 800;

    color: var(--industry-dark);

    letter-spacing: -2px;

    margin-bottom: 18px;

}

.industries-header h2::after {

    content: "";

    display: block;

    width: 90px;

    height: 5px;

    margin: 24px auto 0;

    border-radius: 100px;

    background:

        linear-gradient(90deg,

            var(--industry-primary),

            var(--industry-secondary));

}

/* ========================================================== */

.industries-header p {

    font-size: 18px;

    color: var(--industry-text);

    line-height: 1.9;

}

/* ========================================================== */

.industry-card {

    position: relative;

    overflow: hidden;

    height: 100%;

    padding: 42px 30px;

    background:

        rgba(255, 255, 255, .88);

    backdrop-filter: blur(25px);

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

    border-radius: 28px;

    transition: .45s cubic-bezier(.2, .8, .2, 1);

    box-shadow:

        var(--industry-shadow);

}

/* ========================================================== */

.industry-card::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 65%;

    height: 100%;

    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .8),

            transparent);

    transform: skewX(-25deg);

    transition: 1s;

}

/* ========================================================== */

.industry-card:hover::before {

    left: 170%;

}

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

.industry-icon {

    position: relative;

    width: 78px;

    height: 78px;

    margin: 0 auto 28px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    color: var(--industry-primary);

    background:

        linear-gradient(135deg,
            rgba(27, 140, 255, .12),
            rgba(85, 199, 255, .08));

    border: 1px solid rgba(27, 140, 255, .10);

    transition: .45s cubic-bezier(.2, .8, .2, 1);

    overflow: hidden;

}

/* Animated Glow */

.industry-icon::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    padding: 2px;

    background:

        linear-gradient(135deg,
            rgba(27, 140, 255, .4),
            rgba(85, 199, 255, .05),
            rgba(27, 140, 255, .4));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .45s;

}

/* ==========================================================
   TITLE
========================================================== */

.industry-card h4 {

    margin-bottom: 14px;

    text-align: center;

    font-size: 24px;

    font-weight: 700;

    color: var(--industry-dark);

    transition: .35s;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.industry-card p {

    margin: 0;

    text-align: center;

    font-size: 15px;

    line-height: 1.8;

    color: var(--industry-text);

}

/* ==========================================================
   TOP ACCENT
========================================================== */

.industry-card::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background:

        linear-gradient(90deg,
            var(--industry-primary),
            var(--industry-secondary));

    transform: scaleX(0);

    transform-origin: left;

    transition: .45s;

}

/* ==========================================================
   HOVER
========================================================== */

.industry-card:hover {

    transform:

        translateY(-12px);

    border-color: #cfe7ff;

    box-shadow:

        0 18px 45px rgba(17, 34, 56, .08),

        0 35px 80px rgba(27, 140, 255, .12);

}

.industry-card:hover::after {

    transform: scaleX(1);

}

.industry-card:hover h4 {

    color: var(--industry-primary);

}

.industry-card:hover .industry-icon {

    transform:

        translateY(-6px) rotate(-6deg) scale(1.08);

    color: #fff;

    background:

        linear-gradient(135deg,
            var(--industry-primary),
            var(--industry-secondary));

    box-shadow:

        0 18px 35px rgba(27, 140, 255, .35);

}

.industry-card:hover .industry-icon::before {

    opacity: 1;

}

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

.review-btn,
.quote-btn {

    --size: 64px;

    position: fixed;

    right: 24px;

    width: var(--size);

    height: var(--size);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    overflow: hidden;

    isolation: isolate;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

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

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .8);

    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s,
        background .35s;

    z-index: 9999;

    animation: floating 4s ease-in-out infinite;
}


/*=========================
    GOOGLE POSITION
=========================*/

.review-btn {

    bottom: 105px;

}


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

.quote-btn {

    bottom: 25px;

    background: #25D366;

    color: #fff;

}


/*====================================================
    GRADIENT RING
====================================================*/

.review-btn::before,
.quote-btn::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    padding: 2px;

    background: linear-gradient(135deg,
            #4285F4,
            #34A853,
            #FBBC05,
            #EA4335,
            #4285F4);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation: rotateBorder 5s linear infinite;

}

.quote-btn::before {

    background: linear-gradient(135deg,
            #8CFFB3,
            #25D366,
            #0BA360,
            #8CFFB3);

}


/*====================================================
    HOVER GLOW
====================================================*/

.review-btn:hover,
.quote-btn:hover {

    transform: translateY(-8px) scale(1.08);

    box-shadow:
        0 22px 45px rgba(0, 0, 0, .22),
        0 0 35px rgba(66, 133, 244, .25);

}

.quote-btn:hover {

    box-shadow:
        0 22px 45px rgba(0, 0, 0, .22),
        0 0 35px rgba(37, 211, 102, .45);

}


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

.review-btn img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 2;

}

.quote-btn i {

    font-size: 34px;

    color: #fff;

    z-index: 2;

}


/*====================================================
    PULSE EFFECT
====================================================*/

.review-btn::after,
.quote-btn::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

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

    transform: scale(0);

    transition: .5s;

}

.review-btn:hover::after,
.quote-btn:hover::after {

    transform: scale(1.8);

    opacity: 0;

}


/*====================================================
    TOOLTIP
====================================================*/

.review-btn span,
.quote-btn span {

    display: none;

}

.review-btn:hover,
.quote-btn:hover {

    overflow: visible;

}

.review-btn:hover:has(img)::before,
.quote-btn:hover:has(i)::before {

    animation-play-state: running;

}

.review-btn:hover::selection {

    background: none;

}

.review-btn:hover::marker {

    display: none;

}

.review-btn:hover::after {

    pointer-events: none;

}


/* Tooltip */

.review-btn:hover .tooltip,
.quote-btn:hover .tooltip {

    opacity: 1;

}


/*====================================================
    CUSTOM TOOLTIP
====================================================*/

.review-btn::selection {

    background: none;

}

.review-btn[data-title]::after,
.quote-btn[data-title]::after {

    content: attr(data-title);

    position: absolute;

    right: 78px;

    top: 50%;

    transform: translateY(-50%);

    background: #111827;

    color: #fff;

    padding: 10px 16px;

    border-radius: 40px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .3px;

    opacity: 0;

    visibility: hidden;

    transition: .3s;

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

}

.review-btn:hover[data-title]::after,
.quote-btn:hover[data-title]::after {

    opacity: 1;

    visibility: visible;

    right: 82px;

}


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

.quote-btn {

    animation:
        floating 4s ease-in-out infinite,
        whatsappPulse 2.2s infinite;

}


/*====================================================
    GOOGLE GLOW
====================================================*/

.review-btn {

    animation:
        floating 4s ease-in-out infinite,
        googleGlow 3.5s infinite;

}


/*====================================================
    ANIMATIONS
====================================================*/

@keyframes floating {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

@keyframes rotateBorder {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes whatsappPulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(37, 211, 102, .45),
            0 15px 40px rgba(0, 0, 0, .18);

    }

    70% {

        box-shadow:
            0 0 0 18px rgba(37, 211, 102, 0),
            0 15px 40px rgba(0, 0, 0, .18);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(37, 211, 102, 0),
            0 15px 40px rgba(0, 0, 0, .18);

    }

}

@keyframes googleGlow {

    0%,
    100% {

        filter: drop-shadow(0 0 0 rgba(66, 133, 244, .15));

    }

    50% {

        filter: drop-shadow(0 0 10px rgba(66, 133, 244, .35));

    }

}


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

@media (max-width:768px) {

    .review-btn,
    .quote-btn {

        --size: 56px;

        right: 16px;

    }

    .review-btn {

        bottom: 90px;

    }

    .quote-btn {

        bottom: 18px;

    }

    .review-btn img {

        width: 30px;

        height: 30px;

    }

    .quote-btn i {

        font-size: 30px;

    }

    .review-btn[data-title]::after,
    .quote-btn[data-title]::after {

        display: none;

    }

}