/*==============================================================================
[Master Stylesheet]

Project:        Mowix — Arcade & Entertainment Venue Theme
Version:        2.0 (Neon Arcade Restyle)
Description:    A dark, neon-lit restyle of the original template for arcades, laser tag arenas,
                game lounges, and modern entertainment venues. The page now sits on a deep
                near-black canvas with layered violet/gold/cyan glow blooms and a faint arcade-
                floor grid, and every surface, card, and button carries an intentional neon accent
                so the site reads like a night out at a modern entertainment venue rather than a
                daytime brochure.
==============================================================================

TABLE OF CONTENTS

------------------------------------------------------------------------------
 
 1.0  Import Vendor
 2.0  Global Variable
      2.1  Color Variable
      2.2  Font Family Variable
      2.3  Animation Duration Preset
      2.4  Animation Delay Preset
 3.0  Animation Preset            (keyframes & utility classes)
 4.0  Base Style
 5.0  Section Style
 6.0  Hero Container Style
 7.0  Header Style
 8.0  Navbar Popup Style
 9.0  Footer Style
10.0  Button Style
11.0  Card Style
12.0  Color Style
13.0  Form Style
14.0  Image Style
15.0  Heading Style
16.0  Banner Style
17.0  Banner Home Style
18.0  Banner Inner Style
19.0  Company Stat Style
20.0  Service Style
      20.1  Service Wrapper
      20.2  Service Slider
      20.3  Service Grid
      20.4  Service Detail
21.0  About Style
22.0  Video Intro Style
23.0  Why Choose Us Style
24.0  Project Style
25.0  Testimonial Style
26.0  Our Process Style
27.0  Team Style
28.0  Pricing Style
      28.1  Pricing General
      28.2  Pricing Preview
      28.3  Pricing List Style
29.0  FAQ Style
      29.1  FAQ General
      29.2  FAQ Preview
      29.3  FAQ List
30.0  Service CTA Style
31.0  Pricing CTA Style
32.0  Contact CTA Style
33.0  Blog Style
      33.1  Blog
      33.2  Single Post
34.0  Contact Style
      34.1  Contact Form Style
      34.2  Contact Info Style
35.0  Notfound Style
36.0  Maps Style
37.0  Animation Preset            (utility class declarations)
38.0  Spacing Preset
      38.1  Flex Gap
      38.2  Grid Gap (row-gap & column-gap)
 
==============================================================================
COLOR GLOSSARY — Neon Arcade Palette
==============================================================================
 
  --primary            #F4F1FF         Marquee white — headings, light text on dark surfaces
  --secondary          #0A0B18         Void black — page canvas, dark cutout notches/corners
  --text-color         #A6ABD1         Periwinkle haze — body paragraph text on dark
  --accent-color       #FFC94A         Arcade gold — buttons, tokens, tags, icon fills
  --accent-color-2     #7C2CE0         Neon violet — nav hover, dropdowns, CTA/footer bg
  --accent-color-3     #14162C         Raised panel — card & section surfaces (dark, elevated)
  --accent-color-4     #2B2F55         Soft indigo — dividers, borders, card outlines
  --accent-color-5     #4B2E8F         Deep violet — footer copyright border
  --accent-color-6     #7C2CE000       Fully transparent violet — gradient tail
  --accent-color-7     #767CA3         Muted periwinkle — placeholder text, pagination
  --accent-color-8     #34F5C5         Arcade cyan — divider accent, cool highlight
  --accent-color-9     #000000         Pure black — overlay tint on hero/photo backgrounds
  --accent-color-10    #FF3D81         Hot pink neon — reserved accent for ratings/tags
  --glow-gold          rgba(255,201,74,.35)   Gold glow — button/card halo
  --glow-violet        rgba(124,44,224,.45)   Violet glow — button/card halo
  --glow-cyan          rgba(52,245,197,.25)   Cyan glow — ambient background bloom
==============================================================================
TYPOGRAPHY SYSTEM
==============================================================================
 
  Font Family:
    --font-family-global   "Montserrat", sans-serif   — all text (single global family)
 
  Heading Scale (h1–h6 & utility class aliases):
    h1 / .heading-xl     5.5rem / weight 600 / line-height 1.2em
    h2 / .heading-lg     3.0rem / weight 600 / line-height 1.2em
    h3 / .heading-md     2.0rem / weight 600 / line-height 1.3em
    h4 / .heading-sm     1.5rem / weight 600 / line-height 1.3em
    h5 / .heading-xs     1.2rem / weight 600 / line-height 1.3em
    h6 / .heading-xxs    1.0rem / weight 600 / line-height 1.8em
    All h1–h6 color: var(--primary)
 
  Body & UI Scale:
    body / p              1.0rem  / weight 500 / line-height 1.8em — default body & paragraphs
    button / a / .btn /
      .nav-link           0.9rem  / weight 600 / line-height 1.0em — interactive elements
    .sub-heading          0.8rem  / weight 600 / line-height 1.5em — section label / eyebrow
    .blog-meta            0.8rem  / weight 600 / line-height 1.5em — post meta info
    .breadcrumb a         1.2rem  / weight 600 / line-height 1.3em — breadcrumb links
    form label            0.8rem  / weight 600 / line-height 1.5em
    form input/textarea   0.8rem  / weight 400 / line-height 1.5em
    .footer-list li       1.0rem  / weight 600 / line-height 1.8em
    .notfound__heading   13.0rem  / weight 700 / line-height 1.0em — 404 large numeral
 
  Key Component Sizes:
    .banner-home__card-rating          5.5rem / weight 600 — hero rating number
    .card-company-stat__stat-number    3.0rem / weight 600 — stat counter
    .company-stat__excerpt             1.9rem / weight 500 / line-height 1.6em
    .card-testimonial__quote           1.4rem / weight 500 / italic / line-height 1.8em
    .aboutAccordion .accordion-button  1.2rem / weight 600 / line-height 1.3em
    .faq-accordion .accordion-button   1.2rem / weight 600 / line-height 1.3em
 
==============================================================================
ANIMATION SYSTEM
==============================================================================
 
  Duration Variables (defined in :root — section 2.3):
    --anim-duration-fast    0.8s
    --anim-duration-normal  1.1s
    --anim-duration-slow    1.6s
 
  Delay Variables (defined in :root — section 2.4):
    --anim-delay-none   0s
    --anim-delay-sm     0.25s
    --anim-delay-md     0.45s
 
  Keyframes Defined (section 3.0):
    ripple      scale3d(1,1,1) + opacity 1  →  scale3d(1.7,1.7,1.8) + opacity 0 + border-width 13px
    fade-in     opacity 0 → 1
    fade-up     opacity 0 + translateY(80px)   → opacity 1 + translateY(0)
    fade-down   opacity 0 + translateY(-80px)  → opacity 1 + translateY(0)
    fade-left   opacity 0 + translateX(-120px) → opacity 1 + translateX(0)
    fade-right  opacity 0 + translateX(120px)  → opacity 1 + translateX(0)
 
  Utility Classes (section 37.0):
    .animation-box      base: opacity 0, fill-mode forwards, timing cubic-bezier(0.25,0.8,0.25,1), will-change: opacity transform
    .anim-fast          sets --anim-duration to var(--anim-duration-fast)
    .anim-normal        sets --anim-duration to var(--anim-duration-normal)
    .anim-slow          sets --anim-duration to var(--anim-duration-slow)
    .anim-delay-none    sets --anim-delay   to var(--anim-delay-none)
    .anim-delay-sm      sets --anim-delay   to var(--anim-delay-sm)
    .anim-delay-md      sets --anim-delay   to var(--anim-delay-md)
 
  Accessibility:
    @media (prefers-reduced-motion: reduce)
      .animation-box — animation: none, opacity: 1, transform: none
 
==============================================================================*/

/* ======================= 
    1.0 Import Vendor
==========================*/

@import url('../css/fonts.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.min.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper-bundle.min.css');

/* ======================= 
    2.0 Global Variable
==========================*/

:root{
    /* 2.1 Color Variable — Arcade / Entertainment Palette */
--primary: #F4F1FF;          /* marquee white — headings, light text */
--secondary: #0A0B18;        /* void black — page canvas, cutouts, dark cards */
--text-color: #A6ABD1;       /* periwinkle haze — body copy on dark */
--accent-color: #FFC94A;     /* arcade gold — tokens, tickets, buttons, icons */
--accent-color-2: #7C2CE0;   /* neon violet — nav hover, CTA bg, footer, glow */
--accent-color-3: #14162C;   /* raised panel — card & section surfaces */
--accent-color-4: #2B2F55;   /* soft indigo line — dividers, borders */
--accent-color-5: #4B2E8F;   /* deep violet — footer copyright border */
--accent-color-6: #7C2CE000; /* transparent violet — gradient tail */
--accent-color-7: #767CA3;   /* muted periwinkle — placeholder, pagination */
--accent-color-8: #34F5C5;   /* arcade cyan — divider accent, cool highlight */
--grid-line: rgba(52, 245, 197, 0.05); /* faint arcade-floor grid */
--accent-color-9: #000000;   /* pure black — overlay tint */
--accent-color-10: #FF3D81;  /* hot pink neon — ratings, tags, extra pop */
--glow-gold: rgba(255, 201, 74, 0.35);
--glow-violet: rgba(124, 44, 224, 0.45);
--glow-cyan: rgba(52, 245, 197, 0.25);


    /* 2.2 Font Family Variable */
    --font-family-global: "Montserrat", sans-serif;

    /* 2.3 Animation Duration Preset */
    --anim-duration-fast: 0.8s;
    --anim-duration-normal: 1.1s;
    --anim-duration-slow: 1.6s;

    /* 2.4 Animation Delay Preset */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.45s;
}

/* ======================= 
    3.0 Animation Preset
==========================*/


@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animation-box { 
        animation: none !important;
        opacity: 1 !important; 
        transform: none !important; 
    }
}

@keyframes fade-in   { 
    from {opacity:0;} to {opacity:1;} 
}

@keyframes fade-up   { 
    from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-down { 
    from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-left { 
    from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} 
}

@keyframes fade-right{ 
    from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} 
}

/* ======================= 
    4.0 Base Style
==========================*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--font-family-global);
    background-color: var(--secondary);
    background-image:
        radial-gradient(60% 45% at 12% 0%, var(--glow-violet) 0%, transparent 60%),
        radial-gradient(50% 40% at 100% 15%, var(--glow-gold) 0%, transparent 65%),
        radial-gradient(45% 35% at 50% 100%, var(--glow-cyan) 0%, transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, auto, 64px 64px, 64px 64px;
    background-position: 0 0, 0 0, 0 0, -1px -1px, -1px -1px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.8em;
    position: relative;
}

@media (max-width: 768px){
    body{
        background-size: auto, auto, auto, 40px 40px, 40px 40px;
    }
}

h1,
.heading-xl {
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2em;
}

h2,
.heading-lg {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2em;
}

h3,
.heading-md {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3em;
}

h4,
.heading-sm {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3em;
}

h5,
.heading-xs {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
}

h6,
.heading-xxs {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
}

h1, h2, h3, h4, h5, h6{
    color: var(--primary);
    margin: 0;
}

p{
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8em;
    color: var(--text-color);
    margin-bottom: 20px;
}

button, a, .btn, .nav-link{
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ======================= 
    5.0 Section Style
==========================*/

.section{
    padding: 120px 20px;
}

.section-wrapper{
    padding: 0px 20px;
}

.banner-home-section{
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 20px 20px 0px 20px;
    background-color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* ======================= 
    6.0 Hero Container Style
==========================*/

.hero-container{
    max-width: 1340px;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.hero-container.container-large{
    max-width: 1440px;
}

.hero-container.container-extra-large{
    max-width: 1460px;
}

/* ======================= 
    7.0 Header Style
==========================*/

.header-container{
    background-color: transparent;
    padding: 20px 20px 0px;
    margin-bottom: -138px;
    position: relative;
    z-index: 3;
}

.navbar-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}

.navbar{
    padding: 0;
}

.navbar-brand-container{
    display: flex;
    flex-direction: row;
    gap: 0px;
    flex-wrap: wrap;
    width: 260px;
}

.navbar-logo-container{
    width: 203px;
    background-color: var(--secondary);
    padding: 0px 20px 17px 0px;
    border-radius: 0px 0px 30px 0px;
}

.navbar-logo-corner-box{
    display: flex;
    flex-direction: column;
    width: 50px;
    height: 50px;
    border-radius: 30px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.nav-link-container{
    width: 885px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.navbar-link-corner-box{
    display: flex;
    flex-direction: column;
    width: 50px;
    height: 50px;
    border-radius: 0px 30px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--secondary);
}

.navbar-action-container{
    background-color: var(--secondary);
    color: var(--primary);
    width: 830px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    border-radius: 0px 0px 0px 30px;
    padding: 0px 0px 20px 20px;
}

.nav-link{
    padding: 13px 15px !important;
    color: var(--primary);
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active{
    color: var(--accent-color-2);
}

.dropdown-menu{
    padding: 15px 15px;
    box-shadow: 0 20px 45px -15px var(--glow-violet);
    background-color: var(--accent-color-2);
    color: var(--primary);
    border-radius: 20px;
    min-width: 220px;
}

.dropdown-item{
    padding: 15px 15px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    transition: all 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.active{
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.dropdown-toggle::after {
    display: none !important;
}

.nav-btn{
    display: none;
    padding: 6px 6px;
    border-radius: 10px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    box-shadow: none;
    outline: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1.2em;
}

.navbar-cta-container{
    width: 200px;
    display: flex;
    justify-content: flex-end;
}

/* ======================= 
    8.0 Navbar Popup Style
==========================*/

.navbar-action-container {
    position: relative;
}

.navbar-popup {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: var(--accent-color-2);
    border-radius: 16px;
    padding: 20px;
    opacity: 0;
    margin-top: 36px;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
}

.navbar-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-popup-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar-popup-menu li {
    margin-bottom: 10px;
}

.navbar-popup-menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    transition: 0.3s;
}

.navbar-popup-menu a:hover {
    color: var(--accent-color);
}

.has-dropdown > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.submenu {
    list-style: none;
    padding-left: 15px;
    margin-top: 5px;
    display: none;
}

.has-dropdown.active .submenu {
    display: block;
}

/* ======================= 
    9.0 Footer Style
==========================*/

.footer-container{
    display: flex;
    flex-direction: column;
    padding: 0px 20px 20px;
}

.footer-bg{
    background:
       
        var(--glow-gold);
    color: var(--primary);
    border-radius: 30px;
    padding: 120px 20px 0px;
    position: relative;
    overflow: hidden;
}

.footer-wrapper{
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.footer__intro-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
}

.footer-intro{
    width: 26%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-link{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-link.footer-service{
    width: 18%;
}

.footer-link.footer-company{
    width: 11%;
}

.footer-link.footer-cta{
    width: 19%;
}

.footer-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
    position: relative;
}

.footer-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
    color: var(--primary);
    margin-bottom: 10px;
}

.footer-list a{
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.footer-list li:hover{
    color: var(--accent-color-4);
}

.footer-list li::before{
    content: "\f138";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 0.5em;
    font-size: 1rem;
    display: inline-block;
}

.footer-list.zero-icon li{
    color: var(--accent-color);
}

.footer-list.zero-icon li::before{
    content: "";
    margin: 0px;
}

.footer-social-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 0.7em;
    font-size: 1rem;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color);
    transition: all 0.3s ease;
}

.footer-social-icon:hover{
    background-color: var(--accent-color-2);
    color: var(--primary)
}

.footer-copyright__container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0px;
    border-top: 1px solid var(--accent-color-5);
}

.footer-legallink__container{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.copyright-text{
    color: var(--primary);
    margin: 0px;
}

.footer-legalink-text{
    color: var(--primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8em;
}

/* ======================= 
    10.0 Button Style
==========================*/

.btn{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    padding: 17px 17px;
    border-radius: 100px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-accent{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    fill: var(--accent-color-2);
    box-shadow: 0 0 0 0 var(--glow-gold);
}

.btn-accent:hover{
    background-color: var(--accent-color-2);
    color: var(--primary);
    fill: var(--primary);
    box-shadow: 0 0 28px 4px var(--glow-violet);
}

.btn-accent-2{
    background-color: var(--accent-color-2);
    color: var(--primary);
    box-shadow: 0 0 0 0 var(--glow-violet);
}

.btn-accent-2:hover{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    box-shadow: 0 0 28px 4px var(--glow-gold);
}

.service-tab-btn{
    gap: 10px;
    line-height: 1.5em;
    padding: 5px 20px;
}

.service-tab-btn.active{
    background-color: var(--accent-color-2);
    color: var(--primary);
    fill: var(--primary);
}

.service-cta-btn{
    width: 70px;
    min-height: 70px;
    border-radius: 100px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.service-cta-btn:hover{
    transform: rotate(0deg);
}

.btn-service-active{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.btn-service-active:hover{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.card-project-cta-btn{
    width: 70px;
    min-height: 70px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

.card-project-cta-btn:hover{
    background-color: var(--accent-color-2);
    color: var(--primary);
    transform: rotate(0deg);
}

.card-project.commercial-project .card-project-cta-btn{
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-project.commercial-project .card-project-cta-btn:hover{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

/* ======================= 
    11.0 Card Style
==========================*/

.card{
    border: 1px solid var(--accent-color-4);
    border-radius: 30px;
    box-shadow: 0 20px 50px -25px rgba(0,0,0,0.7);
}

.card-banner-home-wrapper{
    width: 32%;
    height: 100%;
    align-self: flex-end; 
}

.card-banner-home{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    box-shadow: 0 25px 60px -20px var(--glow-gold);
}

.card-banner-home__header{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.card-company-stat{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 30px 30px;
}

.card-company-stat .stat-description{
    margin-top: 40px;
}

.card-service--grid{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 30px;
    position: relative;
    width: auto;
    height: 100%;
}

.card-service--slide{
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.card-service--slide__header{
    width: 140px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.card-service--slide__body{
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: 100%;
    width: 400px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    flex-wrap: wrap;
    z-index: 2;
}

.card-other-services{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    text-align: center;
}

.card-request-services{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    text-align: center;
    width: 100%;
}

.service-body__footer{
    width: 210px;
    background-color: var(--accent-color-3);
    height: 33px;
    border-radius: 0px 0px 16px 20px;
}

.service-body__footer-corner-box{
    width: 30px;
    height: 30px;
    border-radius: 20px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--accent-color-3)
}

.card-service__cta-container{
    background-color: var(--accent-color-3);
    display: flex;
    flex-direction: column;
    width: 80px;
    min-height: 80px;
    border-radius: 0px 0px 0px 45px;
    align-items: flex-end;
}

.card-project{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0 30px;
    justify-content: space-between;
    padding: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: top center;
    border-radius: 30px;
}

.card-project.residential-project{
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-project.commercial-project{
    background-color: var(--accent-color-9);
    color: var(--accent-color-2);
}

.card-testimonial-rating{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    position: absolute;
    top: 100px;
    left: -65px;
    width: 230px;
    border-radius: 30px 70px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px 30px;
    align-items: center;
    z-index: 2;
}

.card-testimonial{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 30px;
    position: relative;
}

.card-process{
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-team{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 10px 10px;
}

.card-pricing{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
    padding: 30px 30px 0px;
    position: relative;
}

.card-pricing.card-pricing-popular{
    padding: 0px 10px 0px;
}

.card-faq{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 30px 30px;
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-faq-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    padding: 20px;
    font-size: 1.875rem;
    border-radius: 50%;
}

.card-blog{
    display: flex;
    flex-direction: column;
    gap: 0px;
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-blog-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
}

.card-single-post__author{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    padding: 40px 40px;
}

.card-single-post__widget--recent{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 30px;
}

.card-contact-page{
    width: 1340px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0px;
    position: relative;
    overflow: hidden;
    border: 10px solid var(--secondary);
}

.card-contact-info{
    width: auto;
    height: 100%;
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
    position: relative;
}

/* ======================= 
    12.0 Color Style
==========================*/

.primary-color{
    color: var(--primary);
}

.secondary-color{
    color: var(--primary);
}

.accent-color{
    color: var(--accent-color);
}

.accent-color-2{
    color: var(--accent-color-2);
}

.bg-accent-color{
    background-color: var(--accent-color);
}

.bg-accent-color-2{
    background-color: var(--accent-color-2);
}

/* ======================= 
    13.0 Form Style
==========================*/

.form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-input-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.form label{
    color: var(--accent-color-2);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
    padding-bottom: 10px;
}

.form input,
.form textarea,
.form select{
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary);
    padding: 17px 17px;
    border-radius: 0px 20px 20px 20px;
    background-color: var(--accent-color-3);
    accent-color: var(--accent-color-2);
    outline: none;
    border: 1px solid var(--accent-color-4);
    box-shadow: none;
    width: 100%;
    transition: all 0.3s ease;
}

.form input::placeholder,
.form textarea::placeholder{
    color: var(--accent-color-7);
}

.form input:focus,
.form textarea:focus,
.form select:focus{
    border-color: var(--accent-color-2);
    box-shadow: 0 0 0 4px var(--glow-violet);
}

.alert .form-validaton{
    color: var(--primary);
    margin: 0px;
    font-size: 0.875rem;
}

.hidden{
    display: none;
}

/* ======================= 
    14.0 Image Style
==========================*/

.image-container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.image-container img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 30px;
}

.navbar-logo-container img{
    width: 100%;
    border-radius: 0px;
}

.avatar-img{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    min-height: 60px;
    border-radius: 1000px 1000px 1000px 1000px;
    border: 5px solid var(--accent-color);
    object-fit: cover;
}

.avatar-img:not(:nth-child(1)) {
    margin-left: -15px;
}

.card-company-stat__logo{
    width: 70px;
    min-height: 70px;
    background-color: var(--accent-color);
    border-radius: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.card-company-stat__logo img{
    width: 50%;
    border-radius: 0px;
}

.service-card-icon{
    width: 50px;
    min-height: 50px;
}

.service-card-icon img{
    border-radius: 0px;
}

.about-image{
    width: 60%;
    will-change: transform;
}

.about-image img{
    height: 550px;
}

.about-image.image-left{
    position: relative;
    z-index: 1;
}

.about-image.image-left img{
    border-radius: 0px 1000px 1000px 1000px;
}

.about-image.image-right{
    position: relative;
    align-self: flex-end;
    margin-top: -380px;
    z-index: 2;
}

.about-image.image-right img{
    border: 10px solid var(--secondary);
    border-radius: 1000px 1000px 0px 1000px;
}

.why-choose-us__image-intro{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: -112px;
}

.why-choose-us__image-intro img{
    width: 60%;
    border-radius: 0px;
}

.whychooseus-features-image img{
    -webkit-mask-image: url('../images/Mowix-Masking-1.png');
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0px;
    width: 100%;
    height: 455px;
}

.card-project-image{
    width: 37%;
    padding: 10px 0px;
}

.card-project-image img{
    width: 100%;
}

.project-title-icon{
    width: 60px;
    min-height: 60px;
}

.partner-img img{
    max-width: 80%;
    width: 100%;
    border-radius: 0px;
}

.service-detail-image img{
    width: 100%;
    height: 380px;
}

.service-detail__included-image img{
    width: 100%;
    height: 430px;
}

.service-detail__process-image img{
    width: 100%;
    height: 430px;
}

.testimonial-image{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.testimonial-image img{
    width: 100%;
    height: 660px;
    object-position: center right;
    border-radius: 240px 30px;
}

.testimonial-rating-icon{
    width: 55px;
}

.testimonial-reviewer{
    width: 70px;
    min-height: 70px;
}

.testimonial-reviewer img{
    border-radius: 1000px;
}

.process-image img{
    width: 100%;
    height: 760px;
}

.team-image img{
    width: 100%;
    border-radius: 25px;
}

.blog-image{
    padding: 10px 10px 0px;
}

.blog-image img{
    border-radius: 27px;
}

.single-post__author-avatar{
    margin-right: 25px;
}

.single-post__author-avatar img{
    width: 100px;
    height: 100px;
    border-radius: 500px;
}

.single-post__featured-image img{
    width: 100%;
    height: 400px;
}

.single-post__recent-image{
    width: 27%;
    position: relative;
    display: block;
    margin-right: 20px;
    flex-shrink: 0;
}

.single-post__recent-image img{
    height: 100%;
    width: auto;
    border-radius: 15px;
}

.footer-logo img{
    width: 60%;
    border-radius: 0px;
}

/* ======================= 
    15.0 Heading Style
==========================*/

.sub-heading{
    color: var(--accent-color-2);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
}

.sub-heading .icon{
    color: var(--accent-color);
}

/* ======================= 
    16.0 Banner Style
==========================*/

.banner-home-image {
    position: relative;
    overflow: hidden;
}
.banner-home-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-basketball.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    will-change: transform;
}

.banner-home-bg::before{
    content: '';
    position: absolute;
    background:
        radial-gradient(120% 90% at 15% 10%, var(--glow-violet) 0%, transparent 55%),
        radial-gradient(90% 70% at 90% 100%, var(--glow-gold) 0%, transparent 60%),
        var(--accent-color-9);
    opacity: 0.6;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


.banner-inner-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(180deg, rgba(10,11,24,0.55) 0%, rgba(10,11,24,0.85) 100%),
        url('../images/hero-image-new.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
    will-change: transform;
    filter: saturate(1.15) contrast(1.05);
}

.banner-inner-bg.banner-project-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-pricing-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-faq-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-team-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-faq-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-blog-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-single-post-page{
    background-image: url('../images/hero-image-new.jpg');
}

.banner-inner-bg.banner-contact-page{
    background-image: url('../images/hero-image-new.jpg');
}

.why-choose-us__banner{
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 360px 0px 120px;
    border-radius: 30px;
}

.banner-notfound-section{
    background-color: var(--accent-color-2);
    color: var(--primary);
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.banner-notfound-section::before{
    content: '';
    background-image: url('../images/hero-image-new.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.35;
    filter: brightness(45%) contrast(120%) saturate(140%) blur(0px) hue-rotate(255deg);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ======================= 
    17.0 Banner Home Style
==========================*/

.banner-home__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    margin-top: 88px;
    min-height: 700px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.banner-home__title-container{
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.banner-home-avatar{
    width: 140px;
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
}

.card-banner-home__avatar-description{
    width: 33%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
}

.card-banner-home__divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color-8);
}

.banner-home__description{
    width: 100%;
    color: var(--primary);
}

.card-banner-home__rating-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
}

.banner-home__card-rating{
    color: var(--accent-color-2);
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.2em;
    text-shadow: 0 0 26px rgba(124, 44, 224, 0.35);
}

.card-banner-home__rating-container .rating-star{
    color: var(--accent-color);
}

.banner-home__card-rating-title{
    width: 39%;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
}

.banner-home-corner-box{
    width: 50px;
    height: 50px;
}

.banner-home-corner-box.up-left{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.banner-home-corner-box.up-right{
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0px 30px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--secondary);
}

.banner-home-corner-box.down-left{
    border-radius: 0px 0px 0px 30px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.banner-home-corner-box.down-right{
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 0px 0px 30px 0px;
    box-shadow: 10px 10px 0px 0px var(--secondary);
}

.banner-home__footer-container{
    width: 700px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    flex-wrap: wrap;
}

.banner-home__tag-container{
    width: 660px;
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    padding: 20px 20px 0px 0px;
    border-radius: 0px 20px 0px 0px;
}

.banner-home__tag-spacer{
    width: 30px;
    height: 30px;
    border-radius: 0px 0px 0px 20px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.banner-home-tag{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border-radius: 100px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
}

/* ======================= 
    18.0 Banner Inner Style
==========================*/

.banner-inner-section{
    padding: 20px 20px 0px;
}

.banner-inner-image{
    display: flex;
    flex-direction: row;
    min-height: 60vh;
    padding: 0px 20px;
    border-radius: 30px 20px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.banner-inner__page-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 462px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    height: 100%;
}

.banner-inner__description{
    color: var(--primary);
    width: 60%;
    text-align: center;
}

.banner-inner__breadcrumb-wrapper{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;

}

.breadcrumb{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 15px;
    border-radius: 20px 20px 0px 0px;
    background-color: var(--secondary);
    margin: 0;
}

.breadcrumb a,
.breadcrumb .divider{
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--accent-color);
}

.breadcrumb a.current,
.breadcrumb .divider{
    color: var(--text-color);
}

.banner-inner-corner-box{
    width: 40px;
    height: 40px;
}

.banner-inner-corner-box.left-box{
    border-radius: 0px 0px 30px 0px;
    box-shadow: 10px 10px 0px 0px var(--secondary);
}

.banner-inner-corner-box.right-box{
    border-radius: 0px 0px 0px 30px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.banner-inner__post-meta{
    display: flex;
    flex-direction: row;
}

.banner-inner__post-meta li {
  margin-left: 25px;
  margin-right: 25px;
}

.banner-inner__post-meta li:first-child {
  margin-left: 0;
}

.banner-inner__post-meta li:last-child {
  margin-right: 0;
}

.banner-inner__meta-value{
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8em;
}

/* ======================= 
    19.0 Company Stat Style
==========================*/

.company-stat__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.company-stat__header{
    display: flex;
    flex-direction: row;
    gap: 23px;
    justify-content: space-between;
}

.company-stat__title-container{
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.company-stat__excerpt{
    color: var(--primary);
    width: 50%;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.6em;
}

.card-company-stat__stat-number{
    color: var(--accent-color-2);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2em;
}

/* ======================= 
    20.0 Service Style
==========================*/

/* 20.1 Service Wrapper */

.service-banner{
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 120px 60px;
    position: relative;
}

.service__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
}

.service__header{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    text-align: center;
}

.service__body{
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.service__body > .tab-content{
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.service-tab-container{
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

/* 20.2 Service Slider */

.swiper-wrapper-container {
    position: relative;
    overflow: visible;
}

.service-content-panel{
    width: 100%;
    overflow: visible;
    min-width: 0;
}

.swiper-services-wrapper{
    position: relative;
    overflow: visible;
}

.swiper.swiper-services{
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0;
}

.swiper-services-wrapper .swiper-button-next,
.swiper-services-wrapper .swiper-button-prev {
	color: var(--accent-color-2);
	width: auto;
	height: auto;
	z-index: 20;
}

.swiper-services-wrapper .swiper-button-next::after,
.swiper-services-wrapper .swiper-button-prev::after,
.swiper-services-wrapper .swiper-button-next svg,
.swiper-services-wrapper .swiper-button-prev svg {
	display: none !important;
}

.swiper-services-wrapper .swiper-button-next i,
.swiper-services-wrapper .swiper-button-prev i {
	font-size: 1.5rem;
	transition: 0.3s;
}

.swiper-services-wrapper .swiper-button-next:hover i,
.swiper-services-wrapper .swiper-button-prev:hover i {
	color: var(--accent-color);
}

.swiper-services-wrapper .swiper-button-prev {
	left: -40px;
}

.swiper-services-wrapper .swiper-button-next {
	right: -40px;
}

.swiper-services .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.swiper-services .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: var(--accent-color-7);
	opacity: 1;
	margin: 0 5px !important;
	border-radius: 50%;
	transition: 0.3s;
}

.swiper-services .swiper-pagination-bullet-active {
	background: var(--accent-color-2);
	border-radius: 10px;
}

.service-body-title{
    display: flex;
    flex-direction: row;
    gap: 20px 30px;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 30px 0px 30px;
    border-radius: 30px 30px 30px 0px;
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.service-body-title p{
    margin: 0px;
}

.service-body-heading{
    width: 61%;
}

.service__footer{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-end;
    justify-content: center;
}

.service__button-wrapper{
    background-color: var(--secondary);
    padding: 10px 10px 0px 10px;
    border-radius: 30px 30px 0px 0px;
}

.service-corner-box{
    width: 50px;
    height: 50px;
    border-radius: 0px 40px 0px 0px;
    box-shadow: 15px -15px 0px 0px var(--accent-color-3);
}

.service-footer-corner-box{
    width: 40px;
    height: 40px;
}

.service-footer-corner-box.down-left{
    border-radius: 0px 0px 30px 0px;
    box-shadow: 10px 10px 0px 0px var(--secondary)
}

.service-footer-corner-box.down-right{
    border-radius: 0px 0px 0px 30px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.card-service--slide__bg {
    position: absolute;
    inset: -65px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
}

.card-service--slide__bg::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10,11,24,0.92) 0%, rgba(10,11,24,0.15) 55%, rgba(124,44,224,0.25) 100%);
}

.card-service--slide.service-lawn-care .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.custom-garden-design .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.tree-schrub-care .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.irrigation-installation .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.patio-handscaping .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.seasonal-yard-cleanup .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
} 

.card-service--slide.property-maintenance .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.landscape-design .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.ground-management .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.land-clearing-services .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.commercial-irrigation-stystem .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

.card-service--slide.snow-removal .card-service--slide__bg{
    background-image: url('../images/dummy-img-600x800.jpg');
}

/* 20.3 Service Grid */

.card-service--grid .card-service--slide__header{
    position: absolute;
    top: 0;
    right: 0;
}

.card-service--grid .service-corner-box{
    width: 50px;
    height: 50px;
    border-radius: 0px 40px 0px 0px;
    box-shadow: 15px -15px 0px 0px var(--secondary);
}

.card-service--grid .card-service__cta-container{
    background-color: var(--secondary);
}

.card-service--grid .service-card-icon{
    width: 100%;
    height: auto;
}

.card-service--grid .service-card-icon img{
    width: 15%;
}

.card-service--grid .service-body-heading{
    width: 100%;
    padding-top: 20px;
}

/* 20.4 Service Detail */

.service-detail__layout{
    display: flex;
    flex-direction: row;
    gap: 0%;
    justify-content: space-between;
}

.service-detail__sidebar{
    width: 30%;
    height: 100%;
    top: 20px;
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.service-detail__content{
    width: 64%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__content .divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color-4);
    margin: 2px 0px;
}

.card-other-services .divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color-4);
    margin: 2px 0px;
}

.other-service-btn-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.service-detail__included-layout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}

.service-detail__included-items{
    width: 42%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__included-item{
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.service-detail__included-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 20px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    transition: all 0.3s ease;
}

.service-detail__included-item:hover .service-detail__included-icon{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.service-detail__included-image{
    width: 50%;
}

.service-detail__included-text{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.service-detail__included-text p{
    margin: 0px;
}

.service-detail__included-text .heading{
    margin: 10px 0px 8px;
}

.service-detail__process-layout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}

.service-detail__process-image{
    width: 50%;
}

.service-detail__process-steps{
    width: 42%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__process-step{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
}

.service-detail__process-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-detail__process-text{
    width: 83%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.service-detail__process-text p{
    margin: 0px;
}

.service-detail__cta-banner{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--accent-color-2);
    padding: 50px 30px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.service-detail__cta-banner::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/hero-image-new.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: -1;
}

.service-detail__cta-banner .service-detail__cta-text{
    width: 34%;
    color: var(--primary);
}

/* ======================= 
    21.0 About Style
==========================*/

.about__layout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.about__image-wrapper{
    width: 46%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.about__logo-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 199px;
    min-height: 199px;
    background-color: var(--secondary);
    background-image: url('../images/game-it-logo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 68% auto;
    border-radius: 1000px;
    position: absolute;
    top: 60px;
    right: 0px;
    z-index: 3;
}

.about__logo-wrapper .circular-text {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    will-change: transform;
}

.about__logo-wrapper .circular-text text {
    fill: var(--accent-color-2);
    font-size: 16.5px;
    font-weight: 600;
    text-transform: capitalize;
}

.about__title-container{
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aboutAccordion{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aboutAccordion .accordion-item{
    border: none;
    background-color: transparent;
    color: var(--primary);
}

.aboutAccordion .accordion-button{
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
    padding: 17px 17px;
    border-radius: 60px !important;
    box-shadow: none !important;
}

.aboutAccordion .accordion-button i{
    color: var(--accent-color-2);
}

.aboutAccordion .accordion-button::after{
    display: none;
}

/* ======================= 
    22.0 Video Intro Style
==========================*/

.video-intro__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: center;
    margin-bottom: -240px;
}

.video-intro__corner-box{
    width: 50px;
    min-height: 260px;
}

.video-intro__content{
    width: 93%;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    border: 10px solid var(--accent-color-3);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#video-intro-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 160%;
    height: 160%;
}

.video-intro__corner-box.left{
    border-radius: 0px 0px 30px 0px;
    box-shadow: 10px 10px 0px 0px var(--accent-color-3);
}

.video-intro__corner-box.right{
    border-radius: 0px 0px 0px 30px;
    box-shadow: -10px 10px 0px 0px var(--accent-color-3);
}

/* ======================= 
    23.0 Why Choose Us Style
==========================*/

.why-choose-us__layout{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.why-choose-us__intro{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    border-bottom: 1px solid var(--accent-color-4);
}

.why-choose-us__heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-us__cta{
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.why-choose-us__features{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    padding-top: 60px;
}

.why-choose-us__features-item-container{
    width: 27%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-us__features-item{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
}

.whychooseus-features-icon{
    width: 70px;
    min-height: 70px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: relative;
}

.whychoseus-features-number{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    min-height: 30px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

.whychoseus-features-number span{
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px;
}

.whychooseus-features-title{
    width: 72%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.why-choose-us__features-item-divider{
    height: 1px;
    background-color: var(--accent-color-4);
    width: 100%;
}

.why-choose-us__features-image-wrapper{
    width: 38%;
}

/* ======================= 
    24.0 Project Style
==========================*/

.project__layout{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.project__heading{
    width: 49%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    align-self: center;
    padding-bottom: 60px;
}

.project__card-container{
    display: block;
    position: relative;
}

.card-project__heading{
    width: 13%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 30px 0px 30px 30px;
}

.project__number{
    color: var(--primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2em;
}

.card-project.commercial-project .project__number{
    color: var(--accent-color-2);
}

.project__category{
    color: var(--accent-color-2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
}

.card-project__title-container{
    width: 28%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-end;
    padding: 30px 0px;
}

.card-project__title-container .project__title{
    margin-top: 30px;
}

.card-project__cta-container{
    width: 100px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-self: center;
    align-items: flex-end;

}

.card-project-corner-box{
    width: 50px;
    height: 50px;
}

.card-project-corner-box.up-box{
    border-radius: 0px 0px 40px 0px;
    box-shadow: 15px 15px 0px 0px var(--secondary);
}

.card-project-corner-box.down-box{
    border-radius: 0px 40px 0px 0px;
    box-shadow: 15px -15px 0px 0px var(--secondary);
}

.card-project-cta-btn-container{
    width: 80px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-radius: 45px 0px 0px 45px;
    background-color: var(--secondary);
}

/* ======================= 
    25.0 Testimonial Style
==========================*/

.testimonial__layout{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
}

.testimonial__image-wrapper{
    width: 43%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
}

.testimonial__content-intro{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.card-testimonial__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.card-testimonial__heading{
    color: var(--accent-color-2);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3em;
}

.card-testimonial__stars{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--accent-color);
    font-size: 1rem;
}

.card-testimonial__quote{
    color: var(--primary);
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.8em;
}

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

.card-testimonial__reviewer-title{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-testimonial__icon-container{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0px;
    flex-wrap: wrap;
}

.card-testimonial-corner-box{
    width: 50px;
    height: 50px;
    border-radius: 0px 0px 40px 0px;
    box-shadow: 15px 15px 0px 0px var(--secondary);
}

.card-testimonial-corner-box.up-box{
    width: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    box-shadow: none;
}

.testimonial-quote-icon-wrapper{
    background-color: var(--secondary);
    width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    border-radius: 45px 0px 0px 0px;
}

.testimonial-quote-icon{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    font-size: 1.5rem;
    width: 70px;
    min-height: 70px;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 24px 2px var(--glow-gold);
}

/* ======================= 
    26.0 Our Process Style
==========================*/

.process__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    align-items: flex-end;
}

.process__image-wrapper{
    width: 46%;
}

.process__intro{
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-process-icon{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    width: 60px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
}

/* ======================= 
    27.0 Team Style
==========================*/

.team__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.team__header{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    align-self: center;
}

.card-team-detail{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 0px 20px 20px;
}

.team-social-media{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0.7em;
    font-size: 1rem;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color);
    transition: all 0.3s ease;
}

.team-social-media:hover{
    background-color: var(--accent-color-2);
    color: var(--primary)
}

/* ======================= 
    28.0 Pricing Style
==========================*/

/* 28.1 Pricing General */

.pricing-price{
    color: var(--accent-color-2);
}

.pricing-detail{
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.8em;
}

.pricing-divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color-4);
    margin: 2px 0px;
}

.pricing-card-footer{
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;
    align-items: flex-end;
}

.pricing__cta-container{
    padding: 10px 10px 0px;
    border-radius: 30px 30px 0px 0px;
    background-color: var(--secondary);
}

.pricing-corner-box{
    width: 43px;
    height: 40px;
}

.pricing-corner-box.box-left{
    border-radius: 0px 0px 15px 0px;
    box-shadow: 10px 10px 0px 0px var(--secondary);
}

.pricing-corner-box.box-right{
    border-radius: 0px 0px 0px 15px;
    box-shadow: -10px 10px 0px 0px var(--secondary);
}

.pricing-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
    position: relative;
}

.pricing-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
    color: var(--primary);
    margin-bottom: 10px;
}

.pricing-list li::before{
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 1rem;
    display: inline-block;
}

.pricing__popular-header{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: center;
}

.pricing-popular-corner-box{
    width: 40px;
    height: 20px;
}

.pricing-popular-corner-box.box-left{
    border-radius: 0px 15px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--secondary);
}

.pricing-popular-corner-box.box-right{
    border-radius: 15px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.pricing-popular__heading-container{
    padding: 0px 10px 10px;
    border-radius: 0px 0px 30px 30px;
    background-color: var(--secondary);
}

.pricing-popular__heading{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    padding: 5px 15px;
    border-radius: 100px;
    text-align: center;
}

.pricing-popular__heading p{
    margin: 0px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--accent-color-2);
}

.pricing-popular__price-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 26px;
    background-color: var(--accent-color);
    padding: 20px 20px;
    align-items: center;
    text-align: center;
}

/* 28.2 Pricing Preview */

.pricing-preview__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.pricing-preview__card-container{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pricing-preview__title-container{
    width: 44%;
    height: 100%;
    position: sticky;
    top: 20px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 28.3 Pricing List Style */

.pricing-list__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pricing-list__header{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.pricing-list__title{
    width: 44%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pricing-list__title-description{
    width: 46%;
}

/* ======================= 
    29.0 FAQ Style
==========================*/

/* 29.1 FAQ General */


.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-accordion .accordion-item {
    border: none;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    background: var(--accent-color-3);
    border: none;
    box-shadow: none;
    padding: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px !important;
}

.faq-accordion .accordion-button::after {
    display: none;
}

.faq-accordion .accordion-body {
    padding: 17px;
    color: var(--text-color);
    background: var(--secondary);
}

.faq-accordion .accordion-body p{
    margin: 0px;
}

.faq-icon {
    font-size: 1.2rem;
    color: var(--accent-color-2);
    transition: transform 0.3s ease;
}

.faq-accordion .accordion-button:not(.collapsed) .faq-icon {
    transform: rotate(0deg);
}

.faq-accordion .accordion-button.collapsed .faq-icon {
    transform: rotate(180deg);
}

/* 29.2 FAQ Preview */

.faq-preview__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.faq-preview__header{
    width: 53%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.faq-preview__accordion-container{
    width: 54%;
}

/* 29.3 FAQ List */

.faq-list__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    position: relative;
}

.faq-list__card-container{
    top: 20px;
    position: sticky;
    width: 31%;
    height: 100%;
}

.faq-list__accordion-content{
    width: 62%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* ======================= 
   30.0 Service CTA Style
==========================*/

.section-service-cta{
    padding: 0px 20px;
    position: relative;
}

.service-cta__container{
    border-radius: 30px;
    padding: 100px 100px;
    background-color: var(--accent-color-2);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-cta-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(180deg, rgba(10,11,24,0.3) 0%, rgba(10,11,24,0.75) 100%),
        url('../images/hero-image-new.jpg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: -1;
    will-change: transform;
}

.service-cta__layout{
    width: 52%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* ======================= 
   31.0 Pricing CTA Style
==========================*/

.section-pricing-cta{
    padding: 0px 20px;
}

.pricing-cta__container{
    border-radius: 30px;
    padding: 100px 100px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#pricing-cta-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 200%;
    height: 200%;
    z-index: 0;
}

.pricing-cta-bg-overlay{
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--accent-color-2) 0%, var(--accent-color-6) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pricing-cta__layout{
    width: 29%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 3;
}

/* ======================= 
   32.0 Contact CTA Style
==========================*/

.contact-cta__layout{
    display: flex;
    flex-direction: row;
    padding: 120px 20px 120px 150px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact-cta__intro{
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-cta__intro .spacer{
    height: 60px;
}

.contact-cta__divider{
    margin: 2px 0px;
    border-bottom: 1px solid var(--accent-color-4);
}

.contact-cta__social-media{
    color: var(--accent-color-2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
    transition: color 0.3s ease;
}

.contact-cta__social-media:hover{
    color: var(--accent-color);
}

.contact-cta__image-wrapper{
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    min-height: 100%;
    border-radius: 30px 0px 0px 30px;
    overflow: hidden;
    z-index: 2;
}

.contact-cta__image-bg{
    background-image:
        linear-gradient(160deg, rgba(124,44,224,0.35) 0%, rgba(10,11,24,0.55) 100%),
        url('../images/laser-tag-win_1.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 60%;
    min-height: 60%;
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-cta__image-wrapper .spacer{
    height: 50px;
}

/* ======================= 
   33.0 Blog Style
==========================*/

/* 33.1 Blog */

.blog__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
    justify-content: center;
    align-items: center;
}

.blog__header{
    width: 61%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.blog-link{
    color: var(--primary);
}

.blog-meta{
    color: var(--accent-color-2);
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
}

/* 33.2 Single Post */

.single-post__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
}

.single-post__content{
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.single-post__footer{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    border-width: 1px 0px;
    border-style: solid;
    border-color: var(--accent-color-4);
}

.single-post__tags-container{
    width: 36%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.single-post__tags{
    width: 200px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.single-post__tag{
    color: var(--accent-color-2);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8em;
}

.single-post__share{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

.single-post__share-btn{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    align-items: stretch;
    background-color: var(--accent-color-2);
    color: var(--primary);
    font-size: 0.8rem;
    border-radius: 99.9em;
    transition: all 0.3s ease;
}

.single-post__share-btn:hover{
    color: var(--accent-color);
}

.single-post__share-btn i{
    padding: 15px 15px;
}

.single-post__share-text{
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0px 12px 0px 10.8px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    align-items: center;
}

.single-post__author-quote{
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px;
}

.single-post__author-info{
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.single-post__author-posts{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 10px 15px 10px 15px;
    border-radius: 100px;
}

.single-post__sidebar{
    top: 20px;
    position: sticky;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.single-post__recent-list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.single-post__recent-item{
    display: flex;
    flex-direction: row;
    gap: 0px;
}

.single-post__recent-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single-post__recent-title{
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3em;
}

.single-post__recent-date{
    color: var(--accent-color-2);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
}

.single-post__widget--search{
    background-color: var(--accent-color-3);
    padding: 5px;
    border-radius: 100px;
}

.single-post__search{
    display: flex;
    flex-direction: row;
    gap: 0px;
    flex-wrap: nowrap;
}

.single-post__search input{
    width: auto;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8em;
    border-radius: 100px 0px 0px 100px;
    width: 100%;
}

.single-post__search input::placeholder{
    color: var(--text-color);
}

.single-post__search-btn{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border-radius: 0px 100px 100px 0px;
    padding: 20px;
    outline: none;
    box-shadow: none;
    border: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.single-post__search-btn:hover{
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.single-post__comment-form{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border-radius: 30px;
}

.single-post__comment-checkbox{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    text-align: start;
    flex-grow: 0;
}

.single-post__comment-checkbox label{
    padding: 0px;
}

.single-post__comment-checkbox input{
    width: auto;
}

/* ======================= 
   34.0 Contact Style
==========================*/

/* 34.1 Contact Form Style */

.contact__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -300px;
}

.contact-corner-box{
    width: 50px;
    min-height: 300px;
}

.contact-corner-box.box-left{
    border-radius: 0px 30px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--secondary);
}

.contact-corner-box.box-right{
    border-radius: 30px 0px 0px 0px;
    box-shadow: -10px -10px 0px 0px var(--secondary);
}

.contact__image-container{
    width: 670px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 0px 30px 30px 0px;
    position: relative;
    overflow: hidden;
}

.contact-image-bg{
    background-image:
        linear-gradient(160deg, rgba(124,44,224,0.35) 0%, rgba(10,11,24,0.55) 100%),
        url('../images/laser_tag_contact.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 60%;
    min-height: 70%;
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.contact__form-container{
    width: 670px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 80px 80px;
}

/* 34.2 Contact Info Style */

.contact-info__container{
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 360px 20px 120px;
    border-radius: 30px 30px;
}

.contact-info__layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.card-contact-info__header{
    width: 130px;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    right: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0px;
}

.contact-info-corner{
    width: 50px;
    height: 50px;
    border-radius: 0px 30px 0px 0px;
    box-shadow: 10px -10px 0px 0px var(--accent-color-3)
}

.contact-info__header-icon-container{
    width: 70px;
    min-height: 70px;
    border-radius: 0px 0px 0px 40px;
    background-color: var(--accent-color-3);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.contact-info__header-icon{
    width: 60px;
    min-height: 60px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
}

/* ======================= 
   35.0 Notfound Style
==========================*/

.notfound__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.notfound__heading{
    font-size: 13rem;
    font-weight: 700;
    line-height: 1em;
    color: var(--accent-color);
}

.notfound__sub-heading{
    color: var(--primary);
}

.notfound__description{
    color: var(--primary);
    width: 70%;
    text-align: center;
    align-self: center;
}

/* ======================= 
   36.0 Maps Style
==========================*/

.maps{
    height: 400px;
    border-radius: 30px;
}

/* ======================= 
   37.0 Animation Preset
==========================*/

.animation-box {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.anim-fast {
    --anim-duration: var(--anim-duration-fast);
}

.anim-normal {
    --anim-duration: var(--anim-duration-normal);
}

.anim-slow {
    --anim-duration: var(--anim-duration-slow);
}

.anim-delay-none {
    --anim-delay: var(--anim-delay-none);
}

.anim-delay-sm {
    --anim-delay: var(--anim-delay-sm);
}

.anim-delay-md {
    --anim-delay: var(--anim-delay-md);
}


/* ======================= 
   38.0 Spacing Preset
==========================*/

/* 38.1 Flex Gap */

.flex-gap-0 { 
    gap: 0px; 
}
.flex-gap-1 { 
    gap: 10px; 
}
.flex-gap-2 { 
    gap: 20px; 
}
.flex-gap-3 { 
    gap: 30px; 
}
.flex-gap-4 { 
    gap: 40px ; 
}
.flex-gap-5 { 
    gap: 50px; 
}
.flex-gap-x-0 { 
    column-gap: 0px; 
}
.flex-gap-x-1 { 
    column-gap: 10px; 
}
.flex-gap-x-2 { 
    column-gap: 20px; 
}
.flex-gap-x-3 { 
    column-gap: 30px; 
}
.flex-gap-x-4 { 
    column-gap: 40px; 
}
.flex-gap-x-5 { 
    column-gap: 50px; 
}

.flex-gap-y-0 { 
    row-gap: 0px; 
}
.flex-gap-y-1 { 
    row-gap: 10px; 
}
.flex-gap-y-2 { 
    row-gap: 20px; 
}
.flex-gap-y-3 { 
    row-gap: 30px; 
}
.flex-gap-y-4 { 
    row-gap: 40px; 
}
.flex-gap-y-5 { 
    row-gap: 50px; 
}

/* 38.2 Grid Gap (row-gap & column-gap) */

.grid-gap-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px;
}

.grid-gap-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-gap-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-gap-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-gap-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-gap-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-gap-x-0 {
    --bs-gutter-x: 0px;
}
.grid-gap-x-1 {
    --bs-gutter-x: 10px;
}
.grid-gap-x-2 {
    --bs-gutter-x: 20px;
}
.grid-gap-x-3 {
    --bs-gutter-x: 30px;
}
.grid-gap-x-4 {
    --bs-gutter-x: 40px;
}
.grid-gap-x-5 {
    --bs-gutter-x: 50px;
}

.grid-gap-y-0 {
    --bs-gutter-y: 0px;
}
.grid-gap-y-1 {
    --bs-gutter-y: 10px;
}
.grid-gap-y-2 {
    --bs-gutter-y: 20px;
}
.grid-gap-y-3 {
    --bs-gutter-y: 30px;
}
.grid-gap-y-4 {
    --bs-gutter-y: 40px;
}
.grid-gap-y-5 {
    --bs-gutter-y: 50px;
}



/* ======================= 
   34.3 Booking Form Style
   (separate from 34.1 Contact Form Style — booking.html
   uses these classes, contact.html keeps using the
   .contact__* / .card-contact-page classes above)
==========================*/
 
.booking__layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -300px;
}
 
.card-booking-page{
    width: 1340px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0px;
    position: relative;
    overflow: hidden;
    border: 10px solid var(--secondary);
}
 
.booking__image-container{
    width: 670px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 0px 30px 30px 0px;
    position: relative;
    overflow: hidden;
}
 
.booking-image-bg{
    background-image: url('../images/laser-tag-win_1.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 60%;
    min-height: 70%;
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
 
.booking__form-container{
    width: 670px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 80px 80px;
}
 
/* Booking-specific field grouping — date / time / guests sit on one row */
.booking-form-row{
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}
 
.booking-form-row .form-input-group{
    flex: 1 1 150px;
}
 
/* Small helper note under a field, e.g. "Subject to availability" */
.booking-form-note{
    color: var(--accent-color-7);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5em;
    margin-top: -10px;
}
 
/* Package/activity pill selector — optional visual alternative to a
   plain <select> for choosing the attraction being booked */
.booking-package-options{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
 
.booking-package-option{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background-color: var(--secondary);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5em;
    cursor: pointer;
    border: 1px solid var(--accent-color-4);
    transition: all 0.3s ease;
}
 
.booking-package-option:hover{
    border-color: var(--accent-color);
}
 
.booking-package-option.active{
    background-color: var(--accent-color-2);
    color: var(--secondary);
    border-color: var(--accent-color-2);
}