body, html {
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Inter', sans-serif;
}
/* custom banner for navbar on all pages */
.custom-banner {
    width: 100%;
    height: 105px;
    background-color: rgb(20, 32, 70); /* Dark Blue */
}

/* Icon Background */
.icon-bg {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(58, 191, 248);
    opacity: 0.3;
    border-radius: 30%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px; /* Proper spacing */
}

/* Icon Styling */
.icon-bg img {
    width: 20px;
    height: 20px;
}

.most-popular-banner {
    margin-top: 18px;
    position: absolute;  /* Positions relative to the package-card */
    top: 10px;
    right: 10px;
    background-color: rgb(230, 27, 30);
    opacity: 1;
    color: black;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    padding: 5px 10px;
    display: flex;
    font-size: 0.8em;
    font-weight: bold;
}

.BF-banner {
    position: absolute; /* Establishes a positioning context for child elements */
    top: 10px;
    right: 10px;
    width: 120px; /* Adjust width as needed */
    height: 80px; /* Adjust height as needed */
    background-color: #2a2a2a; /* Fallback color */
    
    /* Creates the complex honeycomb/hexagonal background pattern using CSS gradients */
    background-image: 
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* Darkens the pattern */
      linear-gradient(30deg, #1c1c1c 12%, transparent 12.5%, transparent 87%, #1c1c1c 87.5%, #1c1c1c),
      linear-gradient(150deg, #1c1c1c 12%, transparent 12.5%, transparent 87%, #1c1c1c 87.5%, #1c1c1c),
      linear-gradient(30deg, #1c1c1c 12%, transparent 12.5%, transparent 87%, #1c1c1c 87.5%, #1c1c1c),
      linear-gradient(150deg, #1c1c1c 12%, transparent 12.5%, transparent 87%, #1c1c1c 87.5%, #1c1c1c),
      linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222), 
      linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222);
    background-size: 40px 70px, 80px 70px, 80px 70px, 80px 70px, 80px 70px, 80px 70px, 80px 70px;
    background-position: 0 0, 0 0, 40px 35px, 0 0, 40px 35px, 0 0, 40px 35px;

    border-radius: 25px; /* Creates the main rounded corners */
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Creates the multi-layered border effect */
    border: 3px solid #0a0a0a;
    box-shadow: 
      inset 0 0 0 2px #d9d9d9, /* Inner white line */
      inset 0 0 0 6px #e61b1e, /* Inner red line */
      0 5px 20px rgba(0, 0, 0, 0.75); /* Outer shadow for a lifting effect */

    font-family: 'Impact', 'Arial Black', sans-serif; /* Bold, blocky font style */
    text-align: center;
    overflow: hidden; /* Ensures inner elements respect the border-radius */
}

/* Base styles for both lines of 3D text */
.BF-banner span[class^="BF-banner-text"] {
    display: block;
    text-transform: uppercase;
    line-height: 0.9;
    position: relative;
    z-index: 2; /* Ensures text is above the footer element */
}

/* Styling for the top text: "BLACK" */
.BF-banner-text-top {
    font-size: 2.5em; /* Adjust size as needed */
    color: #e0e0e0;
    /* Layered text-shadow to create a white/grey 3D effect */
    text-shadow: 
      -1px -1px 0 #fff, 
      1px -1px 0 #c0c0c0,
      1px 3px 3px rgba(0,0,0,0.8),
      4px 6px 4px rgba(0,0,0,0.6);
}

/* Styling for the bottom text: "FRIDAY" */
.BF-banner-text-bottom {
    font-size: 2.5em; /* Adjust size as needed */
    color: #e61b1e; /* Bright red color */
    /* Layered text-shadow for a red/dark 3D effect */
    text-shadow: 
      1px 3px 3px rgba(0,0,0,0.8),
      4px 6px 4px rgba(40,0,0,0.7);
}

/* Container for the pill shape and terms text */
.BF-banner-footer {
    position: absolute;
    bottom: 30px;
    left: 40%;
    transform: translateX(-50%);
    width: 60%;
    height: 25px;
    background-color: #1a1a1a;
    border-radius: 50px; /* Creates the pill shape */
    z-index: 1; /* Sits below the text but above the background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); /* Inner shadow for depth */
}

/* Styling for the "T&C Apply" text */
.BF-banner-terms {
    position: absolute;
    bottom: -25px; /* Positioned just below the pill */
    right: -30px; /* Positioned to the right of the pill */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 0.7em;
    font-weight: normal;
}


/* Use Manrope for headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

ul {
    list-style: none; /* Removes default bullets */
    padding: 0; /* Optional: Remove default padding */
    margin: 0; /* Optional: Remove default margin */
}

/* Navbar General Styling */
header {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0;
    transition: background 0.3s ease, color 0.3s ease;
    z-index: 1000;
    padding: 15px 30px;
}
header.scrolled {
    padding: 53px;
    background: white;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* Adds shadow on scroll */
    opacity: 0.99;
    transition: background 0.3s ease-in-out;
}

/* Navbar Layout */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Keeps items balanced */
    flex-wrap: wrap;
}

/* Brand */
.brand {
    margin-top: 10px;
    margin-left: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.brand-name {
    font-size: 19px;
    font-weight: bold;
    color: white;
}

header.scrolled .brand-name {
    color: black;
}

/* Logo */
.logo {
    height: 50px;
    border-radius: 50px;
}

/* Navigation Links */
.nav-links {
    display: flex;
    justify-content: end; /* Keeps links centered */
    gap: 30px;
    flex-grow: 1;
    margin-right: 150px;
    margin-left: auto; /* Makes spacing flexible */
    padding: 0 5%; /* Adjusts spacing dynamically */
}

.nav-links a {
    text-decoration: none;
    font-weight: 549;
    font-size: 14px;
    color: white; /* Prevent default blue links */
    transition: color 0.3s ease-in-out;
}

header.scrolled .nav-links a {
    color: black;
}

/* Contact Button */
.nav-button {
    margin-right: 15px;
    font-size: 13px;
    background: rgb(123, 207, 81);
    color: rgb(20, 26, 30)!important;
    padding: 10px 20px;
    border-radius: 7px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.nav-button:hover {
    background: rgb(45, 172, 230);
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    right:10%;
    width: 50px;
    background-color: transparent;
    border: none;
    transform: translateX(-50%);
    z-index: 1100;
}
.menu-toggle span {
    width: 16px;
    height: 0.01px;
    padding: 1px;
    background: white;
    margin: 2.1px 2px;
    transition: all 0.3s ease-in-out;
}
header.scrolled .menu-toggle span {
    background: black;
}

/* Mobile Responsiveness */
@media (max-width: 1470px) {
    .brand {
        margin-left: 0; /* Removes left margin */
        margin-right: 0; /* Removes right margin */
    }
    .nav-links {
        margin-right: 0;
        margin-left: 0;
}
}

@media (max-width: 910px) {
    .navbar_container {
        width: 100%;
        margin: 0; /* Removes left margin */
    }
    .nav-links {
        display: none;
        flex-direction: column;
        background: rgb(255, 255, 255);
        position: absolute;
        top: 90px;
        right: 50px;
        width: 200px;
        padding: 15px;
        border-radius: 5px;
    }

    .nav-links a {
        color: black; /* Change to black for better visibility */
        font-size: 16px;
        padding: 10px 10px;
    }

    .nav-links.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }

     /* Hamburger animation to X */
    .menu-toggle.active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
    .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
    .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* Extra small screens: Adjust menu button position */
@media (max-width: 550px) {
    .nav-links {
        top: 80px;
    }
}
/* Hero Section */
#hero {
    position: relative;
    min-height: 101vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
    border: none; /* Ensure no border is applied */
}

/* Background Animation */
.hero-background {
    position: absolute;
    inset: 0;
    opacity: 1;
    background-color: rgb(20, 32, 70); /* Dark blue background */
    background-image: radial-gradient(circle at 20% 30%, rgba(112, 117, 121, 0.1) 5px, transparent 1px), 
                      radial-gradient(circle at 10% 15%, rgba(57, 63, 68, 0.1) 3px, transparent 1px), 
                      radial-gradient(circle at 25% 20%, rgba(87, 92, 97, 0.1) 7px, transparent 1px),
                      radial-gradient(circle at 8% 50%, rgba(112, 117, 121, 0.1) 4px, transparent 1px),
                      radial-gradient(circle at 75% 95%, rgba(57, 63, 68, 0.1) 3px, transparent 1px);
    background-size: 50px 50px, 75px 75px, 60px 60px; /* Smaller sizes for denser circles */
    background-position: 25px 25px, 50px 75px, 100px 50px; /* Adjusted positions for more density */
    background-position: var(--mouse-x, 0px) var(--mouse-y, 0px), calc(var(--mouse-x, 0px) + 15px) calc(var(--mouse-y, 0px) + 15px); /* Reactive to mouse */
    transition: transform 0.1s ease-out;
}
.hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* Slight overlay for better contrast */
}

/* Content Styling */
.container {
    position: relative;
    z-index: 1;
    max-width: 2000px;
    margin: auto;
}

.tagline {
    color: rgb(58, 191, 248);
    display: inline-block;
    padding: 7px 23px;
    background: rgba(0, 179, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 100px;
    margin-bottom: 30px;
}

/* Hero Title */
.heading-xl {
    font-size: 45px;
    line-height: 1.3;
    font-weight: 900; /* Bolder text */
    text-align: center;
    color: rgba(255, 255, 255, 1); /* Full bright white */
    text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.1); /* Stronger glow */
    opacity: 0; /* Initial state for fade-in */
    transform: translateY(20px);
    margin-top: 5px;
    margin-bottom: 16px;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.1);
    max-width: 700px;
    margin: auto;
    margin-top: 0;
    margin-bottom: 20px;
    opacity: 0; /* Initial state for fade-in */
    transform: translateY(20px);
    padding-bottom: 30px;
}

/* Fade-in Animation */
.animate-fade-in {
    animation: fadeInUp 1s ease-in-out forwards;
}

/* Delay Animations */
h1.animate-fade-in {
    animation-delay: 0.4s;
}

p.animate-fade-in {
    animation-delay: 0.6s;
}

/* Keyframes */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
    .heading-xl {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hidden-md {
        display: none;
    }
}

/* Extra small screens: Fix hero background and buttons */
@media (max-width: 550px) {
    #hero {
        min-width: 100vw;
        width: 100vw;
        padding-left: 0;
        padding-right: 0;
    }
    .hero-background {
        min-width: 100vw;
        width: 100vw;
        left: 0;
        right: 0;
    }
}

/* Buttons */
.hero-buttons {
    display: flex; /* Align buttons in a row */
    justify-content: center; /* Center the buttons */
    gap: 20px; /* Spacing between buttons */
    flex-wrap: wrap; /* Ensures responsiveness */
}

.btn {
    padding: 12px 20px;
    display: inline-flex; /* Ensures text stays in line */
    align-items: center; /* Vertically centers content */
    border-radius: 8px;
    font-size: 18px;
    font-weight: 550;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

.btn.primary {
    background: rgb(123, 207, 81);
    color: rgb(20, 26, 56);
}
.btn.primary:hover {
    background: rgb(45, 172, 230);
}

/*.btn.secondary {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex; /* Aligns text and arrow */
    /*align-items: center; /* Vertically centers content */
    /*gap: 8px; /* Adds spacing between text and arrow */
    /*transition: gap 0.3s ease-in-out; /* Moves arrow slightly */
/*}

/* Arrow Styling - Visible from the Start */
/*.btn.secondary::after {
    /*content: "➜"; /* Right arrow */
    /*font-size: 16px; /* Adjust size */
    /*transition: transform 0.3s ease-in-out; /* Smooth movement */
/*}

/* Hover Effect - Arrow Moves 1px Right */
/*.btn.secondary:hover::after {
    transform: translateX(3px); /* Moves arrow slightly */
/*}

.btn:hover {
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.1);
    background: rgba(182, 180, 180, 0.2);
}

/*PriceSlash 2025 secondery Button*/

.btn.secondary {
        /* Add position: relative to act as a container for the ::before pseudo-element */
        position: relative; 
        /* Add overflow: hidden to contain the effect before it bursts out */
        
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: transparent; /* Making background transparent to see effect better */
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: gap 0.3s ease-in-out;
        padding: 12px 24px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
         animation: pulse 2.5s infinite; /* Run the "pulse" animation continuously */
    }

    /* Arrow Styling - Visible from the Start */
    .btn.secondary::after {
        content: "➜";
        font-size: 16px;
        transition: transform 0.3s ease-in-out;
    }

    /* Hover Effect - Arrow Moves */
    .btn.secondary:hover::after {
        transform: translateX(3px);
    }

    /* --- New Animation CSS --- */

    /* 1. Define the keyframe animation */
    @keyframes streamers-pop {
        0% {
            /* Start scaled down to nothing and invisible, at the center */
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        50% {
            /* Halfway through, become fully visible */
            opacity: 1;
        }
        100% {
            /* End scaled up (bursts outwards) and faded out */
            transform: translate(-50%, -50%) scale(1.7);
            opacity: 0;
        }
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(230, 27, 30, 0.6);
      }
      70% {
        box-shadow: 0 0 0 12px rgba(0, 255, 135, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 135, 0);
      }
    }



    /* 2. Style the ::before pseudo-element which will hold the streamers */
    .btn.secondary::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        
        width: 5px; /* Small central point for the shadows */
        height: 5px;
        border-radius: 50%; /* Makes it a circle */

        /* Generated Streamer CSS - The core of the effect! */
        box-shadow: -33px 1px 0 #2E3192, 41px 18px 0 #29ABE2, 46px -11px 0 #FF0000, -29px 5px 0 #009245, -49px -26px 0 #2E3192, -9px 25px 0 #29ABE2, -8px 33px 0 #29ABE2, -14px -13px 0 #41BBC7, 39px 6px 0 #29ABE2, 14px 46px 0 #FFC700, -35px -35px 0 #009245, -43px -14px 0 #41BBC7, -32px -46px 0 #FFC700, -50px -24px 0 #FF0000, -31px -2px 0 #FFC700, 38px -25px 0 #41BBC7, -41px 16px 0 #FF0000, 26px -26px 0 #FF0000, 14px 29px 0 #FFC700, 47px 20px 0 #FFC700, 50px -35px 0 #29ABE2, 24px 32px 0 #2E3192, 13px 7px 0 #FF0000, 11px -3px 0 #FFC700, -21px -24px 0 #FF0000;
        /* Fallback base color for the pseudo-element's background */
        background: #FF0000;
        
        /* Set initial state to be invisible and ready for animation */
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    /* 3. Trigger the animation on hover */
    .btn.secondary:hover::before {
        /* Run the "streamers-pop" animation over 0.6 seconds */
        animation: streamers-pop 2s ease-in-out infinite;
    }



/* Services Section */
#services {
    background: linear-gradient(rgba(236, 247, 252, 0), rgba(236, 247, 252, 1),rgba(236, 247, 252, 0));
    position: relative;
    display: flex;
    flex-direction: column; /* Ensures vertical stacking */
    align-items: center;
    justify-content: flex-start; /* Keeps header on top */
    text-align: center;
    color: rgb(20, 26, 30);
    overflow: hidden;
    padding-bottom: 30px;
}

/* Service header */
.service-header {
    font-size: 40px;
    font-weight: 750;
    color: rgb(20, 26, 30);
    margin-bottom: 10px;
    text-align: center;
}

/* Services Container */
.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
    gap: 20px;
    width: 95%;
    
}

/* Service Cards */
.service-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns text to the left */
    justify-content: center;
    text-align: left; /* Ensures text inside h3 and p is aligned left */
    cursor: pointer;
}


/* Hover Effect */
.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

/* --- Modal Styles --- */

/* The Modal (background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(30, 40, 50, 0.7); /* A slightly more stylized dark background */
    backdrop-filter: blur(5px); /* Adds a modern glass effect to the background */
    -webkit-backdrop-filter: blur(5px); /* For Safari support */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Content Box - HEAVILY IMPROVED */
.modal-content {
    background: #ffffff;
    margin: 8% auto; /* Gives a little more space from the top */
    padding: 35px 40px; /* Increased padding for more breathing room */
    border: none; /* Removing the dated gray border */
    width: 90%;
    max-width: 650px;
    border-radius: 12px; /* A slightly more pronounced border-radius */
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Softer, more modern shadow */
    animation: slideIn 0.4s ease-out;
    color: #444; /* A softer default text color than pure black */
}

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

/* The Close Button - More stylish */
.close-button {
    color: #888;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: bold;
    transition: transform 0.2s ease, color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
    color: #111;
    text-decoration: none;
    cursor: pointer;
    transform: rotate(90deg); /* Adds a nice micro-interaction */
}

/* Modal Title - More prominent */
#modal-title {
    margin-top: 0;
    margin-bottom: 15px; /* Added space below the title */
    color: #1A2B3C; /* A professional dark blue/slate color */
    font-size: 28px;
    font-weight: 700;
}

/* Styling the horizontal rule for better separation */
.modal-content hr {
    border: none;
    border-top: 1px solid #e0e5ec;
    margin: 25px 0; /* Creates vertical space around the line */
}

/* Styling the "Key Deliverables" text specifically */
.modal-content strong {
    color: #1A2B3C;
    font-weight: 600;
    font-size: 18px;
    display: block; /* Allows it to have margin */
}

/* List of Deliverables - THIS IS KEY FOR YOUR REQUEST */
#modal-deliverables {
    list-style-type: none; /* We will create our own custom bullets */
    padding-left: 0;
    margin-top: 15px; /* ===> This adds the gap you wanted! */
}

#modal-deliverables li {
    padding-left: 25px; /* Makes room for our custom bullet */
    position: relative;
    margin-bottom: 12px; /* Increases space between list items */
    line-height: 1.6; /* Improves readability */
    color: #555;
    font-size: 16px;
}

/* Custom, more "inviting" bullet points */
#modal-deliverables li::before {
    content: '✓'; /* You can use other symbols like '•' or '➤' */
    position: absolute;
    left: 0;
    top: 0;
    color: rgb(58, 191, 248); /* Uses your vibrant button color for consistency */
    font-weight: bold;
    font-size: 18px;
}

/* --- CTA Button Styles --- */
.cta-container {
    margin-top: 40px;
    margin-bottom: 20px;
}

.cta-button {
    background-color: rgb(58, 191, 248); /* Example blue color */
    color: black;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px; /* Pill shape */
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
}

.cta-button:hover {
    background-color: #67caf5;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1050px) {
    #services {
        min-height: 50vh; /* Adjust height for smaller screens */
    }
    .services-container {
        grid-template-columns: repeat(2, 1fr); /* Moves to 2 columns */
        padding: 2px;
    }
}
@media (max-width: 968px) {
    .services-container {
        grid-template-columns: 1fr;
        padding: 2px;
    }
}

@media (max-width: 768px) {
    .services-container {
        grid-template-columns: 1fr; /* Moves to 1 column */
        padding: 2px;
    }

    .service-card {
        padding: 20px;
    }
}

@media (max-width: 420px) {
    .modal-content {
        padding: 15px;
    }
    
}

/* Packages Section */
#packages {
    background: linear-gradient(rgba(236, 247, 252, 0), rgba(236, 247, 252, 1),rgba(236, 247, 252, 0));
    position: relative;
    display: flex;
    flex-direction: column; /* Ensures vertical stacking */
    align-items: center;
    justify-content: flex-start; /* Keeps header on top */
    text-align: center;
    color: rgb(20, 26, 30);
    overflow: hidden;
}

/* Package header */
.package-header {
    font-size: 40px;
    font-weight: 750;
    color: rgb(20, 26, 30);
    margin-bottom: 10px;
}

.custom-plan {
    text-decoration: none;
    color: black;
    border: rgb(45, 172, 230) 2px solid;
    border-radius: 5px;
    background-color: rgb(45, 172, 230);
}
/* Packages Container */
.packages-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 20px;
}

/* Package Cards */
.package-card {
    position: relative;
    background: white;
    padding: 20px;
    max-width: 1200px;
    border-radius: 12px;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns text to the left */
    justify-content: flex-start; /* Ensures content starts from the top */
    text-align: left; /* Ensures text inside h3 and p is aligned left */
    height: 100%; /* Ensures all cards are the same height */
    box-sizing: border-box; /* Includes padding in height calculation */
}

.package-card h3 {
    font-weight: 500;
    font-size: 0.7rem;  
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}
/* Styling for the T&C Apply hyperlink */
.package-card a,
.package-card a:visited {
    color: black;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}

.package-card a:hover {
    color: #7dd053;
    opacity: 0.8;
    text-decoration: underline;
}

/* Hover Effect */
.package-card:hover {
    transform: translateY(-7px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.package-card.most-popular {
    transform: scale(1.05);
    border: 4px solid #e61b1e;
}

.package-card.Starter {
    border: 4px solid  #7dd053;
}

.package-card.Epic {
    border: 4px solid  rgb(58, 191, 248);
}
.package-list li::before {
    content: "✔"; /* Unicode checkmark */
    color: rgb(58, 191, 248); /* Makes it blue */
    margin-right: 12px;;
    font-size: 18px;
    font-weight: bold;
}

/* Style for the T&Cs clarification text */
.terms-clarification {
    max-width: 800px;
    margin: 30px auto 0px auto; /* Adds space above and below */
    padding: 0 15px;
    text-align: center;
    font-size: 13px;
    color: #6c757d; /* A subtle, secondary text color */
    line-height: 1.6;
}

.terms-clarification a {
    color: #007bff; /* Use your brand's primary link color */
    text-decoration: underline;
    font-weight: 500;
}

.custom-package-card {
    background: white;
    padding: 20px;
    margin-top: 20px;
    max-width: 1200px;
    border-radius: 12px;
    border: 4px solid rgb(247, 247, 85);
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center; /* Aligns text to the left */
    justify-content: flex-start; /* Ensures content starts from the top */
    text-align: center; /* Ensures text inside h3 and p is aligned left */
    height: 100%; /* Ensures all cards are the same height */
    box-sizing: border-box; /* Includes padding in height calculation */;
}

/* Hover Effect */
.custom-package-card:hover {
    transform: translateY(-7px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.choose-btn {
    display: inline-flex; /* Ensures text stays in line */
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
    margin: 20px auto; /* Centers the button horizontally */
    padding: 10px 70px;
    font-size: 13px;
    color: black;
    background-color: transparent;
    border: grey 1px solid;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    text-align: center; /* Ensures text is centered */
    font-weight: bold;
    white-space: nowrap; /* Prevents text from wrapping */
}

.choose-btn:hover {
    background-color: #dbdada;
}

/* Make Growth Groove button blue */
.green-btn {
    background-color: rgb(125, 208, 83);
}

.green-btn:hover {
    background-color: rgba(125, 208, 83, 0.8);
}

.blue-btn {
    background-color: rgb(58, 191, 248); /* Blue */
}

.blue-btn:hover {
    background-color: #67caf5;
}

.red-btn {
    background-color: rgb(230, 27, 30);
}

.red-btn:hover {
    background-color: rgba(230, 27, 30, 0.8);
}

.yellow-btn {
    background-color: rgb(247, 247, 85);
}

.yellow-btn:hover {
    background-color: rgba(247, 247, 85, 0.8);
}

/* Responsive Design */
@media (max-width: 1050px) {
    .packages-container {
        grid-template-columns: 1fr;
        margin-left: 30px;
    }
}
@media (max-width: 992px) {
    .packages-container {
        grid-template-columns: 1fr;
    }
    .custom-package-card {
        max-width: 100%; /* Ensures full width */
    }
    .choose-btn {
        width: 80%; /* Adjust button width for responsiveness */
        text-align: center; /* Center text */
    }
}

@media (max-width: 768px) {
    .packages-container {
        grid-template-columns: 1fr; /* Moves to 1 column */
        margin-right: 10px;
        gap: 30px; /* Adds a bigger gap between cards */
    }

    .package-card {
        max-width: 95%; /* Ensures full width */
    }
    .custom-package-card {
        padding: 20px;
        max-width: 95%; /* Ensures full width */
    }
    .choose-btn {
        width: 90%; /* Adjust button width for smaller screens */
        text-align: center; /* Center text */
        margin: 10px auto; /* Center button horizontally */
    }
}

/* Package Terms Section */
#package-terms {
    position: relative;;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: rgb(20, 26, 30);
    overflow: hidden;
    padding: 50px 20px;
}

/* Package Terms Header */
.package-terms-header {
    margin-top: 50px;
    background-color: rgb(204, 230, 241);
    margin-bottom: 10px;
    border-radius: 12px;
    text-align: left;
    width: 100%;
    max-height: auto;
}

/* Package Terms Container */
.package-terms-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default: 4 columns */
    gap: 30px;
    max-width: 1200px;
    width: 80%;
    margin: auto;
    padding: 20px;
}

/* package Terms Cards */
.package-terms-card {
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0px 6px 12px rgb(58, 191, 248);
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center; /* Aligns text to the left */
    justify-content: center;
    text-align: center; /* Ensures text inside h3 and p is aligned left */
    max-height: 50%;
    line-height: 1.3; /* Reduces the spacing between lines */
    gap: 1px; /* Reduces the spacing between elements inside the card */
    font-size: 12px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .package-terms-container {
        grid-template-columns: repeat(2, 1fr); /* Moves to 2 columns */
    }
}

@media (max-width: 768px) {
    .package-terms-container {
        grid-template-columns: 1fr; /* Moves to 1 column */
        padding: 10px;
    }
}

/* Portfolio Section */
#portfolio {
    background: linear-gradient(rgba(236, 247, 252, 0), rgba(236, 247, 252, 1),rgba(236, 247, 252, 0));
    padding: 60px 15px;
    text-align: center;
}

/* Package header */
.portfolio-header {
    font-size: 40px;
    font-weight: 750;
    color: rgb(20, 26, 30);
    margin-bottom: 10px;
}

/* Portfolio Container */
.portfolio-container {
    padding-top: 40px;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    gap: 40px;
    align-items: center;
}

/* Portfolio Items */
.portfolio-item {
    display: flex;
    flex-direction: row; /* Image left, text right */
    align-items: center;
    background-color: #f4f4f4;
    border-radius: 12px;
    padding: 20px;
    max-width: 900px;
    gap: 20px;
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 1.5);
}

/* Portfolio Image */
.portfolio-image-container {
    flex: 1;
    aspect-ratio: 4 / 3;
    border-radius: 15px;
    overflow: hidden;
}

.portfolio-img {
    width: 77%;
    height: auto;
    margin-top: -5px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    transform:scale(1.3);
}

.portfolio-img:hover {
    transform: scale(1.35);
}

/* Portfolio Text */
.portfolio-content {
    flex: 1;
    text-align: left;
}

.portfolio-category {
    display: inline-block;
    background-color: #d1d5db;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.portfolio-heading-md {
    font-size: 1.5rem;
    margin-top: 10px;
}

.portfolio-text-muted {
    color: #6b7280;
    font-size: 1rem;
}

/* Links */
.portfolio-link {
    text-decoration: none;
    font-weight: bold;
    color: #1d4ed8;
    display: inline-block;
    padding: 10px;
    border-radius: 8px;
}

.portfolio-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .portfolio-item {
        width:90%;
        flex-direction: column; /* Stacks image above text */
        text-align: center;
    }

    .portfolio-content {
        text-align: center;
    }
}

/* About Section */
#about {
    padding: 60px 15px;
    text-align: center;
    background-color: rgb(20, 32, 70);
    color: white;
}

/* Header */
.about-header {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

/* About Container (Default: Two Columns) */
.about-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: 1300px;
    margin: auto;
    align-items: flex-start; /* Align sections evenly */
    text-align: left;
}

.about-container a, .about-team a {
color: white; /* Sets the link color to white */
 font-weight: bold; /* Makes the link text bold */
 text-decoration: underline; /* Adds an underline */
}

.about-container a:hover {
 color: #ddd; /* Light gray on hover for better visibility */
}

.about-team a:hover {
 color: #ddd; /* Light gray on hover for better visibility */
}


/* About Text */
.about-text {
    flex: 1;
    text-align: left;
}

/* About Heading */
.about-heading {
    padding-bottom: 20px;
    font-size: 2rem;
    margin-bottom: 10px;
}

/* About Values */
.about-values {
    list-style: none;
    padding: 0;
}

/* About Values */
.about-values li {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: -15px; /* Keeps items close */
    margin-top: -20px;
}

.about-values h4 {
    margin-bottom: 2px; /* Reduced gap */
}

.about-values p {
    margin-top: 8px; /* Removes extra spacing */
}

.about-value-number {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #67caf5;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    aspect-ratio: 1 / 1;
}

/* Team Section */
.about-team {
    margin-top: 100px;
}

.about-team-member {
    text-align: center;
}

.about-team-image {
    width: 300px;
    height: 300px;
    border-radius: 10%;
    overflow: hidden;
    margin: 0 auto 10px;
    box-shadow: 0px 0px 30px rgba(58, 191, 248, 0.8);
    transition: transform 0.3s ease-in-out;
}

.about-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-cta{
    padding-top: 15px;
}

.about-cta h3 {
    padding-bottom: 10px;
}

.about-reg-info {
    padding-top: 20px;
}

/* Responsive Design */

/* Screen Size = 968px → Single Column, Left-Aligned */
@media (max-width: 968px) {
    .about-container {
        flex-direction: column;
        text-align: left;
        gap: 30px;
    }

    .about-values li {
        text-align: left;
    }
}

/* Screen Size ≤ 768px → Single Column, Centered but Left-Aligned Text */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .about-text {
        text-align: left;
    }

    .about-values li {
        text-align: left;
    }
}

/* Contact Section */
#contact {
    padding: 60px 15px;
    text-align: center;
    background-color: #f9f9f9;
}

/* Header */
.contact-header {
    font-size: 2.5rem;
    font-weight: bold;
}

/* Contact Container */
.contact-container {
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 900px;
    margin: auto;
    align-items: flex-start;
    text-align: left;
    font-size: 15px;
}

/* Contact Details */
.contact-details {
    flex: 1;
}

/* Contact Item Layout */
.contact-item {
    display: flex;
    align-items: center; /* Align icon with text */
    gap: 15px;
    margin-bottom: 10px;
}

/* Text Block */
.contact-text {
    line-height: 0.5;
    text-align: left;
}

/* Remove Link Styles */
.contact-link {
    text-decoration: none;
    color: black;
    font-weight: normal;
    transition: color 0.3s ease-in-out;
}

.contact-link:hover {
    color: #000; /* Turns black on hover */
}


/* Contact Form */
form {
    background: white;
    padding: 17px;
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgb(58, 191, 248);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form-container {
    max-width: 900px;
    margin: auto;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
}


label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Input Fields */
input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #1d4ed8;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

button:hover {
    background-color: #153dbd;
}

/* Responsive Design */
/* Large Screens (Greater than 968px) → Two Columns */
@media (min-width: 969px) {
    .contact-container {
        padding-right: 10px; /* Adds 10px extra space on the right */
    }
    .contact-form-container {
        display: flex;
        gap: 40px;
    }

    .contact-details {
        flex: 1;
    }

    form {
        flex: 1;
    }
    .form-group {
        margin-right: 20px;
}
    .form-group-row {
        display: flex;
        gap: 20px; /* Increased gap between fields */
    }

    .form-group-row .form-group {
        flex: 1;
    }

    input, textarea {
        font-size: 0.95rem;
    }

    .form-group {
        margin-bottom: 12px; /* Add vertical gap between fields */
    }
      button {
        display: block;
        margin: auto; /* Centers the button */
    }
}
/* Medium Screens (Less than 968px) → Single Column */
@media (max-width: 968px) {
    .contact-container {
        flex-direction: column;
        text-align: left;
        align-items: center; /* Center the form and details */
    }
    .form-group {
        padding-right: 20px; /* Adds 10px extra space on the right */
        margin-bottom: 15px; /* Adds spacing between fields */
    }
    .form-group-row {
        display: flex;
        gap: 15px;
    }

    .form-group-row .form-group {
        flex: 1;
    }

    form {
        margin: 0 auto; /* Center the form */
        width: 90%;     /* Make it responsive */
    }
    button {
        margin: 10px auto; /* Adds 10px gap from form container */
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        text-align: center;
    }

    .contact-item {
        text-align: left;
    }
    .form-group {
        margin-bottom: 15px; /* Adds spacing between fields */
    }
    .form-group-row {
        flex-direction: column;
        padding-right: 0px;
    }

    form {
        width: 90%;
    }

}

/* Footer Styling */
#footer {
    padding: 0px 15px;
    background-color: rgb(20, 32, 70);
    color: white;
    text-align: center;   
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: space-between;
    text-align: left;
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

.footer-section h3 {
    padding-bottom: 10px;
}

.footer-section.brand {
    text-align: center; /* Centers the content */
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures both h2 and p are aligned centrally */
    gap: 0px; /* Adds spacing between elements */
    margin-right: 80px;
    margin-left: 0;
    margin-top: 0;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #f9f9f9;
}

.newsletter form {
    margin-top: -25px;
    margin-left: -20px;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.newsletter input[type="text"] {
    background-color: transparent;
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 0;
}

.newsletter-input-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.newsletter input[type="email"] {
    background-color: transparent;
    width: 90%;
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.newsletter button {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: rgb(20, 32, 70);
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 0;
    margin-top: 10px;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 0.95rem;
}

.newsletter button:hover {
    background-color: #ddd;
}

@media (max-width: 1050px) {
    .footer-section.brand p {
        margin-top: 5px;
    }
   .newsletter input[type="text"] {
        width: 95%;
    }
    .newsletter input[type="email"] {
        width: 95%;
    }
}

@media screen and (max-width: 768px) {
    .footer-section.brand p {
        margin-top: 5px;
        padding-bottom: 40px;;
    }
}

@media (max-width: 600px) { 
    .footer-section.brand {
        margin-right: 0;
        margin-left: 0;
    }
    .footer-section.brand p {
        margin-top: 5px;
    } 
    .newsletter-input-row {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .newsletter button {
        width: 30%;
        margin-left: 0;
    }
}

.footer-bottom {
    border-top: 1px solid #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.social-links a {
    margin: 0 10px;
    text-decoration: none;
    display: inline-block;
}

.social-links a img {
    color:white;
    width: 15px;  /* Adjust as needed */
    height: 15px; /* Adjust as needed */
    vertical-align: middle; /* Helps align icons nicely if they are next to text (not in this case, but good practice) */
    transition: transform 0.3s ease, opacity 0.3s ease; /* For smooth hover effect */
    padding-bottom: 10px;
}

.social-links a:hover img{
    opacity: 0.7;
}

/* Journey Page General Styles */
.journey_container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.journey-header {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 50px;
}

.journey-header-desc {
    font-size: 1.1rem;
    color: #444;
    text-align: center;
    margin-bottom: 50px;
}

/* Main Card Structure - DESKTOP */
.journey_card {
    display: flex;
    gap: 20px;
    background: white;
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 12px 24px rgba(58, 191, 248, 1.5);
    height: 550px; /* Fixed height for the entire card on desktop */
    box-sizing: border-box;
}

/* Media and Content Columns - DESKTOP */
.journey_card > .journey_media,                          /* For img/carousel direct containers */
.journey_card > div:has(> video.journey_media),        /* For video containers like <div><video...></div> */
.journey_card > .journey_content {
    flex: 1; /* Each column takes ~50% width */
    height: 100%; /* Each column takes 100% of the card's 550px height */
    box-sizing: border-box;
    position: relative; /* Important for containing child elements */
    overflow: hidden;   /* Clips anything that tries to break out of the 550px height */
}

.journey_content { /* Styling for the content column */
    overflow-y: auto; /* Content inside this column can scroll if it's taller than 550px */
    padding: 20px;
    font-size: 1rem;
    color: #333;
    background-color: #fdfdfd;
    border-radius: 5px;
}

.journey_content h2 {
    margin-top: 0;
}

/* == Global Styling for ALL Media Elements (img, video, carousel img) == */
/* These rules define how the media content itself behaves within its container. */
.journey_media img,                         /* For a single <img> directly inside a .journey_media div */
.journey_media video,                       /* For a single <video> directly inside a .journey_media div */
.journey_card > div > video.journey_media,  /* For <video class="journey_media ..."> inside an unclassed <div> */
.journey_media.carousel img                 /* For <img> tags inside a .journey_media.carousel div */ {
    width: 100%;
    height: 100%;
    /* object-fit: cover;  MAKES MEDIA FILL CONTAINER, MAINTAINS ASPECT RATIO, CROPS EXCESS.
                           This is likely why images/videos seem "cut off" if their aspect ratio
                           differs from their container's aspect ratio on desktop (e.g., a tall portrait
                           image in a wide, 550px high container). This is normal for 'cover'. */
    /* object-fit: contain; MAKES ENTIRE MEDIA VISIBLE, MAINTAINS ASPECT RATIO, MAY ADD "LETTERBOX" SPACE.
                           Use this if you never want any part of the media to be cropped. */
    object-fit: contain; /* CHOOSE YOUR PREFERRED FITTING BEHAVIOR HERE */
    display: block;    /* Good practice for media elements */
    border-radius: 5px;
}

/* Carousel Container Specifics - GLOBAL */
/*.journey_media.carousel {}*/
    /* Desktop: It uses rules from .journey_card > .journey_media (flex:1, height:100%, position:relative, overflow:hidden) */
    /* Mobile: It gets an explicit pixel height from a similar rule in the media query below. */
    /* `position: relative` and `overflow: hidden` are CRITICAL for carousels with absolute children. */


/* Carousel Image Specifics - GLOBAL */
.journey_media.carousel img {
    position: absolute; /* Positions images relative to their .journey_media.carousel parent */
    top: 0;
    left: 0;
    /* width, height, object-fit, border-radius are inherited from the more general media rule block above. */
    display: none; /* All carousel images are hidden by default; JS sets the active one to 'block'. */
}


/* Alternating Layout (Desktop) - No changes */
.journey_week_1 .journey_content, .journey_week_3 .journey_content, .journey_week_5 .journey_content, .journey_week_7 .journey_content, .journey_week_9 .journey_content { order: 1; }
.journey_week_1 > .journey_media, .journey_week_3 > .journey_media, .journey_week_5 > .journey_media, .journey_week_7 > div:has(> video.journey_media), .journey_week_9 > div:has(> video.journey_media) { order: 2; }
.journey_week_2 .journey_content, .journey_week_4 .journey_content, .journey_week_6 .journey_content, .journey_week_8 .journey_content, .journey_week_10 .journey_content { order: 2; }
.journey_week_2 > .journey_media, .journey_week_4 > .journey_media, .journey_week_6 > div:has(> video.journey_media), .journey_week_8 > div:has(> video.journey_media), .journey_week_10 > div:has(> video.journey_media) { order: 1; }


/* Button Styling (Common) - No changes */
.read-more-btn, .read-less-btn { background-color: #007BFF; color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 4px; width: 100%; text-align: center; box-sizing: border-box; margin-top: 10px; }
.read-more-btn { margin-bottom: 10px; }
.read-less-btn { display: none; margin-top: 15px; }


#share-toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            padding: 16px;
            position: fixed;
            z-index: 1000;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            font-size: 17px;
        }

        #share-toast.show {
            visibility: visible;
            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }

        @-webkit-keyframes fadein {
            from {bottom: 0; opacity: 0;} 
            to {bottom: 30px; opacity: 1;}
        }

        @keyframes fadein {
            from {bottom: 0; opacity: 0;}
            to {bottom: 30px; opacity: 1;}
        }

        @-webkit-keyframes fadeout {
            from {bottom: 30px; opacity: 1;} 
            to {bottom: 0; opacity: 0;}
        }

        @keyframes fadeout {
            from {bottom: 30px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }
        
        .share-btn {
            background-color: transparent;
            color: #d39e00;
            border: 1px solid #d39e00;
            padding: 5px 10px;
            margin-top: 10px;
            cursor: pointer;
            font-size: 0.9em;
            border-radius: 5px;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .share-btn:hover {
            background-color: #d39e00;
            color: white;
        }
        
        /* Ensure buttons sit nicely next to each other */
        .card-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
/* --- Mobile Styles (< 768px) --- */
@media (max-width: 768px) {
    .journey_card {
        flex-direction: column; 
        height: auto; /* Card height becomes dynamic on mobile */
        padding: 15px; 
        gap: 0;
    }

    /* == Mobile: General Media Container Rule (for non-carousel and as a base) == */
    .journey_card > .journey_media,                          /* For simple <img> containers */
    .journey_card > div:has(> video.journey_media)         /* For <div><video></div> containers */ {
        width: 100%;
        order: 1 !important; 
        height: 260px;       /* Default height for general media containers */
        overflow: hidden;    
        margin-bottom: 15px; 
        position: relative; 
        /* background-color: #eee; */ /* TEMP for debugging */
    }

    /* == Mobile: SPECIFIC Rule for CAROUSEL Media Container == */
    /* We make this more specific and add !important to try and force the height */
    .journey_card > div.journey_media.carousel {
        width: 100%;
        order: 1 !important;
        height: 260px !important; /* <<<<<< FORCE HEIGHT FOR CAROUSEL */
        min-height: 260px !important; /* <<<<<< ADD MIN-HEIGHT AS WELL */
        overflow: hidden !important;   /* Ensure clipping if children try to overflow */
        margin-bottom: 15px;
        position: relative !important; /* Crucial for absolute children */
        /* background-color: #f00 !important; */ /* TEMP - change to red to see if this rule applies */
    }


    /* Mobile: Carousel Images Styling */
    /* Ensure images within the now explicitly sized carousel can fill it. */
    .journey_card > div.journey_media.carousel img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important; /* <<<<<< Force image height to fill parent */
        object-fit: contain; /* Or 'contain' based on your preference */
        display: none; /* JS will set to 'block' */
        border-radius: 5px;
        /* background-color: rgba(0, 255, 0, 0.3) !important; */ /* TEMP - Green tint for visible image */
    }


    /* Mobile: Content Styling - No changes needed from previous version */
    .journey_content {
        width: 100%; 
        order: 2 !important; 
        padding: 15px;
        overflow: visible;
        max-height: none;
        height: auto;
        background-color: white;
    }
    .journey_content .main-text-content { max-height: 60px; overflow: hidden; transition: max-height 0.3s ease-out; }
    .journey_content .main-text-content.expanded { max-height: 3000px; /* JS sets to scrollHeight */ }
    .read-more-btn { display: block !important; }
    .read-less-btn { display: none; }
    .journey_content .main-text-content::-webkit-scrollbar { display: none; }
    .journey_content .main-text-content { -ms-overflow-style: none; scrollbar-width: none; }
}


/* Order Page */
.order_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: -400px;
    padding: 20px;
    gap: 70px;
    width: 100%;
    height: auto; /* Height adjusts dynamically based on content */
}

.order_header {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.order_form-section {
    flex: 1;
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
}

.order_form-section h2{ 
    color: #2d3e50;
    margin-bottom: 0;
}
.order_form-section p {
    font-size: .8rem;
    color: #444;
    margin-bottom: 20px;
    margin-top: 0;
}

/* Label styling */
.order-form-grid label {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.order-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 98%;
}

.order-form-grid > div {
    display: flex;
    flex-direction: column;
}

/* Input styling */
.order-form-group input,
.order-form-group select,
.order-form-group textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Subscription term options */
.ordr-subscription-term-options {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    grid-column: span 2;
}

.order_term_option {
    flex: 1;
    padding: 10px;
    border: none;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 0 5px rgb(58, 191, 248);
    background: #fff;
    color: #000;
    cursor: pointer;
    border-radius: 5px;
}
.order_term p {
    margin-top: -10px;
    font-size: 11px;
    color: #444;
 }

.order_term_option:hover {
    background: #e0e0e0;
}

/* Term Selection */
.order_term-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.order_term-option {
    margin-bottom: 12px;
    width: 100%;
}

.order_term-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
    height: 100px;
    min-width: 120px;
}

.order_term-option input[type="radio"] {
    position: relative;
    opacity: 0;
}

.order_term-option input[type="radio"]:checked + label {
    border-color: #3abff8;
    background-color: #f0f9ff;
    box-shadow: 0 0 0 2px rgba(58, 191, 248, 0.2);
}

.order_term-name {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    white-space: nowrap;
}

.order_term-discount {
    font-size: 24px;
    font-weight: 700;
    color: rgb(58, 191, 248);
    line-height: 1;
}

/* Order summary section */
.order_summary-section {
    flex: 1;
    padding: 20px;
    padding-top: 0;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 70%;
    height: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
    max-width: 500px;
}

.order_summary-section h2 {
    color: #2d3e50;    
}

.order_summary-section p {
    margin-top: 10px;
    font-size: 16px;
}

.order_package_details {
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    /* Add checkmark before each text line */
    }
    .order_package_details p::before,
    .order_package_details li::before,
    .order_package_details span::before {
        content: "✔";
        color: rgb(58, 191, 248);
        margin-right: 8px;
        font-size: 16px;
    }

    .order_terms-checkbox {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 15px 0;
        font-size: 15px;
    }

    .order_terms-checkbox input[type="checkbox"] {
        margin: 0;
        width: 16px;
        height: 16px;
    }

    .order_terms-checkbox label {
        margin: 0;
        display: flex;
        align-items: center;
    }

    .order_terms-link {
        color: rgb(58, 191, 248);
        text-decoration: none;
        margin-left: 5px;
    }

    .order_terms-link:hover {
        text-decoration: underline;
    }

/* Submit button */
.order_submit-button {
    width: 50%;
    padding: 10px;
    background: #007bff;;
    color: white;
    border: none;
    margin-top: 15px;
    border-radius: 5px;
    cursor: pointer;
    grid-column: span 2;
}

.order_submit-button:hover {
    background: #0056b3;
}

.order_submit-button:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Tablets */
@media (max-width: 1024px) {
    .order_container {
        flex-direction: column;
        gap: 5%;
        flex-wrap: wrap;
        margin-bottom: 140px;
        height: auto;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .order_summary-section {
        margin: 0;
    }

    .order_term-selection {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        margin: 16px auto;
    }
    .order-form-grid {
        width: 90%;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 850px) {
    .order_container {
        flex-direction: column;
        gap: 1px;
        flex-wrap: wrap;
        height: auto;
    }

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

    .order-form-grid input {
        width: 90%;
    }

    .order_summary-section {
        max-width: 400px;
    }
}

/* Mobile-first adjustments */
@media (max-width: 768px) {
    .order_container {
        margin: 0;
        padding: 0;
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: center;
        margin-bottom: 80px;
        height: auto;
    }

    .order-form-grid {
        grid-template-columns:1fr;
        justify-items: center;
    }

    .order-form-grid input {
        width: 100%;;
    }

    button[type="submit"] {
        width: 50%;
    }

    .order_summary-section {
        margin-top: 10px;
        margin-right: 20px;
        margin-left: 20px;
        max-width: 100%;
    }

    .order_package_details {
        margin-top: 10px;
        width: 100%;
    }

    .order_term-selection {
        margin-top: -10px;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        padding: 0 1rem;
    }

    .order_term-option label {
        height: 90px;
        padding: 12px 8px;
    }
    .order_term-name {
        font-size: 14px;
    }
    .order_term-discount {
        font-size: 20px;
    }
}


/* Custom Package Page */
.custom_package * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.custom_package {
    --custom_primary-color: #007bff;
    --custom_secondary-color: #6c757d;
    --custom_success-color: #28a745;
    --custom_danger-color: #dc3545;
    --custom_background-color: #f8f9fa;
    --custom_border-color: #dee2e6;
    --custom_text-color: #212529;
    --custom_text-muted: #6c757d;
    --custom_card-bg: #ffffff;
    --custom_hover-bg: #f1f3f5;
}

.custom_package {
    line-height: 1.5;
    color: var(--custom_text-color);
    background-color: var(--custom_background-color);
    height: auto;
}

#customPackageForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Layout */
.custom_min-h-screen {
    min-height: 100vh;
}

.custom_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.custom_main-content {
    padding-top: 5rem;
    padding-bottom: 4rem;
    height:auto;
}

/* Header */
.custom_header-content {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem;
}

.custom_heading {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.custom_subheading {
    color: var(--custom_text-muted);
    font-size: 1.1rem;
}

/* Form Grid */
.custom_form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0.5rem;
}

/* Cards */
.custom_card {
    width: 100%;
    background-color: var(--custom_card-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.custom_card.sticky {
    position: sticky;
    top: 6rem;
}

.custom_card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--custom_border-color);
}

.custom_card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.custom_card-description {
    color: var(--custom_text-muted);
    font-size: 0.875rem;
}

.custom_card-content {
    padding: 1.5rem;
}

/* Form Elements */
.custom_form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.custom_form-group {
    margin-right: 0.1rem;
    margin-bottom: 1rem;
}

.custom_form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.custom_form-group input[type="text"],
.custom_form-group input[type="email"],
.custom_form-group input[type="tel"],
.custom_form-group input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--custom_border-color);
    border-radius: 0.25rem;
    font-size: 1rem;
}

.custom_form-group input::-webkit-input-placeholder { font-size: 12px; }
.custom_form-group input::-moz-placeholder { font-size: 12px; }
.custom_form-group input:-ms-input-placeholder { font-size: 12px; }
.custom_form-group input::placeholder { font-size: 12px; }

.custom_form-group input:focus {
    outline: none;
    border-color: var(--custom_primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Service Items */
.custom_service-item {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: white;
}

.custom_service-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.custom_service-info {
    flex: 1;
    text-align: left;
}

.custom_service-info h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #2d3748;
}

.custom_service-info p {
    margin: 0 0 8px 0;
    color: #4a5568;
    font-size: 14px;
}

.custom_service-price {
    color: #2d3748;
    font-weight: 600;
    font-size: 16px;
}

.custom_service-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom_quantity-input {
    width: 80px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

.custom_quantity-input::-webkit-outer-spin-button,
.custom_quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom_quantity-input:focus {
    outline: none;
    border-color: #3abff8;
    box-shadow: 0 0 0 2px rgba(58, 191, 248, 0.2);
}

/* Term Selection */
.custom_term-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.custom_term-option {
    margin-bottom: 12px;
    width: 100%;
}

.custom_term-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
    height: 100px; /* Fixed height for all containers */
    min-width: 120px; /* Minimum width to ensure consistency */
}

.custom_term-option input[type="radio"] {
    position: relative;
    opacity: 0;
}

.custom_term-option input[type="radio"]:checked + label {
    border-color: #3abff8;
    background-color: #f0f9ff;
    box-shadow: 0 0 0 2px rgba(58, 191, 248, 0.2);
}

.custom_term-name {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    white-space: nowrap; /* Prevents term name from wrapping */
}

.custom_term-discount {
    font-size: 24px;
    font-weight: 700;
    color: rgb(58, 191, 248);
    line-height: 1;
}

/* Order Summary */
.custom_selected-services {
    margin-bottom: 1.5rem;
}

.custom_selected-services h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.custom_selected-services ul {
    list-style: none;
}

.custom_selected-services li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.custom_pricing-summary {
    border-top: 1px solid var(--custom_border-color);
    padding-top: 1rem;
}

.custom_pricing-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.custom_pricing-row.total {
    font-weight: 700;
    font-size: 1rem;
}

.custom_pricing-divider {
    border-top: 1px solid var(--custom_border-color);
    margin: 1rem 0;
}

/* Terms Checkbox */
.custom_terms-checkbox {
    display: flex;
    align-items: center;
    text-wrap: none;
    font-size: 13px;
    gap: 0.5rem;
    margin: 1rem 0;
}

.custom_terms-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.custom_terms-link {
    font-size: 13px;
    color: var(--custom_primary-color);
    text-decoration: underline;
}

/* Submit Button */
.custom_submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 200px;
    white-space: nowrap;
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.custom_submit-button:hover {
    background-color: #0056b3;
}

.custom_submit-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.7;
}

.custom_button-icon {
    font-size: 18px;
}

.custom_button-text {
    display: inline-block;
}

/* Animations */
@keyframes custom_fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.custom_fade-in {
    animation: custom_fadeIn 0.3s ease-in-out;
}

/* --- All media queries moved to the end for easy editing --- */
@media (min-width: 1024px) {
    .custom_form-grid {
        grid-template-columns: 1fr 2fr 1fr;
    }
}
@media (max-width: 1023px) {
    .custom_form-grid {
        grid-template-columns: 1fr;
    }

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

    .custom_form-section {
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {

    .custom_package {
        height: auto;
    }

    .custom_form-grid {
        grid-template-columns: 1fr;
    }

    .custom_form-grid-2 {
        font-size: 12px;
    }

    .custom_form-section {
        width: 90%;
    }

    .custom_term-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .custom_term-option label {
        height: 90px;
        padding: 12px 8px;
    }

    .custom_term-name {
        font-size: 14px;
    }

    .custom_term-discount {
        font-size: 20px;
    }
}
/* Your existing styles.css content */
/*Terms and Conditions Page */
.terms_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.terms_title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333; /* Ensure this contrasts well with page background */
}

.terms_welcome {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #666;
}

/* THIS CLASS STYLES THE CONTAINER OF YOUR HTML TERMS */
.terms_content {
    margin-top: 1.5rem;
    background-color: #f3f4f6; /* Light grey background */
    padding: 1.5rem;
    border-radius: 0.5rem;
    color: #1f2937; /* Dark grey text */
}

.terms_section {
    margin-bottom: 2rem;
}

.terms_section:last-child {
    margin-bottom: 0;
}

.terms_section_title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2563eb; /* Blue for titles */
    margin-bottom: 1rem;
}

.terms_section p{
    margin-left: 10px;
}

.terms_list {
    list-style-position: inside;
    margin-left: 1rem; /* Or 0 and control padding on li if needed */
    margin-bottom: 1rem;
    padding-left: 0; /* Reset default ul/ol padding if styling with li margin */
}

.terms_list li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/*.terms_list li::marker {}
    /* You can style list markers if needed, browser support varies */


.terms_list ul { /* Nested lists */
    list-style-type: disc; /* Or 'circle', 'square' */
    margin-left: 2rem; /* Indent nested list */
    margin-top: 0.5rem;
}

.terms_list ul li {
    margin-bottom: 0.25rem;
}

.terms_link {
    color: #2563eb;
    text-decoration: none;
}

.terms_link:hover {
    text-decoration: underline;
}

.terms_download_btn {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.75rem 1.5rem;
    background-color: #2563eb; /* Blue button */
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.terms_download_btn:hover {
    background-color: #1d4ed8; /* Darker blue on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .terms_container {
        padding: 2rem 1rem;
    }

    .terms_title {
        font-size: 1.75rem;
    }

    .terms_content {
        padding: 1rem;
    }

    .terms_section_title {
        font-size: 1.25rem;
    }

    .terms_list {
        margin-left: 0.5rem;
    }

    .terms_list ul {
        margin-left: 1.5rem;
    }
}

/* General styles for the brand ID page - ensure they don't conflict with main site styles */
/* HERO SECTION */
        .portfolio-hero {
            background: #142046;
            color: white;
            text-align: center;
            padding: 80px 20px;
        }
        .portfolio-hero h1 { font-size: 2.5rem; color: #d39e00; margin-bottom: 20px; }
        .portfolio-hero p { max-width: 700px; margin: 0 auto; font-size: 1.1rem; opacity: 0.9; }

        /* PROJECT SECTION LAYOUT */
        .project-section {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
            gap: 50px;
            border-bottom: 1px solid #eee;
        }
        .project-section:nth-child(even) { flex-direction: row-reverse; } /* Alternating Layout */

        .project-text { flex: 1; min-width: 300px; }
        .project-image { flex: 1; min-width: 300px; }
        
        .project-image img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .project-image img:hover { transform: scale(1.02); }

        .project-tag {
            display: inline-block;
            background: #f0f0f0;
            color: #555;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 25px;
        }
        .result-item {
            background: #fff;
            border-left: 3px solid #d39e00;
            padding: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .result-item strong { display: block; color: #333; font-size: 0.9rem; }
        .result-item span { font-size: 0.8rem; color: #666; }

        /* GALLERY GRID (Mockups) */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 40px;
        }
        .gallery-item { cursor: pointer; overflow: hidden; border-radius: 8px; }
        .gallery-item img { 
            width: 100%; height: 100%; object-fit: cover; 
            transition: transform 0.3s;
        }
        .gallery-item:hover img { transform: scale(1.1); }

        /* --- PORTFOLIO LIGHTBOX STYLES --- */
#portfolio-lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999; /* Sit on top of everything */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95); /* Deep black background */
    backdrop-filter: blur(5px); /* Modern frosted glass effect */
}

/* The Image */
.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px; /* Prevent it from getting too huge */
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s;
}

/* Caption Text */
#lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 15px 0;
    font-size: 1.1rem;
    font-weight: 300;
}

/* Close Button */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #d39e00; /* Link X-axis Gold */
    text-decoration: none;
    cursor: pointer;
}

/* Animation */
@keyframes zoomIn {
    from {transform:scale(0.9); opacity:0}
    to {transform:scale(1); opacity:1}
}

/* Mobile Adjustments */
@media only screen and (max-width: 700px) {
    .lightbox-content {
        width: 95%;
    }
}

        /* CTA SECTION */
        .bottom-cta {
            text-align: center;
            padding: 80px 20px;
            background: #f9f9f9;
        }
        .cta-button {
            display: inline-block;
            background: #3abff8;
            color: black;
            padding: 15px 40px;
            font-weight: bold;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 20px;
            transition: background 0.3s;
        }
        .cta-button:hover { background: #b38600; }
/* PriceSlash Page */
 .priceslash-hero {
            background-color: #7BCF51; /* Matching your site's dark theme */
            color: #fff;
            text-align: center;
            padding: 80px 20px;
        }
        .priceslash-hero h1 {
            font-size: 4rem;
            margin-bottom: 10px;
            color: black; /* Your brand's accent color */
        }
        .priceslash-hero p.slogan {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .priceslash-hero p {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .how-it-works, .form-section {
            padding: 60px 20px;
            text-align: center;
        }
        .form-section {
             background-color: #f4f4f4;
        }

        .section-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 40px;
        }

        .steps-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        .step {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            max-width: 320px;
            width: 100%;
            text-align: center;
        }
        .step-number {
            font-size: 2rem;
            font-weight: bold;
            color: #00bfff;
            margin-bottom: 15px;
        }

        .quote-form {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            text-align: left;
        }
        .form-group { margin-bottom: 25px; }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box;
        }
        .file-upload-wrapper {
            border: 2px dashed #00bfff;
            border-radius: 5px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            background-color: #f9f9ff;
        }
        .file-upload-wrapper p { margin: 0; color: #555; }
        #fileName { margin-top: 10px; font-style: italic; color: #00bfff; text-align: center; }

        .submit-btn {
            background-color: #00bfff;
            color: #fff;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }
        .submit-btn:hover { background-color: #009acd; }

    @media (max-width: 768px) {
            .priceslash-hero {
                padding: 60px 15px;
            }
            .priceslash-hero h1 {
                font-size: 2.5rem; /* Reduce font size on mobile */
            }
            .priceslash-hero p.slogan {
                font-size: 1.25rem;
            }
            .how-it-works, .form-section {
                padding: 40px 15px;
            }
            .section-title {
                font-size: 2rem; /* Reduce font size on mobile */
            }
            .steps-container {
                gap: 20px; /* Reduce gap between stacked items */
            }
            .quote-form {
                padding: 25px; /* Reduce form padding on mobile */
            }
        }

    @media (max-width: 450px) {
            .quote-form {
                padding: 20px; /* Further reduce form padding on very small screens */
            }

            .submit-btn {
                font-size: .95rem;
            }
    }

    /* Business Development Hero Section */

        .business-hero {
            background: rgb(20, 32, 70);
            color: #fff;
            padding: 4rem 2rem;
            text-align: center;
        }

        .business-hero-headline {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .business-hero-subheadline {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        .business-cta-button {
            background: rgb(58, 191, 248);
            color: black;
            padding: 0.8rem 1.5rem;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }

        .business-cta-button:hover {
            background-color: #f0f0f0;
        }

        /* Section general styles */
        .business-intro, .business-services, .business-why-us, .business-contact {
            padding: 4rem 2rem;
            text-align: center;
        }

        .business-section-headline {
            font-size: 2rem;
            margin-bottom: 2rem;
            color: black;
        }

        /* Services Section */
        .business-services-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .business-service-item {
            background: #f9f9f9;
            padding: 2rem;
            flex: 1;
            min-width: 280px;
            border-radius: 12px;
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
            transition: 0.3s ease-in-out;
        }

        /* Hover Effect */
        .business-service-item:hover {
            transform: translateY(-7px);
            box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
        }

        .business-service-item h3 {
            color: black;
            margin-bottom: 1rem;
        }

        /* Why Us Section */
        .business-why-us ul {
            list-style: none;
            padding: 0;
            display: inline-block;
            text-align: left;
        }

        .business-why-us li {
            margin-bottom: 1rem;
        }

        /* Contact Section */
        .business-contact-form {
            max-width: 600px;
            margin: 2rem auto 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .business-contact-form input,
        .business-contact-form textarea {
            max-width: 95%;
            padding: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .business-submit-button {
            background: #0056b3;
            color: #fff;
            padding: 1rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .business-submit-button:hover {
            background: #0056b3;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .business-services-container {
                flex-direction: column;
            }
        }
        @media (max-width: 450px) {
            .business-hero-headline {
                font-size: 1.8rem;
            }
            .business-hero-subheadline {
                font-size: 1rem;
            }
            .business-contact-form input,
            .business-contact-form textarea {
                margin-left: -5px;
            }
            
        }

/* ======================== */
/* Promotion Bubble Styles */
/* ======================== */
.promotion-bubble {
    position: fixed;
    right: 20px;
    bottom: 100px;
    width: 200px;
    background:#7bcf51;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(58, 191, 248, 0.4);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    animation: bubblePulse 2s infinite;
    transition: transform 0.3s ease;
}

.promotion-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(58, 191, 248, 0.6);
}

.bubble-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bubble-close {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    cursor: pointer;
    color: black;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.bubble-close:hover {
    opacity: 1;
}

.bubble-text {
    margin: 0;
    color: black;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.bubble-cta {
    background-color: rgb(230, 27, 30);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.bubble-cta:hover {
    background-color: rgb(200, 20, 20);
}

.promotion-bubble.hidden {
    display: none;
}

@keyframes bubblePulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(58, 191, 248, 0.4);
    }
    50% {
        box-shadow: 0 8px 35px rgba(58, 191, 248, 0.7);
    }
}

/* Responsive adjustments for promotion bubble */
@media (max-width: 768px) {
    .promotion-bubble {
        width: 180px;
        right: 15px;
        bottom: 15px;
    }
    
    .bubble-text {
        font-size: 0.85rem;
    }
    
    .bubble-cta {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    .promotion-bubble {
        width: 160px;
        right: 10px;
        bottom: 10px;
        padding: 15px;
    }
    
    .bubble-text {
        font-size: 0.8rem;
    }
    
    .bubble-close {
        font-size: 20px;
    }
}

/* FAQ SECTION STYLES */
.faq-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.faq-header {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 1.8rem;
}
.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    font-weight: bold;
    color: #d39e00; /* Your Brand Gold */
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-answer {
    margin-top: 10px;
    color: #666;
    line-height: 1.6;
    display: block; /* Kept simple for no-js fallback */
}

/* Styling to match Link X-axis Digital Branding */
.thank-you-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    background-color: #f4f7f6;
}

.thank-you-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.icon-check {
    width: 80px;
    height: 80px;
    background-color: rgb(58, 191, 248); /* Brand Teal */
    color: white;
    font-size: 40px;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.thank-you-card h1 {
    color: rgb(20, 32, 70); /* Brand Dark Navy/Teal */
    margin-bottom: 15px;
}

.next-steps {
    text-align: left;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
    border-left: 4px solid rgb(58, 191, 248);
}

.next-steps h3 {
    margin-top: 0;
    color: rgb(20, 32, 70);
    font-size: 18px;
}

.next-steps ul {
    list-style: none;
    padding: 0;
}

.next-steps li {
    margin-bottom: 10px;
    font-size: 15px;
    padding-left: 20px;
    position: relative;
}

.next-steps li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: rgb(58, 191, 248);
}

.email-note {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-block;
    background-color: rgb(20, 32, 70);
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    margin: 5px;
}

.btn-secondary {
    display: inline-block;
    border: 2px solid rgb(20, 32, 70);
    color: rgb(20, 32, 70);
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    margin: 5px;
}

.btn-primary:hover { background-color: rgb(58, 191, 248); color: white; border-color: rgb(58, 191, 248); }