/* 
    Bodke Bandhu Group - Tailwind Supplementary Styles
    Modernised Corporate & Elegant theme
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Mukta:wght@300;400;700;800&display=swap');

:root {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(15, 17, 26, 0.06);
    --brand: #5e187a;         /* Refined corporate royal plum */
    --brand-light: #7b29a2;   /* Elegant light violet */
    --navy: #0f111a;          /* Premium charcoal dark neutral */
    --gold: #c5a880;          /* Sophisticated brushed champagne gold */
    --silver: #f8fafc;
    --bg-alt: #f8fafc;
    --paper: #ffffff;
    --ink-soft: #64748b;
    --ring: rgba(94, 24, 122, 0.1);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--navy);
    background:
        radial-gradient(circle at top right, rgba(94, 24, 122, 0.03), transparent 45rem),
        radial-gradient(circle at left 35rem, rgba(197, 168, 128, 0.02), transparent 35rem),
        #fff;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* Global Corporate Typography Sizing Scale */
h1 {
    font-size: clamp(2rem, 4.5vw, 3.5rem) !important; /* Elegant max 56px on desktop, 32px on mobile */
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important; /* Elegant max 36px on desktop, 24px on mobile */
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important; /* Elegant max 26px on desktop */
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

h4 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important; /* Elegant max 20px on desktop */
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

/* Specific overrides for Hero text */
main > section:first-child h1,
main > section#home h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important; /* Max 60px for main hero heading */
}

/* Stats / numbers constraints */
.text-6xl, .text-7xl, .text-8xl, [class*="text-6xl"], [class*="text-7xl"], [class*="text-8xl"] {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important; /* Limit giant stats/numbers */
}

/* Global Border Radii Constrain for Corporate Structure */
.rounded-4xl,
.rounded-3xl,
.rounded-2xl,
.rounded-\[3rem\],
.rounded-\[4rem\],
.rounded-\[2.5rem\] {
    border-radius: 1.25rem !important; /* Premium clean 20px radius */
}

/* Custom Utilities for Premium Look */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

.glass-dark {
    background: rgba(15, 17, 26, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

a, button, input, select, textarea {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

img {
    max-width: 100%;
}

header {
    color: var(--navy);
}

header nav,
header > .container,
header .container > nav {
    position: relative;
}

header img {
    filter: drop-shadow(0 4px 10px rgba(15, 17, 26, 0.04));
}

header a {
    letter-spacing: -0.01em;
}

header a[href="contact.html"],
header nav a[href="contact.html"] {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 10px 25px rgba(15, 17, 26, 0.1);
}

header a[href="contact.html"]:hover,
header nav a[href="contact.html"]:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(94, 24, 122, 0.15);
}

main > section:first-child {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

main > section:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9)),
        radial-gradient(circle at 84% 18%, rgba(94, 24, 122, 0.06), transparent 30rem),
        radial-gradient(circle at 12% 85%, rgba(197, 168, 128, 0.05), transparent 30rem);
}

main > section:first-child::after {
    content: "";
    position: absolute;
    right: -10rem;
    bottom: -14rem;
    width: 36rem;
    height: 36rem;
    z-index: -1;
    border: 4rem solid rgba(94, 24, 122, 0.02);
    border-radius: 999px;
}

main > section:first-child.bg-navy,
main > section:first-child.bg-brand {
    background-color: var(--navy) !important;
}

main > section:first-child.bg-navy::before,
main > section:first-child.bg-brand::before {
    background:
        linear-gradient(120deg, rgba(15,17,26,0.98), rgba(94,24,122,0.85)),
        radial-gradient(circle at 82% 20%, rgba(197,168,128,0.1), transparent 30rem),
        radial-gradient(circle at 15% 80%, rgba(255,255,255,0.05), transparent 25rem);
}

main > section:first-child h1 {
    color: var(--navy);
    letter-spacing: -0.03em;
}

main > section:first-child.bg-navy h1,
main > section:first-child.bg-brand h1,
main > section:first-child.bg-navy p,
main > section:first-child.bg-brand p {
    color: #fff;
}

.text-gold {
    color: var(--gold) !important;
}

main > section:first-child:not(.bg-navy):not(.bg-brand) .text-gold {
    color: var(--brand) !important;
}

.bg-gold {
    background-color: var(--gold) !important;
}

.hover\:bg-gold:hover {
    background-color: var(--brand) !important;
    color: #fff !important;
}

.border-gold,
.focus\:border-gold:focus {
    border-color: var(--brand) !important;
}

section {
    scroll-margin-top: 6rem;
}

.shadow-2xl {
    box-shadow: 0 20px 50px rgba(15, 17, 26, 0.08) !important;
}

.bg-bgAlt,
.bg-silver {
    background-color: #f8fafc !important;
}

.bg-bgAlt,
.bg-silver,
section.bg-white {
    position: relative;
}

.group img {
    will-change: transform;
}

/* Modernized Grid Cards */
.business-card .card-inner,
.grid > div.bg-bgAlt,
.grid > div.bg-white,
.space-y-6 > div.bg-white,
form,
main section a.bg-white,
main section a.bg-brand,
main section a.bg-navy {
    border: 1px solid rgba(15, 17, 26, 0.05);
}

.business-card .card-inner,
.grid > div.bg-bgAlt,
.grid > div.bg-white,
.space-y-6 > div.bg-white {
    box-shadow: 0 8px 30px rgba(15, 17, 26, 0.03);
    background-color: #ffffff !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.business-card .card-inner:hover,
.grid > div.bg-bgAlt:hover,
.grid > div.bg-white:hover,
.space-y-6 > div.bg-white:hover {
    border-color: rgba(94, 24, 122, 0.18) !important;
    box-shadow: 0 30px 60px rgba(15, 17, 26, 0.08) !important;
    transform: translateY(-4px);
    background-color: #ffffff !important;
}

/* Business Card Hover Specific Refinement */
.business-card .card-inner {
    color: var(--navy) !important;
}

.business-card:hover .card-inner {
    border-color: var(--brand) !important;
}

.business-card:hover .card-inner h3 {
    color: var(--brand) !important;
}

.business-card:hover .card-inner a {
    color: var(--brand) !important;
}

.business-card:hover .card-inner .w-20 {
    background-color: var(--brand) !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.business-card:hover .card-inner p.text-slate-500 {
    color: var(--ink-soft) !important;
}

/* Group hover:bg-brand refinement to preserve corporate text/bg */
.group.hover\:bg-brand:hover {
    background-color: #ffffff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 20px 40px rgba(94, 24, 122, 0.05) !important;
}

.group.hover\:bg-brand:hover h4,
.group.hover\:bg-brand:hover p,
.group.hover\:bg-brand:hover i {
    color: var(--navy) !important;
}

.group.hover\:bg-brand:hover h4 {
    color: var(--brand) !important;
}

.group.hover\:bg-brand:hover i {
    color: var(--brand) !important;
}

.bg-brand {
    background:
        linear-gradient(135deg, var(--brand), var(--brand-light)) !important;
}

.bg-navy {
    background:
        linear-gradient(135deg, var(--navy), #171a26 70%, var(--brand)) !important;
}

a.bg-brand,
button.bg-brand {
    box-shadow: 0 10px 25px rgba(94, 24, 122, 0.15);
}

a.bg-navy,
button.bg-navy {
    box-shadow: 0 10px 25px rgba(15, 17, 26, 0.1);
}

a.bg-brand:hover,
a.bg-navy:hover,
button.bg-brand:hover,
button.bg-navy:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(94, 24, 122, 0.22);
}

input,
select,
textarea {
    box-shadow: 0 1px 2px rgba(15, 17, 26, 0.02);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--ring);
}

footer {
    background:
        linear-gradient(180deg, #fff, #f8fafc) !important;
}

footer img {
    filter: drop-shadow(0 4px 10px rgba(15, 17, 26, 0.02));
}

footer a:hover {
    color: var(--brand) !important;
}

.fixed.bottom-10.right-10 {
    right: 1.5rem;
    bottom: 1.5rem;
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25);
}

/* Page spacing for desktop viewports */
main > section:first-child {
    padding-top: 11rem !important;
    padding-bottom: 8rem !important;
}

main.pt-24 {
    padding-top: 10rem !important;
}

/* Header compression on standard laptops (1024px to 1280px) */
@media (max-width: 1280px) and (min-width: 1024px) {
    header img {
        height: 3.5rem !important;
    }
    header ul {
        gap: 1.5rem !important;
    }
}

@media (max-width: 1023px) {
    header {
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(15, 17, 26, 0.05);
    }

    header .h-16 {
        height: 3rem;
    }

    main > section:first-child {
        padding-top: 9.5rem !important;
        padding-bottom: 5rem !important;
    }

    main.pt-24 {
        padding-top: 8rem !important;
    }

    /* Removed large mobile heading override to honor global typography scale */

    section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .rounded-4xl,
    .rounded-\[3rem\],
    .rounded-\[4rem\] {
        border-radius: 1.5rem !important;
    }

    .p-12,
    .lg\:p-20,
    .lg\:p-24 {
        padding: 2rem !important;
    }
}

@media (max-width: 640px) {
    body {
        background:
            radial-gradient(circle at top right, rgba(111,44,145,0.08), transparent 22rem),
            #fff;
    }

    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Removed large mobile h2 override to honor global typography scale */

    .text-xl {
        font-size: 1.05rem !important;
    }

    .fixed.bottom-10.right-10 {
        width: 3.75rem;
        height: 3.75rem;
        right: 1rem;
        bottom: 1rem;
    }
}

/* Header Scrolled State - Responsive Floating Dock Design */
header.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 17, 26, 0.04);
}

@media (min-width: 1024px) {
    header.scrolled {
        width: 90% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 1.25rem auto !important;
        border: 1px solid rgba(15, 17, 26, 0.05) !important;
        border-radius: 999px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        box-shadow: 0 20px 40px -10px rgba(15, 17, 26, 0.06) !important;
    }
}

/* Smooth Transitions */
.transition-premium {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Button Base */
.btn-base {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Swiper Custom Navigation & Pagination */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff !important;
    background: rgba(15, 17, 26, 0.45) !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(15, 17, 26, 0.8) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    transform: scale(1.05) translateY(-50%) !important;
}

.swiper-button-next {
    right: 1.5rem !important;
}
.swiper-button-prev {
    left: 1.5rem !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
}

.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.55 !important;
    width: 8px !important;
    height: 8px !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    background: var(--gold) !important;
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* Hero Section Responsiveness */
@media (max-width: 1023px) {
    main > section#home {
        padding-top: 7.5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .hero-content {
        text-align: center;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Removed hero h1 responsive size to honor global typography scale */
    
    .hero-btns {
        justify-content: center;
    }
}

/* Mobile & Tablet Navigation Menu Customization */
@media (max-width: 1023px) {
    header ul {
        border-radius: 1rem !important;
        border: 1px solid rgba(15, 17, 26, 0.06) !important;
        margin-top: 0.75rem !important;
        overflow: hidden;
        animation: slideDownMenu 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    
    header ul li {
        width: 100%;
        border-bottom: 1px solid rgba(15, 17, 26, 0.03);
    }
    
    header ul li:last-child {
        border-bottom: 0;
    }
    
    header ul li a {
        display: block;
        padding: 0.85rem 1.25rem;
        font-weight: 600;
        color: var(--navy);
    }
    
    header ul li a:hover {
        background-color: var(--silver);
        color: var(--brand) !important;
    }
}

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

/* Section Spacing */
.section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Hide Horizontal Scroll */
.overflow-x-hidden {
    overflow-x: hidden;
}

/* Grand-Scale Card Layouts & High-Impact Typography Overrides */
#ventures .h-\[700px\],
.relative.group.h-\[700px\],
.relative.group.h-\[620px\],
[class*="h-[700px]"],
[class*="h-[620px]"] {
    height: 780px !important; /* Make hero and flagship cards taller and more commanding */
}

/* Adjust border-radius for giant elements so they look elegant and proportional */
#ventures .h-\[700px\],
.relative.group.h-\[700px\],
.hero-slider,
main > section:first-child .rounded-\[4rem\],
[class*="h-[700px]"],
.swiper.hero-slider {
    border-radius: 2.25rem !important; /* Beautiful rounded corners proportioned for large cards */
}

/* Ensure flagship card headers and descriptions maintain grand size and readability */
#ventures h3,
.relative.group h3,
[id="ventures"] h3,
.swiper-slide h3 {
    font-size: clamp(1.85rem, 4.5vw, 3.25rem) !important; /* Maintain high-impact typography scale inside featured elements (up to 52px) */
    line-height: 1.15 !important;
    font-weight: 850 !important;
}

#ventures p,
.relative.group p,
[id="ventures"] p,
.swiper-slide p {
    font-size: clamp(1rem, 2.2vw, 1.2rem) !important; /* Keep description text legible (up to 19px) */
    line-height: 1.5 !important;
}