@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
	font-family: 'Cotta';
	font-weight: 100;
	font-display: auto;
	src: url('fonts/cotta-free.otf') format('OpenType');
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 90%;
    }
}

/* =======================================
   BASE STYLES
   ======================================= */
body {
    font-family: "Poppins", sans-serif;
    background-color: #0b0b0b; /* Very dark background based on Figma */
    color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5{
    font-family: 'Cotta' !important;
}

/* =======================================
   NAVBAR STYLES
   ======================================= */
.custom-navbar {
    background-color: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
}

.logo-text {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.5px;
    color: #ffffff !important;
}

.custom-nav-links .nav-link {
    color: #a0a0a0 !important;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 20px !important;
    transition: all 0.3s ease;
}

.custom-nav-links .nav-item.active .nav-link,
.custom-nav-links .nav-link:hover {
    color: #ffffff !important;
}

/* Active Nav Link Box (as seen on "Home") */
.custom-nav-links .nav-item.active {
    background-color: #1a1a1a;
    border-radius: 6px;
}

/* Contact Us Button */
.btn-contact {
    background-color: #1a1a1a;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 24px;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    transition: 0.3s ease;
}

.btn-contact:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* =======================================
   HERO SECTION
   ======================================= */
.hero-section {
    padding: 20px 0 50px 0;
}
.home .hero-section {
    padding: 10px 0 2px 0;
}
.header-menu-row{
	padding-top: 10px;
}
.hero-image-wrapper {
    /* Make sure the path matches where you store Images Container.png */
    background-image: url('images/Images\ Container.png');
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    min-height: 550px; 
    border-radius: 4px; /* Slight softening of the container edges if needed */
    overflow: hidden;
}

/* Optional slight dark tint to make the white text pop out more from the background */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2); 
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Sits above the overlay */
}

/* Typography matching Figma settings exactly */
.hero-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 48px;
    line-height: 1;   /* 100% line-height */
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    margin-bottom: 25px;
}

/* Get a Free Quote Button */
.btn-quote {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); /* Slight glassmorphism effect */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px; /* Pill shape */
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-quote:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    color: #ffffff;
}

/* =======================================
   TICKER SECTION (SLICK CAROUSEL)
   ======================================= */
.ticker-section {
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    background-color: #0b0b0b;
    padding: 15px 0;
    overflow: hidden; /* Hides the scrollbar during slick load */
}

.ticker-item {
    display: flex !important; /* Slick overrides display, so !important is needed */
    align-items: center;
    color: #a0a0a0; /* Slightly muted white for the marquee text */
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 25px; /* Spacing between scrolling items */
    white-space: nowrap;
}

.ticker-icon {
    width: 20px;
    height: 20px;
    margin-right: 25px;
    display: inline-block;
}

/* Remove focus outlines from Slick */
.slick-slide:focus, .slick-slide a {
    outline: none;
}

/* =======================================
   THEME TOGGLE BUTTON STYLES
   ======================================= */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background-color: #1a1a1a;
}

body.light-mode .theme-toggle-btn {
    border-color: #cccccc;
    color: #0b0b0b;
}

body.light-mode .theme-toggle-btn:hover {
    background-color: #f1f1f1;
}

/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
/* Body */
body.light-mode {
    background-color: #ffffff;
    color: #0b0b0b;
}

/* Navbar */
body.light-mode .logo-text {
    color: #0b0b0b !important;
}

body.light-mode .custom-nav-links .nav-link {
    color: #666666 !important;
}

body.light-mode .custom-nav-links .nav-item.active .nav-link,
body.light-mode .custom-nav-links .nav-link:hover {
    color: #0b0b0b !important;
}

body.light-mode .custom-nav-links .nav-item.active {
    background-color: #f1f1f1;
}

body.light-mode .btn-contact {
    background-color: #ffffff;
    color: #0b0b0b;
    border-color: #cccccc;
}

body.light-mode .btn-contact:hover {
    background-color: #f8f8f8;
    border-color: #0b0b0b;
}

/* Ticker Marquee */
body.light-mode .ticker-section {
    background-color: #ffffff;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

body.light-mode .ticker-item {
    color: #333333;
}

/* =======================================
   ABOUT SECTION STYLES
   ======================================= */
.about-section {
    padding: 80px 0;
    background-color: #0b0b0b; /* Matches main dark theme */
}

/* Header & Typography */
.about-subtitle {
    display: block;
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.about-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Header Quote Button */
.btn-header-quote {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-header-quote:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* 
   Image Wrapper & Corner Shapes
   Using pseudo-elements to recreate the dark circular cutouts shown in Figma 
*/
.about-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #0088ff; /* Subtle blue outline like Figma selection, remove if not wanted */
}

.about-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top Left Overlapping Circle */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background-color: #0b0b0b;
    border-radius: 50%;
    border: 2px solid #0b0b0b;
    z-index: 2;
}

/* Bottom Right Overlapping Circle */
.about-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -20px;
    width: 160px;
    height: 160px;
    background-color: #0b0b0b;
    border-radius: 50%;
    border: 2px solid #0b0b0b;
    z-index: 2;
}

/* About Content Card */
.about-card {
    background-color: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    padding: 40px;
	align-content: center;
}

.about-icon {
    width: 35px;
    height: auto;
}

.about-card-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
}

.about-card-text {
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 15px;
}
.about-card-text a {
    color: #cccccc;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.about-card-text a:hover {
    color: #ffffff;
}

/* Pink Squiggle Decoration */
.squiggle-icon {
    position: absolute;
    /* Adjust these negative values to pull it outside the card */
    bottom: -40px; 
    right: -60px; 
    
    /* Matching the sizing from your Figma screenshot */
    width: 206px; 
    height: auto; /* Keeps the proportion correct based on the 117px height */
    
    z-index: 10; /* Puts it slightly behind the text if they overlap, but above the background */
    pointer-events: none; /* Ensures it doesn't block the user from clicking or selecting text */
}


/* =======================================
   LIGHT MODE OVERRIDES FOR ABOUT SECTION
   ======================================= */
body.light-mode .about-section {
    background-color: #ffffff;
}

body.light-mode .about-title {
    color: #0b0b0b;
}

body.light-mode .btn-header-quote {
    background-color: #ffffff;
    color: #0b0b0b;
    border-color: #cccccc;
}

body.light-mode .btn-header-quote:hover {
    background-color: #f8f8f8;
    border-color: #0b0b0b;
}

/* Make the overlapping corner cutouts match the light background */
body.light-mode .about-image-wrapper::before,
body.light-mode .about-image-wrapper::after {
    background-color: #ffffff;
    border-color: #ffffff;
}

body.light-mode .about-card {
    background-color: #fafafa;
    border-color: #eaeaea;
}

body.light-mode .about-card-title {
    color: #111111;
}

body.light-mode .about-card-text {
    color: #555555;
}

body.light-mode .about-card-text a {
    color: #111111;
}

/* =======================================
   PORTFOLIO SECTION STYLES
   ======================================= */
.portfolio-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a; /* Subtle separator from the previous section */
    overflow: hidden; 
}

.portfolio-subtitle {
    display: block;
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.portfolio-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Pink Cross Decoration */
.portfolio-cross-icon {
    position: absolute;
    top: -60px;
    right: -150px;
    width: 100px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* Floating Squiggle Bottom Left */
.portfolio-bottom-squiggle {
    position: absolute;
    bottom: -30px;
    left: 50px;
    width: 206px;
    height: auto;
    z-index: 10;
    pointer-events: none;
     /* Adjust rotation to match your mockup */
}



/* Custom Slick Arrows */
.portfolio-arrow {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.portfolio-arrow:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

.portfolio-arrow:focus {
    outline: none;
    box-shadow: none;
}

/* View All Works Button */
.btn-view-all {
    background-color: #1a1a1a;
    color: #cccccc;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* Portfolio Cards */
.portfolio-item-wrapper {
    padding: 0 12px; /* Creates the gap between cards in the carousel */
    outline: none;
}

.portfolio-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0b0b0b;
}

.portfolio-img {
    width: 100%;
    height: 380px; 
    object-fit: cover;
    display: block;
}

/* Bottom Label with dark gradient fade */
.portfolio-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 15px 15px 15px;
    /*background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 100%);*/
	background: linear-gradient(180deg, rgba(66, 66, 66, 0.06) 0%, #000000 64.42%, #1F1F20 100%);
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR PORTFOLIO
   ======================================= */
body.light-mode .portfolio-section {
    background-color: #ffffff;
    border-top-color: #eaeaea;
}

body.light-mode .portfolio-title {
    color: #0b0b0b;
}

body.light-mode .portfolio-arrow,
body.light-mode .btn-view-all {
    background-color: #ffffff;
    color: #0b0b0b;
    border-color: #cccccc;
}

body.light-mode .portfolio-arrow:hover,
body.light-mode .btn-view-all:hover {
    background-color: #f8f8f8;
    border-color: #0b0b0b;
}

/* Maintain dark label overlay for contrast over images even in light mode */
body.light-mode .portfolio-label {
    color: #ffffff;
}

/* Updated About Title */
.about-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; /* SemiBold */
    line-height: 1;   /* 100% Line Height */
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 0;
}

/* Updated Portfolio Title */
.portfolio-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; /* SemiBold */
    line-height: 1;   /* 100% Line Height */
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 0;
}

/* Force one line on Desktop screens */
@media (min-width: 992px) {
    .portfolio-title {
        white-space: nowrap;
    }
}

/* =======================================
   OUR BOOTHS SECTION STYLES
   ======================================= */
.booths-section {
    padding: 80px 0;
    background-color: #0b0b0b;
}

.booths-subtitle {
    display: block;
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.booths-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; /* SemiBold to match previous adjustment */
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

/* Force one line on Desktop screens */
@media (min-width: 992px) {
    .booths-title {
        white-space: nowrap;
    }
}

.section-divider {
    border-top: 1px solid #1a1a1a;
}

/* --- Booth Cards --- */
.booth-card {
    background-color: transparent;
}

.booth-img-wrapper {
    position: relative;
    margin-bottom: 45px; /* Creates room for the absolute icon hanging below */
}

.booth-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces the image into a perfect square like Figma */
    object-fit: cover;
    border-radius: 16px;
    display: block;
	height: 375px;
}

/* Circular Arrow Cutout */
.booth-arrow-icon {
    position: absolute;
    bottom: -25px; /* Pulls it halfway off the image */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    /* 
       This creates the "cutout" illusion! 
       The border matches the section background exactly.
    */
    border: 6px solid #0b0b0b; 
}

.booth-arrow-icon:hover {
    background-color: #2a2a2a;
}

/* Booth Content Typography */
.booth-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.booth-text {
    color: #999999;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.booth-text a {
    color: #cccccc;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s;
}

.booth-text a:hover {
    color: #ffffff;
}

/* Footer Quote Link */
.booth-quote-link {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s;
    background: #e5332a;
    width: fit-content;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 25px;
}

.booth-quote-link:hover {
    color: #cccccc;
}

.booth-quote-link svg {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

/* Fun hover effect to bounce the arrow slightly top-right */
.booth-quote-link:hover svg {
    transform: translate(2px, -2px);
}

/* =======================================
   LIGHT MODE OVERRIDES FOR BOOTHS
   ======================================= */
body.light-mode .booths-section {
    background-color: #ffffff;
}

body.light-mode .booths-title {
    color: #0b0b0b;
}

body.light-mode .section-divider {
    border-top-color: #eaeaea;
}

body.light-mode .booth-title {
    color: #111111;
}

body.light-mode .booth-text {
    color: #555555;
}

body.light-mode .booth-text a {
    color: #111111;
}

body.light-mode .booth-quote-link {
    color: #0b0b0b;
}

body.light-mode .booth-quote-link:hover {
    color: #555555;
}

/* Critical light-mode override so the cutout border matches the white background */
body.light-mode .booth-arrow-icon {
    background-color: #f1f1f1;
    color: #0b0b0b;
    border-color: #ffffff; 
}

body.light-mode .booth-arrow-icon:hover {
    background-color: #e2e2e2;
}

/* =======================================
   WHY CHOOSE US SECTION STYLES
   ======================================= */
.why-choose-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
    z-index: 1; /* Establishes a stacking context for the decorative icons */
}

/* Section Title matching the 38px SemiBold layout */
.why-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; /* SemiBold */
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

/* Feature Cards */
.feature-card {
    background-color: transparent; 
    border: 1px solid #1a1a1a;
    border-radius: 8px; /* Slight rounding based on Figma */
    padding: 30px 25px;
    height: 100%;
    min-height: 211px; /* Matches the exact height from your screenshot! */
    transition: all 0.3s ease;
}

.feature-card:hover {
    background-color: #0f0f0f;
    border-color: #2a2a2a;
}

.feature-icon-wrapper {
    color: #ffffff;
}

.feature-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.feature-text {
    color: #999999;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.feature-icon-wrapper i {
    font-size: 24px;
}

/* --- Decorative Pink Icons --- */
.why-squiggle-icon {
    position: absolute;
    top: -100px;
    right: 0px;
    width: 206px; /* Scaled down slightly based on screenshot perspective */
    height: auto;
    z-index: -1;
    pointer-events: none;
   
}

.why-cross-icon {
    position: absolute;
    bottom: -50px;
    left: 0px; /* Aligns under the first card */
    width: 100px;
    height: auto;
    z-index: -1;
    pointer-events: none;
}

/* Inverts the white PNG vectors to dark gray/black in light mode */
body.light-mode .feature-img {
    filter: invert(1) brightness(0.2);
}

/* =======================================
   LIGHT MODE OVERRIDES FOR WHY CHOOSE US
   ======================================= */
body.light-mode .why-choose-section {
    background-color: #ffffff;
    border-top-color: #eaeaea;
}

body.light-mode .why-title {
    color: #0b0b0b;
}

body.light-mode .feature-card {
    border-color: #eaeaea;
}

body.light-mode .feature-card:hover {
    background-color: #fafafa;
    border-color: #cccccc;
}

body.light-mode .feature-icon-wrapper,
body.light-mode .feature-title {
    color: #111111;
}

body.light-mode .feature-text {
    color: #555555;
}

/* Updated Feature Title based on Figma specs */
.feature-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500; /* Medium */
    line-height: 1;   /* 100% Line Height */
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 15px;
}

/* =======================================
   PACKAGES SECTION STYLES
   ======================================= */
.packages-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
}

.packages-text-wrapper {
    max-width: 522px; /* Matches Figma Width precisely */
}

/* Inherits the SemiBold 38px style we defined for sections earlier */
.packages-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; 
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Typography explicitly matching the Figma details */
.packages-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: 1.5; /* 150% */
    letter-spacing: 0px;
    color: #797c86; /* Grey/50 */
    margin: 0;
}

.packages-text a {
    color: #797c86;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.packages-text a:hover {
    color: #ffffff;
}

/* --- Carousel & Image Styles --- */
.packages-carousel-wrapper {
    border-radius: 12px;
    overflow: hidden; /* Ensures the image doesn't spill out */
    /* Remove outline on slick track */
    outline: none; 
}

.package-slide {
    outline: none;
}

.package-img {
    width: 100%;
    height: 400px; /* Adjust this to match desired image height */
    object-fit: cover;
    display: block;
}

/* --- Floating Controls (No Shape) --- */
.packages-controls {
    position: absolute;
    bottom: 15px; /* Adjust this number slightly up or down to center them inside your image's curve */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Navigation Buttons inside the Trapezoid */
.pkg-arrow {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.pkg-arrow:hover {
    background-color: #2a2a2a;
}

.pkg-arrow:focus {
    outline: none;
    box-shadow: none;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR PACKAGES
   ======================================= */
body.light-mode .packages-section {
    background-color: #ffffff;
    border-top-color: #eaeaea;
}

body.light-mode .packages-title {
    color: #0b0b0b;
}

body.light-mode .packages-text a:hover {
    color: #0b0b0b;
}

/* The cutout must change color to match the white background! */
body.light-mode .packages-controls-trapezoid {
    background-color: #ffffff;
}

body.light-mode .pkg-arrow {
    background-color: #f1f1f1;
    color: #0b0b0b;
    border-color: #cccccc;
}

body.light-mode .pkg-arrow:hover {
    background-color: #e2e2e2;
}

/* The cutout must change color to match the white background! */
body.light-mode .packages-controls-trapezoid {
    background-color: #ffffff;
}

/* =======================================
   PRICING LIST SECTION STYLES
   ======================================= */
.pricing-section {
    padding: 80px 0;
    background-color: #0b0b0b;
}

.pricing-row {
    padding: 20px 0;
}

.pricing-tier-name {
    display: block;
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

/* Figma Settings: Manrope, Medium(500), 50px, #CACACE, 150% Line Height */
.pricing-price {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 1.5;
    color: #cacace;
    letter-spacing: 0;
}

.pricing-quote-link {
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: underline;
    text-underline-offset: 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.pricing-quote-link:hover {
    color: #cacace;
}

.pricing-quote-link svg {
    transition: transform 0.3s ease;
}

.pricing-quote-link:hover svg {
    transform: translate(2px, -2px); /* Slight bounce up-right on hover */
}

/* --- Pricing Feature Rows (Right Side) --- */
.pricing-feature-box {
    background-color: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    padding: 12px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.pricing-feature-box:hover {
    background-color: #111111;
}

/* Increased Icon Size */
.pricing-star-icon {
    width: 22px; /* Increased from 14px */
    height: auto;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Figma Settings: Manrope, Regular(400), 16px, #AFB0B6, 150% Line Height, Uppercase */
.pricing-feature-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #afb0b6;
    text-transform: uppercase;
    margin: 0;
}

.pricing-see-more {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.pricing-see-more:hover {
    color: #cacace;
    text-decoration: none;
}

/* The Faint Divider Between Tiers */
.pricing-divider {
    border-top: 1px solid #1a1a1a;
    margin: 30px 0;
}

/* Floating Pink Cross Decoration */
.pricing-cross-icon {
    position: absolute;
    bottom: -50px;
    left: -100px; 
    width: 100px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR PRICING
   ======================================= */
body.light-mode .pricing-section {
    background-color: #ffffff;
}

body.light-mode .pricing-tier-name {
    color: #666666;
}

/* Darken the price slightly for better visibility on white */
body.light-mode .pricing-price {
    color: #333333; 
}

body.light-mode .pricing-quote-link,
body.light-mode .pricing-see-more {
    color: #0b0b0b;
}

body.light-mode .pricing-quote-link:hover,
body.light-mode .pricing-see-more:hover {
    color: #666666;
}

body.light-mode .pricing-feature-box {
    border-color: #eaeaea;
}

body.light-mode .pricing-feature-box:hover {
    background-color: #fafafa;
}

/* Darken the feature text slightly for readability on light mode */
body.light-mode .pricing-feature-text {
    color: #555555;
}

body.light-mode .pricing-divider {
    border-top-color: #eaeaea;
}

/* =======================================
   WHAT'S INCLUDED SECTION STYLES
   ======================================= */
.included-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
}

/* Figma Settings: Manrope, SemiBold (600), 34px, 100% LH, #797C86 */
.included-sub-title {
    font-family: 'Manrope', sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: #797c86;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Red Gradient Pill Button */
.btn-red-gradient {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    border-radius: 50px;
    padding: 8px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-red-gradient:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
}

/* Figma Settings: Manrope, Regular (400), 16px, 150% LH, #797C86 */
.included-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #797c86;
    max-width: 574px; /* Constrains width to match Figma box */
    margin: 0;
}

/* Feature List Items */
.included-feature-item {
    background-color: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}
.home .included-feature-item {
    padding: 0;
    margin-bottom: 0px;
}
.home .faq-body {
    padding-top: 0;
    padding-bottom: 20px;
    max-width: 100%;
}
.included-feature-item:hover {
    background-color: #111111;
}
.test-gihan h2{
	margin-bottom: 20px;
}
/* Figma Settings: Manrope, Regular (400), 16px, 150% LH, #AFB0B6, Uppercase */
.included-feature-item span {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #afb0b6;
    text-transform: uppercase;
    margin: 0;
}

/* Video/Image Thumbnail */
.included-media-wrapper {
    border-radius: 16px; /* Soft rounded corners */
    overflow: hidden;
    width: 100%;
    max-width: 574.5px; /* Exact dimension from Figma */
    margin: 0 auto;     /* Centers in column */
}

.included-media-img {
    width: 100%;
    height: 100%;
    min-height: 500px; /* Forces height to match the vertical layout */
    object-fit: cover;
    display: block;
}

/* Custom CSS Play Button Overlay */
.play-btn-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1); /* Very faint dark overlay */
}

.play-btn-circle {
    width: 75px;
    height: 75px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); /* Creates the transparent ring around it */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.play-btn-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Floating Pink Squiggle */
.included-squiggle-icon {
    position: absolute;
    top: 50px;
    right: -150px;
    width: 206px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR INCLUDED
   ======================================= */
body.light-mode .included-section {
    background-color: #ffffff;
    border-top-color: #eaeaea;
}

body.light-mode .included-sub-title {
    color: #555555;
}

body.light-mode .included-desc {
    color: #666666;
}

body.light-mode .included-feature-item {
    border-color: #eaeaea;
}

body.light-mode .included-feature-item:hover {
    background-color: #fafafa;
}

body.light-mode .included-feature-item span {
    color: #333333;
}

/* =======================================
   TESTIMONIALS SECTION STYLES
   ======================================= */
.testimonials-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
}

.testimonials-subtitle {
    display: block;
    color: #6c6c6c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.testimonials-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

/* Stats Logic */
.stats-text {
    color: #797c86;
    font-size: 14px;
}

.stats-count {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

/* Testimonial Cards */
.testimonial-item {
    padding: 10px 15px; /* Gap between slides */
    outline: none;
}

.testimonial-card {
    background-color: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    min-height: 380px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: #2a2a2a;
    background-color: #111111;
}

.test-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

.test-location {
    color: #797c86;
    font-size: 13px;
    margin: 0;
}

/* Social Icon Circles */
.test-socials {
    display: flex;
    gap: 8px;
    background: #1a1a1a;
    padding: 8px 12px;
    border-radius: 50px;
}

.social-circle {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    cursor: pointer;
}

.social-circle:hover {
    opacity: 0.7;
}

.test-stars svg {
    margin-right: 2px;
}

.test-text {
    color: #afb0b6;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Floating Pink Squiggle */
.testimonials-squiggle-icon {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR TESTIMONIALS
   ======================================= */
body.light-mode .testimonials-section {
    background-color: #ffffff;
}

body.light-mode .testimonials-title,
body.light-mode .stats-count,
body.light-mode .test-name {
    color: #0b0b0b;
}

body.light-mode .testimonial-card {
    background-color: #fafafa;
    border-color: #eaeaea;
}

body.light-mode .test-text {
    color: #555555;
}

body.light-mode .test-socials {
    background: #f1f1f1;
}

body.light-mode .social-circle {
    color: #0b0b0b;
}

/* The Outer Pill Container */
.portfolio-arrows {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #2a2a2a; /* The outer rounded-rect border */
    border-radius: 50px;
    padding: 6px; /* Space between the border and the buttons */
}

/* The Circular Buttons inside */
.portfolio-arrow {
    background-color: #1a1a1a;
    border: none; /* Removed individual border to keep it clean */
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.portfolio-arrow:hover {
    background-color: #333333;
    color: #ffffff;
}

/* SVG Icon sizing inside the buttons */
.portfolio-arrow svg {
    width: 18px;
    height: 18px;
}

/* Light Mode Override */
body.light-mode .portfolio-arrows {
    border-color: #cccccc;
}
body.light-mode .portfolio-arrow {
    background-color: #f1f1f1;
    color: #0b0b0b;
}

/* =======================================
   FAQ SECTION STYLES
   ======================================= */
.faq-section {
    padding: 80px 0 120px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
}

/* Vertical separator line between columns on large screens */
@media (min-width: 992px) {
    .faq-border-right {
        border-right: 1px solid #1a1a1a;
    }
}

.faq-item {
    border-bottom: 1px solid #1a1a1a;
    padding: 25px 0;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    outline: none;
}

.faq-question {
    color: #AFB0B6;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    padding-right: 20px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.faq-header:hover .faq-question {
    color: #cccccc;
}

/* Icon Circle Styling */
.faq-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* Rotate the arrow when open */
.faq-header[aria-expanded="true"] .faq-icon-circle {
    transform: rotate(180deg);
}

.faq-body {
    padding-top: 15px;
    color: #797c86; /* Matches the paragraph grey/50 from previous sections */
    font-size: 15px;
    line-height: 1.6;
    max-width: 90%;
}

/* Floating Squiggle Bottom Right */
.faq-squiggle-icon {
    position: absolute;
    bottom: -30px;
    right: -150px;
    width: 206px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR FAQ
   ======================================= */
body.light-mode .faq-section {
    background-color: #ffffff;
}

body.light-mode .faq-border-right,
body.light-mode .faq-item {
    border-color: #eaeaea;
}

body.light-mode .faq-question {
    color: #0b0b0b;
}

body.light-mode .faq-icon-circle {
    background-color: #f1f1f1;
    color: #0b0b0b;
}

body.light-mode .faq-body {
    color: #555555;
}

/* =======================================
   CLIENTS SECTION STYLES
   ======================================= */
.clients-section {
    padding: 60px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}

.clients-subtitle {
    color: #797c86;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.client-logo-item {
    outline: none;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.client-logo-item img {
    max-height: 35px; /* Adjust based on your logo heights */
    width: auto;
    filter: brightness(0) invert(1); /* Forces logos to be white for dark mode */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.client-logo-item img:hover {
    opacity: 1;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR CLIENTS
   ======================================= */
body.light-mode .clients-section {
    background-color: #ffffff;
    border-color: #eaeaea;
}

body.light-mode .client-logo-item img {
    filter: brightness(0); /* Forces logos to be black for light mode */
    opacity: 0.5;
}

body.light-mode .client-logo-item img:hover {
    opacity: 0.9;
}

/* =======================================
   BRANDING SECTION STYLES
   ======================================= */
.branding-section {
    background-color: #0b0b0b;
    padding: 10px 0 0 0; /* No bottom padding to let ticker touch the edge */
}

.branding-content {
    min-height: 250px;
}

/* Massive Dimmed Background Text */
.bg-brand-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(60px, 12vw, 180px); /* Scales based on screen width */
    color: #1a1a1a; /* Very dark grey for the "dimmed" look */
    letter-spacing: -2px;
    margin: 0;
    line-height: 0.8;
    user-select: none;
    white-space: nowrap;
}

/* Pink Cross Positioned over the text */
.branding-cross-icon {
    position: absolute;
    top: 50%;
    left: 35%; /* Adjust this to match Figma placement */
    transform: translateY(-50%);
    width: 206px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* Instagram Ticker Wrapper */
.insta-ticker-wrapper {
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    background-color: #0b0b0b;
    padding: 15px 0;
    margin-top: 40px;
}

.insta-item {
    display: flex !important;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 30px;
    white-space: nowrap;
}

.insta-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .branding-section,
body.light-mode .insta-ticker-wrapper {
    background-color: #ffffff;
}

body.light-mode .bg-brand-text {
    color: #f1f1f1; /* Light grey for light mode */
}

body.light-mode .insta-ticker-wrapper {
    border-color: #eaeaea;
}

body.light-mode .insta-item {
    color: #0b0b0b;
}

body.light-mode .insta-icon {
    filter: brightness(1); /* Makes the colorful insta icon black to match branding */
}

/* =======================================
   FOOTER SECTION STYLES
   ======================================= */
.main-footer {
    padding: 60px 0 40px 0;
    background-color: #0b0b0b;
    border-top: 1px solid #1a1a1a;
    overflow: hidden;
}

/* --- Left Side CTA --- */
.footer-cta-subtitle {
    color: #797c86;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.footer-cta-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.footer-cta-btn {
    padding: 15px 40px;
    border-radius: 50px;
}

/* --- Right Side Links --- */
.footer-link-heading {
    color: #797c86;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.footer-links, .main-footer .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .main-footer .menu li {
    margin-bottom: 12px;
}

.footer-links a, .main-footer .menu li a {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .main-footer .menu li a:hover {
    color: #797c86;
	text-decoration: none;
}

/* --- Bottom Bar --- */
.footer-bottom {
    border-top: 1px solid #1a1a1a;
    margin-top: 50px;
}

.footer-bottom-text {
    color: #797c86;
    font-size: 12px;
}

.footer-bottom-text a {
    color: #797c86;
    text-decoration: none;
}

.footer-bottom-text a:hover {
    color: #ffffff;
}

/* --- Decorative Branding Detail --- */
.footer-bg-detail {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 400px;
    line-height: 1;
    color: #151515; /* Dark subtle grey */
    pointer-events: none;
    z-index: 0;
}
.test-socials ul {
    padding-left: 0;
    display: inline-block;
    list-style: none;
    margin-bottom: 0px;
}
.test-socials ul li{
    display: inline-block;
    padding: 2px 15px;
}
.test-socials ul li a{
    color: unset;
}
/* =======================================
   LIGHT MODE OVERRIDES FOR FOOTER
   ======================================= */
body.light-mode .main-footer {
    background-color: #ffffff;
    border-color: #eaeaea;
}

body.light-mode .footer-cta-title,
body.light-mode .footer-links a {
    color: #0b0b0b;
}

body.light-mode .footer-links a:hover {
    color: #797c86;
}

body.light-mode .footer-bottom {
    border-top-color: #eaeaea;
}

body.light-mode .footer-bg-detail {
    color: #f9f9f9;
}

/* =======================================
   CONTACT PAGE EXCLUSIVE STYLES
   ======================================= */

/* Hero Section */
.contact-hero-section {
    padding: 20px 0 60px 0;
}

.contact-hero-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 630px;
    background-color: #111;
}

.contact-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
	display: flex;
    flex-direction: column; /* 👈 ADD THIS */
    align-items: center;
    justify-content: center;
    text-align: center; /* optional */
}

.contact-hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
	text-transform: uppercase;
}

.contact-hero-squiggle {
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 206px;
    
}

/* Contact Info Section */
.contact-pg-heading {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.contact-pg-text {
    color: #797c86;
    font-size: 14px;
    line-height: 1.6;
}

.contact-pg-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.contact-pg-divider {
    border-top: 1px solid #1a1a1a;
    margin-top: 60px;
}

/* Form Styles */
.reserve-section {
    padding: 80px 0 0px 0;
}

.form-group-pg {
    margin-bottom: 40px;
}

.form-group-pg label {
    display: block;
    color: #797c86;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

.input-underline {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    width: 100%;
    padding: 10px 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.input-underline::placeholder {
    color: #333333;
    font-weight: 700;
    text-transform: uppercase;
}

.input-underline:focus {
    outline: none;
    border-bottom-color: #ffffff !important;
}

/* Decorative Icons */
.reserve-decor-cross-1 { position: absolute; top: -80px; left: -80px; width: 100px; }
.reserve-decor-cross-2 { position: absolute; bottom: 20%; left: -30px; width: 100px; }
.reserve-decor-squiggle { position: absolute; bottom: 0; right: -25px; width: 45px; transform: rotate(90deg); }

/* Light Mode Overrides */
body.light-mode .contact-hero-section { background: #fff; }
body.light-mode .contact-pg-heading,
body.light-mode .contact-pg-link,
body.light-mode .input-underline {
    color: #0b0b0b;
}

body.light-mode .contact-pg-divider,
body.light-mode .input-underline {
    border-color: #eaeaea !important;
}

body.light-mode .input-underline::placeholder {
    color: #cccccc;
}

/* =======================================
   THEME TOGGLE BUTTON STYLES
   ======================================= */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    outline: none !important;
}

.theme-toggle-btn:hover {
    background-color: #1a1a1a;
}

/* Light Mode State for Button */
body.light-mode .theme-toggle-btn {
    border-color: #cccccc;
    color: #0b0b0b;
}

body.light-mode .theme-toggle-btn:hover {
    background-color: #f1f1f1;
}

/* Hide/Show Icons based on class */
body.light-mode .icon-moon {
    display: none;
}

body.light-mode .icon-sun {
    display: block !important;
}

/* =======================================
   GALLERY PAGE SPECIFIC STYLES
   ======================================= */

.gallery-hero-section {
    padding: 20px 0 60px 0;
}

.gallery-hero-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 550px;
}

.gallery-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-hero-title {
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
}

/* Specific Squiggle Sizing Request */
.contact-hero-squiggle {
    position: absolute;
    bottom: -70px;
    right: -110px;
    width: 206px; /* Your requested size */
    height: auto;
    z-index: 10;
}

/* Explore Content */
.explore-section {
    padding: 40px 0 80px 0;
}

.gallery-explore-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.gallery-explore-text {
    color: #797c86;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 20px;
}

.explore-decor-cross {
    position: absolute;
    left: -100px;
    top: 70%;
    width: 100px;
    transform: translateY(-50%);
}

/* Light Mode Override */
body.light-mode .gallery-hero-section,
body.light-mode .explore-section {
    background-color: #ffffff;
}

body.light-mode .gallery-explore-title {
    color: #0b0b0b;
}

body.light-mode .gallery-explore-text {
    color: #555555;
}

/* =======================================
   UPDATED EXPLORE SECTION STYLES
   ======================================= */

.explore-section {
    padding: 60px 0 80px 0;
    background-color: #0b0b0b;
}

/* Figma: Manrope, 600 (SemiBold), 34px, 100% LH, Uppercase, #FFFFFF */
.gallery-explore-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1; /* 100% */
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0%;
}

/* Figma: Manrope, 400 (Regular), 18px, 150% LH, #AEAEB2 */
.gallery-explore-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5; /* 150% */
    color: #AEAEB2;
    margin-top: 25px;
    letter-spacing: 0%;
}



/* --- Light Mode Adjustments --- */
body.light-mode .gallery-explore-title {
    color: #0b0b0b;
}

body.light-mode .gallery-explore-text {
    color: #555555; /* Darker grey for readability on white background */
}


/* =======================================
   SPECIAL EXTRAS PAGE STYLES
   ======================================= */

.extras-grid-section {
    padding: 60px 0;
    background-color: #0b0b0b;
}

/* Card Titles */
.extra-item-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 15px;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

/* Reuse the booth-img-wrapper logic from "Our Booths" section */
/* Ensure the circular icon has the correct border color for the background */
.extras-grid-section .booth-arrow-icon {
    border-color: #0b0b0b;
}

/* Light Mode Support for Extras Page */
body.light-mode .extras-grid-section {
    background-color: #ffffff;
}

body.light-mode .extra-item-title {
    color: #0b0b0b;
}

body.light-mode .extras-grid-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}

body.light-mode .gallery-hero-section,
body.light-mode .explore-section {
    background-color: #ffffff;
}

body.light-mode .gallery-hero-title,
body.light-mode .gallery-explore-title {
    color: #0b0b0b !important;
}

body.light-mode .gallery-explore-text {
    color: #555555 !important;
}

/* =======================================
   PRICING & PACKAGES TABLE STYLES
   ======================================= */
.pricing-tables-section {
    padding: 80px 0;
    background-color: #0b0b0b;
}

.category-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card {
    background-color: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    padding: 40px;
}

.pricing-row {
    padding: 15px 25px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: #afb0b6;
    border-radius: 8px;
    margin-bottom: 5px;
}

.pricing-row.header {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 16px;
}

.pricing-row.highlight {
    background-color: #050505; /* The dark "stealth" highlight for alternate rows */
    color: #ffffff;
}

/* --- Table Decorations --- */
.table-decor-cross-left { position: absolute; left: -100px; top: 10%; width: 100px; }
.table-decor-cross-right { position: absolute; right: -40px; top: 27%; width: 100px; }
.table-decor-squiggle-bottom { position: absolute; left: -100px; bottom: -100px; width: 206px; transform: rotate(180deg); }
.table-decor-cross-bottom { position: absolute; right: -20px; bottom: 70px; width: 100px; }

/* =======================================
   LIGHT MODE OVERRIDES FOR TABLES
   ======================================= */
body.light-mode .pricing-tables-section {
    background-color: #ffffff;
}

body.light-mode .category-heading {
    color: #0b0b0b;
}

body.light-mode .pricing-card {
    background-color: #fafafa;
    border-color: #eaeaea;
}

body.light-mode .pricing-row.header {
    color: #0b0b0b;
}

body.light-mode .pricing-row.highlight {
    background-color: #f1f1f1;
    color: #0b0b0b;
}

body.light-mode .pricing-row {
    color: #666666;
}

/* =======================================
   FAQ PAGE EXCLUSIVE STYLES
   ======================================= */
.faq-page-list-section {
    padding: 60px 0 100px 0;
    background-color: #0b0b0b;
}

.faq-accordion {
    max-width: 100%;
}

.faq-page-item {
    border-bottom: 1px solid #1a1a1a;
    padding: 30px 0;
}

.faq-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-page-q {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
}

.faq-page-body {
    padding-top: 20px;
    color: #797c86;
    font-size: 15px;
    line-height: 1.6;
    max-width: 85%;
}

/* Toggle Icon */
.faq-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-page-header[aria-expanded="true"] .faq-icon-circle {
    transform: rotate(180deg);
}

/* Decorations */

.contact-hero-squiggle{
    position: absolute;
    bottom: -70px;
    right: -110px;
    width: 206px; /* Your requested size */
    z-index: 10;

}

.faq-page-cross {
    position: absolute;
    left: -150px;
    top: 150px;
    width: 100px;
}

.faq-bottom-squiggle {
    position: absolute;
    bottom: -80px;
    right: -150px;
    width: 206px;
}

/* Light Mode Overrides */
body.light-mode .faq-page-list-section { background-color: #fff; }
body.light-mode .faq-page-item { border-color: #eaeaea; }
body.light-mode .faq-page-q { color: #0b0b0b; }
body.light-mode .faq-icon-circle { background-color: #f1f1f1; color: #0b0b0b; }

/* =======================================
   TERMS PAGE EXCLUSIVE STYLES
   ======================================= */

.terms-content-section {
    padding: 60px 0 120px 0;
    background-color: #0b0b0b;
}

.portfolio-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
	margin-bottom: 20px;
}

.btn-header-quote {
    background: #e5332a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-header-quote:hover {
    background: #fff;
    color: #000;
}

/* =======================================
   TERMS LIST & BOXES
   ======================================= */
.terms-list {
    margin-top: 40px;
    position: relative;
    z-index: 2; /* Keeps list above decorations */
}

.terms-box {
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 30px 40px;
    margin-bottom: 20px;
    background-color: transparent;
    transition: border-color 0.3s ease;
}

.terms-box:hover {
    border-color: #333333;
}

.terms-text {
    color: #afb0b6;
    font-size: 13px;
    line-height: 1.8;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

.terms-text strong {
    color: #ffffff;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

/* Optimized Red Star Icon Styling */
.pricing-star-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    display: block;
}

/* =======================================
   DECORATIONS PLACEMENT (Matches Screenshot)
   ======================================= */

/* 1. Squiggle touching bottom-right of the hero image */
.terms-hero-right-squiggle {
    position: absolute;
    bottom: -70px;
    right: -110px;
    width: 206px; /* Your requested size */
    height: auto;
    z-index: 10;

}

/* 2. Cross on the left near "INTRODUCTION" */
.terms-top-left-cross {
    position: absolute;
    left: -100px;
    top: 100px;
    width: 100px;
    z-index: 1;
}

/* 3. Cross on the right near "LIABILITY" */
.terms-mid-right-cross {
    position: absolute;
    right: -70px;
    top: 55%; /* Halfway down the section */
    width: 100px;
    z-index: 1;
    transform: rotate(15deg); /* Slight rotation to match image feel */
}

/* 4. Squiggle on bottom left near "CONTACT US" */
.terms-bottom-left-squiggle {
    position: absolute;
    left: -150px;
    bottom: -50px;
    width: 206px;
    z-index: 1;
}

/* Hide overflowing decorations cleanly */
.overflow-hidden {
    overflow-x: hidden;
}

/* =======================================
   LIGHT MODE OVERRIDES FOR TERMS
   ======================================= */
body.light-mode .terms-content-section {
    background-color: #ffffff;
}

body.light-mode .portfolio-title {
    color: #0b0b0b;
}

body.light-mode .btn-header-quote {
    color: #0b0b0b;
    border-color: #eaeaea;
}

body.light-mode .btn-header-quote:hover {
    background: #000;
    color: #fff;
}

body.light-mode .terms-box {
    border-color: #eaeaea;
    background-color: #fafafa;
}

body.light-mode .terms-box:hover {
    border-color: #cccccc;
}

body.light-mode .terms-text {
    color: #555555;
}

body.light-mode .terms-text strong {
    color: #0b0b0b;
}

/* --- Media Queries for smaller screens --- */
@media (max-width: 991px) {
    .terms-hero-right-squiggle,
    .terms-top-left-cross,
    .terms-mid-right-cross,
    .terms-bottom-left-squiggle {
        display: none; /* Hide floating decorations on mobile/tablet for clean reading */
    }
    
    .terms-box {
        padding: 20px;
    }
}

/* Global Light Mode Base */
body.light-mode {
    background-color: #ffffff;
    color: #000000;
}

/* =======================================
   WEDDING PAGE EXCLUSIVE STYLES
   ======================================= */

/* --- Hero Section --- */
.wedding-hero-section {
    padding: 20px 0 60px 0;
    background-color: #0b0b0b;
}

.wedding-hero-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
}

.wedding-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wedding-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wedding-hero-title {
    font-size: 60px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- Intro Section --- */
.wedding-intro-section {
    padding: 20px 0 60px 0;
    background-color: #0b0b0b;
}

.wedding-intro-text {
    color: #797c86;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}

.wedding-divider {
    border-top: 1px solid #1a1a1a;
    margin-top: 50px;
}

/* --- Features Grid --- */
.wedding-features-section {
    padding: 60px 0;
    background-color: #0b0b0b;
}

.wedding-feature-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 10px;
}

.wedding-feature-text {
    color: #797c86;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Ensures the booth cards stay matching the "Our Booths" logic */
.wedding-features-section .booth-arrow-icon {
    border-color: #0b0b0b; /* Match section background */
}

/* --- Pricing Section Tweaks --- */
.wedding-pricing-section {
    padding: 60px 0;
    background-color: #0b0b0b;
}

/* --- Inclusions Section --- */
.wedding-inclusions-section {
    padding: 60px 0 100px 0;
    background-color: #0b0b0b;
}

.inclusions-list .terms-box {
    margin-bottom: 15px;
    padding: 20px 25px;
}

/* =======================================
   DECORATIONS PLACEMENT
   ======================================= */
.wedding-decor-squiggle-1 {
    position: absolute;
    bottom: -70px;
    right: -110px;
    width: 206px; /* Your requested size */
    height: auto;
    z-index: 10;

}

.wedding-decor-cross-1 {
    position: absolute;
    left: -150px;
    top: -100px;
    width: 100px;
}

.wedding-decor-squiggle-2 {
    position: absolute;
    right: -150px;
    bottom: 30%;
    width: 206px;
}

.wedding-decor-cross-2 {
    position: absolute;
    right: -150px;
    top: 30%;
    width: 100px;
}

.wedding-decor-squiggle-3 {
    position: absolute;
    left: -100px;
    top: -20px;
    width: 206px;
}

.wedding-decor-squiggle-4 {
   position: absolute;
    bottom: -70px;
    right: -110px;
    width: 206px; /* Your requested size */
    height: auto;
    z-index: 10;

    
}

/* =======================================
   LIGHT MODE OVERRIDES FOR WEDDING PAGE
   ======================================= */
body.light-mode .wedding-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-features-section,
body.light-mode .wedding-pricing-section,
body.light-mode .wedding-inclusions-section {
    background-color: #ffffff;
}

body.light-mode .wedding-hero-title {
    color: #0b0b0b; /* Assuming overlay protects readability, or you can leave white */
}

body.light-mode .wedding-intro-text,
body.light-mode .wedding-feature-text {
    color: #555555;
}

body.light-mode .wedding-feature-title {
    color: #0b0b0b;
}

body.light-mode .wedding-divider {
    border-color: #eaeaea;
}

body.light-mode .wedding-features-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}

body.light-mode .inclusions-list .terms-box {
    border-color: #eaeaea;
    background-color: #fafafa;
}

/* =======================================
   CORPORATE PAGE EXCLUSIVE TWEAKS & STRICT DECORATIONS
   ======================================= */

/* Force Booth Card icons to match Corporate background */
.wedding-features-section .booth-arrow-icon {
    border-color: #0b0b0b;
}

/* ---------------------------------------
   STRICT DECORATION RULES (Corporate Page)
--------------------------------------- */
.corp-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* 1. All Crosses strictly 100px */
.corp-cross {
    width: 100px !important;
    height: auto !important;
}

/* 2. All Squiggles strictly 206px */
.corp-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* 3. Exact Placements */
.corp-hero-sq { bottom: -70px; right: -110px; }
.corp-feat-cr { left: -150px; top: 150px; }
.corp-feat-sq { right: -100px; bottom: 20%; }
.corp-pack-cr { right: -80px; bottom: 10%; }
.corp-inc-sq-top { left: -100px; top: -50px; }
.corp-inc-sq-bot { bottom: -80px; right: -150px; }


/* =======================================
   LIGHT MODE OVERRIDES (CORPORATE PAGE)
   ======================================= */
body.light-mode .contact-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-features-section,
body.light-mode .wedding-pricing-section,
body.light-mode .wedding-inclusions-section {
    background-color: #ffffff;
}

body.light-mode .wedding-features-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}

/* =======================================
   BIRTHDAY PAGE EXCLUSIVE STYLES
   ======================================= */

/* Force Booth Card icons to match background */
.wedding-features-section .booth-arrow-icon { border-color: #0b0b0b; }

/* Clip sections to prevent scrollbars from absolute decorations */
.bday-section-clip { overflow-x: clip; }

/* ---------------------------------------
   STRICT DECORATION RULES (Birthday Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.bday-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS */
}

/* 1. Crosses = 100px strictly */
.bday-cross {
    width: 100px !important;
    height: auto !important;
}

/* 2. Squiggles = 206px strictly */
.bday-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT PLACEMENTS MAPPED TO SCREENSHOT --- */

/* Hero */
.bday-hero-sq { bottom: -80px; right: -120px; }

/* Features (Here's why) */
.bday-feat-cr-tl { top: -20px; left: -100px; }
.bday-feat-sq-mr { top: 35%; right: -120px; }

/* Packages */
.bday-pack-cr-tr { top: 10%; right: -100px; }

/* Testimonials */
.bday-test-sq-tl { top: -40px; left: -120px; }
.bday-test-sq-tr { top: -10px; right: -120px; }
.bday-test-sq-br { bottom: -60px; right: -100px; }

/* Inclusions */
.bday-inc-sq-bl { bottom: -60px; left: -120px; }

/* Form */
.bday-form-cr-ml { top: 40%; left: -100px; }
.bday-form-sq-bl { bottom: -30px; left: -120px; }

/* FAQ */
.bday-faq-sq-tr { top: -60px; right: -120px; }
.bday-faq-cr-ml { top: 50%; left: -100px; }
.bday-faq-sq-br { bottom: -80px; right: -120px; }


/* =======================================
   LIGHT MODE OVERRIDES 
   ======================================= */
body.light-mode .contact-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-features-section,
body.light-mode .wedding-pricing-section,
body.light-mode .testimonials-section,
body.light-mode .wedding-inclusions-section,
body.light-mode .reserve-section,
body.light-mode .faq-section {
    background-color: #ffffff;
}

body.light-mode .wedding-features-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}

/* =======================================
   OPEN AIR BOOTH EXCLUSIVE STYLES
   ======================================= */

/* Prevent scrollbars from absolute decorations */
.oa-section-clip {
    overflow-x: clip;
}

/* Force Booth Card icons to match background */
.wedding-features-section .booth-arrow-icon {
    border-color: #0b0b0b;
}

/* ---------------------------------------
   STRICT DECORATION RULES (Open Air Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.oa-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* All Crosses = strictly 100px */
.oa-cross {
    width: 100px !important;
    height: auto !important;
}

/* All Squiggles = strictly 206px */
.oa-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT POSITIONS MAPPED TO SCREENSHOT --- */

/* Hero */
.oa-hero-sq { bottom: -80px; right: -120px; }

/* About / Intro Section */
.oa-about-cr { top: 100px; left: -100px; }

/* Features List */
.oa-feat-sq { bottom: -50px; left: -120px; }

/* How It Works */
.oa-hiw-cr { top: -30px; right: 5%; }

/* Packages */
.oa-pack-cr { top: 30%; left: -100px; }

/* Reserve Form */
.oa-form-cr { bottom: 20%; left: -100px; }
.oa-form-sq { bottom: -60px; right: -120px; }


/* =======================================
   LIGHT MODE OVERRIDES 
   ======================================= */
body.light-mode .contact-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-features-section,
body.light-mode .wedding-pricing-section,
body.light-mode .reserve-section {
    background-color: #ffffff;
}

body.light-mode .wedding-features-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}

/* =======================================
   OPEN AIR "ABOUT" SECTION SPECIFICS
   ======================================= */

/* Exact 39x40px sizing for Icon-2.png */
.about-booth-icon {
    width: 39px;
    height: 40px;
    object-fit: contain;
    display: block;
}

/* Manrope, 500 Weight, 30px, 100% LH, #CACACE */
.about-booth-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1;
    color: #cacace;
    letter-spacing: 0;
    margin: 0;
}

/* Light Mode Override */
body.light-mode .about-booth-title {
    color: #333333;
}

/* =======================================
   PACKAGES CAROUSEL SPECIFICS
   ======================================= */

.packages-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 600; 
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.packages-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #797c86;
    margin: 0;
}

/* Grey Underlined Links */
.packages-text a {
    color: #797c86;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.packages-text a:hover {
    color: #ffffff;
}

/* Image Wrapper */
.packages-carousel-wrapper {
    border-radius: 16px;
    overflow: hidden; /* Clips the image perfectly */
}

.package-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* ---------------------------------------
   PILL-SHAPED CONTROLS (Bottom Center)
--------------------------------------- */
.packages-controls {
    position: absolute;
    bottom: 0px; /* Adjust up/down to center inside the curve of your packages.png */
    left: 50%;
    transform: translateX(-50%);
    
    /* The Outer Pill Border */
    display: inline-flex;
    align-items: center;
    background-color: transparent; 
    border: 1px solid #2a2a2a; 
    border-radius: 50px;
    padding: 6px; 
    z-index: 10;
}

/* The Inner Circular Buttons */
.pkg-arrow {
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
}

.pkg-arrow:hover {
    background-color: #333333;
}

/* Spacing between the two buttons */
.pkg-arrow.pkg-prev {
    margin-right: 6px;
}

/* --- Light Mode Support --- */
body.light-mode .packages-title { color: #0b0b0b; }
body.light-mode .packages-text a:hover { color: #0b0b0b; }
body.light-mode .packages-controls { border-color: #cccccc; }
body.light-mode .pkg-arrow { background-color: #f1f1f1; color: #0b0b0b; }
body.light-mode .pkg-arrow:hover { background-color: #e2e2e2; }

/* Image Wrapper */
.packages-carousel-wrapper {
    border-radius: 16px;
    overflow: hidden; 
    width: 100%;
}

.package-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* =======================================
   MIRROR BOOTH EXCLUSIVE STYLES
   ======================================= */

/* Container Clipping for Decorations */
.mirror-section-clip {
    overflow-x: clip;
}

/* ---------------------------------------
   STRICT DECORATION RULES (Mirror Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.mirror-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* All Crosses = strictly 100px */
.mirror-cross {
    width: 100px !important;
    height: auto !important;
}

/* All Squiggles = strictly 206px */
.mirror-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT POSITIONS MAPPED TO SCREENSHOT --- */

/* Hero */
.mirror-hero-sq { bottom: -80px; right: -120px; }

/* Benefits Section */
.mirror-ben-cr { top: -20px; right: 0px; }
.mirror-ben-sq { bottom: -40px; left: -100px; }

/* Description Section (Hire Melbourne) */
.mirror-desc-cr { top: 0px; right: 10%; }

/* Form Section */
.mirror-form-sq { bottom: 0px; right: -120px; }


/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .mirror-intro-section,
body.light-mode .mirror-benefits-section,
body.light-mode .mirror-desc-section {
    background-color: #ffffff;
}

body.light-mode .about-booth-title {
    color: #333333;
}

/* =======================================
   360 VIDEO BOOTH EXCLUSIVE STYLES
   ======================================= */

/* Ensure background is consistently dark */
body { background-color: #0b0b0b; }

/* About section Icon-2 spec enforcement */
.about-booth-icon {
    width: 39px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.about-booth-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1;
    color: #cacace;
    letter-spacing: 0;
    margin: 0;
}

/* Container Clipping for Decorations */
.v360-section-clip {
    overflow-x: clip;
}

/* ---------------------------------------
   STRICT DECORATION RULES (360 Booth Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.v360-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* All Crosses = strictly 100px */
.v360-cross {
    width: 100px !important;
    height: auto !important;
}

/* All Squiggles = strictly 206px */
.v360-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT POSITIONS MAPPED TO SCREENSHOT --- */

/* Hero Squiggle */
.v360-hero-sq { bottom: -80px; right: -120px; }

/* Inclusions Squiggle */
.v360-inc-sq { bottom: -50px; left: -100px; }

/* Hire Section Cross */
.v360-hire-cr { top: -30px; right: 10%; }

/* Form Squiggle */
.v360-form-sq { bottom: 0px; right: -120px; }


/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .contact-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-features-section,
body.light-mode .reserve-section {
    background-color: #ffffff;
}

body.light-mode .about-booth-title {
    color: #333333;
}

/* =======================================
   PHOTOGRAPHY EXCLUSIVE STYLES
   ======================================= */

body { background-color: #0b0b0b; }

/* Container Clipping for Decorations */
.photo-section-clip {
    overflow-x: clip;
}

/* Ensure the pill container matches dark mode visually */
.packages-controls {
    background-color: #0b0b0b;
}

/* ---------------------------------------
   STRICT DECORATION RULES (Photography Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.photo-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* All Crosses = strictly 100px */
.photo-cross {
    width: 100px !important;
    height: auto !important;
}

/* All Squiggles = strictly 206px */
.photo-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT POSITIONS MAPPED TO SCREENSHOT --- */

/* Hero Squiggle */
.photo-hero-sq { bottom: -60px; right: -120px; }

/* Social Packages (Top) */
.photo-pack1-cr { top: -20px; left: -100px; }
.photo-pack1-sq { top: 0px; right: -100px; }
.photo-pack1-sq-bl { bottom: -60px; left: -100px; }

/* Wedding Packages (Middle) */
.photo-pack2-sq { bottom: -30px; right: -100px; }
.photo-pack2-cr { left: -100px; top: 20%; }

/* Form (Bottom) */
.photo-form-cr { bottom: -20px; left: -100px; }


/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .contact-hero-section,
body.light-mode .wedding-intro-section,
body.light-mode .wedding-pricing-section,
body.light-mode .reserve-section {
    background-color: #ffffff;
}

body.light-mode .pricing-card {
    background-color: #fafafa;
    border-color: #eaeaea;
}

body.light-mode .packages-controls {
    background-color: #ffffff;
}

body.light-mode .about-booth-title {
    color: #0b0b0b;
}

/* =======================================
   PHOTOGRAPHY INTRO SECTION
   ======================================= */
.photo-intro-section {
    padding: 60px 0;
    background-color: #0b0b0b;
}

/* --- Left Card Styling --- */
.photo-intro-card {
    background-color: #0f0f0f;
    border: 1px solid #1a1a1a;
    border-radius: 20px;
    padding: 50px 40px;
}

.photo-card-star {
    width: 39px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 25px;
    display: block;
}

.photo-card-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 26px; /* Scaled to match card size */
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
}

.photo-card-text {
    color: #797c86;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* --- Right Image with Circular Cutouts --- */
.photo-intro-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden; /* Important to clip the circles */
    min-height: 450px;
}

.photo-intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top Left Cutout Circle */
.photo-intro-img-wrapper::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 150px;
    height: 150px;
    background-color: #0b0b0b; /* Matches section BG */
    border-radius: 50%;
    z-index: 2;
}

/* Bottom Right Cutout Circle */
.photo-intro-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -30px;
    width: 180px;
    height: 180px;
    background-color: #0b0b0b; /* Matches section BG */
    border-radius: 50%;
    z-index: 2;
}

/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .photo-intro-section {
    background-color: #ffffff;
}

body.light-mode .photo-intro-card {
    background-color: #fafafa;
    border-color: #eaeaea;
}

body.light-mode .photo-card-title {
    color: #0b0b0b;
}

body.light-mode .photo-intro-img-wrapper::before,
body.light-mode .photo-intro-img-wrapper::after {
    background-color: #ffffff;
}

/* =======================================
   BLOG PAGE EXCLUSIVE STYLES
   ======================================= */

.blog-grid-section {
    padding: 60px 0 100px 0;
    background-color: #0b0b0b;
}

/* Card Heading Styling */
.blog-post-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.blog-post-date {
    color: #797c86;
    font-size: 13px;
    margin-bottom: 15px;
}

.blog-read-link {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}

.blog-read-link svg {
    margin-left: 8px;
    transition: transform 0.3s;
}

.blog-read-link:hover {
    color: #cccccc;
}

.blog-read-link:hover svg {
    transform: translate(2px, -2px);
}

/* Ensure circular cutout arrow matches background */
.blog-grid-section .booth-arrow-icon {
    border-color: #0b0b0b;
}

/* Clipping container for decorations */
.blog-section-clip {
    overflow-x: clip;
}

/* ---------------------------------------
   STRICT DECORATION RULES (Blog Page)
   100px Crosses / 206px Squiggles / NO Rotations
--------------------------------------- */
.blog-decor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    transform: none !important; /* NO ROTATIONS ALLOWED */
}

/* All Crosses strictly 100px */
.blog-cross {
    width: 100px !important;
    height: auto !important;
}

/* All Squiggles strictly 206px */
.blog-squiggle {
    width: 206px !important;
    height: auto !important;
}

/* --- EXACT PLACEMENTS MAPPED TO SCREENSHOT --- */

/* Hero Squiggle */
.blog-hero-sq { bottom: -80px; right: -120px; }

/* Mid Grid Cross */
.blog-feat-cr { top: 50%; left: -100px; }

/* Bot Grid Squiggle */
.blog-feat-sq { bottom: 15%; right: -120px; }


/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .blog-grid-section {
    background-color: #ffffff;
}

body.light-mode .blog-post-title {
    color: #0b0b0b;
}

body.light-mode .blog-read-link {
    color: #0b0b0b;
}

body.light-mode .blog-grid-section .booth-arrow-icon {
    border-color: #ffffff;
    background-color: #f1f1f1;
    color: #0b0b0b;
}
input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    border-radius: 0 !important;
    width: 100%;
    padding: 10px 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}
textarea{
	height: 100px;
}
input.wpcf7-form-control.wpcf7-submit {
    background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;
    border-radius: 50px !important;
    padding: 8px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: auto;
    padding: 15px 50px;
}
.booth-arrow-icon a {
    color: #fff;
}
a {
    color: inherit;
}
.contact-ser-inner {
    justify-content: end;
}
.light-mode #mega-menu-wrap-Primary-Menu #mega-menu-Primary-Menu > li.mega-menu-item > a.mega-menu-link {
    color: #000 !important;
}
.slick-slider {
    visibility: hidden;
}
.slick-slider.slick-initialized {
    visibility: visible;
}
.ticker-slider, .portfolio-carousel, .clients-slider, .insta-ticker  {
    opacity: 0;
}
.ticker-slider.slick-initialized, .portfolio-carousel.slick-initialized, .clients-slider.slick-initialized, .insta-ticker.slick-initialized {
    opacity: 1;
}
.blog-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
	margin-top: 25px;
	background: linear-gradient(45deg, #ff416c, #ff4b2b); /* your gradient */
    -webkit-background-clip: text; /* clips background to text */
    -webkit-text-fill-color: transparent; /* makes text show background */
    background-clip: text; /* standard property for other browsers */
    color: transparent; /* fallback */
}
.blog-content h3{
	font-size: 20px;
    margin-bottom: 15px;
	margin-top: 25px;
}
.blog-content h4{
	font-size: 17px;
    margin-bottom: 15px;
	margin-top: 25px;
}
.data ul {
    padding-left: 0px;
	color: #ff416c;
	list-style: none;
}
.single .contact-hero-title {
    font-size: 32px;
}
.portfolio-label a:hover{
	color: #fff;
	text-decoration: none;
}
select option {
    color: #000;
}
select, input.wpcf7-form-control.wpcf7-date.wpcf7-validates-as-required.wpcf7-validates-as-date{
    color: #878686;
    text-transform: uppercase;
}
.hidden-feature {
    display: none; 
}
a.whatsapp-btn {
    position: fixed;
    right: 17px;
    bottom: 90px;
}
a.whatsapp-btn img{
	width: 50px;
}
.checkcherry_widget_contact-form{
    width:100%;
    display:block;
}
button.btn.btn-primary.btn-lg {
    background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;
    border-radius: 50px !important;
    //padding: 8px 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: auto;
    padding: 12px 35px;
	font-size: 17px;
    font-weight: 500;
}
.checkcherry__widget .form-label {
    margin-bottom: 0.5rem;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
}
rs-layer:not(.rs-wtbindex), .rs-layer:not(.rs-wtbindex), rs-alyer *:not(.rs-wtbindex), .rs-layer *:not(.rs-wtbindex) {
    font-family: 'Cotta' !important;
}
.light-mode #mega-menu-wrap-Primary-Menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, 
.light-mode #mega-menu-wrap-Primary-Menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, 
.light-mode #mega-menu-wrap-Primary-Menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after{
    background-color: #000000 !important;
}
.portfolio-title {
    line-height: 1.3;
}
.ins-banner a:hover{
	color: transparent;
}
.checkcherry__widget .form-select {
    color: #ffffff;
}
.checkcherry__widget .form-select {
    color: #ffffff !important;
}
/* =======================================
   PRICING CARDS SECTION STYLES
   ======================================= */
.pricing-cards-section {
    padding: 80px 0;
    background-color: #0b0b0b;
    font-family: 'Manrope', sans-serif;
}

/* Section Title */
.pricing-cards-main-title {
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.title-underline {
    width: 70px;
    height: 4px;
    background-color: #ff4b2b; /* Red/Pink accent color */
    margin: 0 auto;
    border-radius: 2px;
}

/* Base Card Styling (Unselected state) */
.pricing-tier-card {
    background-color: #121212; 
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, background-color 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer; /* Indicates the card is clickable */
	position: relative;
}
.p-tag {
    background: #ff4b2b;
    width: fit-content;
    padding: 10px 30px;
    border-radius: 5px;
    position: absolute;
    top: -25px;
    left: 35%;
}
.pricing-tier-card:hover {
    transform: translateY(-5px);
}

/* Highlighted Card Styling (Selected state) */
.pricing-tier-card.highlighted {
    background-color: #151112; /* Subtle red tint on the dark background */
    border: 1px solid rgba(255, 75, 43, 0.4);
    box-shadow: 0 0 30px rgba(255, 75, 43, 0.08); /* Faint red outer glow */
}

/* Typography inside the card */
.tier-name {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.tier-price {
    color: #ff4b2b;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
    text-shadow: 0 0 15px rgba(255, 75, 43, 0.5); /* Red glowing text effect */
}

/* Feature List */
.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: left;
    flex-grow: 1; /* Pushes the button to the bottom */
    display: flex;
    flex-direction: column;
    align-items: left; 
}

.tier-features li {
    color: #a0a0a0;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 18px;
    position: relative;
    padding-left: 18px;
    width: 100%; 
}

/* Custom Red Bullet Points */
.tier-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background-color: #ff4b2b;
    border-radius: 50%;
}

/* Base Button Style (Unselected state) */
.tier-btn {
    display: block;
    width: 100%;
    padding: 16px 0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 1px;
    background-color: #1e1e1e; /* Dark grey */
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}
.tier-btn.activeo{
	background-color: #ff4b2b;
}
.tier-btn:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

/* Highlighted Button Style (Selected state) */
.pricing-tier-card.highlighted .tier-btn {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(255, 75, 43, 0.3);
}

.pricing-tier-card.highlighted .tier-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 75, 43, 0.5);
}


/* =======================================
   LIGHT MODE OVERRIDES
   ======================================= */
body.light-mode .pricing-cards-section { 
    background-color: #ffffff; 
}

body.light-mode .pricing-cards-main-title { 
    color: #0b0b0b; 
}

body.light-mode .pricing-tier-card { 
    background-color: #f9f9f9; 
    border: 1px solid #eaeaea; 
}

body.light-mode .pricing-tier-card.highlighted { 
    background-color: #fff5f6; /* Very light pink tint */
    border: 1px solid rgba(255, 75, 43, 0.4); 
}

body.light-mode .tier-name { 
    color: #757474; 
}

body.light-mode .tier-features li { 
    color: #555555; 
}

body.light-mode .tier-btn { 
    background-color: #e0e0e0; 
    color: #0b0b0b; 
}

body.light-mode .tier-btn:hover { 
    background-color: #cccccc; 
    color: #0b0b0b; 
}

body.light-mode .pricing-tier-card.highlighted .tier-btn { 
    color: #ffffff; 
}
.footer-right {
    z-index: 99;
}
.xt{
	margin-bottom: 30px;
}
.get-q, .xtd, .portfolio-section .btn{
	display: none !important;
}
.margn{
	margin-bottom: 90px !important;
}
a.rs-layer, a.rs-layer:-webkit-any-link {
    padding-top: 3px !important;
}
.light-mode .footer-links a, .light-mode .main-footer .menu li a {
    color: #000;
}
.checkcherry__widget .form-control, input.form-control, .checkcherry__widget .form-select {
    background: #ffffff !important;
}
@media (min-width: 992px) and (max-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 100%;
    }
}
@media(max-width:1366px){
	.btn-header-quote, .squiggle-icon, .included-squiggle-icon, .faq-squiggle-icon, .portfolio-arrows, .contact-hero-squiggle{
		display: none !important;
	}
	.page-id-196 .btn-header-quote{
		display: block !important;
	}
	.p-tag {
		left: 27%;
	}
	.tier-features li {
        width: 100% !important;
    }
}
@media(max-width:1200px){
	.explore-section, .explore-section, .terms-content-section, .reserve-section {
		padding: 20px 0 20px 0;
	}
	.p-tag {
		left: 27%;
	}
	.faq-squiggle-icon {
		right: 0;
	}
	.testimonials-section {
		padding: 0px 0;
	}
	.p-tag {
		left: 25%;
	}
	.test-socials ul li {
		padding: 2px 10px;
	}
}
@media(max-width: 1024px){
	.client-logo-item img {
		max-height: max-content;
		width: 50%;
	}
	.btn-contact{
		display: none;
	}
	.booths-title {
        white-space: unset;
        line-height: 1.3;
    }
	.header-menu-row-inner{
		justify-content: space-between;
	}
	.contact-ser-inner {
		float: right;
	}
	.order1{
		order:1;
	}
	.order2{
		order:3;
	}
	.order3{
		order:2;
	}
	.booth-content br{
		display: none;
	}
}
@media(max-width: 800px){
	.testimonials-title, .packages-title , .why-title, .booths-title, .about-title{
		font-size: 24px;
	}
	.about-section, .portfolio-section, .booths-section, .why-choose-section, .packages-section, .pricing-section, .included-section, .testimonials-section, .faq-section, .clients-section{
		padding: 20px 0;
	}
	.client-logo-item img {
		width: 50%;
	}
	.footer-cta-btn {
		padding: 10px 27px;
		border-radius: 50px;
	}
	.footer-cta-title {
		line-height: 1.8;
		font-size: 22px;
	}
	.contact-hero-title {
		font-size: 32px;
	}
	.contact-hero-wrapper {
		height: 400px;
	}
	.explore-section, .explore-section, .terms-content-section, .reserve-section {
		padding: 20px 0 20px 0;
	}
	.branding-content {
		min-height: auto;
	}
	.reserve-section img{
		display: none;
	}
	.tier-features li {
		width: 100%;
	}
	.pricing-cards-section{
		padding: 20px 0;
	}
}
@media(max-width:768px){
	.header-menu-row-inner{
		justify-content: space-between;
	}
	.contact-ser-inner {
		float: right;
	}
	.about-card {
		padding: 0;
	}
	.booth-card br{
		display: none;
	}
	.testimonials-title, .packages-title, .why-title, .booths-title, .about-title {
        line-height: 1.3;
    }
	.pricing-cards-main-title {
		font-size: 24px;
	}
	.pricing-tier-card {
		padding: 30px 20px;
	}
	.p-tag {
		left: 25%;
	}
	.pricing-cards-section{
		padding: 20px 0;
	}
	.included-feature-item span {
		margin-bottom: 0px;
	}
	.included-feature-item {
    	width: 100%;
		margin-bottom: 15px;
	}
	.light-mode #mega-menu-wrap-Primary-Menu #mega-menu-Primary-Menu > li.mega-menu-item > a.mega-menu-link {
		color: #fff !important;
	}
	.pricing-card {
		padding: 0px;
	}
	.pricing-row {
		padding: 11px 5px;
	}
	.pricing-tables-section {
		padding: 0px 0;
	}
	.footer-bottom-text {
		text-align: center;
	}
	.explore-section, .explore-section, .terms-content-section, .reserve-section {
        padding: 20px 16px 20px 6px;
    }
}