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

Project:        Morix - Roofing Services
Version:        1.0
Description:    Morix is a modern and professional HTML Bootstrap Template designed for
                Roofing Services. This versatile template is perfect for residential roofing
                contractors, commercial roofing companies, roof repair specialists, roof
                installation services, gutter installation providers, and other construction
                or exterior service businesses.
==============================================================================

TABLE OF CONTENTS
------------------------------------------------------------------------------

01.  Import Vendor
02.  Global Variable
     02.1  Color Variable
     02.2  Font Family Variable
     02.3  Animation Duration Preset
     02.4  Animation Delay Preset
03.  Keyframe
04.  Base Style
05.  Section Style
06.  Page Container Style
07.  Header Style
08.  Navbar Pop Up Style
09.  Footer Style
10.  Button Style
11.  Card Style
12.  Color Class
13.  Image Style
14.  Heading Style
15.  Form Style
16.  Banner Home Style
17.  Home Reviewer Style
18.  Partnership Style
19.  Service Style
     19.1  Main Service
     19.2  Service Detail
20.  Why Choose Us Style
21.  Process Style
22.  Project Style
23.  Testimonial Style
     23.1  Testimonial
     23.2  Testimonial Feature
24.  Contact CTA Style
25.  Blog Post Style
     25.1  Blog Style
     25.2  Single Post
26.  Banner Inner
27.  About Style
28.  About Value Section
29.  Trusted Client
30.  Team Style
31.  Customer Experience Section
32.  Guarantee Style
33.  Warranty Style
34.  Financing Style
35.  Simple Financing Style
36.  FAQ Style
     36.1  FAQ Preview
     36.2  FAQ General
     36.3  FAQ Accordion
37.  Contact Style
38.  Maps Style
39.  Banner Notfound Style
40.  Animation Box
41.  Spacing Preset
     41.1  Flex Gap
     41.2  Grid Gap (row-gap & column-gap)

------------------------------------------------------------------------------

COLOR GLOSSARY
------------------------------------------------------------------------------

    --primary           : #1C1C1E          (Near black   — main text & foreground)
    --secondary         : #FFFFFF          (White        — page & card background)
    --text-color        : #555555          (Medium gray  — body paragraph text)
    --accent-color      : #F61B28          (Red          — primary brand accent, CTAs)
    --accent-color-2    : #C9141F          (Dark red     — hover & active accent state)
    --accent-color-3    : #FFE9EB          (Light pink   — tinted/soft accent background)
    --accent-color-4    : #F5F5F5          (Light gray   — subtle section backgrounds)
    --accent-color-5    : #F61B2800        (Transparent  — ghost accent, zero opacity)
    --accent-color-6    : #1C1C1E          (Near black   — dark surface/card backgrounds)
    --accent-color-7    : #FFD200          (Yellow       — highlight/badge accent)
    --accent-color-8    : #F3F3F3          (Off-white    — alternate light background)

------------------------------------------------------------------------------

TYPOGRAPHY SYSTEM
------------------------------------------------------------------------------

    Font Families
    --font-family-global  : "Inter Tight", sans-serif    (body, UI, interactive)
    --font-family-label   : "Montserrat", sans-serif     (labels, tags, badges)

    Headings  (font-family: Inter Tight, all headings use font-family-global)
    h1 / .heading-xl   — 150px / weight 700 / line-height 1em   / letter-spacing -4px
    h2 / .heading-lg   — 65px  / weight 700 / line-height 1.2em / letter-spacing -2px
    h3 / .heading-md   — 45px  / weight 700 / line-height 1.2em / letter-spacing -1.5px
    h4 / .heading-sm   — 26px  / weight 700 / line-height 1.3em / letter-spacing -1px
    h5 / .heading-xs   — 21px  / weight 600 / line-height 1.4em / letter-spacing 0px
    h6 / .heading-xxs  — 18px  / weight 600 / line-height 1.5em

    Body  (font-family: Inter Tight)
    body — 16px / weight 400 / line-height 1.8em / color: --primary
    p    — 16px / weight 400 / line-height 1.8em / color: --text-color

    Interactive
    button / a / .btn / .nav-link / .dropdown-item / .navbar-popup-menu a
         — 16px / weight 600 / line-height 1em / text-decoration: none / color: inherit

------------------------------------------------------------------------------

ANIMATION SYSTEM
------------------------------------------------------------------------------

    Duration Presets  (defined in :root, consumed via --anim-duration)
    --anim-duration-fast    : 0.8s
    --anim-duration-normal  : 1.1s
    --anim-duration-slow    : 1.6s

    Delay Presets  (defined in :root, consumed via --anim-delay)
    --anim-delay-none  : 0s
    --anim-delay-sm    : 0.25s
    --anim-delay-md    : 0.45s

    Keyframes  (section 03)
    @keyframes fade-in    — opacity 0 → 1
    @keyframes fade-up    — opacity 0→1 + translateY(80px → 0)
    @keyframes fade-down  — opacity 0→1 + translateY(-80px → 0)
    @keyframes fade-left  — opacity 0→1 + translateX(-120px → 0)
    @keyframes fade-right — opacity 0→1 + translateX(120px → 0)

    Utility Classes  (section 40)
    .animation-box       — base animated element; opacity:0, forwards fill,
                           cubic-bezier(0.25, 0.8, 0.25, 1) easing, will-change set
    .anim-fast           — sets --anim-duration to fast preset  (0.8s)
    .anim-normal         — sets --anim-duration to normal preset (1.1s)
    .anim-slow           — sets --anim-duration to slow preset  (1.6s)
    .anim-delay-none     — sets --anim-delay to none preset (0s)
    .anim-delay-sm       — sets --anim-delay to sm preset   (0.25s)
    .anim-delay-md       — sets --anim-delay to md preset   (0.45s)

    Accessibility
    @media (prefers-reduced-motion: reduce) — disables animation, opacity & transform
                                              on all .animation-box elements

==============================================================================*/

/* ====================== */
/* 01. Import Vendor */
/* ====================== */

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

/* ====================== */
/* 02. Global Variable */
/* ====================== */

:root{
    /* 02.1 Color Variable */
    --primary: #1C1C1E;
    --secondary: #FFFFFF;
    --text-color: #555555;
    --accent-color: #F61B28;
    --accent-color-2: #C9141F;
    --accent-color-3: #FFE9EB;
    --accent-color-4: #F5F5F5;
    --accent-color-5: #F61B2800;
    --accent-color-6: #1C1C1E;
    --accent-color-7: #FFD200;
    --accent-color-8: #F3F3F3;
    
    /* 02.2 Font Family Variable */
    --font-family-global: "Inter Tight", sans-serif;
    --font-family-label: "Montserrat", sans-serif;

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

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

/* ====================== */
/* 03. Keyframe */
/* ====================== */

@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);} 
}

/* ====================== */
/* 04. Base Style */
/* ====================== */

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

body{
    font-family: var(--font-family-global);
    font-size: 16px;
    line-height: 1.8em;
    color: var(--primary);
}

h1,
.heading-xl{
    font-size: 150px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -4px;
    margin: 0px;
}

h2,
.heading-lg{
    font-size: 65px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -2px;
    margin: 0px;
}

h3,
.heading-md{
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1.5px;
    margin: 0px;
}

h4,
.heading-sm{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -1px;
    margin: 0px;
}

h5,
.heading-xs{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0px;
    margin: 0px;
}

h6,
.heading-xxs{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    margin: 0px;
}

p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-color);
    margin: 0px;
}

button,
a, 
.btn, 
.nav-link,
.dropdown-item,
.navbar-popup-menu a{
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
    color: inherit;
}

ul{
    list-style: none;
}

/* ====================== */
/* 05. Section Style */
/* ====================== */

.section{
    padding: 120px 0px;
}

/* ====================== */
/* 06. Page Container Style */
/* ====================== */

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

/* ====================== */
/* 07. Header Style */
/* ====================== */

.navbar-container{
    background-color: var(--secondary);
    border-bottom: 1px solid var(--accent-color-8);
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar{
    padding: 0px;
}

.navbar-nav{
    flex-direction: row;
    gap: 20px;
}

.navbar-logo-container{
    width: 19%;
    display: flex;
    justify-content: center;
}

.navbar-logo-container img{
    width: 65%;
    max-width: 100%;
    height: auto;
}

.nav-link-container{
    width: 47%;
}

.navbar-nav .nav-link{
    padding: 41px 15px;
    color: var(--primary);
    fill: var(--primary);
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover{
    color: var(--text-color);
}
.navbar-nav .nav-link.active{
    color: var(--accent-color);
}

.navbar .dropdown-menu{
    background-color: var(--secondary);
    border-style: solid;
    border-width: 15px 10px 15px 0px;
    border-color: var(--secondary);
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 10px 40px -20px #9AAACF;
}

.navbar .dropdown-item{
    background-color: var(--secondary);
    padding: 10px 15px;
    transition:  all 0.3s ease;
}

.navbar .dropdown-item:hover{
    color: var(--text-color);
}


.navbar .dropdown-item.active, 
.navbar .dropdown-item:active{
    color: var(--accent-color);
}

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

.nav-btn{
    display: none;
    padding: .25em;
    border-radius: 10px;
    background-color: var(--accent-color);
    color: var(--secondary);
    box-shadow: none;
    outline: none;
    border: none;
    font-size: 26px;
    line-height: 1.2em;
}

.navbar-cta-container{
    width: 19%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

/* ====================== */
/* 08. Navbar Pop Up Style */
/* ====================== */

.navbar-popup {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: var(--secondary);
    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: 10px 40px;
    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;
}

/* ====================== */
/* 09. Footer Style */
/* ====================== */

.section-footer{
    padding: 60px 0px 0px;
    background-color: var(--accent-color-6);
    color: var(--secondary);
}

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

.footer-cta__title{
    width: 27%;
}

.footer-cta__btn{
    background-color: var(--secondary);
    color: var(--accent-color);
    background-image: url('../images/Arrow-Icon-1.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70% auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.footer-cta__btn:hover{
    background-image: url('../images/Arrow-Icon-2.png');
    transform: rotate(45deg);
    background-color: var(--accent-color-2);
}

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

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

.footer-social-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.footer-social-media{
    width: 36px;
    min-height: 36px;
    aspect-ratio: 1/1;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

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

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

.footer__quicklink .footer__divider{
    border-bottom: 1px solid var(--accent-color);
    width: 100%;
}

.footer__quicklink.quicklink__company{
    width: 10%;
}

.footer__quicklink.quicklink__service{
    width: 15%;
}

.footer__quicklink.footer__contact{
    width: 16%;
}

.footer-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--accent-color-4);
}

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

.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.no-icon-list li{
    color: var(--accent-color);
}

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

.footer-contact__icon{
    width: 40px;
    height: 40px;
    background-color: var(--accent-color);
    color: var(--secondary);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
}

.footer-contact__detail{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-contact__title{
    color: var(--secondary);
}

.footer-contact__detail-text{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--accent-color-4);
}

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

.footer-copyright-list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.footer-copyright-list li{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--accent-color-4);
}

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

.footer-copyright-text{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--accent-color-4);
}

/* ====================== */
/* 10. Button Style */
/* ====================== */

.btn{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 17px 34px;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    outline: none;
    width: max-content;
    transition: all 0.3s ease;
}

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

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

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

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

/* ====================== */
/* 11. Card Style */
/* ====================== */

.card{
    border-radius: 20px;
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.card-banner-home{
    width: 26%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 30px;
    margin-bottom: 50px;
}

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

.card-banner-home__reservation{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 30px;
    margin-bottom: -370px;
}

.card-banner-banner-home__reviewer-description{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.card-banner-home__description{
    font-size: 16px;
}

.card-service{
    background-color: var(--secondary);
    color: var(--primary);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: space-between;
    width: auto;
    height: 100%;
    position: relative;
}

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

.card-service-cta{
    background-color: var(--accent-color);
    color: var(--secondary);
    gap: 20px;
}

.card-service-cta__content{
    width: 67%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__option-card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: var(--accent-color);
    color: var(--secondary);
}

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

.service-detail__nav-card .divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color);
}

.service-detail__cta-card{
    background-image: url('../images/Project-4.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 30px 30px;
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service-detail__cta-card::before{
    content: '';
    background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--accent-color-6) 100%);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card-project{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 200% auto;
    border-radius: 30px;
    color: var(--secondary);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
}

.card-project::before{
    content: '';
    background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--accent-color-6) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    inset: 0;
    z-index: -1;
}

.card-project:hover{
    background-size: 220% auto;
}

.card-testimonial{
    display: flex;
    flex-direction: column;
    gap: 20px;
    gap: 50px;
    padding: 50px 50px;
    background-color: var(--accent-color);
    color: var(--secondary);
}

.card-testimonial-feature{
    width: 32.3%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var(--accent-color-3);
    color: var(--primary);
}

.card-guarantee__badge{
    background-color: var(--accent-color);
    color: var(--secondary);
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
    align-items: center;
    justify-content: center;
}

.card-simple-financing{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
    background-color: var(--accent-color);
    color: var(--secondary);
}

.card-simple-financing .card-header{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0px;
}

.card-simple-financing .card-simple-financing__header-body{
    width: 67%;
}

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

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

.card-team__body{
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    text-align: center;
}

.card-team__body .team-detail{
    color: var(--accent-color);
    margin-bottom: 15px;
}

.card-faq-cta{
    width: 55%;
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 30px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.card-faq-cta-link{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
}

.faq-general__cta-card{
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 30px;
    background-color: var(--accent-color);
    color: var(--secondary);
}

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

.card-single-post__author{
    background-color: var(--accent-color);
    color: var(--secondary);
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    padding: 40px 40px;
    border-radius: 30px;
}

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

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

.contact__info-card{
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.card-footer__cta{
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 50px;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

/* ====================== */
/* 12. Color Class */
/* ====================== */

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

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

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

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

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

/* ====================== */
/* 13. Image Style */
/* ====================== */

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

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

.card-banner-home__reviwer img{
    width: 60px;
    min-height: 60px;
    border: 5px solid var(--accent-color);
    border-radius: 100px;
    aspect-ratio: 1/1;
}

.home-reviewer__avatar-image{
    display: block;
    flex-direction: row;
    align-items: center;
}

.home-reviewer__avatar-image img{
    width: 60px;
    min-height: 60px;
    border: 5px solid var(--secondary);
    border-radius: 100px;
}

.home-reviewer__avatar-image img:not(:first-child){
    margin-left: -20px;
}

.service__icon{
    width: 20%;
    height: auto;
}

.whychooseus__feature-icon{
    width: 20%;
}

.process-icon{
    width: 20%;
    z-index: 2;
    order: 1;
}

.testimonial__reviewer-image{
    width: 180px;
    display: flex;
    align-items: center;
    gap: 0px;
}

.testimonial__reviewer-image img{
    width: 60px;
    min-height: 60px;
    border: 5px solid var(--secondary);
    border-radius: 100px;
}

.testimonial__reviewer-image img:not(:first-child){
    margin-left: -20px;
}

.card-testimonial__avatar-image{
    width: 65px;
    height: 65px;
}

.card-testimonial__avatar-image img{
    width: 100%;
    border-radius: 100px;
}

.service-detail__solution-image img{
    width: 100%;
    height: 100%;
    object-position: left center;
    border-radius: 20px;
}

.service-detail__options-image img{
    width: 100%;
    height: 100%;
    object-position: center;
    border-radius: 20px;
}

.service-detail__hero-img img{
    width: 100%;
    height: 364px;
    border-radius: 20px;
}

.about__image img{
    width: 100%;
    height: 410px;
    object-fit: cover;
    object-position: center right;
    border-radius: 20px;
}

.trustedclients__image{
    display: flex;
    justify-content: center;
}

.trustedclients__image img{
    width: 66%;
}

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

.customer-exp__feature-icon img{
    width: 15%;
}

.guarantee__image img{
    width: 100%;
    height: 550px;
    object-position: center right;
    border-radius: 20px;
}

.financing__image img{
    width: 100%;
    height: 670px;
    border-radius: 20px;
}

.financing__feature-icon img{
    width: 100%;
}

.card-simple-financing__icon img{
    width: 100%;
}

.faq-preview__image{
    z-index: 1;
}

.faq-preview__image img{
    width: 100%;
    height: 670px;
    border-radius: 20px;
}

.blog-image img{
    width: 100%;
    border-radius: 18px;
}

.single-post__featured-image img{
    width: 100%;
    height: 400px;
    object-position: top center;
    border-radius: 30px 30px 30px 30px;
}

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

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

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

.card-blog__body{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 15px;
}

.footer-logo img{
    width: 55%;
}

/* ====================== */
/* 14. Heading Style */
/* ====================== */

.sub-heading{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    color: var(--accent-color);
    text-transform: uppercase;
}

/* ====================== */
/* 15. Form Style */
/* ====================== */

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

.form label{
    color: var(--primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    padding-bottom: 10px;
}

.form input,
.form textarea{
    width: 100%;
    background-color: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--accent-color-4);
    border-radius: 10px;
    padding: 17px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    box-shadow: none;
    outline: none;
}

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

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

.hidden{
    display: none;
}

/* ====================== */
/* 16. Banner Home Style */
/* ====================== */

.section-home{
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 60px 0px 0px;
    min-height: 90vh;
    justify-content: space-between;
    position: relative;

}

.home__page-layout{
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
}

.home__heading-container{
    display: flex;
    flex-direction: row;
    gap: 0px 135px;
}

.home__heading{
    width: 55%;
    display: flex;
    justify-content: flex-end;
}

.home__heading.home__heading-highlight{
    justify-content: flex-start;
}

.banner-home__reviewer{
    width: 27%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.banner-home__reviewer-image{ 
    width: 180px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

.banner-home__reviewer-image img:not(:first-child){
    margin-left: -20px;
}

.banner-home__reviewer-image img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 5px solid var(--secondary);
}

.banner-home__reviewer-description{
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.banner-home__reviewer-counter{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -1px;
    color: var(--accent-color);
}

.home__banner-cta{
    width: 21%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 80px;
    position: relative;
    z-index: 2;
}

.home-banner{
    background-image: url('../images/Image-Hero-4.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 510px;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
}

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

/* ====================== */
/* 17. Home Reviewer Style */
/* ====================== */

.home-reviewer__section{
    min-height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.home-reviewer__page-layout{
    width: 65%;
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
}

.home-reviwer__heading{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-reviewer__avatar-content{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: flex-end;
}

.home-reviewer__rating-container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.home-reviewer__rating-count{
    color: var(--primary);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1.5px;
}

.home-reviewer__stars{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    color: var(--accent-color);
}

.home-reviewer__count-title{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary);
}

/* ====================== */
/* 18. Partnership Style */
/* ====================== */

.section-partnership{
    padding: 120px 0px;
}

.partnership__page-layout{
    position: relative;
    overflow: hidden;
}

.swiper-partner img{
    max-width: 80%;
}

/* ====================== */
/* 19. Service Style */
/* ====================== */

/* 19.1 Main Service */

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

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

.service__heading{
    width: 56%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service__heading-cta{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
}

.service__content{
    position: relative;
    overflow: hidden;
}

.service__cta-image{
    position: absolute;
    bottom: 0;
    right: -45px;
    width: 43%;
}

.service__cta-image img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 19.2 Service Detail */

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

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

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

.service-detail__solutions-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.service-detail__solution-list{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__solution-item{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 20px;
    border-left: 3px solid var(--accent-color);
}

.service-detail__solution-image{
    width: 48%;
}

.service-detail__options-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-top: 40px;
}

.service-detail__options-image{
    width: 48%;
}

.service-detail__options-list{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-detail__sidebar{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.service-detail__service-nav{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.service-detail__service-nav-item .service-detail__service-nav-link{
    width: 100%;
    background-color: var(--accent-color-2);
    color: var(--secondary);
    justify-content: space-between;
    padding: 17px;
}

.service-detail__service-nav-item .service-detail__service-nav-link:hover{
    background-color: var(--accent-color);
    color: var(--secondary);
}

.service-detail__service-nav-item.service-detail__service-nav-item--active .service-detail__service-nav-link{
    background-color: var(--accent-color);
    color: var(--secondary);
}

.service-detail__service-nav-item.service-detail__service-nav-item--active .service-detail__service-nav-link:hover{
    background-color: var(--accent-color-2);
    color: var(--secondary);
}

/* ====================== */
/* 20. Why Choose Us Style */
/* ====================== */

.whychooseus__page-layout{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.whychooseus__heading-container{
    width: 43%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: baseline;
    text-align: center;
    align-items: center;
    align-self: center;
    padding-bottom: 60px;
}

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

.whychooseus__feature-col{
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.whychooseus__image-col{
    width: 50%;
}

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

.whychooseus__feature-col .divider{
    border-bottom: 1px solid var(--accent-color-3);
}

.whychooseus__stats-bar{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 50px;
    border-radius: 20px;
}

.whychooseus__stat-item{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.whychooseus__stat-icon{
    width: 70px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: var(--accent-color-4);
}

.whychooseus__stat-icon img{
    width: 50%;
    max-width: 100%;
    height: auto;
}

.whychooseus__stat-number{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    line-height: -1.5px;
}

.whychooseus__stat-number .whychooseus__stat-suffix{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -1px;
}

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

/* ====================== */
/* 21. Process Style */
/* ====================== */

.process__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    width: auto;
    height: 100%;
}

.process__content{
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.process__content-step{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.process__step-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.process__step-item .spacer{
    height: 180px;
}

.process__step-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    order: 2;
}

.process__step-number{
    position: absolute;
    top: 0px;
    right: 0px;
    top: auto;
    z-index: 0;
    order: 3;
    line-height: 1;
    color: var(--accent-color-3);
    pointer-events: none;
}

.process-scrollbar{
    background-color: var(--accent-color-3);
    width: 3px;
    height: auto;
    position: relative;
}

.process-scrollbar-active{
    background-color: var(--accent-color);
    width: 100%;
    height: 180px;
    position: absolute;
    top: 0;
    left: 0;
}

.process__intro{
    width: 44%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    position: sticky;
    top: 2em;
}

/* ====================== */
/* 22. Project Style */
/* ====================== */

.section-project{
    padding: 120px 60px;
}

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

.project__heading-container{
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    position: relative;
}

.project__heading{
    width: 56%;
    display: flex;
    gap: 0;
    justify-content: space-between;
}

.project-heading__subheading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

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

.project__nav-container.project__nav-mobile{
    display: none;
}

.project-button-next,
.project-button-prev{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 20px;
    border-radius: 1000px 1000px 1000px 1000px;
    padding: 15px 15px 15px 15px;
    aspect-ratio: 1/1;
}

.project-heading__title{
    width: 65%;
}

.project-heading__cta{
    width: 24%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: flex-end;
}

.project__content{
    position: relative;
    overflow: hidden;
    padding-bottom: 60px;
}

.project-pagination .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
}

.card-project__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-height: 665px;
    padding: 50px 50px;
    margin-top: -165px;
    justify-content: flex-end;
    transform: translateY(165px);
    transition: all 0.3s ease;
}

.card-project:hover .card-project__content{
    transform: translateY(0px);
}

.card-project__cta{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--secondary);
    padding: 0px 5px 10px 5px;
    width: max-content;
    transition: all 0.3s ease;
}

.card-project__cta:hover{
    border-bottom: 1px solid var(--accent-color);
}

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

.card-project__tags .tag{
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 5px 15px 5px 15px;
    border-radius: 100px 100px 100px 100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
}

.project-residential-replacement{
    background-image: url('../images/Project-6.jpg');
}

.project-commercial-roof-install{
    background-image: url('../images/Project-3.jpg');
}

.project-storm-roof-repair{
    background-image: url('../images/Project-4.jpg');
}

.project-modern-metal-roofing{
    background-image: url('../images/Project-5.jpg');
}

.project-roof-leak-repair{
    background-image: url('../images/Project-1.jpg');
}

.project-gutter-system-installation{
    background-image: url('../images/Project-2.jpg');
}

/* ====================== */
/* 23. Testimonial Style */
/* ====================== */

/* 23.1 Testimonial */

.testimonial-banner{
    background-color: var(--secondary);
    color: var(--primary);
    background-image: url('../images/Background-Map.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
}

.testimonial__intro{
    width: 41%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.testimonial__intro-reviewer{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.testimonial__reviewer-description{
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.testimonial__reviewer-counter{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -1px;
    color: var(--accent-color);
}

.testimonial__reviewer-counter .suffix{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
}

.testimonial-content{
    width: 50%;
    position: relative;
    overflow: hidden;
}

.testimonial-quote{
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6em;
    color: var(--secondary);
}

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

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

.card-testimonial-reviwer__avatar-detail{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-testimonial__quote-icon{
    background-color: var(--secondary);
    background-image: url('../images/Quotes-Icon-Red.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40% auto;
    width: 70px;
    min-height: 70px;
    aspect-ratio: 1/1;
    border-radius: 100px;
}

/* 23.2 Testimonial Feature */

.testimonial-feature__page-layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

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

.testimonial-feature__block-content{
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.testimonial-feature__quote-icon {
    width: 70px;
    height: 70px;
}

.card-testimonial__quote-icon img{
    width: 100%;
}

.testimonial-feature__author-info{
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
}

.testimonial-feature__author-role{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--accent-color);
}

.testimonial-feature__text{
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6em;
    color: var(--primary);
}

/* ====================== */
/* 24. Contact CTA Style */
/* ====================== */

.contact-cta-section{
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.contact-cta-section::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(180deg, var(--accent-color-5) 0%, var(--accent-color-6) 100%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.contact-cta__banner{
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: -1;
}

.contact-cta__banner.banner-estimate{
    background-image: url('../images/CTA-Background.jpg');
}

.contact-cta__banner.banner-project{
    background-image: url('../images/Blog-3.jpg');
}

.contact-cta__page-layout{
    width: 52%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px auto;
    align-items: center;
    text-align: center;
    color: var(--secondary);
    position: relative;
    z-index: 3;
}

.contact-cta__page-layout.project-page{
    width: 54%;
}

/* ====================== */
/* 25. Blog Post Style */
/* ====================== */

/* 25.1 Blog Style */

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

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

.blog-heading__title{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-heading__cta{
    width: 28%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
}

.blog__page-content{
    position: relative;
    overflow: visible;
    padding-bottom: 60px;
}

.swiper-blog{
    overflow: hidden;
}

.blog__meta-container{
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

.blog-meta{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
}

.blog-meta i{
    color: var(--accent-color);
}

.blog__page-content > .blog__nav-container{
    position: absolute;
    top: 0;
    left: -60px;
    right: -60px;
    bottom: 60px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.blog__page-content > .blog__nav-container .blog-button-next,
.blog__page-content > .blog__nav-container .blog-button-prev{
    pointer-events: auto;
}

.blog__nav-container.blog__nav-mobile{
    display: none;
}

.blog-button-next,
.blog-button-prev{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 20px;
    border-radius: 1000px 1000px 1000px 1000px;
    padding: 15px 15px 15px 15px;
    aspect-ratio: 1/1;
}

.blog-pagination .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
}

/* 25.2 Single Post */

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

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

.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;
    margin: 0;
    padding: 0;
}

.single-post__tag{
    color: var(--accent-color);
    font-size: 16px;
    font-weight: 400;
    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);
    color: var(--secondary);
    font-size: 12px;
    border-radius: 99.9em;
    transition: all 0.3s ease;
}

.single-post__share-btn i{
    padding: 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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{
    color: var(--secondary);
}

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

.single-post__author-posts{
    background-color: var(--secondary);
    color: var(--accent-color);
    border-radius: 10px;
    padding: 10px 15px 10px 15px;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
}

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

.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(--secondary);
    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(--secondary);
}


.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;
}

.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-date{
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
}

/* ====================== */
/* 26. Banner Inner */
/* ====================== */

.banner-inner{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.banner-inner::before{
    content: '';
    background-color: var(--accent-color-6);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    inset: 0;
    z-index: -1;
}

.banner-inner__page-layout{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.banner-inner__title{
    color: var(--accent-color-4);
}

.banner-inner.banner-about{
    background-image: url('../images/CTA-Background.jpg');
}

.banner-inner.banner-service{
    background-image: url('../images/Blog-6.jpg');
}

.banner-inner.banner-service-detail{
    background-image: url('../images/Blog-9.jpg');
}

.banner-inner.banner-team{
    background-image: url('../images/Blog-5.jpg');
}

.banner-inner.banner-project{
    background-image: url('../images/Project-4.jpg');
}

.banner-inner.banner-process{
    background-image: url('../images/Project-2.jpg');
}

.banner-inner.banner-testimonial{
    background-image: url('../images/Project-1.jpg');
}

.banner-inner.banner-guarantees{
    background-image: url('../images/Blog-8.jpg');
}

.banner-inner.banner-faq{
    background-image: url('../images/Project-1.jpg');
}

.banner-inner.banner-blog{
    background-image: url('../images/Project-6.jpg');
}

.banner-inner.banner-single-post{
    background-image: url('../images/Blog-9.jpg');
}

.banner-inner.banner-contact{
    background-image: url('../images/Blog-9.jpg');
}

.banner-inner.banner-single-post .banner-inner__title{
    width: 70%;
}

.banner-inner__list{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px 25px;
    align-items: center;
}

.banner-inner__list-item{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0px;
    color: var(--accent-color-3);
}

.banner-inner__list-item a{
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing:inherit;
    color: inherit;
}

/* ====================== */
/* 27. About Style */
/* ====================== */

.about__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    justify-content: space-between;
}

.about__image-col{
    width: 47%;
}

.about__content-col{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ====================== */
/* 28. About Value Section */
/* ====================== */

.about-value__banner{
    background-color: var(--accent-color-4);
    color: var(--primary);
}

.about-value__page-layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.about-value__heading-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.about-value__heading-title{
    width: 40%;
}

.value__icon{
    width: 65px;
    height: 65px;
    font-size: 20px;
    padding: 20px;
    border-radius: 100px;
    background-color: var(--secondary);
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* ====================== */
/* 29. Trusted Client */
/* ====================== */

.trustedclients__page-layout{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

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

.trustedclients__heading-col{
    width: 39%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 60px;
}

.trustedclients__rating-col{
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
    padding-bottom: 60px;
}

.trustedclients__image-col{
    width: 28%;
}

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

.trustedclients__avatar-group img{
    width: 60px;
    min-height: 60px;
    border: 5px solid var(--secondary);
    border-radius: 100px;
}

.trustedclients__avatar-group img:not(:first-child){
    margin-left: -20px;
}

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

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

.trustedclients__rating-number{
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1.5px;
}

.trustedclients__rating-stars{
    display: flex;
    align-items: center;
    color: var(--accent-color);
    font-size: 16px;
    margin-bottom: 5px;
}

.trustedclients__rating-source{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary);
}

.trustedclients__client-logo-container{
    position: relative;
    overflow: hidden;
    background-color: var(--accent-color);
    color: var(--secondary);
    border-radius: 20px;
    padding: 50px 0px;
}

.swiper-client img{
    max-width: 80%;
    height: auto;
}

/* ====================== */
/* 30. Team Style */
/* ====================== */

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

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

.team__heading-title{
    width: 37%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team__heading-description{
    width: 20%;
    align-self: flex-end;
}

.team__heading-cta{
    display: flex;
    align-items: center;
    align-self: flex-end;
    padding-bottom: 15px;
}

.team-social-container{
    display: flex;
    align-items: center;
    gap: 5px;
}

.team-social-media{
    width: 36px;
    height: 36px;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 15px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* ====================== */
/* 31. Customer Experience Section */
/* ====================== */

.customer-exp__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
}

.customer-exp__heading{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.customer-exp__feature-content{
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 50px 0px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.customer-exp__feature-item{
    width: 48.5%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ====================== */
/* 32. Guarantee Style */
/* ====================== */

.guarantee__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: space-between;
}

.guarantee__image-col{
    width: 45%;
}

.guarantee__content-col{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.guarantee__content-row{
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.guarantee__stat-number{
    font-size: 65px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -2px;
    display: flex;
    align-items: center;
    gap: 5px;
}


.guarantee__stat-suffix{
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -1px;
}

.guarantee__badge-label{
    color: var(--secondary);
}

.guarantee__checklist{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guarantee__checklist-item{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0px;
}

.guarantee__check-icon{
    color: var(--accent-color);
    fill: var(--accent-color-4);
}

/* ====================== */
/* 33. Warranty Style */
/* ====================== */

.warranty__banner{
    background-color: var(--accent-color-4);
    color: var(--primary);
}

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

.warranty__heading-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.warranty__tabs{
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-top: 40px;
}

.warranty__tab-nav{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.warranty__tab-btn{
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    padding: 15px 35px;
    background-color: var(--accent-color);
    color: var(--secondary);
}

.warranty__tab-btn.active{
    background-color: var(--accent-color-3);
    color: var(--accent-color);
}

.warranty__tab-content{
    margin-top: 30px;
}

.warranty__pane-layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
    border-radius: 20px;
    background-color: var(--accent-color);
    color: var(--secondary);
    position: relative;
    overflow: hidden;
}

.warranty__tab-pane#manufacturer .warranty__pane-layout{
    flex-direction: row-reverse;
}

.warranty__pane-content{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px;
}

.warranty__checklist{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warranty__checklist-item{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0px;
    color: var(--secondary);
}

.warranty__check-icon{
    color: var(--accent-color-4);
    fill: var(--accent-color);
}

.warranty__pane-image{
    width: 50%;
    min-height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.warranty__pane-image .spacer{
    height: 50px;
}

.warranty__pane-image.workmanship-warranty{
    background-image: url('../images/Project-6.jpg');
}

.warranty__pane-image.manufacturer-warranty{
    background-image: url('../images/Project-3.jpg');
}

.warranty__duration{
    width: 100%;
    background-color: var(--accent-color-2);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border-radius: 100px;
    margin-top: 30px;
    padding: 20px;
}

.warranty__duration-icon{
    width: 70px;
    min-height: 70px;
    border-radius: 100px;
    background-color: var(--secondary);
    color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    aspect-ratio: 1/1;
}

.warranty__duration-body{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warranty__tab-pane#manufacturer .warranty__duration-body{
    width: 65%;
}

/* ====================== */
/* 34. Financing Style */
/* ====================== */

.financing__page-layout{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    justify-content: space-between;
}

.financing__content-col{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

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

.financing__feature-item{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.financing__feature-icon{
    width: 70px;
    min-height: 70px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    aspect-ratio: 1/1;
}

.financing__feature-body{
    width: 56%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.financing__image-col{
    width: 45%;
}

/* ====================== */
/* 35. Simple Financing Style */
/* ====================== */

.simple-financing__page-layout{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.simple-financing__header{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.card-simple-financing__icon{
    width: 70px;
    min-height: 70px;
    background-color: var(--secondary);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1/1;
}

.simple-financing__icon-badge{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    min-height: 30px;
    background-color: var(--accent-color-2);
    color: var(--accent-color-4);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8em;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

/* ====================== */
/* 36. FAQ Style */
/* ====================== */

/* 36.1 FAQ Previwe */

.faq-preview__page-layout{
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: space-between;
}

.faq-preview__image-col{
    width: 45%;
    position: relative;
 }

.faq-preview__content-col{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 36.2 FAQ General */

.faq-general__page-layout{
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: space-between;
    position: relative;
}

.faq-general__heading-col{
    width: 31%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 2em;
    height: 100%;
}

.faq-general__accordion-col{
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

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

.faq-general__cta-icon{
    font-size: 40px;
    padding: 35px;
    background-color: var(--secondary);
    color: var(--accent-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
}

.faq-general__cta-body{
    width: 71%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 36.3 FAQ Accordion */

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

.faq-accordion .accordion-item{
    border: none;
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
}

.faq-accordion .accordion-button{
    border: none;
    background-color: var(--accent-color);
    color: var(--accent-color-4);
    box-sizing: border-box;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 15px !important;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0px;
}

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

/* ====================== */
/* 37. Contact Style */
/* ====================== */

.contact__page-layout{
    display: flex;
    flex-direction: row;
    gap: 60px;
    justify-content: space-between;
}

.contact__content-col{
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__info-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.contact__info-icon{
    font-size: 20px;
    padding: 15px;
    background-color: var(--secondary);
    color: var(--accent-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
}

.contact__form-col{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__form-header{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
}

#contact-form .btn{
    width: max-content;
}

/* ====================== */
/* 38. Maps Style */
/* ====================== */

.maps{
    width: 100%;
    height: 539px;
}

/* ====================== */
/* 39. Banner Notfound Style */
/* ====================== */

.banner-notfound{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

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

.banner-notfound__page-layout{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.banner-notfound__description{
    width: 70%;
    margin-bottom: 20px;
}

.notfound-label{
    font-family: var(--font-family-label);
    font-size: 208px;
    font-weight: 700;
    line-height: 1em;
    color: var(--accent-color);
}

/* ====================== */
/* 40. Animation Box */
/* ====================== */

.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);
}

/* ====================== */
/* 41. Spacing Preset */
/* ====================== */

/* 41.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; 
}

/* 41.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;
}