/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Reusable gradient border utility class with corner cuts and glow effect */
.gradient-border-card {
    position: relative;
    padding: 1.5rem;
    /* Add glow effect that won't be clipped */
    filter: drop-shadow(0 0 20px rgba(24, 171, 172, 0.4))
        drop-shadow(0 0 40px rgba(24, 171, 172, 0.2))
        drop-shadow(0 0 60px rgba(24, 171, 172, 0.1));
}

.gradient-border-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -2;
}

.gradient-border-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(-0deg, #00211c 0%, #006152 100%);
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -1;
}

/* ------------------------- */

.gradient-border-card {
    position: relative;
    padding: 1.5rem;
    /* Add glow effect that won't be clipped */
    filter: drop-shadow(0 0 20px rgba(24, 171, 172, 0.4))
        drop-shadow(0 0 40px rgba(24, 171, 172, 0.2))
        drop-shadow(0 0 60px rgba(24, 171, 172, 0.1));
}

.gradient-border-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -2;
}

.gradient-border-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(-0deg, #00211c 0%, #006152 100%);
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -1;
}

/* Enhanced gradient border card with stronger glow effect */
.gradient-border-card-enhanced {
    position: relative;
    padding: 1.5rem;
    /* Multiple layered glow effects for stronger appearance */
    filter: drop-shadow(0 0 10px rgba(24, 171, 172, 0.6))
        drop-shadow(0 0 20px rgba(24, 171, 172, 0.4))
        drop-shadow(0 0 40px rgba(24, 171, 172, 0.3))
        drop-shadow(0 0 60px rgba(24, 171, 172, 0.2))
        drop-shadow(0 0 80px rgba(24, 171, 172, 0.1));
}

.gradient-border-card-enhanced::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -2;
}

.gradient-border-card-enhanced::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(-0deg, #00211c 0%, #006152 100%);
    border-radius: 0.5rem;
    clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% 100%,
        20px 100%,
        0 calc(100% - 20px)
    );
    z-index: -1;
}

/* Alternative approach using box-shadow for better browser support */
.gradient-border-card-alt {
    background: linear-gradient(90deg, #00211c 0%, #006152 100%);
    border-radius: 0.5rem;
    padding: 1.5rem;
    position: relative;
}

.gradient-border-card-alt::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    border-radius: inherit;
    z-index: -1;
}

/* Mobile Menu Overlay Styles */
.mobile-overlay-option {
    animation: overlaySlideIn 0.3s ease-out;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.mobile-menu-option {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-menu-option:hover {
    transform: translateX(4px);
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile menu glass effect */
#mobileMenu {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Overlay animations */
@keyframes overlaySlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Custom border classes to replace Tailwind border utilities.
         These classes mirror the original Tailwind values so the
         design remains identical after removing Tailwind border classes
         from the HTML markup.
      */

/* width & style helpers */
.c-border {
    border-width: 1px !important;
    border-style: solid !important;
}

.c-border-3 {
    border-width: 3px !important;
    border-style: solid !important;
}
.c-border-b {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}
.c-border-t {
    border-top-width: 1px !important;
    border-top-style: solid !important;
}

/* color helpers (opacity matches Tailwind notations used in markup) */
.c-border-white-20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.c-border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.c-border-white-8 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.c-border-white {
    border-color: #ffffff !important;
}

/* teal border with gradient on hover - uses border-image for gradient effect
         Fallback: keep semi-transparent teal border when border-image not supported */
.c-border-teal-400-30 {
    border-color: rgba(23, 170, 171, 0.3) !important;
}

/* Create a helper for applying a gradient border on hover with rounded corners.
         Using clip-path approach since border-image doesn't work well with border-radius.
      */

    .c-border-teal-400-30 {
        position: relative;
        outline: 0.0125rem solid rgba(23, 170, 171, 0.3) !important;
    }

    .c-border-teal-400-30:hover::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px; /* This creates the border width */
        background: linear-gradient(
            90deg,
            #18abac 0%,
            #d28660 40%,
            #e97c51 60%,
            #9f4e4d 75%,
            #510e0c 100%
        );
        border-radius: inherit;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        pointer-events: none;
    }

    .c-border-teal-400-30:hover::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px; /* This creates the border width */
        background: linear-gradient(
            90deg,
            #18abac 0%,
            #d28660 40%,
            #e97c51 60%,
            #9f4e4d 75%,
            #510e0c 100%
        );
        border-radius: inherit;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        pointer-events: none;
    }

/* Also provide a hover utility variant class that some markup is using */
.hover-c-border-teal-300-50:hover {
    /* keep existing behavior for this class if used elsewhere */
    border-color: rgba(23, 170, 171, 0.5) !important;
}

.hover-c-border-01CAA1-50:hover {
    border-color: rgba(1, 202, 161, 0.5) !important;
}
.c-border-teal-400-50 {
    border-color: rgba(23, 170, 171, 0.5) !important;
}

/* Gradient border for Master My Winning LinkedIn Strategy service */
.c-border-gradient-default {
    position: relative;
    border: none !important;
    border-radius: 12px;
    overflow: hidden;
}

.c-border-gradient-default::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px; /* 3px border width to match c-border-3 */
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
}
.c-border-teal-300-30 {
    border-color: rgba(23, 170, 171, 0.3) !important;
}
.c-border-teal-300-50 {
    border-color: rgba(23, 170, 171, 0.5) !important;
}
.c-border-teal-500 {
    border-color: #01caa1 !important;
}
.c-border-teal-300 {
    border-color: rgba(23, 170, 171, 0.35) !important;
}

.c-border-gray-700-50 {
    border-color: rgba(55, 65, 81, 0.5) !important;
}

/* literal hex helpers used in markup (converted to safe class names) */
.c-border-006652 {
    border-color: #006652 !important;
}
.c-border-01CAA1-50 {
    border-color: rgba(1, 202, 161, 0.5) !important;
}

/* hover variants used in markup */
.hover-c-border-teal-300-50:hover {
    border-color: rgba(23, 170, 171, 0.5) !important;
}
.hover-c-border-01CAA1-50:hover {
    border-color: rgba(1, 202, 161, 0.5) !important;
}

@keyframes overlaySlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Mobile overflow prevention */
@media (max-width: 640px) {
    .fixed.inset-0 {
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
    }

    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Ensure overlay appears above everything on mobile */
    #mobileMenuOverlay {
        z-index: 9999 !important;
    }

    /* Ensure mobile menu appears above profile and hero content */
    #mobileMenu {
        z-index: 250 !important;
        position: absolute !important;
    }

    /* Lower z-index for profile image and hero content */
    .hero-section,
    .profile-image-container {
        z-index: 1 !important;
        position: relative;
    }
}

/* Tablet and desktop - hide overlay */
@media (min-width: 1024px) {
    #mobileMenuOverlay {
        display: none !important;
    }
}

/* Custom Pricing Card Styles */
.pricing-card {
    position: relative;
    transition: all 0.3s ease;
}

.border-3 {
    border-width: 3px;
}

/* Text glow effect for the "And that's just the beginning" section */
.text-shadow-glow {
    text-shadow: 0px 0px 4px rgba(0, 212, 170, 0.6);
}

/* Fixed header styles */
.fixed-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 100%;
}

.fixed-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 150;
    top: 60px; /* Adjust based on banner height */
}

/* Responsive adjustments for fixed headers */
@media (max-width: 640px) {
    .fixed-header {
        top: 80px; /* Navbar sits right under fixed banner on mobile */
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .fixed-header {
        top: 55px; /* Medium banner height on tablet */
    }
}

@media (min-width: 1025px) {
    .fixed-header {
        top: 60px; /* Full banner height on desktop */
    }
}

/* Custom responsive text sizing */
@media (max-width: 640px) {
    .text-shadow-glow {
        text-shadow: 0px 0px 3px rgba(0, 212, 170, 0.5);
    }
}

/* Inline style conversions */

/* Banner styles */
.banner-gradient-bg {
    background: linear-gradient(
        92deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
}

.banner-text {
    font-family: Montserrat;
    font-weight: 600;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Header styles */
.header-shadow {
    box-shadow: 0px 19px 42px rgba(100, 86, 241, 0.06);
}

.logo-text {
    font-family: Avenir;
    font-weight: 800;
}

.nav-link {
    font-family: Montserrat;
    font-weight: 500;
}

/* Services button styles */
.services-btn {
    background: linear-gradient(183deg, #00b59c 0%, #1b977e 100%);
    color: #f9fafb;
    font-family: Outfit;
    font-weight: 600;
}

.services-icon {
    background: linear-gradient(191deg, white 0%, #47f9b2 100%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid #e6faf6;
}

.services-icon-arrow {
    transform: rotate(0deg);
}

/* Mobile menu styles */
.mobile-menu-blur {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mobile-menu-link {
    font-family: Montserrat;
    font-weight: 500;
}

.mobile-overlay-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.overlay-title {
    font-family: Montserrat;
    font-weight: 700;
}

.overlay-text {
    font-family: Montserrat;
    font-weight: 400;
}

/* Hero section styles */
.profile-shadow {
    box-shadow: 0px 0px 26.7px 2px white;
}

.hero-title {
    font-family: Montserrat;
    font-weight: 700;
}

.hero-subtitle {
    font-family: Montserrat;
    font-weight: 500;
}

.hero-highlight {
    font-family: Montserrat;
    font-weight: 600;
}

.hero-bold {
    font-weight: 700;
}

.hero-bold-montserrat {
    font-family: Montserrat;
    font-weight: 700;
}

.hero-text {
    font-family: Montserrat;
    font-weight: 500;
}

/* Greeting banner */
.greeting-banner-bg {
    background: #005444;
}

.greeting-text {
    font-family: Montserrat;
    font-weight: 500;
}

/* Differences section */
.differences-bg {
    background: linear-gradient(
        92deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
}

.differences-header-bg {
    background: linear-gradient(
        180deg,
        rgba(0, 181, 156, 0.12) 0%,
        rgba(0, 181, 156, 0.06) 50%,
        rgba(0, 181, 156, 0.02) 90%
    );
    border: 0.5px solid #05725c;
}

.differences-title {
    font-family: Montserrat;
    font-weight: 600;
}

.differences-subtitle {
    font-family: Montserrat;
    font-weight: 600;
}

.differences-item-icon {
    background: linear-gradient(90deg, #1de9b6 0%, #b9f6ca 100%);
}

.differences-item-text {
    font-family: Montserrat;
    font-weight: 500;
    text-shadow: 0px 0px 4px rgba(0, 212, 170, 0.6);
}

/* Content cards */
.content-card-bg {
    background: linear-gradient(0deg, #011f1b 0%, #004f44 100%);
    /* stronger external glow */
    box-shadow: 0px 8px 40px rgba(1, 202, 161, 0.45),
        0px 16px 80px rgba(1, 202, 161, 0.35),
        inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.content-card-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* increase the internal glow overlay alpha and spread */
    background: linear-gradient(
        135deg,
        rgba(1, 202, 161, 0.22) 0%,
        rgba(0, 79, 68, 0.15) 100%
    );
    border-radius: 16px;
    pointer-events: none;
}

.content-card-border {
    background: linear-gradient(
        90deg,
        #18abac 0%,
        #d28660 40%,
        #e97c51 60%,
        #9f4e4d 75%,
        #510e0c 100%
    );
    /* more pronounced colored ring glow */
    box-shadow: 0px 0px 30px rgba(24, 171, 172, 0.7),
        0px 0px 70px rgba(24, 171, 172, 0.5);
}

.content-card-inner {
    background: linear-gradient(0deg, #011f1b 0%, #004f44 100%);
    border-radius: 14px;
    /* subtle inner glow to make the card feel brighter */
    box-shadow: inset 0px 8px 40px rgba(1, 202, 161, 0.08);
}

.content-text-glow {
    text-shadow: 0px 0px 4px rgba(0, 181, 156, 0.8),
        0px 0px 8px rgba(0, 181, 156, 0.4), 0px 0px 12px rgba(0, 181, 156, 0.2);
}

/* Teal accent color */
.teal-accent {
    color: #01c9a1;
}

/* SVG gradient stops */
.gradient-stop-1 {
    stop-color: #faf180;
}

.gradient-stop-2 {
    stop-color: #ffc943;
}

.gradient-stop-3 {
    stop-color: #ffaa39;
}

/* Enhanced smooth scrolling */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* Ensure smooth scrolling works with fixed header */
#wall-of-love {
    scroll-margin-top: 100px; /* Adjust based on header height */
}

.glow-btn {
    width: 100%;
    max-width: 321px;
    height: 114px;
    border: none;
    cursor: pointer;
    background-image: url("{{ asset('assets/images/icons/glow-btn.svg') }}");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 26px;
    transition: transform 0.3s ease;
}

.glow-btn:hover {
    transform: translateY(-2px);
}

/* Smooth scroll animation for better UX */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Fallback for browsers that don't support scroll-behavior */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}