/* ============================================
   WHO WE ARE SECTION - CLASSIC & ELEGANT STYLING
   ============================================ */

/* Text Gradient Utility */
.text-gradient-grape {
    background: linear-gradient(135deg, #7A1E4F 0%, #a82d66 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Visual Wrapper Styling */
.who-we-are-visual {
    position: relative;
    margin-bottom: 0;
}

.visual-wrapper {
    position: relative;
    padding: 2rem;
    min-height: 450px;
}

/* Decorative Blob Background */
.deco-blob {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, rgba(122, 30, 79, 0.08) 0%, rgba(122, 30, 79, 0.03) 100%);
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: morph 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    25% {
        border-radius: 48% 52% 30% 70% / 60% 40% 60% 40%;
    }

    50% {
        border-radius: 40% 60% 70% 30% / 48% 52% 48% 52%;
    }

    75% {
        border-radius: 58% 42% 48% 52% / 62% 58% 42% 38%;
    }
}

/* Main Visual Card */
.visual-card-primary {
    position: relative;
    background: linear-gradient(135deg, #7A1E4F 0%, #5d1a3d 100%);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 25px 60px rgba(122, 30, 79, 0.25);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.visual-card-primary:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 80px rgba(122, 30, 79, 0.35);
}

.visual-card-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    border-radius: 1.5rem;
    opacity: 0.6;
}

.visual-card-primary .inner-content {
    position: relative;
    z-index: 1;
}

/* Floating Stat Card */
.floating-stat-card {
    position: absolute;
    bottom: 10%;
    left: -5%;
    background: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    z-index: 2;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(122, 30, 79, 0.1);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 1.5rem;
}

.text-grape {
    color: #7A1E4F !important;
}

/* Mini Stat Cards */
.stat-mini-card {
    padding: 1.25rem;
    background: rgba(122, 30, 79, 0.04);
    border-left: 3px solid #7A1E4F;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.stat-mini-card:hover {
    background: rgba(122, 30, 79, 0.08);
    transform: translateX(5px);
}

/* Expertise Cards */
.expertise-card {
    padding: 2.5rem 2rem;
    background: #ffffff;
    border: 1px solid rgba(122, 30, 79, 0.08);
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.expertise-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #7A1E4F 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.expertise-card:hover::before {
    transform: scaleX(1);
}

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(122, 30, 79, 0.12);
    border-color: #7A1E4F;
}

.expertise-card .icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(122, 30, 79, 0.08) 0%, rgba(122, 30, 79, 0.02) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.expertise-card .icon-wrapper i {
    font-size: 2rem;
    color: #7A1E4F;
    transition: all 0.4s ease;
}

.expertise-card:hover .icon-wrapper {
    background: #7A1E4F;
    transform: rotate(5deg) scale(1.05);
}

.expertise-card:hover .icon-wrapper i {
    color: #ffffff;
    transform: scale(1.1);
}

/* Team Visual Grid */
.team-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.team-grid-item {
    background: #ffffff;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(122, 30, 79, 0.08);
}

.team-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(122, 30, 79, 0.15);
    border-color: #7A1E4F;
}

.team-grid-item i {
    font-size: 2.5rem;
    color: #7A1E4F;
    margin-bottom: 0.5rem;
    display: block;
}

.team-grid-item p {
    color: #60697b;
}

/* Icon List with Grape Bullets */
.icon-list.bullet-grape {
    list-style: none;
    padding: 0;
}

.icon-list.bullet-grape li {
    padding-left: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.icon-list.bullet-grape li i {
    color: #7A1E4F;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.icon-list.bullet-grape li span {
    color: #60697b;
    line-height: 1.6;
}

.icon-list.bullet-grape li strong {
    color: #343f52;
}






/* Mission CTA Card */
.mission-cta-card {
    background: linear-gradient(135deg, #7A1E4F 0%, #5d1a3d 100%);
    padding: 4rem 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 30px 60px rgba(122, 30, 79, 0.25);
    position: relative;
    overflow: hidden;
}

.mission-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="200" height="200" fill="url(%23dots)"/></svg>');
    opacity: 0.6;
}

.mission-cta-card .row {
    position: relative;
    z-index: 1;
}

.mission-cta-card .btn-white {
    transition: all 0.3s ease;
}

.mission-cta-card .btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

/* Base state for all reveal animations */
.reveal-from-left,
.reveal-from-right,
.reveal-from-bottom,
.reveal-fade-in,
.reveal-scale {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal from Left */
.reveal-from-left {
    transform: translateX(-60px);
}

.reveal-from-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal from Right */
.reveal-from-right {
    transform: translateX(60px);
}

.reveal-from-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal from Bottom */
.reveal-from-bottom {
    transform: translateY(60px);
}

.reveal-from-bottom.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In */
.reveal-fade-in {
    opacity: 0;
}

.reveal-fade-in.revealed {
    opacity: 1;
}

/* Scale In */
.reveal-scale {
    transform: scale(0.85);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

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

@media (max-width: 991px) {
    .visual-wrapper {
        min-height: 380px;
        padding: 1.5rem;
    }

    .deco-blob {
        width: 280px;
        height: 280px;
    }

    .visual-card-primary {
        padding: 2.5rem 2rem;
    }

    .floating-stat-card {
        left: 0;
        bottom: -10%;
    }

    .team-visual-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mission-cta-card {
        padding: 3rem 2rem;
        text-align: center;
    }

    .ps-lg-12 {
        padding-left: 0.75rem !important;
    }
}

@media (max-width: 767px) {
    .visual-wrapper {
        min-height: 320px;
    }

    .deco-blob {
        width: 220px;
        height: 220px;
    }

    .visual-card-primary {
        padding: 2rem 1.5rem;
    }

    .floating-stat-card {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 2rem;
    }

    .team-visual-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .team-grid-item {
        padding: 1.5rem 1rem;
    }

    .expertise-card {
        padding: 2rem 1.5rem;
    }

    .mission-cta-card {
        padding: 2.5rem 1.5rem;
    }

    .mission-cta-card h3.display-5 {
        font-size: 1.75rem !important;
    }
}

/* ============================================
   ADDITIONAL UTILITIES
   ============================================ */

.text-navy {
    color: #343f52 !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.ls-xl {
    letter-spacing: 0.2rem !important;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Ensure buttons maintain grape theme */
.btn-white {
    background-color: #ffffff !important;
    color: #7A1E4F !important;
    border: none !important;
}

.btn-white:hover {
    background-color: #f8f9fa !important;
    color: #5d1a3d !important;
}


/* DMHut Mission & Vision Customizations */

/* Match the exact Grape brand color */
.text-grape,
.text-primary {
    color: #7A1E4F !important;
}

/* Matching the header background transparency */
.bg-soft-primary {
    background-color: rgba(122, 30, 79, 0.05) !important;
}

/* Icon button styling */
.btn-soft-grape {
    background-color: rgba(122, 30, 79, 0.1) !important;
    color: #7A1E4F !important;
    border: none;
}

/* Bullet points matching the Sandbox theme */
.bullet-soft-primary i {
    background-color: rgba(122, 30, 79, 0.1) !important;
    color: #7A1E4F !important;
}

/* Animation reveal handling */
[data-cue] {
    opacity: 0;
}

/* Custom card refinement */
.rounded-4 {
    border-radius: 0.8rem !important;
}


/* DMHut Values Styling */

.text-grape {
    color: #7A1E4F !important;
}

/* Card Lift Effect from Sandbox Theme */
.lift {
    transition: all 0.3s ease;
    border: none;
}

.lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(122, 30, 79, 0.12) !important;
}

/* Soft Grape Icon styling */
.btn-soft-grape {
    background-color: rgba(122, 30, 79, 0.08) !important;
    color: #7A1E4F !important;
}

/* Typography alignment */
.display-3 {
    font-weight: 700;
    color: #343f52;
    /* Standard Sandbox dark text */
}


/* Infographic Timeline Styling */

.process-wrapper {
    position: relative;
}

/* The Horizontal Connecting Line (Desktop Only) */
@media (min-width: 992px) {
    .process-wrapper::before {
        content: '';
        position: absolute;
        top: 45px;
        /* Aligns with center of circles */
        left: 10%;
        right: 10%;
        height: 2px;
        background: rgba(122, 30, 79, 0.1);
        /* Soft Grape Line */
        z-index: 0;
    }
}

.process-item {
    position: relative;
    z-index: 1;
}

.process-step {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.2rem;
    transition: all 0.4s ease;
    border: 2px solid #ffffff;
    /* Contrast against the line */
}

.process-item:hover .process-step {
    background-color: #7A1E4F !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

.bg-soft-grape {
    background-color: rgba(122, 30, 79, 0.1) !important;
}

.text-grape {
    color: #7A1E4F !important;
}


/* Custom Underline Animation */
.animated-underline {
    position: relative;
    text-decoration: none !important;
    /* Forces removal of browser default underline */
    display: inline-block;
    /* Ensures positioning is relative to text width */
}

.animated-underline::after {
    content: '';
    position: absolute;
    /* Controls the length (60% of text width) */
    width: 0;
    /* Controls thickness */
    height: 2px;
    /* Controls distance from text (Higher number = closer) */
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #7A1E4F;
    /* Your Brand Grape Color */
    visibility: hidden;
}

/* Entry Animation for the Active State */
.animated-underline.active::after {
    visibility: visible;
    animation: underline-entry 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes underline-entry {
    0% {
        width: 0;
    }

    100% {
        width: 60%;
        /* Adjust this % to make the line even shorter or longer */
    }
}

/* Fix for Twitter/X Logo Visibility */
.uil-twitter::before,
.x-social-icon i::before {
    content: "\edc5" !important;
    /* The 'X' icon Unicode for Unicons */
    font-family: "unicons" !important;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    color: #ffffff;
    /* Ensures it's white */
    opacity: 1 !important;
}

/* Fix Space Inconsistency */
.offset-lg-1 {
    margin-left: 8.33333333% !important;
    /* Standard Bootstrap offset */
}

/* Social Media Icons Footer Styling - Match Index Page */
.x-social-icon i::before {
    content: "\edc5" !important;
    font-family: "unicons" !important;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    color: #ffffff;
    opacity: 1 !important;
}

/* Ensure the container uses flexbox for alignment */
.nav.social.social-white {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    /* This creates exactly equal 20px space between every icon */
}

/* Reset anchor tags to ensure they don't have inherited margins */
.nav.social.social-white a {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

/* Align the SVG Twitter-X icon perfectly with FontIcons */
.x-social-icon {
    height: 14px;
    /* Matches the SVG height for a tight bounding box */
}

.x-social-icon svg {
    display: block;
    fill: #ffffff !important;
    /* Ensures the X is white */
}

/* Ensure Unicons match the visual center */
.nav.social.social-white i {
    font-size: 1rem;
    display: block;
    line-height: 1;
}

footer .fs-sm,
footer address,
footer p,
footer li a {
    font-size: 0.85rem !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6) !important;
}

.widget-title {
    margin-bottom: 1.25rem !important;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #ffffff !important;
}

/* Hover effect */
.hover-grape:hover {
    color: #7a1e4f !important;
}

/* Enhanced Responsive Design for About Us Page */

/* General responsive adjustments */
@media (max-width: 991px) {
    .display-3 {
        font-size: 2.5rem !important;
    }

    .display-4 {
        font-size: 2rem !important;
    }

    .display-5 {
        font-size: 1.75rem !important;
    }

    .lead {
        font-size: 1.1rem !important;
    }

    .fs-lg {
        font-size: 1.1rem !important;
    }

    .py-14 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-md-16 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    /* Adjust section spacing on smaller screens */
    .mb-14 {
        margin-bottom: 3rem !important;
    }

    .mb-md-16 {
        margin-bottom: 4rem !important;
    }

    /* Stack columns on medium screens */
    .order-lg-2 {
        order: 0 !important;
    }

    /* Adjust button sizes */
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 767px) {
    .display-3 {
        font-size: 2rem !important;
    }

    .display-4 {
        font-size: 1.75rem !important;
    }

    .display-5 {
        font-size: 1.5rem !important;
    }

    .lead {
        font-size: 1rem !important;
    }

    .fs-lg {
        font-size: 1rem !important;
    }

    .py-14,
    .py-md-16 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .mb-14,
    .mb-md-16 {
        margin-bottom: 2rem !important;
    }

    /* Stack all columns on small screens */
    .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .col-lg-3,
    .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Adjust button for mobile */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-lg {
        padding: 1rem 1.5rem !important;
        font-size: 1.1rem !important;
    }

    /* Adjust grid items */
    .process-item {
        margin-bottom: 2rem;
    }


    .ps-lg-12 {
        padding-left: 0.75rem !important;
    }

    /* Center align text on mobile */
    .text-center {
        text-align: center !important;
    }

    /* Adjust spacing */
    .gx-lg-8,
    .gy-lg-10 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1.5rem;
    }
}

@media (max-width: 575px) {
    .display-3 {
        font-size: 1.75rem !important;
    }

    .display-4 {
        font-size: 1.5rem !important;
    }

    .display-5 {
        font-size: 1.25rem !important;
    }

    /* Further reduce padding on extra small screens */
    .p-8 {
        padding: 1.5rem !important;
    }

    .p-md-10 {
        padding: 2rem !important;
    }

    /* Adjust stat cards */
    .stat-mini-card {
        text-align: center;
    }

    /* Reduce font sizes further */
    .fs-sm {
        font-size: 0.75rem !important;
    }

    .widget-title {
        margin-bottom: 1.25rem !important;
        font-size: 0.95rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        color: #ffffff !important;
    }

    footer .fs-sm,
    footer address,
    footer p,
    footer li a {
        font-size: 0.85rem !important;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6) !important;
    }
}

/* Ensure images scale properly */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scrolling */
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Responsive video embeds if any */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 576px) {
    .btn-responsive {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}


/* ============================================
   COPIED FOOTER STYLES FROM INDEX PAGE
   ============================================ */

.widget-title {
    margin-bottom: 1.25rem !important;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #ffffff !important;
}

footer .fs-sm,
footer address,
footer p,
footer li a {
    font-size: 0.85rem !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6) !important;
}

.hover-grape:hover {
    color: #7a1e4f !important;
}

.nav.social.social-white {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.nav.social.social-white a {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.x-social-icon {
    height: 14px;
}

.x-social-icon svg {
    display: block;
    fill: #ffffff !important;
}

.nav.social.social-white i {
    font-size: 1rem;
    display: block;
    line-height: 1;
}