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

Project:        Roadway — Driving School
Version:        1.0
Primary use:    Main Website Stylesheet
Description:    Roadway – Driving School HTML Bootstrap Template is a modern,
                clean and professional HTML Bootstrap template which is
                specially created to spread and represent your driving school
                companies business to your potential customers.
                Roadway is Fully Responsive! Strong focus on the smartphone
                and tablet experience.
==============================================================================

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

  1.0   Vendor Import
  2.0   CSS Variable
  3.0   Base & Reset Settings
  4.0   Section Style
  5.0   Banner Style
  6.0   Heading Style
  7.0   Card Style
  8.0   Color Style
  9.0   Image Style
 10.0   Button Style
 11.0   Header Style
 12.0   Sidebar Style
 13.0   Form Style
 14.0   Banner Home Style
 15.0   Banner Page Style
 16.0   About Style
 17.0   Service Style
 18.0   Why Choose Us Style
 19.0   Team Style
 20.0   Testimonial Style
 21.0   FAQ Style
 22.0   Pricing Style
 23.0   Contact Style
 24.0   Page Notfound Style
 25.0   Blog Style
        25.1  Blog
        25.2  Single Post
 26.0   Footer Style
 27.0   Accordion Style
 28.0   Icon Style
 29.0   List Style
 30.0   Spacing Style
        30.1  Flex Gap
        30.2  Grid Spacing (row-gap & column-gap)

==============================================================================
COLOR GLOSSARY
==============================================================================

  --primary                  #BECB0A          Yellow-lime — brand primary; buttons, icons,
                                              card backgrounds, highlights, footer CTA card
  --secondary                #FFFFFF          Pure white — page background, light text on dark
  --text-color               #7A7A7A          Medium gray — body paragraph text, form input text
  --accent-color             #FAFAFA          Near-white — nav links, body text on dark bg,
                                              footer icon color
  --accent-color-2           #1A1919          Near-black — headings, dark section backgrounds,
                                              footer bg, card text
  --accent-color-3           #BECB0A21        Primary at ~13% opacity — tinted card & banner bg
  --accent-color-4           #D3D5D5          Light silver-gray — borders, input borders, dividers
  --accent-color-5           #F7F7F7          Off-white — sidebar panel background
  --accent-color-transparent #00000000        Fully transparent — gradient tail stops (linear-gradient)
  --accent-overlay           rgba(51,51,51,.5) Semi-transparent charcoal — sidebar backdrop overlay

  One-off values used inline (not CSS variables):
    rgba(0, 0, 0, 0.2)      — box-shadow on .team-image
    rgba(0, 0, 0, 0.25)     — box-shadow on .service__service-content-container
    rgba(45, 45, 45, .2)    — box-shadow on .dropdown-menu
    green                   — .check-icon (form validation success indicator)
    red                     — .cross-icon (form validation error indicator)

==============================================================================
TYPOGRAPHY SYSTEM
==============================================================================

  Font Families:
    --font-family-heading   "Lexend", sans-serif    — h1–h6, nav links, stat numbers,
                                                      pricing price, blog-link, sidebar menu,
                                                      testimonial & FAQ counters
    --font-family-text      "DM Sans", sans-serif   — body, p, button, a, .btn, form inputs,
                                                      dropdown items, accordion buttons,
                                                      sidebar links, blog meta

  Heading Scale (h1–h6 & utility class aliases):
    h1 / .heading-xl    76px  / weight 400 / line-height 1.1em / letter-spacing -2px
    h2 / .heading-lg    46px  / weight 400 / line-height 1.1em / letter-spacing -2px
    h3 / .heading-md    28px  / weight 400 / line-height 1.1em / letter-spacing -2px
    h4 / .heading-sm    24px  / weight 400 / line-height 1.0em / letter-spacing -1px
    h5 / .heading-xs    20px  / weight 400 / line-height 1.2em / letter-spacing -1px
    h6 / .heading-xxs   14px  / weight 600 / line-height 1.1em / letter-spacing +1px
    All h1–h6: font-family var(--font-family-heading); margin: 0

  Body & UI Scale:
    body                    16px / weight 400 / line-height 1.4em
    p                       16px / weight 400 / line-height 1.4em / letter-spacing -1px
                            color: var(--text-color)
    button / a / .btn       16px / weight 600 / text-transform uppercase / line-height 1em
    .nav-link               16px / weight 600 / text-transform uppercase / line-height 1em
                            font-family: var(--font-family-heading)
    .dropdown-item          16px / weight 600 / line-height 1em
    .accordion-button       16px / weight 600 / text-transform uppercase / line-height 1em
    .sidebar-menu a         16px / weight 600 / text-transform uppercase / line-height 1em
    form input / textarea   16px / weight 400 / line-height 1.4em / letter-spacing -1px
    form label              16px / weight 600 / text-transform uppercase / line-height 1em
    .footer-list li         16px / weight 600 / text-transform uppercase / line-height 1em
    .pricing-detail         16px / weight 400 / line-height 1.4em / letter-spacing -1px
    .blog-meta              16px / weight 400 / line-height 1.4em / letter-spacing -1px
    .banner-home__contact-info-title
                            16px / weight 400 / line-height 1.4em / letter-spacing -1px
    .single-post__recent-title
                            20px / weight 400 / line-height 1.0em / letter-spacing -1px
                            font-family: var(--font-family-heading)

  Key Component Typography:
    .testimonial-stat / .faq-stat   46px / weight 400 / line-height 1.1em / letter-spacing -2px
                                    font-family: var(--font-family-heading)
    .testimonial__name              20px / weight 400 / line-height 1.2em / letter-spacing -1px
                                    font-family: var(--font-family-heading)
    .pricing-price                  46px / weight 400 / line-height 1.1em / letter-spacing -2px
                                    font-family: var(--font-family-heading)

==============================================================================
ANIMATION SYSTEM
==============================================================================

  This stylesheet does not define any @keyframes or animation utility classes.
  All motion is handled via CSS transitions on individual components:

  Global transition standard:
    transition: all 0.3s ease    — used on: .btn, .nav-link, .dropdown-item,
                                   .footer-icon, .sidebar-close-btn,
                                   .sidebar-menu a, .sidebar-dropdown-btn,
                                   .service__service-content-icon (implicit via hover)

  Sidebar-specific transitions:
    .sidebar-overlay             transition: left 0.4s ease-in-out
    .sidebar                     transition: transform 0.4s ease-in-out
    .sidebar-dropdown-menu       transition: max-height 0.3s ease-in-out,
                                             padding 0.3s ease-in-out
    .below-dropdown              transition: margin-top 0.1s ease-in-out
    .sidebar-dropdown-btn        transition: transform 0.3s ease

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

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

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

/* =========================
    2.0 Css Variable
============================ */
   
:root{
    --primary: #BECB0A;
    --secondary: #FFFFFF;
    --text-color: #7A7A7A;
    --accent-color: #FAFAFA;
    --accent-color-2: #1A1919;
    --accent-color-3: #BECB0A21;
    --accent-color-4: #D3D5D5;
    --accent-color-5: #F7F7F7;
    --accent-color-transparent: #00000000;
    --accent-overlay: rgba(51, 51, 51, .5);;
    --font-family-heading: "Lexend", sans-serif;
    --font-family-text: "DM Sans", sans-serif;
}

/* =========================
    3.0 Base & Reset Settings
============================ */

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

body{
    background-color: var(--secondary);
    color: var(--accent-color-2);
    font-family: var(--font-family-text);
    font-size: 16px;
    line-height: 1.4em;
}

h1,
.heading-xl{
    font-size: 76px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

h2,
.heading-lg{
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

h3,
.heading-md{
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

h4,
.heading-sm{
    font-size: 24px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -1px;
}

h5,
.heading-xs{
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -1px;
}

h6,
.heading-xxs{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1em;
    letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family-heading);
    margin: 0;
}

p{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
    color: var(--text-color);
    margin-bottom: 5px;
}

button, a, .btn{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1em;
    text-decoration: none;
    color: inherit;
}

ul{
    list-style: none;
}

/* =========================
    4.0 Section Style
============================ */

.section{
    padding: 6em 1em;
}

.section-px-3{
    padding: 6em 3em;
}

.section-px-3-pb-12{
    padding: 6em 3em 13em;
}

.section-p-0{
    padding: 0px;
}

.section-pb-12{
    padding: 6em 1em 12em;
}

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

/* =========================
    5.0 Banner Style
============================ */

.banner-home{
    background-image: url('../images/tesheroimages11.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1em 1em;
    position: relative;
    z-index: 1;
}

.banner-home::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--accent-color-2) 15%, var(--accent-color-transparent) 100%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-partnership{
    background-color: var(--accent-color-3);
    padding: 3em 3em;
}

.banner-whychooseus{
    background-image: url('../images/hero-images11222s.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    position: relative;
    z-index: 1;
}

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

.newsletter-banner{
    background-image: url('../images/subscribeimages123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
    padding: 4em 4em;
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}

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

.page-banner{
    background-image: url('../images/headerpageimage21.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10em 1em 6em;
    position: relative;
    z-index: 1;
}

.page-banner::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(180deg, var(--accent-color-2) 15%, var(--accent-color-transparent) 100%);
    opacity: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.page-banner-notfound{
    background-image: url('../images/services111.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    position: relative;
    z-index: 1;
}

.page-banner-notfound::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(90deg, var(--accent-color-2) 15%, var(--accent-color-transparent) 100%);
    opacity: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* =========================
    6.0 Heading Style
============================ */

.sub-heading{
    text-transform: uppercase;
}

/* =========================
    7.0 Card Style
============================ */

.card{
    border: 0px;
    border-radius: 0px;
    box-sizing: border-box;
}

.card__about-card-intro{
    background-color: var(--primary);
    color: var(--accent-color-2);
    padding: 3em 3em;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: -100px;
}

.card__team-detail{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid var(--accent-color-2);
    padding: 1.5em 2em;
    margin-top: -70px;
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.card__testimonial-stat{
    width: 82%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: var(--primary);
    color: var(--accent-color-2);
    align-self: flex-end;
    justify-content: flex-end;
    padding: 2em 2em;
}

.card__faq-stat{
    width: 82%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: var(--primary);
    color: var(--accent-color-2);
    align-self: flex-end;
    justify-content: flex-end;
    padding: 2em 2em;
}

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

.card-contact-info{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background-color: var(--accent-color-3);
    color: var(--accent-color-2);
    padding: 4em 3em;
}

/* =========================
    8.0 Color Style
============================ */

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

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

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

/* =========================
    9.0 Image Style
============================ */

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

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

.partner-image{
    max-width: 80%;
}

.team-image{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.testimonial__image-avatar img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.sidebar-logo img{
    width: 75%;
}

.footer-logo{
    width: 70%;
}

.blog-image{
    width: 35%;
    margin-right: 20px;
}

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

.blog-page-image img{
    width: 100%;
}

.single-post__featured-image{
    margin: 16px 40px;
}

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

.single-post__recent-image{
    width: 35%;
}

.single-post__recent-image img{
    width: auto;
    height: 100%;
}

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

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

.btn{
    padding: 15px 30px;
    outline: none;
    box-shadow: none;
    border-radius: 0px;
    transition: all 0.3s ease;
}

.btn-primary-accent{
    background-color: var(--primary);
    color: var(--accent-color-2);
    border: 1px solid var(--primary);
}

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

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

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

/* =========================
    11.0 Header Style
============================ */

.header-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1em 1em;
    z-index: 10;
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

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

.navbar-logo-container img{
    width: 65%;
}


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

.nav-item{
    padding: 0px 15px;
}

.nav-link{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: uppercase;
    padding: 0px !important;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover{
    color: var(--primary);
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show{
    color: var(--primary);
}

.dropdown-menu{
    padding: 15px 15px;
    border-radius: 0px;
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    min-width: 220px;
}

.dropdown-item{
    color: var(--accent-color-2);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    padding: 15px 15px;
    transition: all 0.3s ease;
}

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

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

.nav-btn{
    display: none;
    padding: 10px 10px;
    border-radius: 0px;
    background-color: var(--primary);
    color: var(--accent-color-2);
    box-shadow: none;
    outline: none;
    border: none;
}

.navbar-cta-container{
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 10px;
}
/* =========================
    12.0 Sidebar Style
============================ */


.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--accent-overlay);
    transition: left 0.4s ease-in-out;
    z-index: 11;
    display: none;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--accent-color-5);
    color: var(--accent-color-2);
    transition: transform 0.4s ease-in-out;
    z-index: 12;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
    display: none;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--primary);
    border-radius: 0px;
    color: var(--accent-color-2);
    font-size: 16px;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

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

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar-menu li {
    padding: 10px 15px 10px 15px;
}

.sidebar-menu a {
    color: var(--accent-color-2);
    text-decoration: none;
    display: block;
    border-radius: 5px;
    transition: 0.3s;
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.sidebar-menu a:focus {
    color: var(--primary);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: none;
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    padding: 3px 15px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    color: var(--primary);
    border: 1px solid var(--primary);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

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

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

.form-group{
    display: flex;
    flex-direction: column;
}

.form input,
.form textarea{
    background-color: var(--accent-color-transparent);
    border: 1px solid var(--accent-color-4);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
    color: var(--text-color);
    border-radius: 0px;
    padding: 15px 15px;
    width: 100%;
    box-shadow: none;
    outline: none;
}

.form label{
    color: var(--accent-color-2);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: uppercase;
}

#newsletter-form input{
    background-color: var(--text-color);
    color: var(--accent-color-4);
}

#newsletter-form input::placeholder{
    color: var(--accent-color-4);
}

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

.check-icon{
    color: green;
}

.cross-icon{
    color: red;
}

.hidden{
    display: none;
}

/* =========================
    14.0 Banner Home Style
============================ */

.banner-home__content-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: 100vh;
    width: 55%;
    height: 100%;
}

.banner-home__content-description{
    color: var(--accent-color);
    width: 65%;
}

.banner-home__contact-info-title{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
    color: var(--accent-color);
}

/* =========================
    15.0 Banner Page Style
============================ */

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

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

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

.page-header__breadcrumb a,
.page-header__breadcrumb .divider{
    font-weight: 400;
    line-height: 1.4em;
    color: var(--accent-color);
    text-transform: capitalize;
}

/* =========================
    16.0 About Style
============================ */

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

.about__content-image{
    background-image: url('../images/hero-images112s.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
}

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

.about__content-intro{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 6em 16em 0em 0em;
}

/* =========================
    17.0 Service Style
============================ */

.service__content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

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

.service__service-content-container{
    display: flex;
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
}

.service__service-content-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 2em 2em;
    background-color: var(--secondary);
    color: var(--accent-color-2);
}

.service__service-content-cta{
    color: var(--primary);
}

/* =========================
    18.0 Why choose us Style
============================ */

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

.whychooseus__content-intro{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8em 10em 8em 17.5em;
    color: var(--accent-color);
}

.whychooseus__content-divider{
    width: 90%;
    border-bottom: 1px solid var(--accent-color-4);
    margin: 15px 0px;
}

.whychooseus__content-image{
    width: 30%;
    background-image: url('../images/chooseus22123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

/* =========================
    19.0 Team Style
============================ */

.team__content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.team__content-heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.team__content-container{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* =========================
    20.0 Testimonial Style
============================ */

.testimonial__content-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.testimonial__content-image-container{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.testimonial__image-left-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-end;
}

.testimonial__image-right{
    width: 50%;
}

.testimonial__content-intro{
    width: 50%;
    height: 100%;
    background-color: var(--accent-color-3);
    color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4em 4em;
}

.testimonial__content-intro .spacer{
    height: 30px;
}

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

.testimonial__name{
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -1px;
}

.testimonial__designation{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
}

.testimonial-stat{
    font-family: var(--font-family-heading);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

/* ======================= 
    21.0 FAQ Style
==========================*/

.faq__content-wrapper{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.faq__content-image-container{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.faq__image-left-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: flex-end;
}

.faq__image-right{
    width: 50%;
}

.faq-stat{
    font-family: var(--font-family-heading);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

/* ======================= 
    22.0 Pricing Style
==========================*/

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

.pricing-price{
    font-family: var(--font-family-heading);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: -2px;
}

.pricing-detail{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
}

.card-pricing .divider{
    border-bottom: 1px solid var(--accent-color-2);
    margin: 15px 0px;
}


.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
    color: var(--accent-color-2);
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.pricing-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color-2);
    font-size: 14px;
    line-height: 1;
}

/* ======================= 
    23.0 Contact Style
==========================*/

.contact__container{
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.contact-info-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.contact-info-title{
    color: var(--primary);
    text-transform: uppercase;
}

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

/* ======================= 
    24.0 Page Notfound Style
==========================*/

.notfound__container{
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--accent-color);
}

.notfound__description{
    width: 65%;
    color: var(--accent-color-4);
}

/* ======================= 
   25.0 Blog Style
==========================*/

/* 25.1 Blog */

.blog__content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

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

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

.blog__grid-content.content-row{
    flex-direction: row;
    gap: 0px;
}

.blog__content-intro{
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.blog__content-intro-page{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.blog-link{
    font-family: var(--font-family-heading);
    letter-spacing: inherit;
    text-transform: none;
}

.blog-meta{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -1px;
    color: var(--text-color);
}

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

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

/* 25.2 Single Post */

.single-post__container{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

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

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

.single-post__sidebar{
    width: 30%;
}

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

.single-post__recent-list{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.single-post__recent-title{
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -1px;
    text-transform: capitalize;
}

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

/* ======================= 
   26.0 Footer Style
==========================*/

.footer-container{
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0px;
    position: relative;
    z-index: 2;
}

.footer-banner{
    padding: 1em 1em 6em 1em;
    background-color: var(--accent-color-2);
    color: var(--secondary);
}

.footer__content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.footer__content-card{
    background-color: var(--primary);
    color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 4em 4em;
    margin-top: -115px;
}

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

.footer__brand{
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-links-info{
    width: 65%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.footer__copyright{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em 1em;
}

.copyright-text{
    color: var(--accent-color-2);
    margin: 0;
    text-align: center;
}

/* ======================= 
   27.0 Accordion Style
==========================*/

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

.accordion-item{
    border: none;
}

.accordion-button{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 0px;
    border-radius: 0px !important;
    background-color: var(--accent-color-3);
    color: var(--accent-color-2);
    padding: 20px 20px;
}

.accordion-button:not(.collapsed){
    box-shadow: none;
    background-color: var(--primary);
    color: var(--accent-color-2);
}

/* ======================= 
   28.0 Icon Style
==========================*/

.banner-home__contact-icon{
    background-color: var(--primary);
    color: var(--accent-color-2);
    font-size: 23px;
    border-radius: 50%;
    display: inline-block;
    line-height: 1;
    text-align: center;
    padding: 0.5em;
}

.service__service-content-icon{
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary);
    color: var(--accent-color);
    padding: 20px;
    font-size: 30px;
}

.footer-icon{
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.footer-icon:hover{
    color: var(--primary);
}

/* ======================= 
   29.0 List Style
==========================*/

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

.footer-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: uppercase;
    color: var(--accent-color);
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.footer-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-size: 14px;
    line-height: 1;
}

.footer-list.zero-icon li{
    padding: 0px;
}

.footer-list.zero-icon li::before{
    content: "";
}
/* ======================= 
   30.0 Spacing Style
==========================*/

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

/* 30.2 Grid spacing (row-gap & column-gap) */

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