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

Project:        Rafaela - Bus Charter & Rental Company HTML Bootstrap Template
Version:        1.0
Description:    Rafaela is luxurious, and modern HTML Bootstrap Template for your charter
                bus rental company, shuttle bus, or other transportation company. It is fully
                responsive and fits on various displays and resolutions from regular desktop
                screens to tablets, and mobile Phone devices. It is super easy and no coding
                is required to make a complete website.
==============================================================================

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

1.0   Vendor Import
2.0   CSS Global Variables
      2.1  Color Variable
      2.2  Font Style Variable
      2.3  Animation Duration Preset
      2.4  Animation Delay Preset
3.0   Keyframe
4.0   Base & Reset
5.0   Section Style
6.0   Site Container Style
7.0   Heading Style
8.0   Header Style
9.0   Sidebar Style
10.0  Footer Style
11.0  Button Style
12.0  Card Style
13.0  Image Style
14.0  Color Style
15.0  Form Style
16.0  Banner Home Style
17.0  Banner Inner Style
18.0  Banner Notfound Style
19.0  Collection Style
20.0  About Style
21.0  How it Works Style
22.0  Why Choose Us Style
23.0  Pricing Style
24.0  Pricing Style
25.0  Contact Style
26.0  Blog Style
27.0  Single Post Style
28.0  Animation Preset
29.0  Custom Spacing
      29.1  Flex Gap
      29.2  Grid Gap

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

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

    --primary         : #051A1C          (Dark teal-black  — main text & foreground)
    --secondary       : #FFFFFF          (White            — page & card background)
    --text-color      : #4F5A5B          (Muted teal-gray  — body paragraph text)
    --accent-color    : #146EF5          (Bright blue      — primary brand accent, CTAs)
    --accent-color-2  : #F8F8F8          (Near white       — subtle section background)
    --accent-color-3  : #00000000        (Transparent      — ghost/zero-opacity base)
    --accent-color-4  : #E5E6E7          (Light gray       — borders & dividers)
    --accent-color-5  : #032042          (Deep navy        — dark surface & dark text)
    --accent-color-6  : #AEB3B7          (Cool gray        — muted/secondary text)
    --accent-color-7  : #D6D6D6          (Pale gray        — light border/divider)
    --accent-overlay  : #00000087        (Black 53%        — hero & modal dark overlay)

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

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

    Font Families
    --font-family-global  : "Inter Tight", sans-serif   (all text — body, headings, UI)

    Headings  (font-family: Inter Tight)
    h1 / .heading-xl   — 5rem    / weight 400 / line-height 1.2em
    h2 / .heading-lg   — 2.9rem  / weight 400 / line-height 1.2em
    h3 / .heading-md   — 1.75rem / weight 400 / line-height 1.2em
    h4 / .heading-sm   — 1.4rem  / weight 400 / line-height 1.2em
    h5 / .heading-xs   — 1.125rem / weight 500 / line-height 1.2em
    h6 / .heading-xxs  — 0.938rem / weight 400 / line-height 1.2em

    Body  (font-family: Inter Tight)
    body — 1rem / weight 400 / line-height 1.5em
    p    — 1rem / weight 400 / line-height 1.5em / margin: 0 / color: --text-color

    Interactive
    button / a / .btn / .nav-link / .dropdown-item
         — 1rem / weight 500 / line-height 1em / text-decoration: none / color: inherit

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

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

    Duration Presets  (defined in :root — 2.3)
    --anim-duration-fast    : 0.8s
    --anim-duration-normal  : 1.1s
    --anim-duration-slow    : 1.6s

    Delay Presets  (defined in :root — 2.4)
    --anim-delay-none  : 0s
    --anim-delay-sm    : 0.25s
    --anim-delay-md    : 0.45s

    Keyframes  (section 3.0)
    @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 28.0)
    .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

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

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

@import url('../css/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');

/*==================================================
  2.0 CSS Global Variables
==================================================*/

:root{
    /* 2.1 Color Variable */
    --primary: #051A1C;
    --secondary: #FFFFFF;
    --text-color: #4F5A5B;
    --accent-color: #146EF5;
    --accent-color-2: #F8F8F8;
    --accent-color-3: #00000000;
    --accent-color-4: #E5E6E7;
    --accent-color-5: #032042;
    --accent-color-6: #AEB3B7;
    --accent-color-7: #D6D6D6;
    --accent-overlay: #00000087;

    /* 2.2 Font Style Variable */
    --font-family-global: "Inter Tight", sans-serif;

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

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

/*==================================================
  3.0 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);} 
}

/*==================================================
  4.0 Base & Reset
==================================================*/

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

body{
    font-family: var(--font-family-global);
    font-size: 1rem;
    line-height: 1.5em;
}

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

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

h3,
.heading-md{
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2em;
}

h4,
.heading-sm{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2em;        
}

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

h6,
.heading-xxs{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0px;
}

button, a,
.btn, .nav-link,
.dropdown-item{
    font-size: 1rem;
    font-weight: 500;
    line-height: 1em;
    text-decoration: none;
    color: inherit;
}

p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    color: var(--text-color);
}

ul{
    list-style: none;
}

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

.section{
    padding: 6em 1em;
}

/*==================================================
 6.0 Site Container Style
==================================================*/

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

/*==================================================
 7.0 Heading Style
==================================================*/

.sub-heading{
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2em;
    color: var(--accent-color);
}

/*==================================================
 8.0 Header Style
==================================================*/

.navbar-container{
    background-color: var(--accent-color-2);
    padding: 1.2em 2em;
}

.navbar{
    padding: 0;
}

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

.navbar-logo-container{
    width: 25%;
}

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

.nav-link-container{
    width: 75%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.navbar-collapse{
    justify-content: flex-end;
}

.nav-btn{
    display: none;
    background-color: var(--accent-color-5);
    color: var(--secondary);
    box-shadow: 3px 3px 0px 0px var(--secondary);
    transition: all 0.3s ease;
    outline: none;
    width: max-content;
    padding: 10px;
    border-radius: 10px;
    border: none;
    width: 56px;
    font-size: 24px;
    justify-content: flex-end;
}

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

.navbar-nav .nav-link{
    color: var(--primary);
    transition: all 0.3s ease;
}

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

.navbar-nav .dropdown-menu{
    padding: 0;
    border-radius: 0px;
    min-width: 220px;
}

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

.navbar-nav .dropdown-item:hover{
    color: var(--secondary);
    background-color: var(--accent-color-5);
}

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

/*==================================================
 9.0 Sidebar Style
==================================================*/


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

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

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

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

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

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

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

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

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

.menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
}

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

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

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

}
.sidebar-dropdown-btn:hover {
    color: var(--accent-color-6);
}

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

/*==================================================
 10.0 Footer Style
==================================================*/

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

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

.footer__main{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.footer__nav{
    width: 38%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
}

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

.footer__nav-column.nav-page{
    width: 27%;
}

.footer__column-list{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.footer__column-list li{
    color: var(--text-color);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2em;
}

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

.footer__nav-column.nav-other .divider{
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--accent-color-4);
}

.footer__nav-column.nav-other .footer__column-list li:nth-child(3){
    padding-top: 8px;
}

.footer__nav-column.nav-other .footer__column-list li:nth-child(6){
    padding-bottom: 8px;
}

.footer__nav-column.nav-other{
    width: 32%;
}

.footer__nav-column.nav-social{
    width: 29%;
}

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

.footer__contact{
    width: 62%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

.footer__contact-columns{
    display: flex;
    gap: 20px;
}

.footer__contact-items{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__contact-item{
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer__contact-icon{
    width: 43px;
    height: 43px;
    font-size: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    background-color: var(--accent-color);
    color: var(--secondary);
}

.footer__cta{
    width: 58%;
    background-color: var(--accent-color-5);
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 12px;
    padding: 2em;
}

.footer__cta-content{
    display: flex;
    gap: 20px;
}

.footer__cta-icon{
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 30px;
    padding: 15px;
    border-radius: 15px;
}

.footer__cta-desc{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__cta-desc p{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--secondary);
}

.footer__bottom{
    width: 100%;
    padding-top: 1.2em;
    border-top: 1px solid var(--accent-color-4);
    display: flex;
    text-align: left;
}

/*==================================================
 11.0 Button Style
==================================================*/

.btn{
    padding: 13px 25px;
    border-radius: 5px;
    box-shadow: none;
    border: none;
    outline: none;
    width: max-content;
    transition: all 0.3s ease;
}

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

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

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

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

.contact__tab-btn.active{
    background-color: var(--primary);
    color: var(--secondary);
}

/*==================================================
 12.0 Card Style
==================================================*/

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

.pricing__card{
    background-color: var(--accent-color-5);
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 2em;
    width: auto;
    height: max-content;
}

/*==================================================
 13.0 Image Style
==================================================*/

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

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

.banner-home__desc-image img{
    width: 100%;
    height: 43vh;
    object-position: center right;
}

.collection__item-image img{
    width: 100%;
    height: 30vh;
    border-radius: 12px 12px 0px 0px;
}

.how-it-works__step-divider{
    width: 32%;
}

.how-it-works__step-divider img{
    width: 100%;
}

.why-choose-us__media-image{
    width: 45%;
}

.why-choose-us__media-image img{
    width: 100%;
    height: 59vh;
    object-position: top center;
    border-radius: 12px 0px 0px 12px;
}

.testimonial__media{
    width: 55%;
}

.testimonial__media img{
    width: 100%;
    height: 63vh;
    border-radius: 12px 0px 0px 12px;
}

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

.blog__item-image{
    width: 52%;
}

.blog__item-image img{
    width: 100%;
    height: 345px;
}

.single-post__media{
    width: 58%;
}

.single-post__media img{
    width: 100%;
    height: 35vh;
    border-radius: 12px;
}

.single-post__sidebar-item-image img{
    width: 151px;
    border-radius: 8px;
}

.footer__logo img{
    width: 17%;
}

/*==================================================
 14.0 Color Style
==================================================*/

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

/*==================================================
 15.0 Form Style
==================================================*/

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

.form input,
.form select,
.form textarea{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2em;
    padding: 13px 15px;
    border: 1px solid var(--accent-color-4);
    background-color: var(--accent-color-2);
    color: var(--primary);
    border-radius: 5px;
    box-shadow: none;
    outline: none;
}

.form label{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
}   

.contact__form-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alert {
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    align-items: center;
    text-align: center;
    padding: 2em;
    border-radius: 6px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    border: 1px solid var(--accent-color-12);
}

.hidden{
    display: none;
}

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

.banner-home{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 0px;
}

.banner-home__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0;
}

.banner-home__title-container{
    width: 70%;
    background-image: url('../images/bus-driver-pointing-at-wrist-watch-2025-03-13-12-20-32-utc.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 0px 0px 12px 0px;
    padding: 30em 1em 4em;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.banner-home__heading{
    width: 73%;
    margin: 0 auto;
}

.banner-home__title-container::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(9deg, var(--primary) 38%, var(--accent-color-3) 47%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: -1;
}

.banner-home__features-container{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.banner-home__features{
    padding: 2.5em;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-2);
    color: var(--primary);
}

.banner-home__feature-item{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2em;
}

/*==================================================
 17.0 Banner Inner Style
==================================================*/

.banner-inner{
    background-image: url('../images/intercity-passenger-bus-driving-on-highway-in-even-2024-12-06-00-46-24-utc.jpg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 18em 1em 12em;
}

.banner-inner__page-layout{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner-inner__excerpt{
    width: 33%;
    color: var(--primary);
}

/*==================================================
 18.0 Banner Notfound Style
==================================================*/

.banner-notfound{
    background-image: url('../images/buses-parking-lot-2025-01-27-11-07-33-utc.jpg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 18em 1em;
    color: var(--secondary);
    position: relative;
    z-index: 1;
}

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

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

.banner-notfound__excerpt{
    width: 33%;
    color: var(--secondary);
}

/*==================================================
 19.0 Collection Style
==================================================*/

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

.collection__page-layout{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.collection__header{
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.collection__item{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.collection__item-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--accent-color-7);
    padding: 1.5em;
    border-radius: 0px 0px 12px 12px;
}

.collection__item-content .divider{
    width: 100%;
    border-bottom: 1px solid var(--accent-color-4);
}

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

.collection__item-stat{
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.collection__item-stats .collection__item-stat:nth-child(even){
    width: 35%;
    border-width: 0px 1px 0px 1px;
    border-style: solid;
    border-color: var(--accent-color-4);
}

.collection__item-stat-value{
    color: var(--accent-color);
}

.collection__footer{
    display: flex;
    gap: 10px;
    align-items: center;
}
.collection__footer-text{
    font-size: 1rem;
    font-weight: 500;
}

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

/*==================================================
 20.0 About Style
==================================================*/

.about__page-layout{
    display: flex;
    gap: 30px;
    width: 97.752%;
    margin: 0 auto;
}

.about__media{
    width: 60%;
    background-image: url('../images/public-transportation-bus-driver-profession-2025-03-15-01-04-30-utc.jpg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-radius: 12px;
    padding: 2.5em;
}

.about__media-stats{
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-evenly;
    padding-bottom: 1em;
}

.about__media-stat{
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about__media-stat-value{
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    gap: 0;
}

.about__media-stat-label{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
}

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

.about__media-caption-title{
    color: var(--secondary);
}

.about__media-caption-text{
    color: var(--secondary);
}

.about__content{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding-top: 1em;
}

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

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

.about__content-description .divider{
    margin: 8px 0;
    border-bottom: 1px solid var(--accent-color-4);
}

.about__counter{
    display: flex;
    gap: 18px;
    align-items: flex-end;
}

.about__counter-value{
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-6);
    display: flex;
    align-items: center;
    gap: 0;
}

/*==================================================
 21.0 How it Works Style
==================================================*/

.how-it-works__page-layout{
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 4em 3em;
    background-color: var(--accent-color-5);
    color: var(--secondary);
    border-radius: 12px;
}

.how-it-works__header{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.how-it-works__steps{
    display: flex;
    gap: 10px;
    align-items: center;
}

.how-it-works__step{
    width: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.how-it-works__step-icon{
    width: 19%;
    border-radius: 18px;
    padding: 1em;
    background-color: var(--accent-color);
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.how-it-works__cta{
    width: 11%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*==================================================
 22.0 Why Choose Us Style
==================================================*/

.why-choose-us{
    padding: 6em 0;
    background-color: var(--accent-color-2);
    position: relative;
    overflow: hidden;
}

.why-choose-us__page-layout{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.why-choose-us__title{
    width: 76%;
}

.why-choose-us__content{
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0em 1em;
    position: relative;
    z-index: 1;
}

.why-choose-us__content::before{
    content: '';
    position: absolute;
    top: 0;
    left: calc(23% + 20px);
    background-color: var(--primary);
    width: calc(50vw + 50% - 23% - 20px);
    height: 100%;
    z-index: -1;
}

.why-choose-us__sidebar{
    width: 23%;
    display: flex;
    flex-direction: column;
    gap: 20%;
    justify-content: space-between;
    padding: 1em 0em;
}

.why-choose-us__media-panel{
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-evenly;
    padding: 2.5em 2em 2.6em;
    color: var(--secondary);
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.why-choose-us__media-panel::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary);
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

.why-choose-us__media-panel .spacer{
    height: 95px;
}

.why-choose-us__media-panel-item{
    display: flex;
    gap: 12px;
    align-items: center;
}

.why-choose-us__media-panel-icon{
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: var(--accent-color);
    color: var(--secondary);
    border-radius: 50%;
}

.why-choose-us__media-panel-text{
    color: var(--secondary);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2em;
}

/*==================================================
 23.0 Pricing Style
==================================================*/

.pricing__page-layout{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

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

.pricing__title-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 2em;
}

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

.pricing__feature{
    width: 85%;
    display: flex;
    gap: 25px;
}

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

.pricing__feature-icon{
    width: 61px;
    height: 61px;
    background-color: var(--accent-color);
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 37px;
    border-radius: 10%;
    aspect-ratio: 1/1;
}

.pricing__feature-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.pricing__card-icon{
    width: 52px;
    height: 52px;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
}

.pricing__card-price{
    background-color: var(--secondary);
    color: var(--primary);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2em;
    width: max-content;
    margin: 8px 0px 16px;
}

.pricing__card-price-unit{
    font-size: 0.938rem;
}

.pricing__card .spacer{
    height: 9px;
}

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

.pricing__card-list li{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing__card-list li::before{
    content: "\f111";
    font-family: "Font Awesome 7 Free";
    font-weight: 700;
    color: var(--secondary);
    margin-right: 1em;
    font-size: 0.375rem;
    display: inline-block;
}

/*==================================================
 24.0 Pricing Style
==================================================*/

.testimonial{
    padding: 6em 0;
    background-color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial__page-layout{
    padding: 0em 1em;
    position: relative;
    z-index: 1;
}

.testimonial__page-layout::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(270deg, var(--accent-color-5) 55%, var(--accent-color-3) 0%);
    width: 100%;
    z-index: -1;
}

.testimonial__page-wrapper{
    display: flex;
    flex-direction: row;
    gap: 30px;
    
}

.testimonial__content{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 3em 1em;
    color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial__content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--accent-color-5);
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

.testimonial__content .spacer{
    height: 24px;
}

.testimonial__slider{
    padding-top: 60px;
    width: 100%;
}

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

.testimonial__slide-rating{
    color: var(--accent-color);
    display: flex;
    gap: 6px;
    align-items: center;
}

.testimonial__slide-text{
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--secondary);
}

.testimonial__slide-footer{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
}

.testimonial__slide-author{
    display: flex;
    gap: 20px;
    align-items: center;
}

.testimonial__slide-author-info{
    display: flex;
    flex-direction: column;
}

.testimonial__slide-quote-icon{
    font-size: 45px;
}

/*==================================================
 25.0 Contact Style
==================================================*/

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

.contact__page-layout{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

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

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

.contact__tab-btn{
    width: 100%;
}

.contact__panels{
    gap: 20px;
    border-radius: 12px;
    padding: 1em;
    background-color: var(--secondary);
    color: var(--primary);
}

.contact__tab-content{
    display: flex;
    gap: 20px;
}

.contact__form-wrapper{
    width: 51%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 2em;
}

.contact__media{
    width: 48%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
}

.contact__media.professional-charter{
    background-image: url('../images/happy-driver-driving-intercity-bus-2025-10-12-03-03-19-utc.jpg');
}

.contact__media.exclusive-charter{
    background-image: url('../images/parked-bus-2025-01-28-02-28-12-utc.jpg');
}

.contact__media .spacer{
    height: 527px;
}

/*==================================================
 26.0 Blog Style
==================================================*/

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

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

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

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

.blog__list{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.blog__item{
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: row;
    gap: 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--accent-color-4)
}

.blog__item-content{
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    padding: 0px 30px;
}

.blog__item-meta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1em;
    color: var(--accent-color);
}

/*==================================================
 27.0 Single Post Style
==================================================*/

.single-post{
    padding: 6em 1em 4em;
}

.single-post__page-layout{
    display: flex;
    gap: 35px;
}

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

.single-post__media-block{
    display: flex;
    gap: 20px;
}

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

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

.single-post__sidebar-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-2);
    padding: 1em;
    border-radius: 12px;
}

.single-post__sidebar-item{
    display: flex;
    gap: 15px;
    align-items: center;
}

.single-post__sidebar-item-content{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.single-post__sidebar-item-date{
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--accent-color-5);
}

.single-post__sidebar-item-title{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
}

/*==================================================
 28.0 Animation Preset
==================================================*/


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

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

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

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

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

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

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

/*==================================================
 29.0 Custom Spacing
==================================================*/

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

/* 29.2 Grid 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;
}