/* ==========================================================
   SHARPLINE HEADER + FOOTER
   PREMIUM NAVY & GOLD DESIGN
========================================================== */


/* ==========================================================
   ROOT COLORS
========================================================== */

:root {

    /* Main Dark Colors */

    --sp-black: #030f1b;
    --sp-navy-950: #041321;
    --sp-navy-900: #071b2e;
    --sp-navy-850: #0a2034;
    --sp-navy-800: #0d263b;

    /* Gold */

    --sp-gold-dark: #b87f20;
    --sp-gold: #d9a63b;
    --sp-gold-light: #f0bd4c;
    --sp-gold-bright: #f4c45b;

    /* Text */

    --sp-white: #ffffff;
    --sp-heading: #f7f3eb;
    --sp-text: #c3cad1;
    --sp-muted: #8f9aa5;

    /* Borders */

    --sp-border:
        rgba(218, 166, 61, 0.25);

    --sp-border-light:
        rgba(255, 255, 255, 0.08);

    /* Fonts */

    --sp-serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --sp-sans:
        "Inter",
        Arial,
        sans-serif;

    /* Shared Header / Footer Container
       (matches homepage's --slx-container / --slx-side-space) */
    --sp-container-max: 1380px;
    --sp-side-space: 60px;
    --sp-container-width: calc(100% - var(--sp-side-space));

}


@media (max-width: 1200px) {
    :root {
        --sp-side-space: 50px;
    }
}

@media (max-width: 1024px) {
    :root {
        --sp-side-space: 40px;
    }
}

@media (max-width: 480px) {
    :root {
        --sp-side-space: 24px;
    }
}


/* ==========================================================
   BASIC RESET
========================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        var(--sp-sans);

    background:
        var(--sp-navy-950);

    color:
        var(--sp-white);

    overflow-x: hidden;

}


a {

    color: inherit;
    text-decoration: none;

}


img {
    display: block;
    max-width: 100%;
    height: auto;
}


button {

    font-family: inherit;

}

main {
    margin-top: 180px;
    margin-bottom: 80px;
}

@media (max-width: 1024px) {
    main {
        margin-top: 150px;
    }
}

@media (max-width: 850px) {
    main {
        margin-top: 120px;
        margin-bottom: 60px;
    }
}

@media (max-width: 480px) {
    main {
        margin-top: 100px;
        margin-bottom: 50px;
    }
}

/* ==========================================================
   HEADER (unified — homepage's design, shared across all pages)
========================================================== */

.slx-header {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 9999;

    background:

        radial-gradient(circle at 50% 100%,
            rgba(34, 66, 86, 0.17),
            transparent 38%),

        linear-gradient(180deg,
            #071a2b 0%,
            #061626 60%,
            #061421 100%);

    border-bottom:
        1px solid rgba(218, 166, 61, 0.14);

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;

}


.slx-header.scrolled {

    background:

        radial-gradient(circle at 50% 100%,
            rgba(34, 66, 86, 0.17),
            transparent 38%),

        linear-gradient(180deg,
            #071a2b 0%,
            #061626 60%,
            #061421 100%);

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

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.33);

}


.slx-header-container {

    width:
        min(var(--sp-container-max), var(--sp-container-width));

    margin: auto;
    height: 88px;

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

    gap: 30px;

}


/* Logo */

.slx-logo {

    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 190px;

}


.slx-logo img {

    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

}


/* Navigation */

.slx-nav {

    display: flex;
    align-items: center;
    gap: 42px;
    margin-left: auto;

}


.slx-nav a {

    position: relative;
    padding: 8px 0;

    font-size: 14px;
    font-weight: 500;
    color: #e8ebee;

    transition: color 0.3s ease;

}


.slx-nav a::after {

    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--sp-gold);

    transition: width 0.3s ease;

}


.slx-nav a:hover,
.slx-nav a.active {

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

}


.slx-nav a:hover::after,
.slx-nav a.active::after {

    width: 100%;

}


.slx-header-actions {

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

}


/* Gold CTA button */

.slx-main-btn {

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 48px;
    padding: 13px 25px;

    overflow: hidden;

    border: 1px solid #f2c45d;
    border-radius: 5px;

    background:
        linear-gradient(135deg,
            #d39a2c 0%,
            #edb943 55%,
            #e0a630 100%);

    color: #07131d;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;

}


.slx-main-btn::before {

    content: "";
    position: absolute;
    top: -45%;
    left: -90%;

    width: 40%;
    height: 190%;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);

    transform: rotate(20deg);

    transition: left 0.65s ease;

}


.slx-main-btn:hover {

    transform: translateY(-3px);
    filter: brightness(1.04);

    box-shadow:
        0 12px 28px rgba(218, 166, 61, 0.24);

}


.slx-main-btn:hover::before {

    left: 145%;

}


/* Gold CTA button (icon markup: <span> + arrow <i>) — used on
   about.html and sukrithi-pride.html */

.sp-contact-btn {

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 28px;

    overflow: hidden;

    border: 1px solid #f2c45d;
    border-radius: 5px;

    background:
        linear-gradient(135deg,
            #d39a2c 0%,
            #edb943 55%,
            #e0a630 100%);

    color: #07131d;

    font-family: var(--sp-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;

}


.sp-contact-btn i {

    transition: transform 0.35s ease;

}


.sp-contact-btn::before {

    content: "";
    position: absolute;
    top: -45%;
    left: -90%;

    width: 40%;
    height: 190%;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);

    transform: rotate(20deg);

    transition: left 0.65s ease;

}


.sp-contact-btn:hover {

    transform: translateY(-3px);
    filter: brightness(1.04);

    box-shadow:
        0 12px 28px rgba(218, 166, 61, 0.24);

}


.sp-contact-btn:hover::before {

    left: 145%;

}


.sp-contact-btn:hover i {

    transform: translateX(4px);

}


/* Mobile menu button */

.slx-menu-btn {

    display: none;
    position: relative;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
    padding: 0;

    border: 1px solid rgba(217, 166, 59, 0.55);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    z-index: 10002;

}


.slx-menu-btn span {

    display: block;
    width: 19px;
    height: 2px;

    background: var(--sp-gold-light);
    border-radius: 5px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}


.slx-menu-btn.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.slx-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.slx-menu-btn.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


.slx-mobile-contact {
    display: none;
}


@media (max-width: 1024px) {

    .slx-header-container {
        height: 80px;
    }

    .slx-logo {
        width: 175px;
    }

    .slx-nav {
        gap: 27px;
    }

}


@media (max-width: 850px) {

    .slx-header-container {
        height: 75px;
    }

    .slx-logo {
        width: 160px;
    }

    .slx-main-btn {
        display: none;
    }

    .slx-menu-btn {
        display: flex;
    }

    .slx-nav {

        position: fixed;
        top: 75px;
        left: 0;
        width: 100%;

        max-height: calc(100vh - 75px);

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 0;
        margin: 0;
        padding: 20px 25px 30px;

        overflow-y: auto;

        background: rgba(2, 14, 25, 0.99);

        border-bottom: 1px solid rgba(218, 166, 61, 0.25);

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

        z-index: 9999;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-20px);

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;

    }

    .slx-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .slx-nav a {
        display: block;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 15px;
        color: #ffffff;
    }

    .slx-nav a:last-child {
        border-bottom: 0;
    }

    .slx-mobile-contact {
        display: block !important;
    }

    body.slx-menu-open {
        overflow: hidden;
    }

}


@media (max-width: 480px) {

    .slx-header-container {
        height: 70px;
    }

    .slx-logo {
        width: 145px;
    }

    .slx-nav {
        top: 70px;
        max-height: calc(100vh - 70px);
    }

    .slx-menu-btn {
        width: 40px;
        height: 40px;
    }

}



/* ==========================================================
   FOOTER
========================================================== */

.sp-footer {

    position: relative;

    width: 100%;

    background:

        radial-gradient(circle at 50% 0%,
            rgba(34, 66, 86, 0.17),
            transparent 38%),

        linear-gradient(180deg,
            #071a2b 0%,
            #061626 60%,
            #061421 100%);

    color:
        var(--sp-text);

    overflow: hidden;

}


/* subtle pattern */

.sp-footer::before {

    content: "";

    position: absolute;

    left: -150px;
    bottom: 30px;

    width: 370px;
    height: 370px;

    border:
        1px solid rgba(217, 166, 59, 0.07);

    border-radius:
        50%;

    pointer-events: none;

}


.sp-footer::after {

    content: "";

    position: absolute;

    right: -180px;
    top: -80px;

    width: 430px;
    height: 430px;

    border:
        1px solid rgba(217, 166, 59, 0.06);

    border-radius:
        50%;

    pointer-events: none;

}


/* ==========================================================
   GOLD TOP BORDER
========================================================== */

.sp-footer-top-line {

    position: relative;

    z-index: 2;

    height: 1px;

    width: 100%;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(217, 166, 59, 0.30) 12%,
            rgba(217, 166, 59, 0.60) 50%,
            rgba(217, 166, 59, 0.30) 88%,
            transparent 100%);

}


/* ==========================================================
   FOOTER MAIN
========================================================== */

.sp-footer-main {

    position: relative;

    z-index: 2;

    padding:
        48px 0 42px;

}


.sp-footer-container {

    width:
        min(var(--sp-container-width), var(--sp-container-max));

    margin: auto;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 0.9fr;

    gap:
        90px;

}


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

.sp-footer-logo {

    margin-bottom:
        19px;

}


.sp-footer-logo .sp-logo-symbol {

    width: 45px;
    height: 45px;

}


.sp-footer-logo .sp-logo-name {

    font-size:
        25px;

}


.sp-footer-description {

    max-width:
        320px;

    color:
        #aeb7c0;

    font-size:
        12px;

    line-height:
        1.8;

}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

.sp-socials {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top:
        20px;

}


.sp-socials a {

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #bd852a,
            #eab64c);

    color:
        #071424;

    font-size:
        11px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.sp-socials a:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 7px 18px rgba(220, 169, 65, 0.25);

}


/* ==========================================================
   FOOTER HEADINGS
========================================================== */

.sp-footer-column h3 {

    margin-bottom:
        23px;

    color:
        #f2eee7;

    font-family:
        var(--sp-serif);

    font-size:
        21px;

    font-weight:
        600;

}


/* ==========================================================
   CONTACT DETAILS
========================================================== */

.sp-contact-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.sp-contact-list li {

    display: flex;

    align-items: center;

    gap: 12px;

}


.sp-footer-icon {

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(217, 164, 58, 0.55);

    border-radius:
        50%;

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

    font-size:
        10px;

}


.sp-contact-list a {

    color:
        #bdc5cc;

    font-size:
        12px;

    transition:
        color 0.3s ease;

}


.sp-contact-list a:hover {

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

}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.sp-footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.sp-footer-links li {

    position: relative;

    padding-left:
        16px;

}


.sp-footer-links li::before {

    content: "›";

    position: absolute;

    left: 0;
    top: -2px;

    color:
        var(--sp-gold);

    font-size:
        18px;

}


.sp-footer-links a {

    color:
        #bec6cd;

    font-size:
        12px;

    transition:
        color 0.3s ease,
        padding 0.3s ease;

}


.sp-footer-links a:hover {

    padding-left:
        4px;

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

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.sp-footer-bottom {

    position: relative;

    z-index: 2;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    background:
        rgba(0, 0, 0, 0.08);

}


.sp-footer-bottom-container {

    width:
        min(var(--sp-container-width), var(--sp-container-max));

    min-height:
        56px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;

}


.sp-footer-bottom p,
.sp-footer-bottom a {

    color:
        #88939d;

    font-size:
        10px;

}


.sp-footer-legal {

    display: flex;

    align-items: center;

    gap: 13px;

}


.sp-footer-legal span {

    width: 1px;

    height: 11px;

    background:
        rgba(255, 255, 255, 0.17);

}


.sp-footer-legal a {

    transition:
        color 0.3s ease;

}


.sp-footer-legal a:hover {

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

}


/* ==========================================================
   BACK TO TOP BUTTON
========================================================== */

.sp-back-top {

    position: absolute;

    z-index: 10;

    right: 100px;
    bottom: 18px;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border:
        1px solid rgba(217, 164, 58, 0.72);

    background:
        #071726;

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

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;

}


.sp-back-top:hover {

    transform:
        translateY(-4px);

    background:
        var(--sp-gold);

    color:
        #061320;

}


/* ==========================================================
   DESKTOP
   1200px
========================================================== */

@media (max-width: 1200px) {

    .sp-footer-container {

        gap: 55px;

    }

}


/* ==========================================================
   TABLET
   1024px
========================================================== */

@media (max-width: 1024px) {

    .sp-footer-container {

        grid-template-columns:
            1.3fr 1fr 0.8fr;

        gap:
            35px;

    }

}


/* ==========================================================
   MOBILE NAV BREAKPOINT
   900px
========================================================== */

@media (max-width: 900px) {

    .sp-footer-container {

        grid-template-columns:
            1fr 1fr;

    }


    .sp-footer-brand {

        grid-column:
            1 / -1;

    }


    .sp-footer-description {

        max-width:
            500px;

    }

}


/* ==========================================================
   MOBILE
   767px
========================================================== */

@media (max-width: 767px) {

    /* Footer */

    .sp-footer-main {

        padding:
            42px 0 32px;

    }


    .sp-footer-container {

        grid-template-columns:
            1fr;

        gap:
            38px;

    }


    .sp-footer-brand {

        grid-column:
            auto;

    }


    .sp-footer-column h3 {

        margin-bottom:
            17px;

    }


    .sp-footer-bottom-container {

        min-height:
            auto;

        padding:
            18px 0 70px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            13px;

    }


    .sp-back-top {

        right:
            85px;

        bottom:
            17px;

    }

}


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

@media (max-width: 480px) {

    .sp-footer-legal {

        flex-wrap:
            wrap;

    }

}


/* ==========================================================
   WHATSAPP FLOATING BUTTON
   Fixed, persistent across scroll, shared on all 5 pages
========================================================== */

.sp-whatsapp-float {

    position: fixed;
    right: 24px;
    bottom: 24px;

    z-index: 10050;

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

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #25d366;

    color: #ffffff;
    font-size: 30px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    animation: sp-whatsapp-pulse 2.6s ease-in-out infinite;

}

.sp-whatsapp-float:hover {

    transform: translateY(-4px) scale(1.06);

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);

    color: #ffffff;

}

@keyframes sp-whatsapp-pulse {

    0%,
    100% {
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.35),
            0 0 0 0 rgba(37, 211, 102, 0.45);
    }

    50% {
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.35),
            0 0 0 10px rgba(37, 211, 102, 0);
    }

}

@media (max-width: 480px) {

    .sp-whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 26px;
    }

}