/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&family=Inter:wght@400;700&display=swap');

/* === Global Styles & Base Typography === */
body {
    background-color: #000000; /* Dark background */
    color: #ffffff;
    font-family: 'Inter', sans-serif; /* HK Grotesk alternative / Default body font */
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from orbs */
    position: relative; /* For orb positioning context */
    /* Updated padding-top for the new fixed navbar style */
    padding-top: 90px; /* Adjust this value based on final navbar height + top offset */
}

h1, .main-headline { /* Styles for main headline in hero section */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 2rem; /* Base size */
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}
.main-headline .text-red {
    background:#ff0000;
    font-weight: 700;
    font-size: 2.5rem; 
    -webkit-background-clip: text; /* Clip background to text shape */
    -webkit-text-fill-color: transparent; /* Make text transparent so gradient shows */
    background-clip: text;
    display: inline-block;
    text-shadow:
        0 0 8px #ff00004f,
        0 0 16px #db02029d,
        0 0 24px #c90000cc,
        0 0 32px #ff0000;
}
/* Responsive adjustments for Main Text Section */
@media (max-width: 767.98px) { /* Medium devices (mobile) */
    .main-headline {
        padding: 2rem;
    }
    .main-headline {
        font-size: 1.8rem; /* Slightly smaller on mobile */
    }
}

/* === Wildfire Text Section === */
.wildfire-text-section {
    background-color: #000000; /* Pure black background */
    padding: 100px 0; /* Ample padding for spacing */
    position: relative;
    z-index: 1; /* Ensure text is above any background orbs */
    overflow: hidden; /* Prevent content overflow */
}

.wildfire-main-text {
    font-family: 'Montserrat', sans-serif; /* Consistent bold font */
    font-weight: 600; /* Extra bold */
    font-size: 3rem; /* Large font size */
    color: #ffffff; /* Default white text */
    line-height: 1.3; /* Spacing between lines */
    text-transform: uppercase; /* As seen in the image */
}

/* Gradient text effect for highlighted words */
.wildfire-main-text .text-blue {
    background:#0057ff; /* Blue to Purple gradient */
    font-size: 3.2rem;
    -webkit-background-clip: text; /* Clip background to text shape */
    -webkit-text-fill-color: transparent; /* Make text transparent so gradient shows */
    background-clip: text;
    display: inline-block; /* Essential for text-gradient to work properly */
}
.wildfire-main-text .text-red {
    background:#ff0000;
    font-size: 3.8rem; 
    -webkit-background-clip: text; /* Clip background to text shape */
    -webkit-text-fill-color: transparent; /* Make text transparent so gradient shows */
    background-clip: text;
    display: inline-block; /* Essential for text-gradient to work properly */
}

/* Responsive adjustments for Wildfire Text Section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .wildfire-text-section {
        padding: 80px 0;
    }
    .wildfire-main-text {
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .wildfire-text-section {
        padding: 60px 15px;
    }
    .wildfire-main-text {
        font-size: 2.2rem;
        line-height: 1.4;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .wildfire-text-section {
        padding: 40px 15px;
    }
    .wildfire-main-text {
        font-size: 1.8rem;
    }
}

/* === Updated Navbar Styles (MORTZZ Custom) === */
.mortzz-navbar-custom {
    padding: 0;
    background: transparent;
    border-bottom: none;
    top: 10px; /* Space from the top of the viewport */
    /* Note: fixed-top is applied via Bootstrap class in HTML */
}

.mortzz-navbar-custom .mortzz-navbar-container {
    background-color: rgba(20, 20, 30, 0.85); /* Dark, slightly transparent background */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border-radius: 50px; /* Pill shape */
    padding: 0.5rem 1.5rem; /* Inner padding */
    max-width: 960px; /* Max width of the navbar */
    margin: 0 auto; /* Center the container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

.mortzz-navbar-custom .logo-text { /* Applied to navbar-brand */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #ffffff !important;
}

.mortzz-navbar-custom .navbar-nav .nav-link {
    color: #e0e0e0;
    margin-left: 0.8rem;
    margin-right: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    border-radius: 20px;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.mortzz-navbar-custom .navbar-nav .nav-link:hover,
.mortzz-navbar-custom .navbar-nav .nav-link.active {
    color: #ffffff;
    background-color: rgba(255, 0, 0, 0.3); /* Subtle red highlight on hover/active */
    transform: translateY(-2px);
}

.mortzz-navbar-custom .sign-up-btn-updated { /* Specific class for the updated sign-up button */
    background-color: #ff0000; /* MORTZZ Red */
    color: #ffffff !important;
    border: none;
    border-radius: 25px;
    padding: 0.6rem 1.8rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
}

.mortzz-navbar-custom .sign-up-btn-updated:hover {
    background-color: #cc0000; /* Darker red on hover */
    color: #ffffff !important;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.5);
}

/* === Moving Orbs === */
.orb {
    position: fixed; /* Relative to viewport for consistent background effect */
    border-radius: 50%;
    filter: blur(100px); /* Strong blur for glow effect */
    opacity: 0.5; /* Adjust for intensity */
    z-index: -1; /* Behind all content */
    pointer-events: none; /* Orbs should not be interactive */
    transition: transform 0.1s linear; /* Smooth movement */
}

.red-orb {
    width: 25rem;
    height: 25rem;
    background-color: #ff0000;
    top: 10%; /* Initial position */
    left: -5%;
}

.blue-orb {
    width: 22rem;
    height: 22rem;
    background-color: #0057ff;
    bottom: 5%; /* Initial position */
    right: -10%;
}

/* === Hero Section === */
.hero-section {
    padding: 60px 0;
    position: relative; /* For stacking context if needed */
    z-index: 1; /* Ensure content is above orbs */
    min-height: calc(100vh - 90px); /* Full viewport height minus navbar's space */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Ensures content within is centered by default */
}

.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background-color: #222; /* Placeholder bg for video before it loads */
    margin-left: auto; /* For centering if col-lg-8 is not full width of its parent */
    margin-right: auto;
}

.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.book-spot-btn {
    background-color: #0057ff; /* Blue */
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    display: inline-block; /* Ensure it behaves like a block for margin/padding but flows */
}

.book-spot-btn:hover {
    background-color: #0045cc; /* Darker blue */
    transform: scale(1.05);
    color: #ffffff;
}

.sub-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #e0e0e0;
    margin-top: 2rem; /* Default was 2rem, can be adjusted */
}

.deals-text {
    margin-top: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #c0c0c0;
}





/* === Mobile Videos Section === */
.mobile-vids-section {
    
    padding: 25rem; 
    position:relative;
    overflow: hidden; /* Hide initial phone pop-up */
}

.mobile-vids-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: #ffffff;
}

.mobile-vids-row {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: flex-end; /* Align phones at the bottom initially */
  gap: 20px;
}

/* 4 columns for mobile-video-wrapper on large screens */
@media (min-width: 992px) {
  .mobile-videos-row {
    flex-wrap: wrap;
  }
  .mobile-video-wrapper {
    flex: 0 0 calc(25% - 20px); /* Four columns */
    max-width: calc(25% - 20px);
  }
}


.mobile-video-wrapper.animate {
    opacity: 1;
    transform: translateY(0); /* Pop into view */
    
}

.mobile-video-wrapper.animate {
    opacity: 1;
    transform: translateY(0); /* Pop into view */
    animation: jiggle-up-down 0.7s cubic-bezier(.4,0,.2,1) 0.6s 1;
}

.mobile-video-wrapper:nth-child(1) { transition-delay: 0.2s; }
.mobile-video-wrapper:nth-child(2) { transition-delay: 0.3s; }
.mobile-video-wrapper:nth-child(3) { transition-delay: 0.4s; }
.mobile-video-wrapper:nth-child(4) { transition-delay: 0.5s; }

.phone-frame {
    position: relative;
    padding-bottom: 177.78%; /* 9:16 aspect ratio (portrait) */
    height: 0;
    overflow: hidden;
    background-color: #111; /* Dark background for phone frame */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.phone-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video fills the frame */
}

/* === Testimonials Section === */
        .testimonials-section {
            padding: 80px 0;
            position: relative;
            z-index: 1;
        }

        .testimonials-heading {
            padding-top: 5rem;
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            font-size: 2.8rem;
            color: #ffffff;
            text-transform: uppercase;
            margin-bottom: 3rem;
        }

        /* --- Video Styles --- */
        .testimonial-video-container {
            max-width: 320px; /* Controls the width of the video */
            margin: 0 auto; /* Centers the container */
            border-radius: 20px; /* Rounded corners */
            overflow: hidden; /* Ensures the iframe corners are also rounded */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .testimonial-video-wrapper {
            position: relative;
            /* Aspect ratio for a vertical/short video (9:16) */
            padding-top: 177.77%; 
            height: 0;
            width: 100%;
        }

        .testimonial-video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* --- Client Info Styles --- */
        .client-info {
            margin-top: 1.5rem; /* Space between video and name */
        }

        .client-name {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            color: #ffffff;
            margin-bottom: 0.25rem;
        }

        .client-ig a {
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            color: #00aaff; /* A bright blue for the link */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .client-ig a:hover {
            color: #0077cc; /* Darker blue on hover */
            text-decoration: underline;
        }


        .carousel-inner {
            /* Add some padding to ensure videos don't touch the controls */
            padding: 0 50px;
            padding-bottom: 2rem; /* Add space at the bottom for client info */
        }


        /* Carousel Controls */
        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: brightness(0) invert(1);
            width: 2rem;
            height: 2rem;
        }

        .carousel-indicators {
            margin-bottom: 0; /* Adjust indicator position */
        }

        .carousel-indicators [data-bs-target] {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            transition: background-color 0.3s ease;
        }

        .carousel-indicators .active {
            background-color: #ff0000;
        }

        /* Testimonials Sign Up Button */
        .testimonials-signup-btn {
            background: linear-gradient(90deg, #8a2be2, #0057ff);
            color: #ffffff !important;
            border: none;
            border-radius: 30px;
            padding: 1.2rem 3rem !important;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.3rem;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            z-index: 2;
            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
        }

        .testimonials-signup-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            transform: skewX(-20deg);
            transition: all 0.7s ease;
            z-index: 0;
        }

        .testimonials-signup-btn:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
        }

        .testimonials-signup-btn:hover::before {
            left: 125%;
        }

        /* Responsive adjustments */
        @media (max-width: 767.98px) {
            .testimonials-heading {
                font-size: 1.8rem;
            }
            .testimonial-video-container {
                max-width: 280px; /* Slightly smaller video on mobile */
            }
        }

/* === Responsive Adjustments === */

/* Navbar Responsive */
@media (max-width: 991.98px) { /* Bootstrap lg breakpoint */
    .mortzz-navbar-custom .mortzz-navbar-container {
        max-width: 90%; /* Allow it to be a bit wider on tablets */
        padding: 0.5rem 1rem;
    }
    .mortzz-navbar-custom .navbar-collapse { /* Styling for the collapsed menu container */
        background-color: rgba(30, 30, 40, 0.95);
        border-radius: 20px;
        margin-top: 10px;
        padding: 1rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .mortzz-navbar-custom .navbar-nav {
        align-items: center; /* Center items in collapsed menu */
    }
    .mortzz-navbar-custom .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }
    .mortzz-navbar-custom .navbar-nav .nav-link {
        margin-left: 0;
        margin-right: 0;
        display: block; /* Make links take full width */
        text-align: center;
    }
    .mortzz-navbar-custom .sign-up-btn-updated {
        width: auto;
        padding: 0.5rem 1.5rem !important;
        margin-top: 0.5rem;
    }
    body {
        padding-top: 80px; /* Adjust body padding for tablet navbar */
    }
     .main-headline { /* Hero headline adjustments */
        font-size: 1.5rem;
    }
    .clients-section .client-heading {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) { /* Bootstrap md breakpoint */
    .mortzz-navbar-custom .logo-text {
        font-size: 1.6rem;
     }
    .main-headline {
        font-size: 1.8rem;
    }
    .sub-headline {
        font-size: 1.1rem;
    }
    .deals-text {
        font-size: 1rem;
    }
    .book-spot-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    .orb { /* Orbs on smaller screens */
        filter: blur(60px);
        opacity: 0.4;
    }
    .red-orb { width: 300px; height: 300px; }
    .blue-orb { width: 350px; height: 350px; }

    .clients-section .client-heading {
        font-size: 1.6rem;
    }
    .client-logo-wrapper {
        min-height: 80px; /* Adjust for smaller screens */
        padding: 10px 15px;
    }
    .client-logos-grid {
        gap: 15px;
    }
}

@media (max-width: 575.98px) { /* Bootstrap sm breakpoint */
    .mortzz-navbar-custom .mortzz-navbar-container {
        border-radius: 30px; /* Slightly less rounding on small screens */
    }
     .mortzz-navbar-custom .logo-text {
        font-size: 1.5rem;
     }
    body {
        padding-top: 75px; /* Adjust body padding for mobile navbar */
    }
    .main-headline {
        font-size: 1.6rem;
    }
     .hero-section {
        padding: 40px 15px; /* More padding on sides for small screens */
    }
    .orb { /* Orbs on very small screens */
        filter: blur(40px);
        opacity: 0.3;
    }
    .red-orb { width: 200px; height: 200px; }
    .blue-orb { width: 250px; height: 250px; }

    .clients-section .client-heading {
        font-size: 1.4rem;
    }
    .clients-section {
        padding: 40px 0;
    }
    .client-logos-grid .col-6 { /* Ensure 2 columns on extra small screens */
        flex: 0 0 50%;
        max-width: 50%;
    }

    .mobile-vids-heading {
        font-size: 1.8rem;
    }

    .mobile-videos-row {
        flex-direction: column; /* Stack phones on small screens */
        align-items: center; /* Center them */
    }

    .mobile-video-wrapper {
        flex: 0 0 80%; /* Take up most of the width */
        max-width: 80%;
        margin-bottom: 30px; /* More spacing */
    }
}

/* === What You Get Section === */
.what-you-get-section {
    
    padding: 80px 0; /* More vertical padding */
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
}

.what-you-get-heading {
    padding: 5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Extra bold */
    font-size: 2.8rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4rem; /* More space below heading */
}

.what-you-get-card {
    background-color: rgba(20, 20, 30, 0.6); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
    border-radius: 15px;
    padding: 30px;
    height: 100%; /* Ensure cards in a row have equal height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.what-you-get-card:hover {
    background-color: rgba(20, 20, 30, 0.9); /* Slightly less transparent on hover */
    transform: translateY(-8px); /* Lift effect */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3); /* Border brightens on hover */
}

.what-you-get-card .card-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(0, 87, 255, 0.2)); /* Subtle gradient for icon background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 2px solid transparent; /* For hover effect */
    transition: background 0.3s ease, border-color 0.3s ease;
}

.what-you-get-card:hover .card-icon-wrapper {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.4), rgba(0, 87, 255, 0.4));
    border-color: #ff0000; /* Red border on hover */
}

.what-you-get-card .card-icon {
    width: 40px;
    height: 40px;
    /* Fill color is set directly in HTML for each SVG to alternate red/blue */
    transition: transform 0.3s ease;
}

.what-you-get-card:hover .card-icon {
    transform: scale(1.1); /* Icon slightly grows on hover */
}

.what-you-get-card .card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.3;
}

.what-you-get-card .card-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #e0e0e0; /* Slightly off-white for body text */
    line-height: 1.6;
}

/* Responsive adjustments for What You Get section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .what-you-get-heading {
        font-size: 2.2rem;
    }
    .what-you-get-card {
        padding: 25px;
    }
    .what-you-get-card .card-title {
        font-size: 1.3rem;
    }
    .what-you-get-card .card-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .what-you-get-section {
        padding: 60px 0;
    }
    .what-you-get-heading {
        font-size: 1.8rem;
        margin-bottom: 3rem;
    }
    .what-you-get-card {
        padding: 20px;
    }
    .what-you-get-card .card-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }
    .what-you-get-card .card-icon {
        width: 35px;
        height: 35px;
    }
    .what-you-get-card .card-title {
        font-size: 1.2rem;
    }
    .what-you-get-card .card-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .what-you-get-heading {
        font-size: 1.6rem;
    }
    .what-you-get-card {
        padding: 15px;
    }
    .what-you-get-card .card-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    .what-you-get-card .card-icon {
        width: 30px;
        height: 30px;
    }
    .what-you-get-card .card-title {
        font-size: 1.1rem;
    }
    .what-you-get-card .card-description {
        font-size: 0.85rem;
    }
}

/* === Who This For Section === */
.who-this-for-section {
    
    padding: 80px 0;
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
}

.for-card {
    background-color: rgba(20, 20, 30, 0.8); /* Semi-transparent dark background for cards */
    border-radius: 15px;
    padding: 40px;
    height: 100%; /* Ensure cards are same height */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text to left within card */
    text-align: left; /* Align text to left within card */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.for-card-blue {
    border: 2px solid #0057ff; /* Blue border */
}

.for-card-red {
    border: 2px solid #ff0000; /* Red border */
}

.for-card:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.for-card .card-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: center; /* Center the heading within the card */
    width: 100%; /* Ensure heading takes full width for centering */
}

.for-card .card-list {
    padding-left: 20px; /* Indent list items */
    margin-bottom: 0;
}

.for-card .card-list li {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #e0e0e0; /* Slightly off-white for list items */
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    line-height: 1.5;
}

.for-card .card-list li:last-child {
    margin-bottom: 0;
}

/* Custom bullet points */
.for-card-blue .card-list li::before {
    content: '\2022'; /* Unicode for bullet point */
    color: #0057ff; /* Blue bullet */
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    line-height: 1;
    top: 0;
}

.for-card-red .card-list li::before {
    content: '\2022'; /* Unicode for bullet point */
    color: #ff0000; /* Red bullet */
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    line-height: 1;
    top: 0;
}

.sign-up-btn-bottom {
    background-color: #ff0000; /* MORTZZ Red */
    color: #ffffff !important;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 2.5rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
    margin-top: 50px; /* Space from cards */
}

.sign-up-btn-bottom:hover {
    background-color: #cc0000; /* Darker red on hover */
    color: #ffffff !important;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.5);
}

/* Responsive adjustments for Who This For section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .for-card {
        padding: 30px;
    }
    .for-card .card-heading {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }
    .for-card .card-list li {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    .sign-up-btn-bottom {
        font-size: 1rem;
        padding: 0.7rem 2rem !important;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .who-this-for-section {
        padding: 60px 15px; /* Add horizontal padding */
    }
    .for-card {
        padding: 25px;
        margin-bottom: 30px; /* Space between stacked cards */
    }
    .for-card .card-heading {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .for-card .card-list {
        padding-left: 15px;
    }
    .for-card .card-list li {
        font-size: 0.95rem;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    .for-card-blue .card-list li::before,
    .for-card-red .card-list li::before {
        font-size: 1.3rem;
    }
    .sign-up-btn-bottom {
        font-size: 0.9rem;
        padding: 0.6rem 1.8rem !important;
        margin-top: 30px;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .for-card {
        padding: 20px;
    }
    .for-card .card-heading {
        font-size: 1.4rem;
    }
    .for-card .card-list li {
        font-size: 0.9rem;
    }
}

/* === Services / What You Get Section === */
.services-section {
    
    padding: 80px 0;
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
}

.services-main-heading {
    padding: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.8rem;
    color: #ffffff;
    text-transform: uppercase;
    
}

.services-sub-heading {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #c0c0c0; /* Lighter grey for sub-heading */
    margin-bottom: 2rem;
}

.service-item {
    background-color: rgba(20, 20, 30, 0.7); /* Slightly transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle white border */
    border-radius: 10px;
    padding: 30px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.service-item:hover {
    transform: translateY(-8px); /* Lift effect */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    background-color: rgba(20, 20, 30, 0.9); /* Less transparent on hover */
    border-color: rgba(255, 255, 255, 0.2); /* Border brightens on hover */
}

.service-item .service-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.service-item .service-number {
    color: #ff0000; /* Red color for the number */
    font-size: 1.8rem; /* Slightly larger number */
    margin-right: 10px;
}

.service-item .service-value {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0057ff; /* Blue color for the value */
    margin-bottom: 15px;
}

.service-item .service-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #e0e0e0; /* Slightly off-white for description text */
    line-height: 1.7;
}

.service-item .highlight-bold {
    font-weight: 700;
    color: #ffffff; /* Make highlighted text pure white */
}

/* Responsive adjustments for Services Section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .services-main-heading {
        font-size: 2.2rem;
    }
    .services-sub-heading {
        font-size: 1rem;
    }
    .service-item {
        padding: 25px;
    }
    .service-item .service-title {
        font-size: 1.5rem;
    }
    .service-item .service-number {
        font-size: 1.6rem;
    }
    .service-item .service-value {
        font-size: 1rem;
    }
    .service-item .service-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .services-section {
        padding: 60px 0;
    }
    .services-main-heading {
        font-size: 1.8rem;
    }
    .services-sub-heading {
        font-size: 0.9rem;
    }
    .service-item {
        padding: 20px;
    }
    .service-item .service-title {
        font-size: 1.3rem;
    }
    .service-item .service-number {
        font-size: 1.4rem;
    }
    .service-item .service-value {
        font-size: 0.9rem;
    }
    .service-item .service-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .services-main-heading {
        font-size: 1.6rem;
    }
    .service-item {
        padding: 15px;
    }
    .service-item .service-title {
        font-size: 1.2rem;
    }
    .service-item .service-number {
        font-size: 1.3rem;
    }
    .service-item .service-description {
        font-size: 0.85rem;
    }
}

/* === Money Back Section === */
.moneyback-section {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(0, 87, 255, 0.1)); /* Subtle gradient background */
    padding: 100px 0; /* More vertical padding for prominence */
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
    overflow: hidden; /* Hide anything overflowing from background elements */
}

.moneyback-main-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 3.5rem; /* Larger heading */
    color: #0057ff; /* Blue color as per image */
    text-transform: uppercase;
    margin-bottom: 1rem;
    position: relative; /* For z-index over orbs */
    z-index: 2;
}

.moneyback-sub-heading {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    color: #c0c0c0; /* Lighter grey */
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.moneyback-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 4.5rem; /* Very large value */
    color: #ff0000; /* Red color as per image */
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
    /* Adding a subtle text shadow for glow */
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.3);
}

.moneyback-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    color: #e0e0e0; /* Slightly off-white */
    line-height: 1.8;
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Claim Your Spot Button */
.claim-spot-btn {
    background: linear-gradient(90deg, #8a2be2, #0057ff); /* Purple to Blue gradient */
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 1.2rem 3rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden; /* Needed for shine effect */
    z-index: 2; /* Ensure button is above orbs */
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Shine effect */
.claim-spot-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%; /* Start off-left */
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* White shine */
    transform: skewX(-20deg); /* Angle the shine */
    transition: all 0.7s ease;
    z-index: 0;
}

.claim-spot-btn:hover {
    transform: translateY(-5px) scale(1.02); /* Slight lift and scale */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.claim-spot-btn:hover::before {
    left: 125%; /* Move shine across button */
}

/* Responsive adjustments for Money Back Section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .moneyback-main-heading {
        font-size: 2.8rem;
    }
    .moneyback-value {
        font-size: 3.8rem;
    }
    .moneyback-description {
        font-size: 1rem;
    }
    .claim-spot-btn {
        padding: 1rem 2.5rem !important;
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .moneyback-section {
        padding: 80px 15px;
    }
    .moneyback-main-heading {
        font-size: 2.2rem;
    }
    .moneyback-sub-heading {
        font-size: 1.1rem;
    }
    .moneyback-value {
        font-size: 3rem;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.2);
    }
    .moneyback-description {
        font-size: 0.9rem;
    }
    .claim-spot-btn {
        padding: 0.8rem 2rem !important;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .moneyback-main-heading {
        font-size: 1.8rem;
    }
    .moneyback-value {
        font-size: 2.5rem;
    }
    .moneyback-description {
        font-size: 0.85rem;
    }
    .claim-spot-btn {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.9rem;
    }
}

/* === Meet The Maker Section === */
.meet-maker-section {
    background-color: #000000; /* Dark background */
    padding: 80px 0;
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
    overflow: hidden;
}

.maker-main-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 30px;
    text-align: left;
}

.maker-main-heading .highlight-maker {
    color: #ff0000; /* Red highlight for "THE MAKER" */
}

/* New style for the text box in "Meet The Maker" section */
.maker-text-box {
    background-color: rgba(20, 20, 30, 0.7); /* Semi-transparent dark background */
    min-width: 50rem;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
    border-radius: 15px;
    padding: 30px; /* Padding inside the box */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.maker-text-box:hover {
    background-color: rgba(20, 20, 30, 0.9); /* Slightly less transparent on hover */
    border-color: rgba(255, 255, 255, 0.3); /* Border brightens on hover */
}

/* Adjustments for responsive design within the text box */
@media (max-width: 991.98px) {
    .maker-text-box {
        padding: 25px;
    }
}

@media (max-width: 767.98px) {
    .maker-text-box {
        padding: 20px;
    }
}

@media (max-width: 575.98px) {
    .maker-text-box {
        padding: 15px;
    }
}

.maker-intro-text,
.maker-agency-specializes,
.maker-conclusion-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left;
}

.maker-intro-text .highlight-bold {
    font-weight: 700;
    color: #ffffff;
}

.maker-agency-specializes {
    font-weight: 700;
    margin-bottom: 10px;
}

.maker-specialties-list {
    margin-bottom: 25px;
    padding-left: 20px; /* Indent list items */
}

.maker-specialties-list li {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #c0c0c0;
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    line-height: 1.6;
}

.maker-specialties-list li::before {
    content: '\2022'; /* Unicode for bullet point */
    color: #0057ff; /* Blue bullet */
    position: absolute;
    left: 0;
    font-size: 1.4rem;
    line-height: 1;
    top: 0;
}

.maker-profile-pic {
    border-radius: 15px; /* Slightly rounded corners for the image */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    
}

/* Book Your Spot Button (Meet The Maker) */
.book-spot-maker-btn {
    background: linear-gradient(90deg, #ff0000, #cc0000); /* Red gradient */
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 1rem 2.5rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden; /* Needed for shine effect */
    z-index: 2;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Shine effect for this button */
.book-spot-maker-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%; /* Start off-left */
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* White shine */
    transform: skewX(-20deg); /* Angle the shine */
    transition: all 0.7s ease;
    z-index: 0;
}

.book-spot-maker-btn:hover {
    transform: translateY(-5px) scale(1.02); /* Slight lift and scale */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.book-spot-maker-btn:hover::before {
    left: 125%; /* Move shine across button */
}

/* Responsive adjustments for Meet The Maker Section */
@media (max-width: 991.98px) {
    .meet-maker-section {
        padding: 60px 15px;
    }
    .maker-main-heading {
        font-size: 2.2rem;
        margin-bottom: 20px;
        text-align: center;
    }
    .maker-text-box {
        min-width: 0;
        padding: 20px;
    }
    .maker-intro-text,
    .maker-agency-specializes,
    .maker-conclusion-text {
        font-size: 1rem;
        margin-bottom: 15px;
        text-align: center;
    }
    .maker-specialties-list {
        padding-left: 0;
        text-align: center;
        display: inline-block;
    }
    .maker-specialties-list li {
        font-size: 0.95rem;
        margin-bottom: 5px;
        padding-left: 0;
        text-align: left;
    }
    .maker-specialties-list li::before {
        position: static;
        margin-right: 5px;
        font-size: 1.2rem;
    }
    .maker-profile-pic {
        max-width: 30rem;
        margin: 0 auto 20px auto;
        display: block;
    }
    .book-spot-maker-btn {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .maker-profile-pic {
        max-width: 28rem;
        margin: 0 auto 20px auto;
        display: block;
    }
    .meet-maker-section {
        padding: 40px 5px;
    }
    .maker-main-heading {
        font-size: 1.4rem;
    }
    .maker-text-box {
        padding: 10px;
    }
    .maker-intro-text,
    .maker-agency-specializes,
    .maker-conclusion-text {
        font-size: 0.9rem;
    }
    .maker-specialties-list li {
        font-size: 0.85rem;
    }
    .maker-image-wrapper {
        max-width: 120px;
        margin-bottom: 1rem;
    }
}

/* === FAQ Section === */
.faq-section {
    background-color: #000000; /* Dark background */
    padding: 80px 0;
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
}

.faq-main-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.8rem;
    padding-top: 5rem;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.faq-main-heading .highlight-blue {
    color: #0057ff; /* Blue highlight for "QUESTIONS" */
}

.faq-contact-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #c0c0c0;
    margin-bottom: 40px;
}

.faq-email-link {
    color: #ff0000; /* Red color for email link */
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.faq-email-link:hover {
    color: #cc0000; /* Darker red on hover */
    text-decoration: underline;
}

/* Accordion Customization */
.accordion-item {
    background-color: rgba(20, 20, 30, 0.7); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden; /* Ensures border-radius applies correctly */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.accordion-item:hover {
    background-color: rgba(20, 20, 30, 0.9); /* Less transparent on hover */
    border-color: rgba(255, 255, 255, 0.2); /* Border brightens on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.accordion-header {
    border-bottom: none;
}

.accordion-button {
    background-color: transparent !important; /* Keep button background transparent */
    color: #ffffff !important; /* White text for questions */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 20px 25px;
    border-radius: 10px; /* Match item border-radius */
    transition: color 0.3s ease, background-color 0.3s ease;
    box-shadow: none !important; /* Remove default Bootstrap shadow */
}

.accordion-button:not(.collapsed) {
    background-color: rgba(30, 30, 40, 0.9) !important; /* Slightly darker when open */
    color: #ff0000 !important; /* Red text when open */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Separator when open */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-button::after {
    filter: brightness(0) invert(1); /* Make default caret white */
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1) sepia(1) saturate(100) hue-rotate(300deg); /* Make caret red when open */
}

.accordion-body {
    background-color: rgba(20, 20, 30, 0.9); /* Darker background for answer */
    color: #e0e0e0; /* Slightly off-white text for answers */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 20px 25px;
    line-height: 1.7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* FAQ Sign Up Button (similar to moneyback button) */
.faq-signup-btn {
    background: linear-gradient(90deg, #8a2be2, #0057ff); /* Purple to Blue gradient */
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 1.2rem 3rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden; /* Needed for shine effect */
    z-index: 2;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Shine effect for FAQ button */
.faq-signup-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%; /* Start off-left */
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* White shine */
    transform: skewX(-20deg); /* Angle the shine */
    transition: all 0.7s ease;
    z-index: 0;
}

.faq-signup-btn:hover {
    transform: translateY(-5px) scale(1.02); /* Slight lift and scale */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.faq-signup-btn:hover::before {
    left: 125%; /* Move shine across button */
}

/* Responsive adjustments for FAQ Section */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
    .faq-main-heading {
        font-size: 2.2rem;
    }
    .faq-contact-text {
        font-size: 1rem;
    }
    .accordion-button {
        font-size: 1.1rem;
        padding: 18px 20px;
    }
    .accordion-body {
        font-size: 0.95rem;
        padding: 18px 20px;
    }
    .faq-signup-btn {
        padding: 1rem 2.5rem !important;
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) { /* Small devices (phones) */
    .faq-section {
        padding: 60px 15px;
    }
    .faq-main-heading {
        font-size: 1.8rem;
    }
    .faq-contact-text {
        font-size: 0.9rem;
    }
    .accordion-item {
        margin-bottom: 10px;
    }
    .accordion-button {
        font-size: 1rem;
        padding: 15px 18px;
    }
    .accordion-body {
        font-size: 0.9rem;
        padding: 15px 18px;
    }
    .faq-signup-btn {
        padding: 0.8rem 2rem !important;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) { /* Extra small devices */
    .faq-main-heading {
        font-size: 1.6rem;
    }
    .faq-contact-text {
        font-size: 0.85rem;
    }
    .accordion-button {
        font-size: 0.9rem;
        padding: 12px 15px;
    }
    .accordion-body {
        font-size: 0.85rem;
        padding: 12px 15px;
    }
    .faq-signup-btn {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.9rem;
    }
}


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

.site-footer {
    background-color: #1a1a1a;
    color: #a9a9a9; /* A light gray for better readability than pure white */
    padding: 60px 0;
    font-size: 15px;
}

.site-footer .footer-heading {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Left Column: Contact --- */
.footer-contact-list a {
    color: #a9a9a9;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-list a:hover {
    color: #ffffff;
}

.footer-contact-list .bi {
    font-size: 24px;
    color: #0d6efd; /* Blue color for contact icons */
    line-height: 1; /* Helps with vertical alignment */
}

.footer-contact-list address {
    font-style: normal;
    line-height: 1.6;
}

/* --- Center Column: Logo and Icons --- */
.footer-logo {
    max-width: 120px;
    height: auto;
}

.footer-tagline {
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.7;
    max-width: 350px; /* Constrain width */
    margin-left: auto;
    margin-right: auto;
}

.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
    background-color: #0d6efd; /* Highlight color on hover */
    color: #fff;
}

.payment-icons .fa-brands {
    font-size: 32px;
    margin: 0 8px;
    color: #a9a9a9;
    transition: color 0.3s ease;
}

.payment-icons .fa-brands:hover {
    color: #ffffff;
}

/* --- Right Column: Navigation --- */
.footer-nav-list a {
    color: #a9a9a9;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-nav-list a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Bottom Row: Copyright --- */
.footer-bottom {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #333; /* Separator line */
}

.copyright-text {
    font-size: 14px;
}


/* === Wildfire Phones Section === */
.wildfire-phones-section {
    
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 20rem;
    padding-right: 20rem;
    
    position: relative;
    z-index: 1; /* Ensure content is above orbs */
    overflow: hidden; /* Hide any overflow from animations/shadows */
}



.wildfire-phones-row {
    display: flex;
    flex-wrap: nowrap; /* PREVENT WRAPPING - phones will stay in one row */
    justify-content: space-around; /* Distribute space evenly */
    align-items: flex-end; /* Align them to the bottom, similar to the image */
    padding: 0 15px; /* Add some padding on the sides for very small screens */
}

.phone-item-wrapper {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 25%; /* Attempt to give each 25% of the width initially */
    display: flex; /* Use flex to center the phone within its wrapper */
    justify-content: center;
    align-items: flex-end;
    margin: 0 5px; /* Small margin between phones */
}

/* Wrapper for the jiggle animation and slight rotation */
.phone-jiggle-wrapper {
    animation: jiggle 2s infinite ease-in-out; /* Jiggle animation */
    transform-origin: center; /* Ensure rotation and jiggle are centered */
    /* The initial rotation will be set by the --phone-initial-rotate CSS variable */
    /* This element will also have the direct transform for its unique rotation */
}

/* Specific rotation angles for each phone, now setting a CSS variable */
.phone-rotate-1 { transform: rotateZ(-5deg); --phone-initial-rotate: -5deg; }
.phone-rotate-2 { transform: rotateZ(3deg); --phone-initial-rotate: 3deg; }
.phone-rotate-3 { transform: rotateZ(-8deg); --phone-initial-rotate: -8deg; }
.phone-rotate-4 { transform: rotateZ(2deg); --phone-initial-rotate: 2deg; }


/* Outer shell for the phone, giving it the overall shape, border, and glow */
.phone-outer-shell {
    position: relative;
    width: 20vw; /* Use viewport width for fluid sizing */
    max-width: 200px; /* Max size for larger screens */
    height: calc(var(--phone-width, 20vw) * 16 / 9); /* Maintain 9:16 aspect ratio (portrait) */
    background-color: #000; /* Phone body color */
    border-radius: 30px; /* Overall phone rounded corners */
    border: 2px solid rgba(252, 233, 233, 0.137); /* White border */
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.5), /* Soft white glow */
        0 0 20px rgba(255, 255, 255, 0.2), /* Larger, softer glow */
        inset 0 0 10px rgba(255, 255, 255, 0.1); /* Inner glow effect */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Important to keep content within bounds */
    /* Define CSS variable for width */
    --phone-width: 12vw; /* Default for calculation */
}

/* Update --phone-width for media queries */
@media (max-width: 1200px) {
    .phone-outer-shell {
        --phone-width: 12vw;
        border-radius: 25px; /* Slightly smaller radius for medium screens */
    }
    
}
@media (max-width: 991.98px) {
    .phone-outer-shell {
        --phone-width: 13vw;
        border-radius: 25px;
    }
    .wildfire-phones-section {
    padding: 0px;
    }
}
@media (max-width: 767.98px) { /* Tablet size, will get smaller */
    .phone-outer-shell {
        --phone-width: 12vw; /* Each phone takes ~24% of viewport width */
        border-radius: 20px;
    }
    .wildfire-phones-section {
    padding: 0px;
    }
    /* Updated jiggle animation keyframes for smaller screens */
    @keyframes jiggle {
        0%, 100% {
            transform: translateY(0) rotateZ(var(--phone-initial-rotate, 0deg));
        }
        50% {
            transform: translateY(-8px) rotateZ(var(--phone-initial-rotate, 0deg));
        }
    }
}
@media (max-width: 575.98px) { /* Phone size, will be quite small */
    .phone-outer-shell {
        --phone-width: 22vw; /* Still 24vw to fit 4 across */
        border-radius: 25px;
        border-width: 2px; /* Thinner border */
        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.4), /* Smaller glow */
            0 0 20px rgba(255, 255, 255, 0.1);
    }
    .wildfire-phones-section {
    padding: 0px;
    }
    .phone-inner-screen {
        border-radius: 25px;
    }
    .camera-punch-hole {
        top: 3px;
        width: 7px;
        height: 7px;
    }
    /* Further adjusted jiggle animation keyframes for smallest screens */
    @keyframes jiggle {
        0%, 100% {
            transform: translateY(0) rotateZ(var(--phone-initial-rotate, 0deg));
        }
        50% {
            transform: translateY(-6px) rotateZ(var(--phone-initial-rotate, 0deg));
        }
    }
}

/* Inner screen area where the video plays */
.phone-inner-screen {
    position: absolute;
    width: calc(100% - 10px); /* Screen slightly smaller than outer shell (8px bezel on each side) */
    height: calc(100% - 10px);
    border-radius: 10px; /* Rounded corners for the screen */
    background-color: #111; /* Dark screen background before video loads */
    overflow: hidden; /* Clip video to screen shape */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Camera punch-hole */
.camera-punch-hole {
    position: absolute;
    top: 10px; /* Adjust position relative to .phone-inner-screen */
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: #000; /* Black */
    border-radius: 50%;
    z-index: 10; /* Ensure it's above the video */
}

/* Video element within the phone screen */
.phone-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the screen area */
    border-radius: 20px; /* Match screen border-radius */
}

/* Jiggle Animation - Now uses --phone-initial-rotate variable */
@keyframes jiggle {
    0%, 100% {
        transform: translateY(0) rotateZ(var(--phone-initial-rotate, 0deg));
    }
    50% {
        transform: translateY(-10px) rotateZ(var(--phone-initial-rotate, 0deg)); /* Move up 10px */
    }
}



/* ================== POLICY PAGE STYLES ================== */
.policy-page-content {
    padding-top: 120px; /* Space for fixed navbar */
    padding-bottom: 80px;
    background-color: #ffffff;
    color: #333;
}

.policy-page-content .container {
    max-width: 800px; /* Optimal width for reading */
}

.policy-page-content .policy-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: #000;
}

.policy-page-content .policy-intro {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2.5rem;
    text-align: center;
}

.policy-page-content .policy-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eee;
    color: #0d6efd;
}

.policy-page-content p,
.policy-page-content li {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.policy-page-content a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.policy-page-content a:hover {
    text-decoration: underline;
}

.policy-page-content ul {
    padding-left: 20px;
    margin-top: 1rem;
}

/* ================================================== */
/* === STYLES FOR FORM PAGE (FROM FORM.HTML) === */
/* ================================================== */

/* This targets the body tag ONLY on the form page if you add a class to it, e.g., <body class="form-page"> */
body.form-page {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* === Moving Orbs === */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    transition: transform 0.1s linear;
}

.red-orb {
    width: 25rem;
    height: 25rem;
    background-color: #ff0000;
    top: 10%;
    left: -5%;
}

.blue-orb {
    width: 22rem;
    height: 22rem;
    background-color: #0057ff;
    bottom: 5%;
    right: -10%;
}

/* Form Specific Styles */
.form-section {
    padding: 40px 0;
}

.form-container-custom {
    background-color: rgba(20, 20, 30, 0.85);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    padding-top: 3rem;
    margin-bottom: 30px;
    text-align: center;
    color: #ffffff;
}

.form-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.form-control, .form-select {
    background-color: rgba(30, 30, 40, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #0057ff;
    box-shadow: 0 0 0 0.25rem rgba(0, 87, 255, 0.25);
    background-color: rgba(30, 30, 40, 1);
}

/* Submit Button */
.submit-btn, .book-btn {
    background: #0057ff;
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 1rem 2.5rem !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(5, 50, 148, 0.4);
    display: inline-block;
    width: auto;
    margin-top: 30px;
}

.submit-btn::before, .book-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-20deg);
    transition: all 0.7s ease;
    z-index: 0;
}

.submit-btn:hover, .book-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 30px rgba(7, 4, 175, 0.651);
    background-color: #0057ff;
}

.submit-btn:hover::before, .book-btn:hover::before {
    left: 125%;
}

        /* ================================================== */
        /* === STYLES FOR INFINITE LOGO SCROLLER          === */
        /* ================================================== */

        .client-section {
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .client-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: #ffffff; 
        }

        .scroller-container {
            max-width: 1100px;
            margin: auto;
            -webkit-mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 15%, hsl(0 0% 0% / 1) 85%, hsl(0 0% 0% / 0));
            mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 15%, hsl(0 0% 0% / 1) 85%, hsl(0 0% 0% / 0));
        }
        
        .scroller-container .logo-list {
            display: flex;
            flex-wrap: nowrap;
            gap: 60px;
            padding-inline-start: 0;
            margin: 0;
        }
        
        /* NEW: This rule applies the animation once JS has set up the elements */
        .scroller[data-animated="true"] .logo-list {
            width: max-content; /* Ensures the list is wide enough to scroll */
            animation: scroll 30s linear infinite;
        }


        .scroller-container .logo-list li {
            list-style: none;
            flex-shrink: 0;
        }
        
        .scroller-container .logo-list img {
            max-height: 6rem;
            width: auto;
            filter: grayscale(1) brightness(1.5);
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .scroller-container .logo-list img:hover {
            filter: grayscale(0) brightness(1);
            opacity: 1;
            transform: scale(1.1);
        }

        /* NEW: The keyframes for the scrolling animation have been re-added */
        @keyframes scroll {
            to {
                transform: translate(calc(-50% - 30px)); /* Half the list width + half the gap */
            }
        }

        /* ================================================== */
        /* === STYLES FOR CREATOR CARD SCROLLER           === */
        /* ================================================== */
        .creators-section {
            
            padding: 80px 0;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .creator-card-list {
            display: flex;
            gap: 40px;
            padding-inline-start: 0;
            margin: 0;
        }

        .creators-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 50px;
            color: #ffffff; 
        }

        .scroller[data-animated="true"] .creator-card-list {
            width: max-content;
            animation: scroll-cards 30s linear infinite;
        }

        @keyframes scroll-cards {
            to {
                transform: translate(calc(-50% - 20px));
            }
        }
        
        .creator-card {
            position: relative;
            width: 300px;
            height: 400px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            text-align: center;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .creator-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .creator-card .profile-pic {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            opacity: 0.4;
            transition: opacity 0.3s ease;
        }

        .creator-card:hover .profile-pic {
            opacity: 0.6;
        }
        
        .creator-card .card-content {
             background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0));
             padding: 20px;
             margin: -20px;
             margin-top: 0;
             position: relative;
             z-index: 2;
        }

        .creator-card .name {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .creator-card .designation {
            font-size: 1rem;
            color: #ccc;
            margin-bottom: 20px;
        }

        .creator-card .social-handle {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 500;
        }
        
        .creator-card .social-handle i {
             color: #0099ff;
        }

        /* ================================================== */
        /* === STYLES FOR WORK SHOWCASE SECTION           === */
        /* ================================================== */
                body {
            
        }
        /* Styles for previous sections are assumed to be in style.css or here */
        .work-showcase-section {
            
            padding: 80px 0;
            text-align: center;
        }
        .work-showcase-section .section-subtitle {
            font-family: 'Montserrat', sans-serif;
            color: #888;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }
        .work-showcase-section .section-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 40px;
            color: #fff;
        }

        .filter-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }

        .filter-buttons .filter-btn {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid #333;
            color: #aaa;
            padding: 10px 25px;
            border-radius: 20px;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .filter-buttons .filter-btn:hover {
            background-color: #333;
            color: #fff;
        }

        .filter-buttons .filter-btn.active {
            background-color: #0057ff;
            border-color: #0057ff;
            color: #fff;
        }

        .video-grid {
            display: grid;
            gap: 30px;
            transition: all 0.4s ease;
        }
        
        .video-grid.grid-youtube {
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        }

        .video-grid.grid-shorts {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            max-width: 900px;
            margin: auto;
        }
        
        .video-embed-container {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            background-color: #1a1a1a;
        }

        .video-embed-container.landscape { aspect-ratio: 16 / 9; }
        .video-embed-container.portrait { aspect-ratio: 9 / 16; }
        
        .video-embed-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
    
        /*---------- VSL --------*/
        .video-thumbnail {
            position: relative;
            cursor: pointer;
            display: inline-block;
            width: 100%;
            max-width: 100%;
        }
        
        .thumbnail-img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
        }
        
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 56px;
            height: 56px;
            background-color: rgba(255, 255, 255, 0.65);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
        }
        
        .play-button::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 16px solid rgba(230, 57, 70, 0.85); /* soft red */
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            margin-left: 2px;
        }
        
        .play-button:hover {
            background-color: rgba(255, 255, 255, 0.85);
        }