/*==================================
        Google Font
==================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/*==================================
        Root Variables
==================================*/
a {
    list-style: none !important;
    text-decoration: none !important;
}

section {
    padding: 4rem 0rem;
}

:root {

    /* Primary Colors */

    --sf-primary: #16A34A;
    --sf-primary-dark: #15803D;
    --sf-primary-light: #DCFCE7;

    /* Secondary */

    --sf-secondary: #0F172A;

    /* Background */

    --sf-white: #FFFFFF;
    --sf-body: #F8FAFC;
    --sf-section: #F5F7FA;
    --sf-card: #FFFFFF;

    /* Text */

    --sf-heading: #111827;
    --sf-text: #475569;
    --sf-light-text: #64748B;

    /* Border */

    --sf-border: #E5E7EB;
    --sf-border-light: #EEF2F7;

    /* Hover */

    --sf-hover: #22C55E;

    /* Shadow */

    --sf-shadow:
        0 .8rem 2.5rem rgba(15, 23, 42, .08);

    --sf-shadow-lg:
        0 2rem 5rem rgba(15, 23, 42, .10);

    /* Radius */

    --sf-radius-sm: .6rem;
    --sf-radius: 1rem;
    --sf-radius-lg: 1.6rem;
    --sf-radius-xl: 2rem;

    /* Transition */

    --sf-transition: .35s ease;

}


/* header */
.logo a img {
    width: 150px;
}

.header {
    background-color: white;
    box-shadow: var(--sf-shadow);
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    padding: 15px;
}

.header .item-left {
    flex: 0 0 12%;
}

.header .logo a {
    font-size: 30px;
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}

.header .item-center {
    flex: 0 0 59%;
}

.header .item-right {
    flex: 0 0 28%;
}

.header .menu>ul>li {
    display: inline-block;
    line-height: 50px;
    margin-left: 16.3px;
}

.header .menu>ul>li>a {
    font-size: 14.5px;
    font-weight: 500;
    color: #000000;
    position: relative;
    text-transform: capitalize;
    transition: color 0.3s ease;
}

.header .menu>ul>li .sub-menu {
    position: absolute;
    z-index: 500;
    background-color: #ffffff;
    box-shadow: -2px 2px 70px -25px rgba(0, 0, 0, 0.3);
    padding: 10px;
    transition: all 0.5s ease;
    margin-top: 25px;
    opacity: 0;
    visibility: hidden;
}

@media(min-width: 992px) {
    .header .menu>ul>li.menu-item-has-children:hover .sub-menu {
        margin-top: 0;
        visibility: visible;
        opacity: 1;
    }
}

.header .menu>ul>li .sub-menu>ul>li {
    line-height: 1;
}

.header .menu>ul>li .sub-menu>ul>li>a {
    display: inline-block;
    padding: 6px 0;
    font-size: 15px;
    color: #555555;
    transition: color 0.3s ease;
    text-decoration: none;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.header .menu>ul>li .single-column-menu {
    min-width: 280px;
    max-width: 350px;
}

.header .menu>ul>li .sub-menu.mega-menu>.list-item>ul>li {
    line-height: 1;
    display: block;
}

.header .menu>ul>li .sub-menu.mega-menu>.list-item>ul>li>a {
    padding: 10px 0;
    display: inline-block;
    font-size: 15px;
    color: #555555;
    transition: color 0.3s ease;
}

.header .menu>ul>li .sub-menu.mega-menu {
    left: 50%;
    transform: translateX(-50%);
}

.header .menu>ul>li .sub-menu.mega-menu-column-4 {
    max-width: 1100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 15px;
}

.header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item {
    flex: 0 0 25%;
    padding: 0 15px;
}

.header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item .title {
    font-size: 16px;
    color: var(--sf-primary);
    font-weight: 500;
    line-height: 1;
    padding: 10px 0;
}

.header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item.text-center .title {
    text-align: center;
}

.header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item img {
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    margin-top: 10px;
    height: 300px;
    object-fit: cover;
}

.header .menu>ul>li .sub-menu.mega-menu>.list-item>ul>li>a:hover,
.header .menu>ul>li .sub-menu>ul>li>a:hover,
.header .item-right a:hover,
.header .menu>ul>li:hover>a {
    color: var(--sf-primary);
}

/* banner section */
.banner-section {
    background-image: url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 100%;
    display: block;
}

.mobile-menu-head,
.mobile-menu-trigger {
    display: none;
}

/*responsive*/
@media(max-width: 991px) {

    .header .item-center {
        order: 3;
        flex: 0 0 100%;
    }

    .v-center {
        justify-content: space-between;
    }

    .header .mobile-menu-trigger {
        display: flex;
        height: 30px;
        width: 30px;
        margin-left: 15px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .header .mobile-menu-trigger span {
        display: block;
        height: 2px;
        background-color: #333333;
        width: 24px;
        position: relative;
    }

    .header .mobile-menu-trigger span:before,
    .header .mobile-menu-trigger span:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333333;
    }

    .header .mobile-menu-trigger span:before {
        top: -6px;
    }

    .header .mobile-menu-trigger span:after {
        top: 6px;
    }

    .header .item-right {
        flex: 0 0 9% !important;
    }

    .header .menu {
        position: fixed;
        width: 320px;
        background-color: #ffffff;
        left: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
        transform: translate(-100%);
        transition: all 0.5s ease;
        z-index: 1099;
    }

    .header .menu.active {
        transform: translate(0%);
    }

    .header .menu>ul>li {
        line-height: 1;
        margin: 0;
        display: block;
    }

    .header .menu>ul>li>a {
        line-height: 50px;
        height: 50px;
        padding: 0 50px 0 15px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .header .menu>ul>li>a i {
        position: absolute;
        height: 50px;
        width: 50px;
        top: 0;
        right: 0;
        text-align: center;
        line-height: 50px;
        transform: rotate(-90deg);
    }

    .header .menu .mobile-menu-head {
        display: flex;
        height: 50px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 501;
        position: sticky;
        background-color: #ffffff;
        top: 0;
    }

    .header .menu .mobile-menu-head .go-back {
        height: 50px;
        width: 50px;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        color: #000000;
        font-size: 16px;
        display: none;
    }

    .header .menu .mobile-menu-head.active .go-back {
        display: block;
    }

    .header .menu .mobile-menu-head .current-menu-title {
        font-size: 15px;
        font-weight: 500;
        color: #000000;
    }

    .header .menu .mobile-menu-head .mobile-menu-close {
        height: 50px;
        width: 50px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        line-height: 50px;
        text-align: center;
        color: #000000;
        font-size: 25px;
    }

    .header .menu .menu-main {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-left: 0px;
    }

    .header .menu>ul>li .sub-menu.mega-menu,
    .header .menu>ul>li .sub-menu {
        visibility: visible;
        opacity: 1;
        position: absolute;
        box-shadow: none;
        margin: 0;
        padding: 15px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 65px;
        max-width: none;
        min-width: auto;
        display: none;
        transform: translateX(0%);
        overflow-y: auto;
    }

    .header .menu>ul>li .sub-menu.active {
        display: block;
    }

    @keyframes slideLeft {
        0% {
            opacity: 0;
            transform: translateX(100%);
        }

        100% {
            opacity: 1;
            transform: translateX(0%);
        }
    }

    @keyframes slideRight {
        0% {
            opacity: 1;
            transform: translateX(0%);
        }

        100% {
            opacity: 0;
            transform: translateX(100%);
        }
    }

    .header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item img {
        margin-top: 0;
    }

    .header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item.text-center .title {
        margin-bottom: 20px;
    }

    .header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item.text-center:last-child .title {
        margin-bottom: 0px;
    }

    .header .menu>ul>li .sub-menu.mega-menu-column-4>.list-item {
        flex: 0 0 100%;
        padding: 0px;
    }

    .header .menu>ul>li .sub-menu>ul>li>a,
    .header .menu>ul>li .sub-menu.mega-menu>.list-item>ul>li>a {
        display: block;
    }

    .header .menu>ul>li .sub-menu.mega-menu>.list-item>ul {
        margin-bottom: 15px;
    }

    .menu-overlay {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1098;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s ease;
    }

    .menu-overlay.active {
        visibility: visible;
        opacity: 1;
    }
}

.main-bg {
    background-image: url(../images/bg-img.webp);
    background-position: center;
    background-size: cover;
    margin-top: 5.9rem;
}

.about-bg {
    background-image: url(../images/about-bg.jpg);
    background-position: center;
    background-size: cover;
    margin-top: 5.9rem;
}

.pricing-bg {
    background-image: url(../images/pricing-bg.jpg);
    background-position: center;
    padding: 7rem 0rem;
    background-size: cover;
    margin-top: 4.5rem;
}

.fleet-bg {
    background-image: url(../images/Custom-bg.jpg);
    background-position: center;
    background-size: cover;
    margin-top: 5.9rem;
}

#corporate {
    background-image: url(../images/corporate-bg.png);
    background-position: center;
    background-size: cover;
}

#events {
    background-image: url(../images/Events-bg.jpg);
    width: 100%;
}

#wedding {
    background-image: url(../images/wedding-bg.png);
    width: 100%;
}

/*==================================
Hero Section
==================================*/

.sprHeroSec {
    position: relative;
    overflow: hidden;
    padding: 14rem 0 8rem;
    background: var(--sf-white);
}

.sprHeroSec::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .95) 45%,
            rgba(255, 255, 255, .65) 65%,
            rgba(255, 255, 255, 0) 100%);

    z-index: 1;
}

.sprHeroContent {
    position: relative;
    z-index: 2;
    max-width: 58rem;
    text-align: left;
}

/*=========================
Badge
=========================*/

.sprHeroTag {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.8rem;
    border-radius: 5rem;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

/*=========================
Heading
=========================*/

.sprHeroTitle {
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.sprHeroContent spam {
    color: var(--sf-primary);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1.3rem;
}

.sprHeroTitle span {
    color: var(--sf-primary);
}

/*=========================
Description
=========================*/

.sprHeroText {
    font-size: 1.1rem;
    text-align: left;
    width: 600px;
    color: var(--sf-text);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/*=========================
Buttons
=========================*/

.sprHeroBtns {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.sprHeroBtn {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 0.6rem;
    background-color: var(--sf-body);
    border: 2px solid var(--sf-primary);
    border-radius: 10px;
    font-weight: 600;
}

.sprHeroBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
}

.sprHeroBtnTwo {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 0.6rem;
    background-color: var(--sf-body);
    border: 2px solid gray;
    border-radius: 10px;
    font-weight: 600;
}

.call i {
    color: var(--sf-primary);
    font-weight: normal;
}

.whatsapp i {
    color: var(--sf-primary);
    font-weight: normal;
}

.sprHeroBtnTwo:hover {
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

/*=========================
Image
=========================*/

.sprHeroImg {
    position: relative;
    z-index: 2;
}

.sprHeroImg img {
    width: 100%;
    border-radius: var(--sf-radius-xl);
}

/*=========================
Feature Cards
=========================*/

.sprHeroCounter {
    margin-top: 2rem;
}

.sprHeroCard {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--sf-card);
    border: .1rem solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    padding: 1.1rem;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    height: 100%;
}

.sprHeroCard:hover {
    transform: translateY(-.5rem);
    box-shadow: var(--sf-shadow-lg);
}

.sprHeroIcon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--sf-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary);
    font-size: 1.5rem;
}

.sprHeroCard h3 {
    font-size: 1.3rem;
    color: var(--sf-heading);
    font-weight: 700;
    margin: 0;
}

.sprHeroCard p {
    margin: .4rem 0 0;
    color: var(--sf-light-text);
    font-size: 0.8rem;
}

/*=========================
Responsive
=========================*/

@media(max-width:991.98rem) {
    .sprHeroSec {
        padding: 12rem 0 6rem;
    }

    .sprHeroImg {
        margin-top: 4rem;
    }

}

@media(max-width:767.98rem) {
    .sprHeroSec {
        padding: 10rem 0 5rem;
    }

    .sprHeroText {
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    .sprHeroBtns {
        flex-direction: column;
    }

    .sprHeroBtn,
    .sprHeroBtnTwo {
        width: 100%;
    }

    .header {
        padding: 10px 0px;
    }
}


/*=========================
Header Default
=========================*/

.sprHdHeader {
    transition: all .4s ease;
}

/*=========================
Scroll Active
=========================*/

.sprHdHeader.sprHdScroll {
    background: var(--sf-card);
    box-shadow: var(--sf-shadow);
    animation: sprHeaderDown .4s ease;
}

/*=========================
Animation
=========================*/

@keyframes sprHeaderDown {

    0% {
        opacity: 0;
        transform: translateY(-2rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

@media screen and (max-width: 500px) {
    .sprHeroTitle {
        font-size: 2.3rem !important;
        line-height: 3rem;
    }

    .sprCtaWrapper {
        padding: 1.5rem !important;
    }

    .sprHeroText {
        width: 100% !important;
        text-align: center !important;
    }

    #local-city {
        text-align: left !important;
        margin-bottom: 1.5rem;
    }

    .sprCtaTitle {
        font-size: 2rem !important;
    }

    .main-bg {
        margin-top: 4.3rem !important;
    }

    .header .item-right {
        flex: 0 0 15% !important;
    }


    .logo a img {
        width: 140px !important;
    }

    .sfEventIcons {
        top: 21.7rem !important;
    }

    .sprHeaderMenu li a.active::after {
        bottom: -0.2rem !important;
    }

    .sfAirportHero {
        margin-top: 4.5rem !important;
    }

    .slick-dots {
        margin-top: 1rem !important;
    }

    .fleet-bg {
        margin-top: 4.4rem !important;
    }

    .about-bg {
        margin-top: 4.4rem !important;
    }
}


/*==================================
Heading
==================================*/

.sprCmpTag {
    display: inline-block;
    color: var(--sf-primary);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .15rem;
    margin-bottom: 1rem;
}

.sprCmpTitle {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sf-heading);
    margin-bottom: 1rem;
}

.sprCmpText {
    font-size: 1.4rem;
    color: var(--sf-light-text);
    margin-bottom: 5rem;
}

/*==================================
Wrapper
==================================*/

.sprCmpWrapper {
    position: relative;
}

/*==================================
Cards
==================================*/

.sprCmpCard {
    background: var(--sf-card);
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    padding: 1.7rem;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    height: 100%;
}

.sprCmpCard:hover {
    transform: translateY(-.6rem);
    box-shadow: var(--sf-shadow-lg);
}

/*==================================
Card Title
==================================*/

.sprCmpCard h4 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2.8rem;
}

.sprCmpCardLeft h4 {
    color: #ef4444;
}

.sprCmpCardRight h4 {
    color: var(--sf-primary);
}

/*==================================
List
==================================*/

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

.sprCmpList li {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.1rem;
    color: var(--sf-text);
    line-height: 1.7;
}

.sprCmpList li:last-child {
    margin-bottom: 0;
}

/*==================================
Icons
==================================*/

.sprCmpCardLeft li i {
    color: #ef4444;
    font-size: 2rem;
    flex-shrink: 0;
}

.sprCmpCardRight li i {
    color: var(--sf-primary);
    font-size: 2rem;
    flex-shrink: 0;
}

/*==================================
Center Arrow
==================================*/

.sprCmpMiddle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sprCmpArrow {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: var(--sf-white);
    border: .1rem solid var(--sf-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sprCmpArrow:hover {
    background: var(--sf-primary);
    border-color: var(--sf-primary);
    transform: scale(1.08);
}

.sprCmpArrow i {
    font-size: 2rem;
    color: var(--sf-heading);
    transition: var(--sf-transition);
}

.sprCmpArrow:hover i {
    color: var(--sf-white);
}

/*==================================
Tools Section
==================================*/

.sprToolSec {
    padding: 8rem 0;
    background: var(--sf-white);
    position: relative;
    overflow: hidden;
}

/*==================================
Heading
==================================*/

.sprToolTag {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .15rem;
    color: var(--sf-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.sprToolTitle {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1.2;
    margin-bottom: 1rem;
}

/*==================================
Card
==================================*/

.sprToolCard {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.4rem;
    background: var(--sf-card);
    border: .1rem solid var(--sf-border-light);
    border-radius: var(--sf-radius-lg);
    transition: var(--sf-transition);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}


.sprToolCard:hover {
    transform: translateY(-.6rem);
    border-color: transparent;
    box-shadow: var(--sf-shadow-lg);
}

.sprToolCard:hover::before {
    height: 100%;
}

/*==================================
Icon
==================================*/

.sprToolIcon {
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: var(--sf-transition);
}

/* Green */

.sprToolGreen {
    background: #dcfce7;
    color: #16a34a;
}

/* Purple */

.sprToolPurple {
    background: #ede9fe;
    color: #6d28d9;
}

/* Orange */

.sprToolOrange {
    background: #ffedd5;
    color: #ea580c;
}

/* Blue */

.sprToolBlue {
    background: #dbeafe;
    color: #2563eb;
}

.sprToolCard:hover .sprToolIcon {
    transform: rotateY(180deg);
}

/*==================================
Content
==================================*/

.sprToolContent {
    flex: 1;
}

.sprToolContent h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sf-heading);
    margin-bottom: 1rem;
}

.sprToolContent p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--sf-light-text);
    margin: 0;
}

/*==================================
Card Glow
==================================*/

.sprToolCard:hover .sprToolContent h4 {
    color: var(--sf-primary);
}

/*==================================
Smooth Animation
==================================*/

.sprToolCard,
.sprToolIcon,
.sprToolContent h4 {
    transition: var(--sf-transition);
}


/*==================================
Flow Section
==================================*/

.sprFlowSec {
    padding: 8rem 0;
    background: var(--sf-white);
    position: relative;
    overflow: hidden;
}

/*==================================
Heading
==================================*/

.sprFlowTag {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sf-primary);
    letter-spacing: .12rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.sprFlowTitle {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sf-heading);
    margin-bottom: 5rem;
    line-height: 1.2;
}

/*==================================
Wrapper
==================================*/

.sprFlowWrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

/*==================================
Item
==================================*/

.sprFlowItem {
    width: 6.7rem;
    flex-shrink: 0;
    text-align: center;
    transition: var(--sf-transition);
}

/*==================================
Icon
==================================*/

.sprFlowIcon {
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 auto 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 2rem;
    border: .1rem solid rgba(22, 163, 74, .12);
    transition: var(--sf-transition);
    box-shadow: var(--sf-shadow);
}

.sprFlowItem:hover .sprFlowIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: translateY(-.6rem) rotate(8deg);
}

/*==================================
Title
==================================*/

.sprFlowItem h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1.6;
    margin: 0;
}

/*==================================
Arrow
==================================*/

.sprFlowArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    color: var(--sf-light-text);
    flex-shrink: 0;
}

.sprFlowArrow i {
    font-size: 2.2rem;
    transition: var(--sf-transition);
}

.sprFlowItem:hover+.sprFlowArrow i {
    color: var(--sf-primary);
    transform: translateX(.6rem);
}

/*==================================
Hover
==================================*/

.sprFlowItem:hover h5 {
    color: var(--sf-primary);
}

/*==================================
Animation
==================================*/

.sprFlowItem,
.sprFlowIcon,
.sprFlowArrow i,
.sprFlowItem h5 {
    transition: var(--sf-transition);
}

@media (max-width:48rem) {

    .sprFlowScroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sprFlowScroll::-webkit-scrollbar {
        display: none;
    }

    .sprFlowWrap {
        width: max-content;
        display: flex;
        flex-wrap: nowrap;
        gap: 1.6rem;
    }

    .sprFlowItem {
        width: 8rem;
        flex-shrink: 0;
    }

    .sprFlowArrow {
        width: 3rem;
        flex-shrink: 0;
    }

}

.Features-list {
    padding-left: 0px;
    list-style: none;
    text-decoration: none;
}

.Features-list li a {
    font-size: 1rem !important;
}

/*==================================
Website Audit Section
==================================*/

.sprAuditSec {
    padding: 8rem 0;
    background: var(--sf-white);
}

/*==================================
Wrapper
==================================*/

.sprAuditWrapper {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: var(--sf-radius-xl);
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
    box-shadow: var(--sf-shadow-lg);
}

.sprAuditWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at right top,
            rgba(22, 163, 74, .15),
            transparent 45%);
    pointer-events: none;
}

/*==================================
Left Image
==================================*/

.sprAuditImage {
    position: relative;
    z-index: 2;
}

.sprAuditImage img {
    width: 100%;
    display: block;
}

/*==================================
Content
==================================*/

.sprAuditContent {
    position: relative;
    z-index: 2;
}

.sprAuditTag {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sf-primary);
    text-transform: uppercase;
    letter-spacing: .12rem;
    margin-bottom: 1.2rem;
}

.sprAuditTitle {
    color: var(--sf-white);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.6rem;
}

.sprAuditTitle span {
    color: var(--sf-primary);
}

.sprAuditText {
    color: rgba(255, 255, 255, .72);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.6rem;
}

/*==================================
Checklist
==================================*/

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

.sprAuditList li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--sf-white);
    font-size: 1.1rem;
}

.sprAuditList li i {
    color: var(--sf-primary);
    font-size: 2rem;
}

/*==================================
CTA Card
==================================*/

.sprAuditCard {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(1rem);
    border-radius: var(--sf-radius-lg);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 2;
    transition: var(--sf-transition);
}

.sprAuditCard:hover {
    transform: translateY(-.6rem);
    box-shadow: var(--sf-shadow-lg);
}

/*==================================
Icon
==================================*/

.sprAuditCardIcon {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 3rem;
}

.sprAuditCard h3 {
    color: var(--sf-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.sprAuditCard p {
    color: var(--sf-light-text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

/*==================================
Button
==================================*/

.sprAuditBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    height: 5.4rem;
    border-radius: var(--sf-radius);
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1.1rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sprAuditBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
}

.sprAuditBtn i {
    font-size: 1.3rem;
}

/*==================================
Business Types Section
==================================*/

.sprBizSec {
    padding: 6rem 0;
    background: var(--sf-white);
    overflow: hidden;
}

/*==================================
Heading
==================================*/

.sprBizTag {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sf-primary);
    text-transform: uppercase;
    letter-spacing: .12rem;
    margin-bottom: 4rem;
}

/*==================================
Scroll Wrapper
==================================*/

.sprBizScroll {
    width: 100%;
}

/*==================================
Items Wrapper
==================================*/

.sprBizWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/*==================================
Business Item
==================================*/

.sprBizItem {
    width: 12.3rem;
    flex-shrink: 0;
    text-align: center;
    transition: var(--sf-transition);
    cursor: pointer;
}

/*==================================
Icon
==================================*/

.sprBizIcon {
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sf-heading);
    background: transparent;
    transition: var(--sf-transition);
}

.sprBizItem:hover .sprBizIcon {
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    transform: translateY(-.5rem);
}

/*==================================
Title
==================================*/

.sprBizItem h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1.5;
    transition: var(--sf-transition);
}

.sprBizItem:hover h4 {
    color: var(--sf-primary);
}

/*==================================
Divider
==================================*/

.sprBizDivider {
    width: .1rem;
    height: 5.5rem;
    background: var(--sf-border);
    flex-shrink: 0;
}

/*==================================
Animation
==================================*/

.sprBizItem,
.sprBizIcon,
.sprBizItem h4 {
    transition: var(--sf-transition);
}

/*==================================
CTA Section
==================================*/

.sprCtaSec {
    padding: 8rem 0;
    background: var(--sf-white);
}

.sprCtaWrapper {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    padding: 2.1rem;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    overflow: hidden;
    position: relative;
}

.sprCtaWrapper:hover {
    box-shadow: var(--sf-shadow-lg);
}

.sprCtaWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at right top,
            rgba(22, 163, 74, .08),
            transparent 45%);
    pointer-events: none;
}

/*==================================
Image
==================================*/

.sprCtaImg {
    position: relative;
    z-index: 2;
}

.sprCtaImg img {
    width: 100%;
    display: block;
}

/*==================================
Content
==================================*/

.sprCtaContent {
    position: relative;
    z-index: 2;
}

.sprCtaTitle {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sf-heading);
    margin-bottom: 1.8rem;
}

.sprCtaTitle span {
    color: var(--sf-primary);
}

.sprCtaText {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--sf-light-text);
    max-width: 48rem;
}

/*==================================
Right Side
==================================*/

.sprCtaRight {
    position: relative;
    z-index: 2;
}

/*==================================
Buttons
==================================*/

.sprCtaBtns {
    display: flex;
    gap: 1.6rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.sprCtaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 5.4rem;
    padding: 0 2.6rem;
    background: var(--sf-primary);
    color: var(--sf-white);
    border-radius: var(--sf-radius);
    font-size: 1.6rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sprCtaBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
    transform: translateY(-.3rem);
}

.sprCtaBtnTwo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 5.4rem;
    padding: 0 2.6rem;
    background: var(--sf-white);
    color: var(--sf-heading);
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius);
    font-size: 1.6rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sprCtaBtnTwo:hover {
    border-color: var(--sf-primary);
    color: var(--sf-primary);
}

/*==================================
Bottom List
==================================*/

.sprCtaList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sprCtaList li {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1rem;
    color: var(--sf-light-text);
    font-weight: 500;
}

.sprCtaList li i {
    color: var(--sf-primary);
    font-size: 1.8rem;

}

/*==================================
Animation
==================================*/

.sprCtaBtn,
.sprCtaBtnTwo,
.sprCtaWrapper,
.sprCtaImg img {

    transition: var(--sf-transition);

}

.sprCtaImg img:hover {
    transform: scale(1.03);
}

.sprCtaImg img {
    border-radius: 15px;
}


.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    background: #fff;
    border: none;
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #222;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: var(--sf-primary-light);
    color: var(--sf-primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #fafafa;
    transition: all 0.4s ease;
    padding: 0 20px;
    line-height: 1.6;
    color: #555;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 15px 20px;
}

.faq-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.footer-bg {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 1.5rem;
}

.list-item h1 {
    font-size: 1.2rem;
    color: var(--sf-body);
}

/*==================================
Footer
==================================*/
.sprFtSec {
    position: relative;
    overflow: hidden;
    padding: 7rem 0 0;
    background: #08111f;
    background-image:
        radial-gradient(circle at top right,
            rgba(22, 163, 74, .08),
            transparent 40%);
}

/*==================================
Top Border
==================================*/
.sprFtSec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .1rem;
    background: rgba(255, 255, 255, .08);
}

/*==================================
Logo
==================================*/
.sprFtLogo {
    margin-bottom: 2rem;
}

.sprFtLogo img {
    max-width: 18rem;
    display: block;
}

/*==================================
About
==================================*/
.sprFtAbout {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 2.5rem;
}

/*==================================
Social Icons
==================================*/
.sprFtSocial {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sprFtSocial li a {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    border: .1rem solid rgba(255, 255, 255, .08);
    color: var(--sf-white);
    font-size: 1.2rem;
    transition: var(--sf-transition);
}

.sprFtSocial li a:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: translateY(-.4rem);
}

/*==================================
Widgets
==================================*/
.sprFtWidget {
    height: 100%;
}

.sprFtHeading {
    color: var(--sf-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

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

.sprFtWidget ul li {
    margin-bottom: 1.4rem;
}

.sprFtWidget ul li:last-child {
    margin-bottom: 0;
}

.sprFtWidget ul li a {
    color: rgba(255, 255, 255, .65);
    font-size: 1.1rem;
    transition: var(--sf-transition);
    text-decoration: none;
}

.sprFtWidget ul li a:hover {
    color: var(--sf-primary);
    padding-left: .6rem;
}

/*==================================
Contact
==================================*/
.sprFtContact li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: rgba(255, 255, 255, .65);
    font-size: 1.5rem;
    line-height: 1.8;
}

.sprFtContact li i {
    color: var(--sf-primary);
    font-size: 1.8rem;
    margin-top: .2rem;
    flex-shrink: 0;
}

/*==================================
Bottom
==================================*/
.sprFtBottom {
    margin-top: 5rem;
    padding: 2rem 0;
    border-top: .1rem solid rgba(255, 255, 255, .08);
    text-align: center;
}

.sprFtBottom p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 1.1rem;
}

/*==================================
Trust Features Section
==================================*/
.sprTrustSec {
    padding: 3rem 0;
    background: var(--sf-white);
    overflow: hidden;
}

.sprTrustItem {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--sf-transition);
    flex-shrink: 0;
}

.sprTrustItem:hover {
    transform: translateY(-.4rem);
}

/*==================================
Icon
==================================*/
.sprTrustIcon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-primary-light);
    border: .1rem solid rgba(22, 163, 74, .12);
    color: var(--sf-primary);
    font-size: 1.4rem;
    transition: var(--sf-transition);
}

.sprTrustItem:hover .sprTrustIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: rotateY(180deg);
}

/*==================================
Content
==================================*/
.sprTrustContent {
    flex: 1;
}

.sprTrustContent h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1.4;
}

.sprTrustContent p {
    margin: .2rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sf-light-text);
    line-height: 1.5;
}

/*==================================
Hover Text
==================================*/
.sprTrustItem:hover .sprTrustContent h4,
.sprTrustItem:hover .sprTrustContent p {
    color: var(--sf-primary);
}

/*==================================
Animation
==================================*/
.sprTrustItem,
.sprTrustIcon,
.sprTrustContent h4,
.sprTrustContent p {
    transition: var(--sf-transition);
}

/*==================================
Quote Form Card
==================================*/
.sprQuoteCard {
    background: var(--sf-white);
    border-radius: var(--sf-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--sf-shadow-lg);
    border: .1rem solid var(--sf-border-light);
    transition: var(--sf-transition);
}

.sprQuoteCard:hover {
    transform: translateY(-.4rem);
}

/*==================================
Title
==================================*/
.sprQuoteTitle {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sf-heading);
    margin-bottom: 2rem;
}

.sprQuoteCard p {
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
}

/*==================================
Tabs
==================================*/
.sprQuoteTabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: .1rem solid var(--sf-border);
    border-right: none;
    border-radius: var(--sf-radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

.sprQuoteTab {
    background: var(--sf-white);
    width: 100%;
    border: none;
    border-right: .1rem solid var(--sf-border) !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    cursor: pointer;
    transition: var(--sf-transition);
}

.sprQuoteTab:last-child {
    border-right: none;
}

.sprQuoteTab i {
    font-size: 1.5rem;
    color: var(--sf-light-text);
    transition: var(--sf-transition);
}

.sprQuoteTab span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sf-heading);
}

.sprQuoteTab.active {
    background: var(--sf-primary-light);
    box-shadow: inset 0 -.3rem 0 var(--sf-primary);
}

.sprQuoteTab.active i,
.sprQuoteTab.active span {
    color: var(--sf-primary);
}

.sprQuoteTab:hover {
    background: var(--sf-primary-light);
    box-shadow: inset 0 -.3rem 0 var(--sf-primary);
}

/*==================================
Labels
==================================*/
.sprQuoteLabel {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-heading);
    margin-bottom: 0.5rem;
}

/*==================================
Input Wrapper
==================================*/
.sprQuoteField {
    position: relative;
}

.sprQuoteField i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sf-light-text);
    font-size: 1.3rem;
}

.form-select {
    width: 100% !important;
    height: 3.3rem !important;
}

.form-control {
    width: 100% !important;
    height: 3.3rem !important;
}

.form-select:focus {
    border-color: var(--sf-primary) !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--sf-primary) !important;
    box-shadow: none !important;
}

.sprQuoteField input {
    width: 100%;
    height: 3.5rem;
    padding-left: 3rem;
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 1rem;
    color: var(--sf-heading);
    background: var(--sf-white);
}

.sprQuoteField input:focus,
.sprQuoteSelect:focus,
.sprQuoteDate:focus {
    border-color: var(--sf-primary);
    box-shadow: none;
}

/*==================================
Select
==================================*/
.sprQuoteSelect {
    height: 5.4rem;
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 1.5rem;
    color: var(--sf-heading);
}

/*==================================
Date
==================================*/
.sprQuoteDate {
    height: 5.4rem;
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    font-size: 1.5rem;
}

/*==================================
Main Button
==================================*/
.sprQuoteBtn {
    width: 100%;
    height: 4.4rem;
    border: none;
    border-radius: var(--sf-radius);
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1.2rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sprQuoteBtn:hover {
    background: var(--sf-primary-dark);
}

/*==================================
Call Button
==================================*/
.sprCallBtn,
.sprWhatsappBtn {
    height: 4rem;
    border-radius: var(--sf-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    text-decoration: none;
    transition: var(--sf-transition);
}

.sprCallBtn {
    width: 100%;
    border: .1rem solid var(--sf-primary);
    background: var(--sf-white);
    color: var(--sf-primary);
}

.sprWhatsappBtn {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sprCallBtn i,
.sprWhatsappBtn i {
    font-size: 1.7rem;
}

.sprCallBtn strong,
.sprWhatsappBtn strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.sprCallBtn span,
.sprWhatsappBtn span {
    display: block;
    font-size: 1rem;
}

.sprCallBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sprWhatsappBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
}

/*==================================
Bottom Text
==================================*/
.sprQuoteBottom {
    text-align: center;
    font-size: 1rem;
    color: var(--sf-light-text);
}

/*=========================================
PRIORITY SERVICES
=========================================*/
.sfServiceSection {
    padding: 6rem 0;
    background: var(--sf-body);
    overflow: hidden;
}

/*=========================================
HEADING
=========================================*/
.sfServiceHeading {
    margin-bottom: 3.5rem;
}

.sfServiceSubTitle {
    display: inline-block;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfServiceTitle {
    margin-top: .8rem;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
CARD
=========================================*/
.sfServiceCard {
    position: relative;
    height: 100%;
    padding: 2rem;
    border-radius: var(--sf-radius-lg);
    background: var(--sf-card);
    border: .08rem solid var(--sf-border);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    overflow: hidden;
}

.sfServiceCard:hover {
    transform: translateY(-.7rem);
    box-shadow: var(--sf-shadow-lg);
}

/*=========================================
TOP
=========================================*/
.sfServiceTop {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.sfServiceIcon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--sf-white);
}

.sfServiceTop h3 {
    margin: 0 0 .6rem;
    color: var(--sf-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

.sfServiceTop p {
    margin: 0;
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
LIST
=========================================*/
.sfServiceList {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.sfServiceList li {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    color: var(--sf-text);
    font-size: 1rem;
}

.sfServiceList li:last-child {
    margin-bottom: 0;
}

.sfServiceList i {
    font-size: 1.1rem;
}

/*=========================================
BUTTON
=========================================*/
.sfServiceBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    height: 3.4rem;
    border: .08rem solid;
    border-radius: var(--sf-radius);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sfServiceBtn i {
    transition: var(--sf-transition);
}

.sfServiceBtn:hover i {
    transform: translateX(.4rem);
}

/*=========================================
GREEN
=========================================*/
.sfServiceGreen {
    background-image: url(../images/Corporate-Travel-bg.jpg);
    background-position: center;
    background-size: cover;
}

.sfServiceGreen .sfServiceIcon {
    background: var(--sf-primary);
}

.sfServiceGreen .sfServiceList i {
    color: var(--sf-primary);
}

.sfServiceGreen .sfServiceBtn {
    color: var(--sf-primary);
    border-color: rgba(22, 163, 74, .35);
}

.sfServiceGreen .sfServiceBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
}

/*=========================================
ORANGE
=========================================*/
.sfServiceOrange {
    background-image: url(../images/Event-Transportation-bg.jpg);
    background-position: center;
    background-size: cover;
}

.sfServiceOrange .sfServiceIcon {
    background: #F97316;
}

.sfServiceOrange .sfServiceList i {
    color: #F97316;
}

.sfServiceOrange .sfServiceBtn {
    color: #F97316;
    border-color: rgba(249, 115, 22, .35);
}

.sfServiceOrange .sfServiceBtn:hover {
    background: #F97316;
    color: var(--sf-white);
}

/*=========================================
RED
=========================================*/
.sfServiceRed {
    background-image: url(../images/Wedding-Transportation-bg.jpg);
    background-position: center;
    background-size: cover;
}

.sfServiceRed .sfServiceIcon {
    background: #BE185D;
}

.sfServiceRed .sfServiceList i {
    color: #BE185D;
}

.sfServiceRed .sfServiceBtn {
    color: #BE185D;
    border-color: rgba(190, 24, 93, .35);
}

.sfServiceRed .sfServiceBtn:hover {
    background: #BE185D;
    color: var(--sf-white);
}

/*=========================================
SHINE EFFECT
=========================================*/
.sfServiceCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transform: translateX(-140%);
    transition: .9s;
}

.sfServiceCard:hover::before {
    transform: translateX(140%);
}

/*=========================================
RESPONSIVE
=========================================*/
@media (max-width:62rem) {
    .sfServiceSection {
        padding: 5rem 0;
    }

    .sfServiceTitle {
        font-size: 2.2rem;
    }
}

@media (max-width:48rem) {
    .sfServiceSection {
        padding: 4rem 0;
    }

    .sfServiceHeading {
        margin-bottom: 2.5rem;
    }

    .sfServiceTitle {
        font-size: 1.8rem;
    }

    .sfServiceCard {
        padding: 1.6rem;
    }

    .sfServiceTop {
        flex-direction: column;
        align-items: flex-start;
    }

    .sfServiceIcon {
        width: 4rem;
        height: 4rem;
        font-size: 1.7rem;
    }

    .sfServiceTop h3 {
        font-size: 1.2rem;
    }

    .sfServiceBtn {
        height: 3.2rem;
    }

    .sprQuoteTabs {
        border-bottom: none !important;
    }
}

/*=========================================
OUR TAXI SERVICES
=========================================*/
.sfTaxiSection {
    padding: 6rem 0;
    background: var(--sf-body);
    overflow: hidden;
}

/*=========================================
HEADING
=========================================*/
.sfTaxiHeading {
    margin-bottom: 3rem;
}

.sfTaxiSubTitle {
    display: inline-block;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfTaxiTitle {
    margin-top: .8rem;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
CARD
=========================================*/
.sfTaxiCard {
    position: relative;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--sf-card);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
    overflow: hidden;
}

.sfTaxiCard:hover {
    transform: translateY(-.6rem);
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow-lg);
}

/*=========================================
ICON
=========================================*/
.sfTaxiIcon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 2rem;
    transition: var(--sf-transition);
}

.sfTaxiCard:hover .sfTaxiIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: rotateY(360deg);
}

/*=========================================
TITLE
=========================================*/
.sfTaxiCard h3 {
    margin: 0 0 .8rem;
    color: var(--sf-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
}

/*=========================================
TEXT
=========================================*/
.sfTaxiCard p {
    margin: 0;
    color: var(--sf-text);
    font-size: .95rem;
    line-height: 1.8;
    min-height: 5rem;
}

/*=========================================
BUTTON
=========================================*/
.sfTaxiBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--sf-primary);
    font-size: .95rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sfTaxiBtn i {
    transition: var(--sf-transition);
}

.sfTaxiBtn:hover {
    color: var(--sf-primary-dark);
}

.sfTaxiBtn:hover i {
    transform: translateX(.35rem);
}

/*=========================================
BOTTOM BUTTON
=========================================*/
.sfTaxiBottom {
    margin-top: 3rem;
}

.sfTaxiViewBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-width: 20rem;
    height: 3.6rem;
    border: .08rem solid var(--sf-primary);
    border-radius: var(--sf-radius);
    background: var(--sf-white);
    color: var(--sf-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sfTaxiViewBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sfTaxiViewBtn i {
    transition: var(--sf-transition);
}

.sfTaxiViewBtn:hover i {
    transform: translateX(.4rem);
}

/*=========================================
SHINE EFFECT
=========================================*/
.sfTaxiCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .55),
            transparent);
    transform: translateX(-150%);
    transition: .8s;
}

.sfTaxiCard:hover::before {
    transform: translateX(150%);
}

/*=========================================
RESPONSIVE
=========================================*/
@media (max-width:62rem) {
    .sfTaxiSection {
        padding: 5rem 0;
    }

    .sfTaxiTitle {
        font-size: 2rem;
    }

    .sfTaxiCard {
        padding: 1.8rem 1.3rem;
    }
}

@media (max-width:48rem) {
    .sfTaxiSection {
        padding: 4rem 0;
    }

    .sfTaxiHeading {
        margin-bottom: 0rem;
    }

    .sfTaxiTitle {
        font-size: 1.7rem;
    }

    .sfTaxiCard {
        padding: 1.6rem 1.2rem;
    }

    .sfTaxiIcon {
        width: 4rem;
        height: 4rem;
        font-size: 1.7rem;
    }

    .sfTaxiCard h3 {
        font-size: 1.1rem;
    }

    .sfTaxiCard p {
        min-height: auto;
    }

    .sfTaxiViewBtn {
        width: 100%;
        min-width: 100%;
    }
}

/*=========================================
COMMON BUTTON
=========================================*/
.sfCallBtn,
.sfWhatsappBtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: .9rem;
    background: var(--sf-white);
    border: .1rem solid var(--sf-border);
    border-radius: var(--sf-radius);
    text-decoration: none;
    width: 100%;
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sfCallBtn::before,
.sfWhatsappBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--sf-primary);
    transition: .45s ease;
    z-index: 0;
}

.sfCallBtn:hover::before,
.sfWhatsappBtn:hover::before {
    width: 100%;
}

/*=========================================
ICON
=========================================*/
.sfBtnIcon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-primary);
    transition: var(--sf-transition);
}

.sfBtnIcon i {
    font-size: 1.3rem;
}

/*=========================================
TEXT
=========================================*/
.sfBtnContent {
    text-align: left;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.sfBtnContent strong {
    color: var(--sf-heading);
    font-size: 1rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

.sfBtnContent small {
    color: var(--sf-light-text);
    font-size: .82rem;
    transition: var(--sf-transition);
}

/*=========================================
HOVER
=========================================*/
.sfCallBtn:hover,
.sfWhatsappBtn:hover {
    transform: translateY(-.4rem);
    border-color: var(--sf-primary);
}

.sfCallBtn:hover .sfBtnIcon,
.sfWhatsappBtn:hover .sfBtnIcon {
    color: var(--sf-white);
    transform: rotate(360deg);
}

.sfCallBtn:hover strong,
.sfWhatsappBtn:hover strong,
.sfCallBtn:hover small,
.sfWhatsappBtn:hover small {
    color: var(--sf-white);
}

/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:48rem) {
    .sfContactBtns {
        flex-direction: column;
        align-items: stretch;
    }

    .sfCallBtn,
    .sfWhatsappBtn {
        width: 100%;
        justify-content: flex-start;
    }
}

/*=========================================
CORPORATE SOLUTIONS
=========================================*/
.sfCorporateSection {
    padding: 6rem 0;
    background: var(--sf-body);
}

.sfCorporateWrapper {
    padding: 2rem;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow);
    overflow: hidden;
}

/*=========================================
IMAGE
=========================================*/
.sfCorporateImage {
    overflow: hidden;
    border-radius: var(--sf-radius-lg);
    height: 100%;
}

.sfCorporateImage img {
    width: 100%;
    height: 25rem;
    object-fit: cover;
    transition: .6s ease;
    border-radius: 20px;
}

/*=========================================
CONTENT
=========================================*/
.sfCorporateContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sfCorporateSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfCorporateContent h2 {
    margin-bottom: 1rem;
    color: var(--sf-heading);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.sfCorporateContent>p {
    margin-bottom: 2rem;
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
FEATURES
=========================================*/
.sfCorporateFeature {
    display: flex;
    gap: 1rem;
    height: 100%;
    border: .08rem solid transparent;
    border-radius: var(--sf-radius);
    transition: var(--sf-transition);
}

.sfCorporateIcon {
    width: 3.8rem;
    height: 3.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 1.7rem;
    transition: var(--sf-transition);
}

.sfCorporateFeature:hover .sfCorporateIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: rotateY(360deg);
}

.sfCorporateFeature h4 {
    margin: 0 0 .4rem;
    color: var(--sf-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.sfCorporateFeature p {
    margin: 0;
    color: var(--sf-text);
    font-size: .95rem;
    line-height: 1.7;
}

/*=========================================
BUTTONS
=========================================*/
.sfCorporateButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.sfCorporatePrimaryBtn,
.sfCorporateOutlineBtn,
.sfCorporateWhatsappBtn {
    min-height: 3.8rem;
    padding: 0 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    border-radius: var(--sf-radius);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: var(--sf-transition);
}

/*=========================================
PRIMARY BUTTON
=========================================*/
.sfCorporatePrimaryBtn {
    background: var(--sf-primary);
    color: var(--sf-white);
    border: .08rem solid var(--sf-primary);
}

.sfCorporatePrimaryBtn:hover {
    background: var(--sf-primary-dark);
    border-color: var(--sf-primary-dark);
    transform: translateY(-.3rem);
}

/*=========================================
OUTLINE BUTTON
=========================================*/
.sfCorporateOutlineBtn {
    border: .08rem solid var(--sf-border);
    background: var(--sf-white);
    color: var(--sf-heading);
}

.sfCorporateOutlineBtn i {
    color: var(--sf-primary);
    font-size: 1.4rem;
}

.sfCorporateOutlineBtn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sfCorporateOutlineBtn small {
    color: var(--sf-light-text);
    font-size: .78rem;
}

.sfCorporateOutlineBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
    border-color: var(--sf-primary);
}

.sfCorporateOutlineBtn:hover i,
.sfCorporateOutlineBtn:hover small {
    color: var(--sf-white);
}

/*=========================================
WHATSAPP BUTTON
=========================================*/
.sfCorporateWhatsappBtn {
    background: var(--sf-primary);
    border: .08rem solid var(--sf-primary);
    color: var(--sf-white);
}

.sfCorporateWhatsappBtn i {
    font-size: 1.5rem;
}

.sfCorporateWhatsappBtn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sfCorporateWhatsappBtn small {
    color: rgba(255, 255, 255, .8);
    font-size: .78rem;
}

.sfCorporateWhatsappBtn:hover {
    background: var(--sf-primary-dark);
    border-color: var(--sf-primary-dark);
    transform: translateY(-.3rem);
}

/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:62rem) {
    .sfCorporateSection {
        padding: 5rem 0;
    }

    .sfCorporateWrapper {
        padding: 1.8rem;
    }

    .sfCorporateContent h2 {
        font-size: 2.2rem;
    }
}

@media(max-width:48rem) {
    .sfCorporateSection {
        padding: 4rem 0;
    }

    .sfCorporateWrapper {
        padding: 1.3rem;
    }

    .sfCorporateContent h2 {
        font-size: 1.8rem;
    }

    .sfCorporateButtons {
        flex-direction: column;
    }

    .sfCorporatePrimaryBtn,
    .sfCorporateOutlineBtn,
    .sfCorporateWhatsappBtn {
        width: 100%;
    }
}

/*=========================================
EVENT SECTION
=========================================*/
.sfEventSection {
    padding: 6rem 0;
    background: var(--sf-body);
}

.sfEventWrapper {
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius-xl);
    padding: 2rem;
    box-shadow: var(--sf-shadow);
    overflow: hidden;
}

/*=========================================
CONTENT
=========================================*/
.sfEventSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfEventContent h2 {
    margin-bottom: 1rem;
    color: var(--sf-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.sfEventContent>p {
    margin-bottom: 2rem;
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
FEATURE
=========================================*/
.sfEventFeature {
    display: flex;
    gap: 1rem;
    height: 100%;
    border-radius: var(--sf-radius);
    transition: var(--sf-transition);
}

.sfEventFeature:hover {
    transform: translateY(-.4rem);
}

.sfEventIcon {
    width: 3.8rem;
    height: 3.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 1.6rem;
    transition: var(--sf-transition);
}

.sfEventFeature:hover .sfEventIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: rotate(360deg);
}

.sfEventFeature h4 {
    margin: 0 0 .4rem;
    text-align: left;
    color: var(--sf-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.sfEventFeature p {
    text-align: left;
    margin: 0;
    color: var(--sf-text);
    font-size: .92rem;
    line-height: 1.7;
}

/*=========================================
IMAGE
=========================================*/
.sfEventImage {
    overflow: hidden;
    border-radius: var(--sf-radius-lg);
    height: 100%;
}

.sfEventImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.sfEventImage:hover img {
    transform: scale(1.08);
}

/*=========================================
BUTTONS
=========================================*/
.sfEventButtons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.sfEventPrimaryBtn,
.sfEventOutlineBtn,
.sfEventWhatsappBtn {
    min-height: 3.8rem;
    padding: 0 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    border-radius: var(--sf-radius);
    text-decoration: none;
    transition: var(--sf-transition);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    width: 100%;
}

/* Primary */
.sfEventPrimaryBtn {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sfEventPrimaryBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
    transform: translateY(-.3rem);
}

/* Outline */
.sfEventOutlineBtn {
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    color: var(--sf-heading);
}

.sfEventOutlineBtn i {
    color: var(--sf-primary);
    font-size: 1.4rem;
}

.sfEventOutlineBtn span,
.sfEventWhatsappBtn span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sfEventOutlineBtn small {
    color: var(--sf-light-text);
    font-size: .78rem;
}

.sfEventOutlineBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
    border-color: var(--sf-primary);
}

.sfEventOutlineBtn:hover i,
.sfEventOutlineBtn:hover small {
    color: var(--sf-white);
}

/* WhatsApp */

.sfEventWhatsappBtn {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sfEventWhatsappBtn i {
    font-size: 1.5rem;
}

.sfEventWhatsappBtn small {
    color: rgba(255, 255, 255, .8);
    font-size: .78rem;
}

.sfEventWhatsappBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
    transform: translateY(-.3rem);
}

.sfEventWrapper {
    position: relative;
}

.sfEventWrapper:hover::before {
    transform: translateX(140%);
}

/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:62rem) {
    .sfEventSection {
        padding: 5rem 0;
    }

    .sfEventWrapper {
        padding: 1.8rem;
    }

    .sfEventContent h2 {
        font-size: 2.1rem;
    }
}

@media(max-width:48rem) {
    .sfEventSection {
        padding: 4rem 0;
    }

    .sfEventWrapper {
        padding: 1.2rem;
    }

    .sfEventContent h2 {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .sfEventButtons {
        flex-direction: column;
    }

    .sfEventPrimaryBtn,
    .sfEventOutlineBtn,
    .sfEventWhatsappBtn {
        width: 100%;
    }
}

/*=========================================
OUR FLEET
=========================================*/
.sfFleetSection {
    padding: 6rem 0;
    background: var(--sf-body);
    overflow: hidden;
}

/*=========================================
HEADING
=========================================*/
.sfFleetHeading {
    margin-bottom: 3.5rem;
}

.sfFleetSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfFleetTitle {
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
CARD
=========================================*/
.sfFleetCard {
    position: relative;
    height: 100%;
    padding: 1rem 1.2rem;
    text-align: center;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sfFleetCard:hover {
    transform: translateY(-.6rem);
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow-lg);
}

/*=========================================
IMAGE
=========================================*/

.sfFleetImage img {
    max-width: 100%;
    max-height: 7rem;
    object-fit: contain;
    transition: .6s ease;
}

.sfFleetCard:hover .sfFleetImage img {
    transform: scale(1.08);
}

/*=========================================
TITLE
=========================================*/

.sfFleetCard h3 {
    margin: 0 0 .5rem;
    color: var(--sf-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}

.sfFleetCard p {
    margin: 0;
    color: var(--sf-light-text);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.7;
}

/*=========================================
SHINE EFFECT
=========================================*/

.sfFleetCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transform: translateX(-150%);
    transition: .8s;
}

.sfFleetCard:hover::before {
    transform: translateX(150%);
}

/*=========================================
BOTTOM BUTTON
=========================================*/
.sfFleetBottom {
    margin-top: 3rem;
}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:62rem) {
    .sfFleetSection {
        padding: 5rem 0;
    }

    .sfFleetTitle {
        font-size: 2rem;
    }

    .sfFleetCard {
        padding: 1.8rem 1rem;
    }
}

@media(max-width:48rem) {
    .sfFleetSection {
        padding: 4rem 0;
    }

    .sfFleetHeading {
        margin-bottom: 1.5rem;
    }

    .sfFleetTitle {
        font-size: 1.7rem;
    }

    .sfFleetCard {
        padding: 1.5rem 1rem;
    }

    .sfFleetImage {
        height: 6rem;
    }

    .sfFleetImage img {
        max-height: 5rem;
    }

    .sfFleetCard h3 {
        font-size: 1.1rem;
    }

    .sfFleetCard p {
        font-size: .9rem;
    }

    .sfFleetBtn {
        width: 100%;
        min-width: 100%;
    }
}

/*=========================================
HOW IT WORKS
=========================================*/
.sfHowSection {
    padding: 6rem 0;
    background: var(--sf-body);
    overflow: hidden;
}

/*=========================================
HEADING
=========================================*/
.sfHowHeading {
    margin-bottom: 3.5rem;
}

.sfHowSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfHowTitle {
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
CARD
=========================================*/
.sfHowCard {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sfHowCard:hover {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow-lg);
}

/*=========================================
NUMBER
=========================================*/
.sfHowNumber {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: .9rem;
    font-weight: 700;
    z-index: 2;
}

/*=========================================
ICON
=========================================*/
.sfHowIcon {
    width: 3.6rem;
    height: 3.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.6rem;
    border-radius: 50%;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 1.4rem;
    transition: var(--sf-transition);
}

/*=========================================
CONTENT
=========================================*/
.sfHowContent {
    margin-top: 1.2rem;
}

.sfHowContent h3 {
    margin: 0 0 .8rem;
    color: var(--sf-heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
}

.sfHowContent p {
    margin: 0;
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
ARROW
=========================================*/
.sfHowArrow {
    position: absolute;
    top: 50%;
    right: -1.4rem;
    transform: translateY(-50%);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    color: var(--sf-primary);
    box-shadow: var(--sf-shadow);
    z-index: 5;
}

.sfHowArrow i {
    font-size: 1.4rem;
}

.sfHowLastCard .sfHowArrow {
    display: none;
}

/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:75rem) {
    .sfHowArrow {
        display: none;
    }
}

@media(max-width:62rem) {
    .sfHowSection {
        padding: 5rem 0;
    }

    .sfHowTitle {
        font-size: 2.1rem;
    }
}

@media(max-width:48rem) {
    .sfHowSection {
        padding: 4rem 0;
    }

    .sfHowHeading {
        margin-bottom: 2.5rem;
    }

    .sfHowTitle {
        font-size: 1.8rem;
    }

    .sfHowCard {
        padding: 1.6rem;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .sfHowContent {
        margin-top: 0;
    }

    .sfHowIcon {
        margin-top: 2rem;
    }

    .sfHowContent h3 {
        font-size: 1.2rem;
    }
}

/*=========================================
TESTIMONIAL SECTION
=========================================*/
.sfTestimonialSection {
    padding: 6rem 0;
    background: var(--sf-body);
    overflow: hidden;
}

/*=========================================
HEADING
=========================================*/
.sfTestimonialHeading {
    margin-bottom: 3rem;
}

.sfTestimonialSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfTestimonialTitle {
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
SLIDER
=========================================*/
.sfTestimonialSlider {
    padding-bottom: 4rem;
}

/*=========================================
CARD
=========================================*/
.sfTestimonialCard {
    position: relative;
    height: 100%;
    padding: 2rem;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: var(--sf-radius-lg);
    transition: var(--sf-transition);
    overflow: hidden;
}

.sfTestimonialCard:hover {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow-lg);
}

/*=========================================
SHINE
=========================================*/
.sfTestimonialCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transform: translateX(-150%);
    transition: .8s;
}

.sfTestimonialCard:hover::before {
    transform: translateX(150%);
}

/*=========================================
STARS
=========================================*/

.sfTestimonialStars {
    display: flex;
    gap: .3rem;
    margin-bottom: 1.2rem;
}

.sfTestimonialStars i {
    color: #FDBA2D;
    font-size: 1.1rem;
}

/*=========================================
TEXT
=========================================*/

.sfTestimonialText {
    color: var(--sf-text);
    font-size: 1rem;
    line-height: 1.9;
    min-height: 3rem;
}

/*=========================================
USER
=========================================*/

.sfTestimonialUser {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sfTestimonialImage {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: .15rem solid var(--sf-primary-light);
}

.sfTestimonialImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.sfTestimonialCard:hover .sfTestimonialImage img {
    transform: scale(1.1);
}

.sfTestimonialUser h4 {
    margin: 0 0 .3rem;
    color: var(--sf-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.sfTestimonialUser span {
    display: block;
    color: var(--sf-light-text);
    font-size: .9rem;
    line-height: 1.6;
}

/*=========================================
PAGINATION
=========================================*/
.sfTestimonialPagination {
    position: relative;
    margin-top: 2rem;
}

.sfTestimonialPagination .swiper-pagination-bullet {
    width: .8rem;
    height: .8rem;
    background: var(--sf-border);
    opacity: 1;
    transition: var(--sf-transition);
}

.sfTestimonialPagination .swiper-pagination-bullet-active {
    width: 2.2rem;
    border-radius: 5rem;
    background: var(--sf-primary);
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:62rem) {
    .sfTestimonialSection {
        padding: 5rem 0;
    }

    .sfTestimonialTitle {
        font-size: 2.1rem;
    }
}

@media(max-width:48rem) {
    .sfTestimonialSection {
        padding: 4rem 0;
    }

    .sfTestimonialHeading {
        margin-bottom: 2.5rem;
    }

    .sfTestimonialTitle {
        font-size: 1.8rem;
    }

    .sfTestimonialCard {
        padding: 1.5rem;
    }

    .sfTestimonialText {
        height: 100px !important;
    }

    .sfTestimonialUser {
        align-items: flex-start;
    }

    .sfTestimonialImage {
        width: 3.5rem;
        height: 3.5rem;
    }

}

/*=========================================
SCROLL ANIMATION
=========================================*/

.sfRevealItem {
    opacity: 0;
    transform: translateY(3rem);
    transition: .8s ease;
}

.sfRevealActive {
    opacity: 1;
    transform: translateY(0);
}

/*=========================================
TOUCH EFFECT
=========================================*/

.sfCardTouch {
    transform: scale(.98);
}

/*=========================================
HOVER EFFECT
=========================================*/

.sfCardHover {
    transition: .35s ease;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    width: 100%;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-slide img {
    display: block;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loding .slick-slide {
    visibility: hidden;
}

/*=========================================
SLICK DOTS
=========================================*/
.slick-dots {
    position: relative;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}

.slick-dots li button {
    position: relative;
    width: .8rem;
    height: .8rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sf-border);
    cursor: pointer;
    transition: var(--sf-transition);
    font-size: 0;
}

.slick-dots li button::before {
    display: none;
}

.slick-dots li:hover button {
    background: var(--sf-hover);
    transform: scale(1.15);
}

.slick-dots li.slick-active button {
    width: 2rem;
    border-radius: 5rem;
    background: var(--sf-primary);
    box-shadow: 0 .4rem 1rem rgba(22, 163, 74, .25);
}

/*=========================================
MOBILE
=========================================*/

@media (max-width:48rem) {
    .slick-dots {
        margin-top: 2rem;
        gap: .5rem;
    }

    .slick-dots li button {
        width: .7rem;
        height: .7rem;
    }

    .slick-dots li.slick-active button {
        width: 2.2rem;
    }
}

/*=========================================
CTA SECTION
=========================================*/
.sfCtaSection {
    padding: 5rem 0;
    background: var(--sf-body);
}

/*=========================================
WRAPPER
=========================================*/

.sfCtaWrapper {
    position: relative;
    overflow: hidden;
    padding: 2rem 2.5rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(rgba(5, 22, 18, .82), rgba(5, 22, 18, .82)),
        url("../images/cta-bg.webp") center/cover no-repeat;
    box-shadow: var(--sf-shadow);
}

/* Overlay */

.sfCtaWrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .05));
    pointer-events: none;
}

/*=========================================
CONTENT
=========================================*/
.sfCtaContent {
    position: relative;
    z-index: 2;
}

.sfCtaSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfCtaTitle {
    margin-bottom: .8rem;
    color: var(--sf-white);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.35;
}

.sfCtaText {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
BUTTON AREA
=========================================*/
.sfCtaButtons {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

/*=========================================
BUTTON
=========================================*/
.sfCtaBtn {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 13rem;
    padding: 1rem 1.3rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: .35s ease;
    box-shadow: var(--sf-shadow);
}

.sfCtaBtn:hover {
    transform: translateY(-.3rem);
    text-decoration: none;
}

/*=========================================
ICON
========================================*/
.sfCtaIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .8rem;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/*=========================================
TEXT
=========================================*/

.sfCtaBtn strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.sfCtaBtn small {
    display: block;
    font-size: .85rem;
    line-height: 1.4;
}

/*=========================================
WHITE BUTTON
=========================================*/
.sfCtaBtnPrimary {
    background: var(--sf-white);
}

.sfCtaBtnPrimary strong {
    color: var(--sf-heading);
}

.sfCtaBtnPrimary small {
    color: var(--sf-light-text);
}

.sfCtaBtnPrimary .sfCtaIcon {
    background: var(--sf-primary-light);
    color: var(--sf-primary);
}

/*=========================================
DARK BUTTON
=========================================*/
.sfCtaBtnDark {
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(.6rem);
}

.sfCtaBtnDark strong,
.sfCtaBtnDark small {
    color: var(--sf-white);
}

.sfCtaBtnDark .sfCtaIcon {
    background: rgba(255, 255, 255, .15);
    color: var(--sf-white);
}

/*=========================================
GREEN BUTTON
=========================================*/
.sfCtaBtnGreen {
    background: #25D366;
}

.sfCtaBtnGreen strong,
.sfCtaBtnGreen small {
    color: #fff;
}

.sfCtaBtnGreen .sfCtaIcon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/*=========================================
HOVER
=========================================*/
.sfCtaBtnPrimary:hover {
    background: var(--sf-primary);
}

.sfCtaBtnPrimary:hover strong,
.sfCtaBtnPrimary:hover small {
    color: #fff;
}

.sfCtaBtnPrimary:hover .sfCtaIcon {
    background: #fff;
}

.sfCtaBtnDark:hover {
    background: var(--sf-secondary);
}

.sfCtaBtnGreen:hover {
    filter: brightness(.95);
}

/*=========================================
TABLET
=========================================*/

@media (max-width:62rem) {
    .sfCtaWrapper {
        padding: 2rem;
    }

    .sfCtaButtons {
        justify-content: flex-start;
        margin-top: 2rem;
    }
}

/*=========================================
MOBILE
=========================================*/

@media (max-width:48rem) {
    .sfCtaSection {
        padding: 4rem 0;
    }

    .sfCtaWrapper {
        padding: 1.5rem;
    }

    .sfCtaTitle {
        font-size: 1.6rem;
    }

    .sfCtaButtons {
        flex-direction: column;
    }

    .sfCtaBtn {
        width: 100%;
        min-width: 100%;
    }
}

/*=========================================
FOOTER
=========================================*/

.sfFooterSection {
    position: relative;
    padding: 5rem 0 0;
    background: #061A1F;
    overflow: hidden;
}

.sfFooterSection::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right,
            rgba(22, 163, 74, .12),
            transparent 45%);
    pointer-events: none;
}

/*=========================================
LOGO
=========================================*/

.sfFooterLogo {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.sfFooterLogo img {
    max-width: 12rem;
}

.sfFooterText {
    margin-bottom: 1.8rem;
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    line-height: 1.8;
}

/*=========================================
SOCIAL
=========================================*/

.sfFooterSocial {
    display: flex;
    gap: .8rem;
}

.sfFooterSocial a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    color: var(--sf-white);
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: var(--sf-transition);
}

.sfFooterSocial a:hover {
    background: var(--sf-primary);
    transform: translateY(-.3rem);
}

/*=========================================
WIDGET
=========================================*/

.sfFooterWidget h4 {
    margin-bottom: 1.6rem;
    color: var(--sf-white);
    font-size: 1.2rem;
    font-weight: 700;
}

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

.sfFooterWidget ul li {
    margin-bottom: .9rem;
}

/*=========================================
LINKS
=========================================*/

.sfFooterWidget ul li a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--sf-transition);
}

.sfFooterWidget ul li a:hover {
    color: var(--sf-primary);
    transform: translateX(.4rem);
}

/*=========================================
CONTACT
=========================================*/

.sfFooterContact li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.sfFooterContact i {
    color: var(--sf-primary);
    font-size: 1.2rem;
    margin-top: .2rem;
}

.sfFooterContact span,

.sfFooterContact a {
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    line-height: 1.7;
    text-decoration: none;
    transition: var(--sf-transition);
}

.sfFooterContact a:hover {
    color: var(--sf-primary);
}

/*=========================================
BOTTOM
=========================================*/

.sfFooterBottom {
    margin-top: 4rem;
    padding: 1.4rem 0;
    border-top: .08rem solid rgba(255, 255, 255, .08);
}

.sfFooterBottom p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: .95rem;
}

.sfFooterBottom a {
    color: var(--sf-primary);
    text-decoration: none;
    font-weight: 600;
}

/*=========================================
WHATSAPP BUTTON
=========================================*/

.sfFooterWhatsapp {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
    box-shadow: 0 .6rem 1.8rem rgba(37, 211, 102, .35);
    z-index: 999;
    transition: var(--sf-transition);
    animation: sfWhatsappPulse 2s infinite;
}

.sfFooterWhatsapp:hover {
    transform: scale(1.1);
    color: #fff;
}

/*=========================================
PULSE
=========================================*/

@keyframes sfWhatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
    }

    70% {
        box-shadow: 0 0 0 1rem rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width:62rem) {
    .sfFooterSection {
        padding: 4rem 0 0;
    }
}

@media (max-width:48rem) {
    .sfFooterBottom .d-flex {
        gap: .8rem;
    }

    .sfFooterWhatsapp {
        width: 3.5rem;
        height: 3.5rem;
        right: 1rem;
        bottom: 1rem;
        font-size: 1.6rem;
    }

    .sfFooterBottom {
        margin-top: 2rem;
    }
}

/*=========================================
QUOTE TABS
=========================================*/

.sprQuoteTabs {
    flex-wrap: nowrap;
}

.sprQuoteTab {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    border: none;
    white-space: nowrap;
}

/*=========================================
PHONE VIEW
=========================================*/

@media (max-width: 48rem) {

    .sprQuoteTabs::-webkit-scrollbar {
        display: none;
    }

    .sprQuoteTab {
        border-bottom: .1rem solid var(--sf-border) !important;
    }
}

.sprQuoteTabs {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.sprHeaderMenu li a {
    position: relative;
    color: var(--sf-heading);
    text-decoration: none;
    transition: var(--sf-transition);
}

.sprHeaderMenu li a.active {
    color: var(--sf-primary) !important;
    font-weight: 600;
}

.sprHeaderMenu li a.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.4rem;
    width: 100%;
    height: .15rem;
    background: var(--sf-primary);
    border-radius: 5rem;
}

/*=========================================
WHY SECTION
=========================================*/

.sfWhySection {
    padding: 5rem 0;
    background: var(--sf-white);
}

/*=========================================
HEADING
=========================================*/

.sfWhyTitle {
    position: relative;
    display: inline-block;
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.2rem;
    font-weight: 700;
}


/*=========================================
CARD
=========================================*/

.sfWhyCard {
    height: 100%;
    text-align: center;
    padding: 1.5rem 1rem;
    border-right: .08rem solid var(--sf-border);
    transition: var(--sf-transition);
}

.sfWhyBorderNone {
    border-right: none;
}

.sfWhyCard:hover {
    transform: translateY(-.4rem);
}

/*=========================================
ICON
=========================================*/

.sfWhyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 2rem;
    transition: var(--sf-transition);
}

.sfWhyCard:hover .sfWhyIcon {
    background: var(--sf-primary);
    color: white !important;
    transform: rotateY(180deg);
}

/*=========================================
TITLE
=========================================*/

.sfWhyCard h3 {
    margin-bottom: .8rem;
    color: var(--sf-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
}

.sfWhyCard h3 span {
    display: block;
}

/*=========================================
TEXT
=========================================*/

.sfWhyCard p {
    margin: 0;
    color: var(--sf-text);
    font-size: .95rem;
    line-height: 1.7;
}

/*=========================================
TABLET
=========================================*/

@media (max-width:62rem) {
    .sfWhyCard {
        border-right: none;
    }
}

/*=========================================
MOBILE
=========================================*/

@media (max-width:48rem) {
    .sfWhySection {
        padding: 4rem 0;
    }

    .sfWhyTitle {
        font-size: 1.6rem;
    }

    .sfWhyCard {
        padding: 1.5rem .8rem;
    }

    .sfWhyIcon {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }

    .sfWhyCard h3 {
        font-size: 1rem;
    }

    .sfWhyCard p {
        font-size: .9rem;
    }
}

/*=========================================
EVENT SERVICES
=========================================*/

.sfEventSection {
    padding: 6rem 0;
    background: var(--sf-white);
}

/*=========================================
HEADING
=========================================*/

.sfEventHeading {
    margin-bottom: 4rem;
}

.sfEventSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfEventTitle {
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
CARD
=========================================*/

.sfEventCard {
    position: relative;
    background: var(--sf-white);
    border: .08rem solid var(--sf-border);
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sfEventCard:hover {
    transform: translateY(-.6rem);
    box-shadow: var(--sf-shadow-lg);
    border-color: var(--sf-primary);
}

/*=========================================
IMAGE
=========================================*/

.sfEventImage {
    overflow: hidden;
}

.sfEventImage img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: .5s;
}

.sfEventCard:hover .sfEventImage img {
    transform: scale(1.08);
}

/*=========================================
ICON
=========================================*/

.sfEventIcons {
    position: absolute;
    left: 50%;
    top: 11.5rem;
    transform: translateX(-50%);
    width: 3.8rem;
    height: 3.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sf-white);
    color: var(--sf-primary);
    font-size: 1.5rem;
    border: .12rem solid var(--sf-primary-light);
    box-shadow: var(--sf-shadow);
    transition: var(--sf-transition);
}

.sfEventCard:hover .sfEventIcons {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: translateX(-50%) rotateY(180deg);
}

/*=========================================
CONTENT
=========================================*/

.sfEventContent {
    padding: 2.8rem 1.4rem 1.8rem;
    text-align: center;
}

.sfEventContent h3 {
    margin-bottom: .8rem;
    color: var(--sf-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.sfEventContent p {
    margin: 0;
    color: var(--sf-text);
    font-size: .95rem;
    line-height: 1.8;
}

/*=========================================
BUTTON
=========================================*/

.sfEventBtn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 2.2rem;
    border: .1rem solid var(--sf-primary);
    border-radius: 1rem;
    color: var(--sf-primary);
    background: var(--sf-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--sf-transition);
}

.sfEventBtn:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
}

.sfEventBtn i {
    transition: .35s;
}

.sfEventBtn:hover i {
    transform: translateX(.35rem);
}

/*=========================================
TABLET
=========================================*/

@media(max-width:62rem) {
    .sfEventSection {
        padding: 5rem 0;
    }

    .sfEventTitle {
        font-size: 2.1rem;
    }
}

/*=========================================
MOBILE
=========================================*/

@media(max-width:48rem) {
    .sfEventSection {
        padding: 4rem 0;
    }

    .sfEventHeading {
        margin-bottom: 2.5rem;
    }

    .sfEventTitle {
        font-size: 1.8rem;
    }

    .sfEventContent {
        padding: 1.6rem 1rem 1.5rem;
    }

    .sfEventIcon {
        width: 3.4rem;
        height: 3.4rem;
        top: 10rem;
        font-size: 1.3rem;
    }

    .sfEventBtn {
        width: 100%;
        justify-content: center;
    }

}

/*=========================================
OUR PROCESS
=========================================*/

.sfProcessSection {
    padding: 6rem 0;
    letter-spacing: 3ic;
    background: var(--sf-white);
}

/*=========================================
HEADING
=========================================*/
.sfProcessHeading {
    margin-bottom: 2rem;
}

.sfProcessSubTitle {
    display: inline-block;
    margin-bottom: .8rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sfProcessTitle {
    margin: 0;
    color: var(--sf-heading);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/*=========================================
ROW
=========================================*/
.sfProcessRow {
    position: relative;
}

/* Dotted Line */
.sfProcessRow::before {
    content: "";
    position: absolute;
    top: 4.3rem;
    left: 12%;
    right: 12%;
    border-top: .12rem dashed var(--sf-border);
    z-index: 0;
}

/*=========================================
CARD
=========================================*/
.sfProcessCard {
    position: relative;
    text-align: center;
    z-index: 2;
}

/*=========================================
STEP NUMBER
=========================================*/
.sfProcessNumber {
    position: absolute;
    top: 22px;
    left: 28%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: .9rem;
    font-weight: 700;
    box-shadow: var(--sf-shadow);
}

/*=========================================
ICON
=========================================*/
.sfProcessIcon {
    width: 5rem;
    height: 5rem;
    margin: 1.8rem auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sf-white);
    border: .12rem solid var(--sf-primary-light);
    color: var(--sf-primary);
    font-size: 2rem;
    transition: var(--sf-transition);
    box-shadow: var(--sf-shadow);
}

.sfProcessCard:hover .sfProcessIcon {
    background: var(--sf-primary);
    color: var(--sf-white);
    transform: rotateY(180deg);
}

/*=========================================
TITLE
=========================================*/
.sfProcessCard h3 {
    margin-bottom: .8rem;
    color: var(--sf-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
}

/*=========================================
TEXT
=========================================*/
.sfProcessCard p {
    margin: 0 auto;
    max-width: 14rem;
    color: var(--sf-text);
    font-size: .95rem;
    line-height: 1.8;
}

/*=========================================
TABLET
=========================================*/
@media(max-width:62rem) {
    .sfProcessSection {
        padding: 5rem 0;
    }

    .sfProcessTitle {
        font-size: 2.1rem;
    }

    .sfProcessRow::before {
        display: none;
    }

    .sfProcessCard {
        margin-bottom: 3rem;
    }
}

/*=========================================
MOBILE
=========================================*/
@media(max-width:48rem) {
    .sfProcessSection {
        padding: 4rem 0;
    }

    .sfProcessHeading {
        margin-bottom: 0rem;
    }

    .sfProcessTitle {
        font-size: 1.8rem;
    }

    .sfProcessIcon {
        width: 4.2rem;
        height: 4.2rem;
        font-size: 1.7rem;
    }

    .sfProcessNumber {
        width: 2rem;
        height: 2rem;
        font-size: .8rem;
    }

    .sfProcessCard {
        margin-bottom: 0rem;
    }

    .sfProcessCard p {
        max-width: 100%;
    }
}

.sfWedServiceSec {
    background: var(--sf-white);
}

.sfWedTitle {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sf-secondary);
}

.sfWedTitle span {
    color: var(--sf-primary);
}

.sfWedDivider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    margin-top: .8rem;
}

.sfWedDivider span {
    width: 4rem;
    height: .15rem;
    background: var(--sf-primary);
    display: block;
}

.sfWedDivider i {
    font-size: 1.2rem;
    color: var(--sf-primary);
}

.sfWedCard {
    background: var(--sf-white);
    border: .1rem solid #ebebeb;
    border-radius: 1rem;
    padding: 2rem 1.3rem;
    text-align: center;
    height: 100%;
    transition: .35s;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .05);
}

.sfWedCard:hover {
    transform: translateY(-.4rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .08);
}

.sfWedIcon {
    width: 5rem;
    height: 5rem;
    margin: auto auto 1.2rem;
    border-radius: 50%;
    background: var(--sf-primary-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sfWedIcon i {
    font-size: 2.3rem;
    color: var(--sf-primary);
}

.sfWedCard h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sf-secondary);
    line-height: 1.5;
    margin-bottom: .8rem;
}

.sfWedCard p {
    font-size: .95rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

@media(max-width:991.98px) {

    .sfWedTitle {
        font-size: 2rem;
    }

}

@media(max-width:767.98px) {

    .sfWedTitle {
        font-size: 1.8rem;
    }

    .sfWedCard {
        padding: 1.8rem 1rem;
    }

    .sfWedIcon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .sfWedIcon i {
        font-size: 2rem;
    }

}

@media(max-width:575.98px) {

    .sfWedTitle {
        font-size: 1.6rem;
    }

}

.sfBreadCrumb {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.sfBreadLink {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-primary);
    text-decoration: none;
    transition: .3s;
}

.sfBreadLink:hover {
    color: var(--sf-primary-dark);
}

.sfBreadIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1rem;
}

.sfBreadCurrent {
    font-size: 1rem;
    font-weight: 500;
    color: #4b5563;
}

@media (max-width:767.98px) {

    .sfBreadCrumb {
        gap: .5rem;
    }

    .sfBreadLink,
    .sfBreadCurrent,
    .sfBreadIcon {
        font-size: .95rem;
    }

}

/*==============================
   SURAT TAXI HIRE PRICING
===============================*/

.sfPriceSec {
    background: var(--sf-white);
}

.sfPriceTitle {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin-bottom: .6rem;
}

.sfPriceTitle span {
    color: var(--sf-primary);
}

.sfPriceSubTitle {
    font-size: 1rem;
    color: var(--sf-text);
    margin-bottom: 1.2rem;
}

.sfPriceDivider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
}

.sfPriceDivider span {
    width: 3rem;
    height: .15rem;
    background: var(--sf-primary);
    border-radius: 5rem;
}

.sfPriceDivider i {
    color: var(--sf-primary);
    font-size: 1.2rem;
}

/*==============================
CARD
===============================*/

.sfPriceCard {

    position: relative;

    height: 100%;

    background: var(--sf-white);

    border: .1rem solid #e8e8e8;

    border-radius: 1.2rem;

    padding: 2rem 1.7rem;

    text-align: center;

    overflow: hidden;

    transition: .35s;

    box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .05);

}

.sfPriceCard:hover {

    transform: translateY(-.6rem);

    border-color: var(--sf-primary);

    box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, .12);

}

.sfPriceActive {

    border-color: var(--sf-primary);

    transform: translateY(-.5rem);

}

/*==============================
BADGE
===============================*/

.sfPriceBadge {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    background: var(--sf-primary);

    color: var(--sf-white);

    font-size: .8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .05rem;

    padding: .8rem 0;

}

/*==============================
ICON
===============================*/

.sfPriceIcon {

    width: 5rem;

    height: 5rem;

    margin: 1.8rem auto 1.4rem;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    justify-content: center;

    align-items: center;

    border: .1rem solid rgba(22, 163, 74, .2);

}

.sfPriceIcon i {

    font-size: 2rem;

    color: var(--sf-primary);

}

/*==============================
TEXT
===============================*/

.sfPriceCard h3 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .5rem;

}

.sfPriceText {

    font-size: 1rem;

    color: var(--sf-text);

    margin-bottom: 1.6rem;

}

/*==============================
PRICE
===============================*/

.sfPriceAmount {

    font-size: 2.6rem;

    font-weight: 700;

    color: var(--sf-primary);

    margin-bottom: 2rem;

    line-height: 1;

}

.sfPriceAmount span {

    display: block;

    font-size: .95rem;

    color: var(--sf-primary);

    margin-top: .7rem;

}

/*==============================
LIST
===============================*/

.sfPriceList {

    list-style: none;

    margin: 0;

    padding: 0;

    text-align: left;

}

.sfPriceList li {

    display: flex;

    align-items: center;

    gap: .8rem;

    font-size: 1rem;

    color: var(--sf-secondary);

    margin-bottom: 1rem;

}

.sfPriceList i {

    color: var(--sf-primary);

    font-size: 1.1rem;

}

/*==============================
BUTTON
===============================*/

.sfPriceBtnFill,
.sfPriceBtnOutline {

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    height: 3.5rem;

    border-radius: .7rem;

    font-size: 1rem;

    font-weight: 600;

    margin-top: 2rem;

    transition: .35s;

}

.sfPriceBtnFill {

    background: var(--sf-primary);

    color: var(--sf-white);

    border: .1rem solid var(--sf-primary);

}

.sfPriceBtnFill:hover {

    background: var(--sf-primary-dark);

    border-color: var(--sf-primary-dark);

    color: var(--sf-white);

}

.sfPriceBtnOutline {

    border: .1rem solid var(--sf-primary);

    color: var(--sf-primary);

    background: transparent;

}

.sfPriceBtnOutline:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

/*==============================
RESPONSIVE
===============================*/

@media(max-width:1199.98px) {

    .sfPriceCard {

        padding: 2rem 1.4rem;

    }

}

@media(max-width:991.98px) {

    .sfPriceTitle {

        font-size: 2rem;

    }

    .sfPriceCard {

        margin-bottom: 1rem;

    }

}

@media(max-width:767.98px) {

    .sfPriceTitle {

        font-size: 1.8rem;

    }

    .sfPriceAmount {

        font-size: 2.2rem;

    }

    .sfPriceCard {

        padding: 2rem 1.3rem;

    }

}

@media(max-width:575.98px) {

    .sfPriceTitle {

        font-size: 1.6rem;

    }

    .sfPriceCard {

        padding: 1.8rem 1.2rem;

    }

    .sfPriceCard h3 {

        font-size: 1.3rem;

    }

    .sfPriceAmount {

        font-size: 2rem;

    }

    .sfPriceBtnFill,
    .sfPriceBtnOutline {

        height: 3.2rem;

        font-size: .95rem;

    }

}

/*==============================
TRUST SECTION
==============================*/

.sfTrustSec {

    background: var(--sf-white);

}

.sfTrustWrap {

    background: linear-gradient(90deg, #f7fbf8, #ffffff, #f7fbf8);

    border: .1rem solid #edf1ed;

    border-radius: 1rem;

    padding: 1.5rem;

    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .05);

}

.sfTrustItem {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    transition: .35s;

}

.sfTrustItem:hover {

    transform: translateY(-.3rem);

}

.sfTrustIcon {

    width: 3.8rem;

    height: 3.8rem;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfTrustIcon i {

    font-size: 1.8rem;

    color: var(--sf-primary);

}

.sfTrustContent h5 {

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin: 0 0 .4rem;

}

.sfTrustContent p {

    font-size: .93rem;

    color: var(--sf-text);

    margin: 0;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991.98px) {

    .sfTrustWrap {

        padding: 1.8rem;

    }

}

@media(max-width:767.98px) {

    .sfTrustWrap {

        padding: 1.5rem;

    }

    .sfTrustItem {

        justify-content: flex-start;

    }

}

@media(max-width:575.98px) {

    .sfTrustWrap {

        padding: 1.2rem;

    }

    .sfTrustItem {

        gap: .8rem;

    }

    .sfTrustIcon {

        width: 3.3rem;

        height: 3.3rem;

    }

    .sfTrustIcon i {

        font-size: 1.5rem;

    }

    .sfTrustContent h5 {

        font-size: 1rem;

    }

    .sfTrustContent p {

        font-size: .9rem;

    }

}

/*=========================================
        OUTSTATION PRICING
=========================================*/

.sfOutPriceSec {
    background: var(--sf-white);
}

.sfOutPriceTitle {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin-bottom: .7rem;
}

.sfOutPriceTitle span {
    color: var(--sf-primary);
}

.sfOutPriceTitle small {
    font-size: 1.6rem;
    color: var(--sf-secondary);
    font-weight: 500;
}

/*=========================================
        DIVIDER
=========================================*/

.sfOutPriceDivider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
}

.sfOutPriceDivider span {
    width: 3rem;
    height: .15rem;
    background: var(--sf-primary);
    border-radius: 5rem;
}

.sfOutPriceDivider i {
    color: var(--sf-primary);
    font-size: 1.2rem;
}

/*=========================================
        TABLE WRAPPER
=========================================*/

.sfOutPriceTableWrap {

    overflow-x: auto;

    border-radius: 1rem;

    border: .1rem solid #e7e7e7;

    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .05);

    -webkit-overflow-scrolling: touch;

}

/* Hide Scrollbar */

.sfOutPriceTableWrap::-webkit-scrollbar {
    height: 0;
}

.sfOutPriceTableWrap {
    scrollbar-width: none;
}

/*=========================================
        TABLE
=========================================*/

.sfOutPriceTable {

    min-width: 70rem;

    margin: 0;

    background: var(--sf-white);

}

.sfOutPriceTable thead th {

    background: var(--sf-primary);

    color: var(--sf-white);

    font-size: 1rem;

    font-weight: 600;

    padding: 1.2rem 1rem;

    text-align: center;

    border-right: .1rem solid rgba(255, 255, 255, .2);

    white-space: nowrap;

}

.sfOutPriceTable thead th:first-child {

    border-top-left-radius: .9rem;

}

.sfOutPriceTable thead th:last-child {

    border-top-right-radius: .9rem;

    border-right: none;

}

.sfOutPriceTable tbody td {

    font-size: 1rem;

    color: var(--sf-secondary);

    padding: 1.3rem 1rem;

    text-align: center;

    border-top: .1rem solid #ececec;
    border-left: .1rem solid #ececec;
    white-space: nowrap;

}

.sfOutPriceTable tbody tr {

    transition: .3s;

}

.sfOutPriceTable tbody tr:hover {

    background: #f8fcf8;

}

.sfOutPriceTable tbody td:first-child {

    font-weight: 600;

}

/*=========================================
        BUTTON
=========================================*/

.sfOutPriceBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .6rem;

    padding: 1rem 2.6rem;

    border: .1rem solid var(--sf-primary);

    border-radius: .8rem;

    text-decoration: none;

    color: var(--sf-primary);

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfOutPriceBtn:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

.sfOutPriceBtn i {

    font-size: 1rem;

}

/*=========================================
        RESPONSIVE
=========================================*/

@media (max-width:991.98px) {

    .sfOutPriceTitle {

        font-size: 2rem;

    }

}

@media (max-width:767.98px) {

    .sfOutPriceTitle {

        font-size: 1.8rem;

    }

    .sfOutPriceTitle small {

        font-size: 1.2rem;

        display: block;

        margin-top: .4rem;

    }

    .sfOutPriceBtn {

        width: 100%;

    }

}

@media (max-width:575.98px) {

    .sfOutPriceSec {

        padding: 4rem 0;

    }

    .sfOutPriceTitle {

        font-size: 1.6rem;

    }

    .sfOutPriceTable {

        min-width: 62rem;

    }

    .sfOutPriceTable thead th {

        font-size: .95rem;

        padding: 1rem;

    }

    .sfOutPriceTable tbody td {

        font-size: .95rem;

        padding: 1rem;

    }

}

.custom-bg {
    padding: 1.5rem;
    background-image: url(../images/Custom-bg.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
}


/*=====================================
   SURAT TAXI HIRE - OUR FLEET
======================================*/

.sfFleetSec {
    background: var(--sf-white);
}

/*==========================
 Tabs
==========================*/

.sfFleetTabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: .5rem;
    scrollbar-width: none;
}

.sfFleetTabs::-webkit-scrollbar {
    display: none;
}

.sfFleetTabs .nav-item {
    flex: 0 0 auto;
}

.sfFleetTabs .nav-link {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;

    min-width: 15rem;

    height: 4.2rem;

    padding: 0 2rem;

    background: var(--sf-white);

    color: var(--sf-secondary);

    border: .1rem solid #e5e7eb;

    border-radius: .8rem;

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfFleetTabs .nav-link i {

    font-size: 1.4rem;

}

.sfFleetTabs .nav-link.active {

    background: var(--sf-primary);

    color: var(--sf-white);

    border-color: var(--sf-primary);

}

.sfFleetTabs .nav-link:hover {

    border-color: var(--sf-primary);

    color: var(--sf-primary);

}

.sfFleetTabs .nav-link.active:hover {

    color: var(--sf-white);

}

/*==========================
 Card
==========================*/

.sfFleetCard {

    height: 100%;

    background: var(--sf-white);

    border: .1rem solid #ececec;

    border-radius: 1rem;

    overflow: hidden;

    transition: .35s;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);

}

.sfFleetCard:hover {

    transform: translateY(-.5rem);

    box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, .12);

}

/*==========================
 Image
==========================*/

.sfFleetImg {

    overflow: hidden;

}

.sfFleetImg img {

    width: 100%;

    aspect-ratio: 4/3;

    object-fit: cover;

    transition: .45s;

}

.sfFleetCard:hover .sfFleetImg img {

    transform: scale(1.06);

}

/*==========================
 Body
==========================*/

.sfFleetBody {
    text-align: left;
}

.sfFleetBody h4 {

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1.2rem;

}

/*==========================
 Vehicle Info
==========================*/

.sfFleetInfo {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    padding: 0;

    margin: 0 0 1.3rem;

    list-style: none;

}

.sfFleetInfo li {

    display: flex;

    align-items: center;

    gap: .5rem;

    font-size: 1rem;

    color: var(--sf-secondary);

}

.sfFleetInfo i {

    color: var(--sf-primary);

    font-size: 1.2rem;

}

/*==========================
 Description
==========================*/

.sfFleetBody p {

    font-size: 1rem;

    color: var(--sf-text);

    line-height: 1.8;

    margin-bottom: 1.8rem;

}

/*==========================
 Button
==========================*/

.sfFleetBtn {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 3.4rem;

    border: .1rem solid var(--sf-primary);

    border-radius: .7rem;

    text-decoration: none;

    color: var(--sf-primary);

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfFleetBtn:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

/*==========================
 Responsive
==========================*/

@media (max-width:991.98px) {

    .sfFleetTabs .nav-link {

        min-width: 13rem;

    }

}

@media (max-width:767.98px) {

    .sfFleetTabs {

        gap: .8rem;

    }

    .sfFleetTabs .nav-link {

        min-width: 12rem;

        height: 3.8rem;

        font-size: .95rem;

    }

    .sfFleetBody h4 {

        font-size: 1.4rem;

    }

}

@media (max-width:575.98px) {

    .sfFleetTabs .nav-link {

        min-width: 11rem;

        padding: 0 1.4rem;

    }

    .sfFleetBody h4 {

        font-size: 1.3rem;

    }

    .sfFleetBody p {

        min-height: auto;

    }

}

/*====================================
    Fleet Tabs
====================================*/

.sfFleetTabs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}

/*====================================
    Mobile Horizontal Scroll
====================================*/

@media (max-width:991.98px) {

    .sfFleetTabs {

        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .5rem;
    }

    .sfFleetTabs::-webkit-scrollbar {
        display: none;
    }

    .sfFleetTabs .nav-item {
        flex: 0 0 auto;
    }

    .sfFleetTabs .nav-link {

        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;

        min-width: 12rem;
        white-space: nowrap;
        flex-shrink: 0;

    }

}

@media (max-width:575.98px) {

    .sfFleetTabs .nav-link {

        min-width: 11rem;

    }

}

/*=====================================
    ABOUT SECTION
=====================================*/

.sfAboutSec {
    background: var(--sf-white);
}

.sfAboutImg {
    border-radius: 10px;
    height: 800px;
}



/*=====================================
    CONTENT
=====================================*/

.sfAboutSubTitle {

    display: inline-flex;

    align-items: center;

    gap: .8rem;

    color: var(--sf-primary);

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 1rem;

}

.sfAboutSubTitle::after {

    content: "";

    width: 3rem;

    height: .12rem;

    background: var(--sf-primary);

}

.sfAboutTitle {

    font-size: 3rem;

    font-weight: 700;

    color: var(--sf-secondary);

    line-height: 1.25;

    margin-bottom: 1.5rem;

}

.sfAboutTitle span {

    color: var(--sf-primary);

}

.sfAboutText {

    font-size: 1rem;

    color: var(--sf-text);

    line-height: 1.9;

    margin-bottom: 2rem;

}

/*=====================================
    LIST
=====================================*/

.sfAboutList {

    list-style: none;

    padding: 0;

    margin: 0;

}

.sfAboutList li {

    display: flex;

    align-items: center;

    gap: .8rem;

    margin-bottom: 0.5rem;

    color: var(--sf-secondary);

    font-size: 1rem;

    line-height: 1.8;

}

.sfAboutList i {

    color: var(--sf-primary);

    font-size: 1.2rem;

    margin-top: .2rem;

}

/*=====================================
    STATS
=====================================*/

.sfAboutStats {

    background: #fbfcfc;

    border: .1rem solid #ebebeb;

    border-radius: 1.4rem;

    overflow: hidden;

    box-shadow: 0 .5rem 1.8rem rgba(0, 0, 0, .05);

}

.sfAboutStatItem {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.6rem;

    border-bottom: .1rem solid #ececec;

    transition: .35s;

}

.sfAboutStatItem:last-child {

    border-bottom: none;

}

.sfAboutStatItem:hover {

    background: var(--sf-primary-light);

}

.sfAboutStatIcon {

    width: 4rem;

    height: 4rem;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.sfAboutStatIcon i {

    font-size: 1.8rem;

    color: var(--sf-primary);

}

.sfAboutStatItem h4 {

    font-size: 2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin: 0;

}

.sfAboutStatItem p {

    margin: .4rem 0 0;

    font-size: 1rem;

    color: var(--sf-text);

}

/*=====================================
    RESPONSIVE
=====================================*/

@media(max-width:1199.98px) {

    .sfAboutTitle {

        font-size: 2.5rem;

    }

}

@media(max-width:991.98px) {

    .sfAboutContent {

        margin-top: 1rem;

    }

    .sfAboutStats {

        margin-top: 2rem;

    }

}

@media(max-width:767.98px) {

    .sfAboutTitle {

        font-size: 2rem;

    }

}

@media(max-width:575.98px) {

    .sfAboutTitle {

        font-size: 1.8rem;

    }

    .sfAboutText {

        font-size: .95rem;

    }

    .sfAboutStatItem {

        padding: 1.2rem;

    }

    .sfAboutStatIcon {

        width: 3.5rem;

        height: 3.5rem;

    }

    .sfAboutStatIcon i {

        font-size: 1.5rem;

    }

    .sfAboutStatItem h4 {

        font-size: 1.6rem;

    }

}

/*======================================
        WHY CHOOSE SECTION
======================================*/

.sfWhySec {
    background: var(--sf-white);
}

.sfWhyWrap {

    background: linear-gradient(90deg, #f8fcf9, #ffffff, #f8fcf9);

    border: .1rem solid #e8ece9;

    border-radius: 1.4rem;

    overflow: hidden;

    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .05);

}

/*======================================
        LEFT CONTENT
======================================*/

.sfWhyContent {

    padding: 2rem;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.sfWhyTitle {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    line-height: 1.3;

    margin-bottom: 1rem;

}

.sfWhyTitle span {

    display: block;

    color: var(--sf-primary);

}

.sfWhyLine {

    width: 4rem;

    height: .18rem;

    background: var(--sf-primary);

    border-radius: 5rem;

    margin-bottom: 1.5rem;

}

.sfWhyContent p {

    font-size: 1rem;

    line-height: 1.8;

    color: var(--sf-text);

    margin: 0;

}

/*======================================
        FEATURE ITEM
======================================*/

.sfWhyItem {

    position: relative;

    height: 100%;

    min-height: 14rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 2rem 1rem;

    transition: .35s;

}

.sfWhyItem::after {

    content: "";

    position: absolute;

    top: 15%;

    right: 0;

    width: .1rem;

    height: 70%;

    background: #e6ece8;

}

.sfWhyBorderNone::after {

    display: none;

}

.sfWhyItem:hover {

    background: rgba(22, 163, 74, .04);

}

/*======================================
        ICON
======================================*/

.sfWhyIcon {

    width: 4.5rem;

    height: 4.5rem;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 1.2rem;

    background: var(--sf-primary-light);

    transition: .35s;

}

.sfWhyIcon i {

    font-size: 2rem;

}

.sfWhyItem:hover .sfWhyIcon {

    transform: translateY(-.4rem);
    color: white;

}

/*======================================
        TITLE
======================================*/

.sfWhyItem h4 {

    font-size: 1.15rem;

    font-weight: 600;

    color: var(--sf-secondary);

    line-height: 1.5;

    margin: 0;

}

/*======================================
        RESPONSIVE
======================================*/

@media(max-width:1199.98px) {

    .sfWhyContent {

        padding: 2rem;

    }

}

@media(max-width:991.98px) {

    .sfWhyContent {

        text-align: center;

    }

    .sfWhyLine {

        margin: 0 auto 1.5rem;

    }

    .sfWhyItem {

        min-height: 12rem;

    }

    .sfWhyItem::after {

        display: none;

    }

}

@media(max-width:767.98px) {

    .sfWhyTitle {

        font-size: 1.8rem;

    }

    .sfWhyContent {

        padding: 2rem 1.5rem;

    }

    .sfWhyItem {

        border-top: .1rem solid #ececec;

    }

}

@media(max-width:575.98px) {

    .sfWhyWrap {

        border-radius: 1rem;

    }

    .sfWhyTitle {

        font-size: 1.6rem;

    }

    .sfWhyItem {

        min-height: 10rem;

        padding: 1.8rem 1rem;

    }

    .sfWhyIcon {

        width: 4rem;

        height: 4rem;

    }

    .sfWhyIcon i {

        font-size: 1.7rem;

    }

    .sfWhyItem h4 {

        font-size: 1rem;

    }

}

/*==========================================
        CARD
==========================================*/

.sfServiceCards {

    position: relative;

    height: 100%;

    background: var(--sf-white);

    border: .1rem solid #ececec;

    border-radius: 1.2rem;

    transition: .35s;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);

}

.sfServiceCards:hover {

    transform: translateY(-.6rem);

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .12);

}

/*==========================================
        IMAGE
==========================================*/

.sfServiceImg {

    overflow: hidden;

}

.sfServiceImg img {

    width: 100%;

    aspect-ratio: 16/10;

    object-fit: cover;

    transition: .45s;

}

.sfServiceCards:hover .sfServiceImg img {

    transform: scale(1.08);

}

/*==========================================
        FLOATING ICON
==========================================*/

.sfServiceIcon {

    position: absolute;

    top: -1.8rem;

    left: 50%;

    transform: translateX(-50%);

    width: 4.8rem;

    height: 4.8rem;

    border-radius: 50%;

    background: var(--sf-white);

    border: .2rem solid var(--sf-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);

    transition: .35s;

}

.sfServiceIcon i {

    font-size: 2rem;

    color: var(--sf-primary);

}

.sfServiceCards:hover .sfServiceIcon {

    background: var(--sf-primary);

    transform: translateX(-50%) translateY(-.3rem);

}

.sfServiceCards:hover .sfServiceIcon i {

    color: var(--sf-white);

}

/*==========================================
        BODY
==========================================*/

.sfServiceBody {

    padding: 1.5rem;

    text-align: center;

}

.sfServiceBody h4 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1rem;

}

.sfServiceBody p {

    font-size: 1rem;

    color: var(--sf-text);

    line-height: 1.8;

    margin: 0;

}

.sfService img {
    margin-top: 30px;
    width: 100%;
    border-radius: 20px;
}

/*==========================================
        RESPONSIVE
==========================================*/

@media(max-width:1199.98px) {

    .sfServiceBody h4 {

        font-size: 1.35rem;

    }

}

@media(max-width:991.98px) {

    .sfServiceCards {

        margin-bottom: .5rem;

    }

}

@media(max-width:767.98px) {

    .sfServiceBody {

        padding: 2.6rem 1.2rem 1.8rem;

    }

    .sfServiceIcon {

        width: 4.4rem;

        height: 4.4rem;

    }

    .sfServiceIcon i {

        font-size: 1.8rem;

    }

    .sfServiceBody h4 {

        font-size: 1.3rem;

    }

}

@media(max-width:575.98px) {

    .sfServiceBody {

        padding: 2.5rem 1rem 1.6rem;

    }

    .sfServiceBody h4 {

        font-size: 1.2rem;

    }

    .sfServiceBody p {

        font-size: .95rem;

    }

    .sfServiceIcon {

        width: 4rem;

        height: 4rem;

    }

    .sfServiceIcon i {

        font-size: 1.6rem;

    }

}

/*=========================================
        REVIEW SECTION
=========================================*/

.sfReviewSec {
    background: var(--sf-white);
}

.sfReviewWrap {

    background: linear-gradient(90deg, #f8fcf9, #ffffff, #f8fcf9);

    border: .1rem solid #e9eceb;

    border-radius: 1.5rem;

    overflow: hidden;

    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .05);

}

/*=========================================
        LEFT CONTENT
=========================================*/

.sfReviewContent {

    padding: 1.5rem;

}

.sfReviewTitle {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1rem;

}

.sfReviewTitle span {

    color: var(--sf-primary);

}

.sfReviewStars {

    display: flex;

    gap: .3rem;

    margin-bottom: 1rem;

}

.sfReviewStars i {

    color: #f6b500;

    font-size: 1.2rem;

}

.sfReviewQuote {

    color: var(--sf-primary);

    font-size: 3rem;

    line-height: 1;

    margin-bottom: .8rem;

}

.sfReviewText {

    font-size: 1rem;

    color: var(--sf-secondary);

    line-height: 1.8;

    margin-bottom: 2rem;

}

/*=========================================
        USER
=========================================*/

.sfReviewUser {

    display: flex;

    align-items: center;

    gap: 1rem;

}

.sfReviewUser img {

    width: 3.5rem;

    height: 3.5rem;

    border-radius: 50%;

    object-fit: cover;

}

.sfReviewUser h5 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin: 0;

}

.sfReviewUser span {

    font-size: .95rem;

    color: var(--sf-text);

}

/*=========================================
        STATS
=========================================*/

.sfReviewStat {

    position: relative;

    height: 100%;

    min-height: 16rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}

.sfReviewStat::after {

    content: "";

    position: absolute;

    right: 0;

    top: 18%;

    width: .1rem;

    height: 64%;

    background: #e8eceb;

}

.sfReviewStat i {

    font-size: 2.2rem;

    color: var(--sf-primary);

    margin-bottom: 1rem;

}

.sfReviewStat h3 {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .5rem;

}

.sfReviewStat p {

    font-size: 1rem;

    color: var(--sf-text);

    margin: 0;

}

/*=========================================
        CAR
=========================================*/

.sfReviewCar {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 18rem;

}

.sfReviewCircle {

    position: absolute;

    width: 12rem;

    height: 12rem;

    border-radius: 50%;

    background: var(--sf-primary);

    top: 1rem;

    right: 2rem;

    z-index: 0;

}

.sfReviewCar img {

    position: relative;

    width: 100%;

    max-width: 18rem;

    z-index: 2;

    transition: .4s;

}

.sfReviewCar:hover img {

    transform: translateY(-.5rem);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfReviewContent {

        padding: 2rem;

    }

}

@media(max-width:991.98px) {

    .sfReviewContent {

        text-align: center;

    }

    .sfReviewStars {

        justify-content: center;

    }

    .sfReviewUser {

        justify-content: center;

    }

    .sfReviewStat {

        min-height: 12rem;

    }

    .sfReviewStat::after {

        display: none;

    }

    .sfReviewCar {

        min-height: 15rem;

    }

}

@media(max-width:767.98px) {

    .sfReviewTitle {

        font-size: 1.8rem;

    }

    .sfReviewContent {

        padding: 1.8rem;

    }

    .sfReviewCircle {

        width: 10rem;

        height: 10rem;

    }

}

@media(max-width:575.98px) {

    .sfReviewWrap {

        border-radius: 1rem;

    }

    .sfReviewTitle {

        font-size: 1.6rem;

    }

    .sfReviewStat {

        min-height: 10rem;

        padding: 1rem;

    }

    .sfReviewStat h3 {

        font-size: 1.8rem;

    }

    .sfReviewStat i {

        font-size: 1.8rem;

    }

    .sfReviewCar {

        padding: 2rem 0;

    }

    .sfReviewCircle {

        width: 9rem;

        height: 9rem;

        right: 50%;

        transform: translateX(50%);

    }

}

/*=========================================
        CONTACT SECTION
=========================================*/

.sfContactSec {
    background: var(--sf-white);
}

.sfContactWrapper {

    background: var(--sf-white);

    border-radius: 1.5rem;

    padding: 2.5rem;

    box-shadow: 0 .8rem 3rem rgba(0, 0, 0, .08);

}

/*=========================================
        TITLE
=========================================*/

.sfContactTitle {

    font-size: 2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfContactTitle span {

    color: var(--sf-primary);

}

.sfContactLine {

    display: block;

    width: 4rem;

    height: .18rem;

    background: var(--sf-primary);

    border-radius: 5rem;

    margin-bottom: 2rem;

}

/*=========================================
        LEFT SIDE
=========================================*/

.sfContactInfo {

    padding-right: 2rem;

    border-right: .1rem solid #ececec;

}

.sfContactItem {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 2rem;

}

.sfContactIcon {

    width: 3.5rem;

    height: 3.5rem;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfContactIcon i {

    font-size: 1.4rem;

    color: var(--sf-primary);

}

.sfContactText h5 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: .5rem;

    color: var(--sf-secondary);

}

.sfContactText p,
.sfContactText a {

    display: block;

    font-size: 1rem;

    color: var(--sf-text);

    text-decoration: none;

    line-height: 1.8;

    margin: 0;

}

.sfContactText span {

    color: var(--sf-primary);

    font-weight: 600;

}

/*=========================================
        GOOGLE CARD
=========================================*/

.sfGoogleCard {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;

    padding: 1.3rem;

    border: .1rem solid #ececec;

    border-radius: 1rem;

    background: #fff;

}

.sfGoogleLogo {

    width: 4rem;

    height: 4rem;

    border-radius: 50%;

    background: #f8fafc;

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfGoogleLogo i {

    font-size: 2rem;

    color: #4285F4;

}

.sfGoogleContent h4 {

    font-size: 1.6rem;

    margin: 0;

    color: var(--sf-secondary);

}

.sfGoogleContent h4 span {

    color: #f7b500;

    font-size: 1rem;

    margin-left: .5rem;

}

.sfGoogleContent p {

    margin: .4rem 0 0;

    font-size: .9rem;

    color: var(--sf-text);

}

/*=========================================
        FORM
=========================================*/

.sfInputBox {

    position: relative;

}

.sfInputBox i {

    position: absolute;

    left: 1.2rem;

    top: 50%;

    transform: translateY(-50%);

    color: #8b8b8b;

    font-size: 1rem;

}

.sfInputBox input,
.sfInputBox select {

    width: 100%;

    height: 3.8rem;

    border: .1rem solid #e7e7e7;

    border-radius: .8rem;

    padding: 0 1rem 0 3rem;

    font-size: 1rem;

    outline: none;

    transition: .3s;

    background: #fff;

}

.sfTextarea i {

    top: 1.4rem;

    transform: none;

}

.sfTextarea textarea {

    width: 100%;

    border: .1rem solid #e7e7e7;

    border-radius: .8rem;

    padding: 1rem 1rem 1rem 3rem;

    font-size: 1rem;

    resize: none;

    outline: none;

}

.sfInputBox input:focus,
.sfInputBox select:focus,
.sfTextarea textarea:focus {

    border-color: var(--sf-primary);

}

/*=========================================
        BUTTON
=========================================*/

.sfContactBtn {

    width: 100%;

    height: 3.8rem;

    border: none;

    border-radius: .8rem;

    background: var(--sf-primary);

    color: var(--sf-white);

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfContactBtn:hover {

    background: var(--sf-primary-dark);

}

.sfContactBtn i {

    margin-left: .6rem;

}

.sfContactNote {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: .5rem;

    font-size: .95rem;

    color: var(--sf-text);

    margin: 0;

}

.sfContactNote i {

    color: var(--sf-primary);

}

/*=========================================
        QUICK CARDS
=========================================*/

.sfQuickCard {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem;

    border-radius: 1rem;

    background: #fff;

    border: .1rem solid #ececec;

    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .05);

    transition: .35s;

    height: 100%;

}

.sfQuickCard:hover {

    transform: translateY(-.4rem);

}

.sfQuickIcon {

    width: 4rem;

    height: 4rem;

    border-radius: 50%;

    background: var(--sf-primary);

    display: flex;

    justify-content: center;

    align-items: center;


}

.sfQuickIcon i {

    color: #fff;

    font-size: 1.5rem;

}

.sfQuickCard h5 {

    font-size: 1.1rem;

    margin-bottom: .4rem;

    color: var(--sf-secondary);

}

.sfQuickCard p {

    font-size: .95rem;

    margin: 0;

    color: var(--sf-secondary);

}

.sfQuickCard span {

    font-size: .85rem;

    color: var(--sf-text);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:991.98px) {

    .sfContactInfo {

        border-right: none;

        padding-right: 0;
    }

}

@media(max-width:767.98px) {

    .sfContactWrapper {

        padding: 1.5rem;

    }

    .sfContactTitle {

        font-size: 1.7rem;

    }

}

@media(max-width:575.98px) {

    .sfContactWrapper {

        padding: 1.2rem;

    }

    .sfContactTitle {

        font-size: 1.5rem;

    }

    .sfQuickCard {

        padding: 1.2rem;

    }

    .sfGoogleCard {

        flex-direction: column;

        text-align: center;

    }

}

/*=====================================
      AIRPORT HERO
=====================================*/

.sfAirportHero {
    margin-top: 5.9rem;
    position: relative;
    background: url("../images/taxi_bg.jpg") center center/cover no-repeat;
    overflow: hidden;
    padding-bottom: 7rem;
}

#local-bg {
    background: url("../images/local-bg.jpg") center center/cover no-repeat;
    padding-bottom: 4rem;
}

#outstation-bg {
    background: url("../images/outstation-bg.jpg") center center/cover no-repeat;
    padding-bottom: 4rem;
}

.sfAirportHero .container {
    position: relative;
    z-index: 2;
}

/*=====================================
      LEFT CONTENT
=====================================*/

.sfAirportHeroContent {
    color: var(--sf-white);
    text-align: left;
}

.sfAirportTag {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    font-size: 1rem;

    font-weight: 500;

    margin-bottom: 1.2rem;

}

.sfAirportTag span {

    color: var(--sf-primary);

}

.sfAirportHeroContent h1 {

    font-size: 3.9rem;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 1.5rem;

    color: var(--sf-white);

}

.sfAirportHeroContent h1 span {

    color: var(--sf-primary);

}

.sfAirportHeroContent p {

    max-width: 38rem;

    font-size: 1.1rem;

    line-height: 1.9;

    color: #eef2f6;

    margin-bottom: 2rem;

}

/*=====================================
      BUTTONS
=====================================*/

.sfAirportBtnGroup {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 2.5rem;

}

.sfAirportBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .8rem;

    height: 3rem;

    padding: 0 2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

    color: var(--sf-white);

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfAirportBtn:hover {

    background: var(--sf-primary-dark);

    color: var(--sf-white);

    transform: translateY(-.2rem);

}

.sfAirportBtnWhite {

    background: var(--sf-white);

    color: var(--sf-primary);

}

.sfAirportBtnWhite:hover {

    background: var(--sf-primary-light);

    color: var(--sf-primary);

}

/*=====================================
      FEATURES
=====================================*/

.sfAirportFeature {
    padding: 0;

    margin: 0;

    list-style: none;

}

.sfAirportFeature li {

    display: flex;

    align-items: center;

    gap: .8rem;

}

.sfAirportFeature i {

    font-size: 1.3rem;

    color: var(--sf-primary);

}

.sfAirportFeature span {

    display: flex;

    flex-direction: column;

    color: var(--sf-white);

    font-size: 1rem;

    font-weight: 600;

}

.sfAirportFeature small {

    font-size: .9rem;

    color: #cbd5e1;

}

/*=====================================
      RIGHT IMAGE
=====================================*/

.sfAirportHeroImg {

    text-align: right;

}

.sfAirportHeroImg img {

    width: 100%;

    max-width: 42rem;

    animation: sfAirportFloat 4s ease-in-out infinite;

}

@keyframes sfAirportFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-.8rem);

    }

    100% {

        transform: translateY(0);

    }

}

/*=====================================
      SERVICE BOX
=====================================*/

.sfAirportInfo {

    margin-top: -8rem;

    position: relative;

    z-index: 5;

}

.sfAirportCard {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    background: var(--sf-white);

    padding: 2rem;

    border-radius: 1.2rem;

    height: 100%;

    box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .08);

    transition: .35s;

}

.sfAirportCard:hover {

    transform: translateY(-.5rem);

}

.sfAirportCardIcon {

    width: 4rem;

    height: 4rem;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

}

.sfAirportCardIcon i {

    color: var(--sf-primary);

    font-size: 1.6rem;

}

.sfAirportCard h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .6rem;

}

.sfAirportCard p {

    font-size: 1rem;

    color: var(--sf-text);

    line-height: 1.8;

    margin: 0;

}

/*=====================================
      RESPONSIVE
=====================================*/

@media(max-width:991.98px) {

    .sfAirportHero {
        text-align: center;

    }

    .sfAirportHeroContent p {

        margin-inline: auto;

    }

    .sfAirportBtnGroup {

        justify-content: center;

    }

    .sfAirportFeature {

        justify-content: center;

    }

    .sfAirportHeroImg {

        text-align: center;

        margin-top: 3rem;

    }

}

@media(max-width:767.98px) {

    .sfAirportHeroContent h1 {

        font-size: 2.6rem;

    }


    .sfAirportCard {

        padding: 1.5rem;

    }

}

@media(max-width:575.98px) {

    .sfAirportHeroContent h1 {

        font-size: 2.1rem;

    }

    .sfAirportBtn {

        width: 100%;

    }



    .sfAirportFeature li {

        width: 48%;

    }

}

/*=========================================
        AIRPORT FARE SECTION
=========================================*/

.sfFareSec {
    background: var(--sf-white);
}

/*=========================================
        SECTION TITLE
=========================================*/

.sfFareTitle {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfFareTitle span {

    color: var(--sf-primary);

}

.sfFareDivider {

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfFareDivider span {

    width: 5rem;

    height: .2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

}

/*=========================================
        CARD
=========================================*/

.sfFareCard {
    border: .1rem solid #e8ecef;

    border-radius: 1.2rem;

    overflow: hidden;

    text-align: center;

    height: 100%;

    transition: .35s;

    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .05);

}


/*=========================================
        IMAGE
=========================================*/

.sfFareImg {

    padding: 1.5rem 1.5rem .5rem;

    overflow: hidden;

}

.sfFareImg img {

    width: 100%;

    max-width: 14rem;

    transition: .4s;

}

.sfFareCard:hover .sfFareImg img {

    transform: scale(1.08);

}

/*=========================================
        BODY
=========================================*/

.sfFareBody {

    padding: 1.2rem;

}

.sfFareBody h4 {

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1.2rem;

}

/*=========================================
        INFO
=========================================*/

.sfFareInfo {

    display: flex;

    justify-content: space-between;

    gap: 1.5rem;

    padding: 0;

    margin: 0 0 1.5rem;

    list-style: none;

    flex-wrap: wrap;

}

.sfFareInfo li {

    display: flex;

    align-items: center;

    gap: .5rem;

    font-size: .95rem;

    color: var(--sf-text);

}

.sfFareInfo i {

    color: var(--sf-primary);

    font-size: 1rem;

}

/*=========================================
        PRICE
=========================================*/

.sfFareBody h3 {

    font-size: 2rem;

    font-weight: 700;

    color: var(--sf-primary);

    margin-bottom: 1.6rem;

}

/*=========================================
        BUTTON
=========================================*/

.sfFareBtn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 3.3rem;

    border: .12rem solid var(--sf-primary);

    border-radius: .8rem;

    color: var(--sf-primary);

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfFareBtn:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfFareTitle {

        font-size: 2.2rem;

    }

}

@media(max-width:991.98px) {

    .sfFareCard {

        margin-bottom: .3rem;

    }

}

@media(max-width:767.98px) {

    .sfFareTitle {

        font-size: 1.9rem;

    }

    .sfFareBody {

        padding: 1rem;

    }

    .sfFareBody h4 {

        font-size: 1.25rem;

    }

    .sfFareBody h3 {

        font-size: 1.8rem;

    }

}

@media(max-width:575.98px) {

    .sfFareTitle {

        font-size: 1.6rem;

    }

    .sfFareImg img {

        max-width: 12rem;

    }


    .sfFareBtn {

        height: 3rem;

    }

}

/*=========================================
        AIRPORT ROUTES SECTION
=========================================*/

.sfAirportRouteSec {

    background: var(--sf-white);

}

/*=========================================
        COMMON CARD
=========================================*/

.sfAirportRouteCard,
.sfAirportInfoCard {

    background: var(--sf-white);

    border: .1rem solid #e8ecef;

    border-radius: 1.4rem;

    padding: 2rem;

    box-shadow: 0 .5rem 1.8rem rgba(0, 0, 0, .05);

    transition: .35s;

    height: 100%;

}

.sfAirportRouteCard:hover,
.sfAirportInfoCard:hover {

    transform: translateY(-.4rem);

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .10);

}

/*=========================================
        TITLE
=========================================*/

.sfAirportRouteHead h2,
.sfAirportInfoCard h2 {

    font-size: 2rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfAirportRouteHead span,
.sfAirportInfoCard h2 span {

    color: var(--sf-primary);

}

.sfAirportRouteLine {

    display: block;

    width: 4rem;

    height: .18rem;

    background: var(--sf-primary);

    border-radius: 5rem;

    margin-bottom: 1.8rem;

}

/*=========================================
        TABLE
=========================================*/

.sfAirportRouteTable {

    margin-bottom: 1.8rem;

}

.sfAirportRouteTable tr {

    transition: .3s;

}

.sfAirportRouteTable tr:hover {

    background: rgba(22, 163, 74, .05);

}

.sfAirportRouteTable td {

    border-bottom: .1rem solid #edf1f4;

    padding: 1rem .5rem;

    vertical-align: middle;

    font-size: 1rem;

    color: var(--sf-secondary);

}

.sfAirportRouteTable td:last-child {

    font-weight: 700;

    color: var(--sf-secondary);

}

.sfAirportRouteTable i {

    color: var(--sf-primary);

    font-size: 1.1rem;

}

/*=========================================
        BUTTON
=========================================*/

.sfAirportRouteBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .6rem;

    padding: .9rem 1.8rem;

    background: var(--sf-primary);

    color: var(--sf-white);

    border-radius: .8rem;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfAirportRouteBtn:hover {

    background: var(--sf-primary-dark);

    color: var(--sf-white);

}

/*=========================================
        RIGHT CONTENT
=========================================*/

.sfAirportInfoCard p {

    font-size: 1rem;

    line-height: 1.8;

    color: var(--sf-text);

    margin-bottom: 1rem;

}

/*=========================================
        INFO LIST
=========================================*/

.sfAirportInfoList {

    list-style: none;

    padding: 0;

    margin: 0;

}

.sfAirportInfoList li {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: .5rem 0;

    border-bottom: .1rem solid #edf1f4;

}

.sfAirportInfoList li:last-child {

    border-bottom: none;

}

.sfAirportInfoList i {

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--sf-primary-light);

    color: var(--sf-primary);

    font-size: 1.1rem;

    flex-shrink: 0;

}

.sfAirportInfoList strong {

    min-width: 10rem;

    font-size: 1rem;

    color: var(--sf-secondary);

}

.sfAirportInfoList span {

    font-size: 1rem;

    color: var(--sf-text);

}

/*=========================================
        IMAGE
=========================================*/

.sfAirportImage {

    border-radius: 1.2rem;

    overflow: hidden;

    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .08);

}

.sfAirportImage img {

    width: 100%;

    transition: .4s;

}

.sfAirportInfoCard:hover .sfAirportImage img {

    transform: scale(1.05);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfAirportRouteHead h2,
    .sfAirportInfoCard h2 {

        font-size: 1.8rem;

    }

}

@media(max-width:991.98px) {

    .sfAirportInfoCard {

        margin-top: 1rem;

    }

    .sfAirportImage {

        margin-top: 2rem;

    }

}

@media(max-width:767.98px) {

    .sfAirportRouteCard,
    .sfAirportInfoCard {

        padding: 1.5rem;

    }

    .sfAirportRouteHead h2,
    .sfAirportInfoCard h2 {

        font-size: 1.6rem;

    }

    .sfAirportInfoList strong {

        min-width: 8rem;

    }

}

@media(max-width:575.98px) {

    .sfAirportRouteTable td {

        font-size: .9rem;

        padding: .8rem .4rem;

    }

    .sfAirportRouteBtn {

        width: 100%;

    }

    .sfAirportInfoList li {

        align-items: flex-start;

    }

    .sfAirportInfoList strong {

        min-width: 7rem;

        font-size: .95rem;

    }

    .sfAirportInfoList span {

        font-size: .9rem;

    }

}

/*=========================================
        HOW IT WORKS
=========================================*/

.sfAirportStepSec {
    background: var(--sf-white);
}

/*=========================================
        SECTION TITLE
=========================================*/

.sfAirportStepTitle {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfAirportStepTitle span {

    color: var(--sf-primary);

}

.sfAirportStepDivider {

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfAirportStepDivider span {

    width: 5rem;

    height: .2rem;

    background: var(--sf-primary);

    border-radius: 5rem;

}

/*=========================================
        STEP CARD
=========================================*/

.sfAirportStepCard {

    position: relative;

    background: var(--sf-white);

    border: .1rem solid #e8ecef;

    border-radius: 1.4rem;

    padding: 3rem 1.5rem 2rem;

    text-align: center;

    height: 100%;

    overflow: visible;

    transition: .35s;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);

}

.sfAirportStepCard:hover {

    transform: translateY(-.5rem);

    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .10);

}

/*=========================================
        NUMBER BADGE
=========================================*/

.sfAirportStepNumber {

    position: absolute;

    top: -1rem;

    left: 50%;

    transform: translateX(-50%);

    width: 2.7rem;

    height: 2.7rem;

    border-radius: 50%;

    background: var(--sf-primary);

    color: var(--sf-white);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: .9rem;

    font-weight: 700;

    border: .3rem solid var(--sf-white);

    box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .08);

}

/*=========================================
        CONNECTOR LINE
=========================================*/

.sfAirportStepLine {

    position: absolute;

    top: 0;

    left: 50%;

    width: 100%;

    height: 0;

    border-top: .15rem dashed #d8dde5;

    transform: translateX(50%);

    z-index: -1;

}

.row>.col-xl:last-child .sfAirportStepLine {

    display: none;

}

/*=========================================
        ICON
=========================================*/

.sfAirportStepIcon {

    width: 5rem;

    height: 5rem;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 1.5rem;

    transition: .35s;

}

.sfAirportStepCard:hover .sfAirportStepIcon {

    background: var(--sf-primary);

}

.sfAirportStepIcon i {

    font-size: 2rem;

    color: var(--sf-primary);

    transition: .35s;

}

.sfAirportStepCard:hover .sfAirportStepIcon i {

    color: var(--sf-white);

}

/*=========================================
        CONTENT
=========================================*/

.sfAirportStepCard h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfAirportStepCard p {

    font-size: 1rem;

    line-height: 1.8;

    color: var(--sf-text);

    margin: 0;

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfAirportStepTitle {

        font-size: 2.2rem;

    }

    .sfAirportStepLine {

        display: none;

    }

}

@media(max-width:991.98px) {

    .sfAirportStepCard {

        padding: 2.8rem 1.3rem 1.8rem;

    }

}

@media(max-width:767.98px) {

    .sfAirportStepTitle {

        font-size: 1.9rem;

    }

    .sfAirportStepCard {

        padding: 2.5rem 1.2rem 1.8rem;

    }

    .sfAirportStepIcon {

        width: 4.5rem;

        height: 4.5rem;

    }

    .sfAirportStepIcon i {

        font-size: 1.7rem;

    }

    .sfAirportStepCard h4 {

        font-size: 1.2rem;

    }

}

@media(max-width:575.98px) {

    .sfAirportStepTitle {

        font-size: 1.6rem;

    }

    .sfAirportStepCard {

        padding: 2.3rem 1rem 1.5rem;

    }

    .sfAirportStepIcon {

        width: 4rem;

        height: 4rem;

    }

    .sfAirportStepIcon i {

        font-size: 1.5rem;

    }

    .sfAirportStepCard h4 {

        font-size: 1.1rem;

    }

    .sfAirportStepCard p {

        font-size: .95rem;

    }

}

/*=========================================
        BUTTON
=========================================*/

.sfLocalFeatureBtnWrap {

    margin-top: 2rem;

}

.sfLocalFeatureBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .8rem;

    min-width: 14rem;

    height: 3.6rem;

    padding: 0 2rem;

    border-radius: .8rem;

    background: var(--sf-primary);

    color: var(--sf-white);

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

    box-shadow: 0 .6rem 1.6rem rgba(22, 163, 74, .22);

}

.sfLocalFeatureBtn:hover {

    background: var(--sf-primary-dark);

    color: var(--sf-white);

    transform: translateY(-.2rem);

}

.sfLocalFeatureBtn i {

    font-size: 1.1rem;

    transition: .35s;

}

.sfLocalFeatureBtn:hover i {

    transform: translateX(.3rem);

}


/*=========================================
        WHY CHOOSE SECTION
=========================================*/

.sfWhyChooseSec {

    background: var(--sf-white);

}

/*=========================================
        SECTION TITLE
=========================================*/

.sfWhyChooseTitle {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfWhyChooseTitle span {

    color: var(--sf-primary);

}

.sfWhyChooseDivider {

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfWhyChooseDivider span {

    width: 5rem;

    height: .2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

}

/*=========================================
        CARD
=========================================*/

.sfWhyChooseCard {

    background: var(--sf-white);

    border: .1rem solid #e9edf2;

    border-radius: 1.2rem;

    padding: 2rem 1.5rem;

    text-align: center;

    height: 100%;

    transition: .35s;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);

}

.sfWhyChooseCard:hover {

    transform: translateY(-.6rem);

    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .10);

    border-color: rgba(22, 163, 74, .25);

}

/*=========================================
        ICON
=========================================*/

.sfWhyChooseIcon {

    width: 4.8rem;

    height: 4.8rem;

    margin: 0 auto 1.5rem;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .35s;

}

.sfWhyChooseIcon i {

    font-size: 2rem;

    color: var(--sf-primary);

    transition: .35s;

}

.sfWhyChooseCard:hover .sfWhyChooseIcon {

    background: var(--sf-primary);

    transform: rotate(8deg);

}

.sfWhyChooseCard:hover .sfWhyChooseIcon i {

    color: var(--sf-white);

}

/*=========================================
        CONTENT
=========================================*/

.sfWhyChooseCard h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .9rem;

    line-height: 1.4;

}

.sfWhyChooseCard p {

    margin: 0;

    font-size: 1rem;

    line-height: 1.8;

    color: var(--sf-text);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media (max-width:1199.98px) {

    .sfWhyChooseTitle {

        font-size: 2.2rem;

    }

}

@media (max-width:991.98px) {

    .sfWhyChooseCard {

        padding: 1.8rem 1.3rem;

    }

}

@media (max-width:767.98px) {

    .sfWhyChooseTitle {

        font-size: 1.9rem;

    }

    .sfWhyChooseCard {

        padding: 1.6rem 1.2rem;

    }

    .sfWhyChooseIcon {

        width: 4.2rem;

        height: 4.2rem;

    }

    .sfWhyChooseIcon i {

        font-size: 1.8rem;

    }

    .sfWhyChooseCard h4 {

        font-size: 1.2rem;

    }

    .sfWhyChooseCard p {

        font-size: .95rem;

    }

}

@media (max-width:575.98px) {

    .sfWhyChooseSec {

        padding: 3rem 0;

    }

    .sfWhyChooseTitle {

        font-size: 1.6rem;

    }

    .sfWhyChooseCard {

        padding: 1.5rem 1rem;

    }

    .sfWhyChooseIcon {

        width: 4rem;

        height: 4rem;

        margin-bottom: 1.2rem;

    }

    .sfWhyChooseIcon i {

        font-size: 1.6rem;

    }

    .sfWhyChooseCard h4 {

        font-size: 1.1rem;

    }

    .sfWhyChooseCard p {

        font-size: .9rem;

        line-height: 1.7;

    }

}

/*=========================================
        LOCAL SERVICES SECTION
=========================================*/

.sfLocalServiceSec {

    background: var(--sf-white);

}

/*=========================================
        SECTION TITLE
=========================================*/

.sfLocalServiceTitle {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

    line-height: 1.3;

}

.sfLocalServiceTitle span {

    color: var(--sf-primary);

}

.sfLocalServiceDivider {

    display: flex;

    justify-content: center;

    align-items: center;

}

.sfLocalServiceDivider span {

    width: 5rem;

    height: .2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

}

/*=========================================
        CARD
=========================================*/

.sfLocalServiceCard {

    background: var(--sf-white);

    border: .1rem solid #e8edf2;

    border-radius: 1.2rem;

    overflow: hidden;

    height: 100%;

    transition: .35s;

    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .05);

}

.sfLocalServiceCard:hover {

    transform: translateY(-.5rem);

    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .12);

}

/*=========================================
        IMAGE
=========================================*/

.sfLocalServiceImg {

    overflow: hidden;

    aspect-ratio: 16/10;

}

.sfLocalServiceImg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .45s;

}

.sfLocalServiceCard:hover .sfLocalServiceImg img {

    transform: scale(1.08);

}

/*=========================================
        CONTENT
=========================================*/

.sfLocalServiceBody {

    display: flex;

    flex-direction: column;

    height: calc(100% - 12rem);

    padding: 1.3rem;

}

.sfLocalServiceBody h4 {

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1rem;

    line-height: 1.4;

}

.sfLocalServiceBody p {
    flex: 1;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--sf-text);
}

/*=========================================
        BUTTON
=========================================*/

.sfLocalServiceBtn {

    display: inline-flex;

    align-items: center;

    gap: .6rem;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    color: var(--sf-primary);

    transition: .35s;

}

.sfLocalServiceBtn i {

    font-size: 1.2rem;

    transition: .35s;

}

.sfLocalServiceBtn:hover {

    color: var(--sf-primary-dark);

}

.sfLocalServiceBtn:hover i {

    transform: translateX(.4rem);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfLocalServiceTitle {

        font-size: 2.2rem;

    }

}

@media(max-width:991.98px) {

    .sfLocalServiceBody {

        height: auto;

    }

}

@media(max-width:767.98px) {

    .sfLocalServiceTitle {

        font-size: 1.9rem;

    }

    .sfLocalServiceBody {

        padding: 1.4rem;

    }

    .sfLocalServiceBody h4 {

        font-size: 1.2rem;

    }

    .sfLocalServiceBody p {

        font-size: .95rem;

    }

}

@media(max-width:575.98px) {

    .sfLocalServiceSec {

        padding: 3rem 0;

    }

    .sfLocalServiceTitle {

        font-size: 1.6rem;

    }

    .sfLocalServiceBody {

        padding: 1.2rem;

    }

    .sfLocalServiceBody h4 {

        font-size: 1.15rem;

    }

    .sfLocalServiceBody p {

        font-size: .9rem;

        line-height: 1.7;

    }

}

/*=========================================
        LOCAL FARE SECTION
=========================================*/

.sfLocalFareSec {

    background: var(--sf-white);

}

/*=========================================
        COMMON BOX
=========================================*/

.sfLocalFareBox,
.sfLocalVehicleBox {

    height: 100%;

    padding: 2rem;

    border-radius: 1.4rem;

    background: var(--sf-white);

    border: .1rem solid #e8edf2;

    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .05);

}

/*=========================================
        HEADING
=========================================*/

.sfLocalFareHead {

    margin-bottom: 1.8rem;

}

.sfLocalFareHead h2 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .8rem;

}

.sfLocalFareHead h2 span {

    color: var(--sf-primary);

}

.sfLocalFareBorder {

    display: block;

    width: 5rem;

    height: .2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

}

/*=========================================
        FARE LIST
=========================================*/

.sfLocalFareList {

    list-style: none;

    padding: 0;

    margin: 0 0 2rem;

}

.sfLocalFareList li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 0.5rem 0;

    border-bottom: .1rem solid #eef2f5;

    transition: .35s;

}

.sfLocalFareList li:last-child {

    border-bottom: none;

}

.sfLocalFareList li:hover {

    padding-left: .6rem;

}

.sfLocalFareList span {

    display: flex;

    align-items: center;

    gap: .8rem;

    font-size: 1rem;

    color: var(--sf-secondary);

}

.sfLocalFareList strong {

    font-size: 1rem;

    color: var(--sf-secondary);

    font-weight: 700;

}

.sfLocalFareList i {

    color: var(--sf-primary);

    font-size: 1.2rem;

}

/*=========================================
        BUTTON
=========================================*/

.sfLocalFareBtn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .7rem;

    width: 100%;

    height: 3.5rem;

    border: .12rem solid var(--sf-primary);

    border-radius: .8rem;

    text-decoration: none;

    color: var(--sf-primary);

    font-size: 1rem;

    font-weight: 600;

    transition: .35s;

}

.sfLocalFareBtn:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

.sfLocalFareBtn i {

    transition: .35s;

}

.sfLocalFareBtn:hover i {

    transform: translateX(.4rem);

}

/*=========================================
        SWIPER
=========================================*/

.sfLocalVehicleSlider {
    overflow: hidden;
}

/*=========================================
        VEHICLE CARD
=========================================*/

.sfLocalVehicleCard {
    background: var(--sf-white);
    border: .1rem solid #ebeff3;
    border-radius: 1.2rem;
    overflow: hidden;
    text-align: center;
    transition: .35s;
}

/*=========================================
        IMAGE
=========================================*/

.sfLocalVehicleImg {
    padding: 1.5rem;
    width: 100%;
    height: 172px;
}

.sfLocalVehicleImg img {

    width: 100%;

    height: 9rem;

    transition: .4s;

}

.sfLocalVehicleCard:hover .sfLocalVehicleImg img {

    transform: scale(1.08);

}

/*=========================================
        BODY
=========================================*/

.sfLocalVehicleBody {

    padding: 0 1.5rem 1.8rem;

}

.sfLocalVehicleBody h4 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: 1rem;

}

.sfLocalVehicleBody ul {

    display: flex;

    justify-content: center;

    gap: 1.5rem;

    list-style: none;

    padding: 0;

    margin: 0;

}

.sfLocalVehicleBody li {

    display: flex;

    align-items: center;

    gap: .5rem;

    font-size: .95rem;

    color: var(--sf-text);

}

.sfLocalVehicleBody i {

    color: var(--sf-primary);

    font-size: 1rem;

}

/*=========================================
        PAGINATION
=========================================*/

.sfLocalVehiclePagination {

    position: relative;

    margin-top: 2rem;

}

.sfLocalVehiclePagination .swiper-pagination-bullet {

    width: .8rem;

    height: .8rem;

    background: #d5dbe1;

    opacity: 1;

    transition: .35s;

}

.sfLocalVehiclePagination .swiper-pagination-bullet-active {

    width: 2rem;

    border-radius: 5rem;

    background: var(--sf-primary);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1199.98px) {

    .sfLocalFareHead h2 {

        font-size: 1.8rem;

    }

}

@media(max-width:991.98px) {

    .sfLocalVehicleBox {

        margin-top: 1rem;

    }

}

@media(max-width:767.98px) {

    .sfLocalFareBox,
    .sfLocalVehicleBox {

        padding: 1.5rem;

    }

    .sfLocalFareHead h2 {

        font-size: 1.6rem;

    }

    .sfLocalVehicleBody h4 {

        font-size: 1.2rem;

    }

}

@media(max-width:575.98px) {

    .sfLocalFareHead h2 {

        font-size: 1.4rem;

    }

    .sfLocalFareList span {

        font-size: .9rem;

    }

    .sfLocalFareList strong {

        font-size: .95rem;

    }

    .sfLocalVehicleBody ul {
        gap: .8rem;

    }

}

/*=========================================
        OUTSTATION HERO
=========================================*/

.sfOutHeroSec {

    position: relative;

    overflow: hidden;

    padding: 4rem 0;

    background: url("../images/outstation-hero.webp") center center/cover no-repeat;

    min-height: 42rem;

    display: flex;

    align-items: center;

}

/*=========================================
        LEFT WHITE SHADOW
=========================================*/

.sfOutHeroSec::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .98) 28%,
            rgba(255, 255, 255, .88) 45%,
            rgba(255, 255, 255, .55) 60%,
            rgba(255, 255, 255, .18) 75%,
            rgba(255, 255, 255, 0) 100%);

    z-index: 1;

}

.sfOutHeroSec .container {

    position: relative;

    z-index: 2;

}

/*=========================================
        BREADCRUMB
=========================================*/

.sfOutHeroBread {

    margin-bottom: 1rem;

}

.sfOutHeroBread ol {

    display: flex;

    align-items: center;

    gap: .8rem;

    list-style: none;

    margin: 0;

    padding: 0;

    flex-wrap: wrap;

}

.sfOutHeroBread li {

    font-size: 1rem;

    color: var(--sf-secondary);

}

.sfOutHeroBread a {

    display: flex;

    align-items: center;

    gap: .5rem;

    color: var(--sf-secondary);

    text-decoration: none;

    transition: .3s;

}

.sfOutHeroBread a:hover {

    color: var(--sf-primary);

}

.sfOutHeroBread i {

    color: var(--sf-primary);

}

/*=========================================
        CONTENT
=========================================*/

.sfOutHeroContent {
    text-align: left;
    max-width: 58rem;
}

.sfOutHeroContent h1 {

    font-size: 3.5rem;

    font-weight: 700;

    color: var(--sf-secondary);

    line-height: 1.2;

    margin-bottom: 1rem;

}

.sfOutHeroContent h2 {

    font-size: 2rem;

    font-weight: 700;

    color: var(--sf-primary);

    margin-bottom: 1.8rem;

}

.sfOutHeroContent p {

    max-width: 46rem;

    font-size: 1.2rem;

    line-height: 2;

    color: var(--sf-text);

    margin-bottom: 2.5rem;

}

/*=========================================
        FEATURE CARD
=========================================*/

.sfOutHeroFeature {

    height: 100%;
    gap: 1rem;
    display: flex;
    background: rgba(255, 255, 255, .96);

    border: .1rem solid rgba(0, 0, 0, .06);

    border-radius: 1rem;

    padding: 1.1rem;

    text-align: center;

    transition: .35s;

    box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .05);

}

.sfOutHeroFeature:hover {

    transform: translateY(-.5rem);

    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .12);

}

.sfOutHeroIcon {

    width: 3rem;

    height: 3rem;

    border-radius: 50%;

    background: var(--sf-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    transition: .35s;

}

.sfOutHeroIcon i {

    font-size: 1.3rem;

    color: var(--sf-primary);

}

.sfOutHeroFeature:hover .sfOutHeroIcon {

    background: var(--sf-primary);

}

.sfOutHeroFeature:hover .sfOutHeroIcon i {

    color: var(--sf-white);

}

.sfOutHeroFeature h4 {

    font-size: 0.9rem;
    text-align: left;
    font-weight: 700;

    color: var(--sf-secondary);

    margin-bottom: .4rem;

}

.sfOutHeroFeature span {

    display: block;
    text-align: left;
    font-size: 1rem;

    color: var(--sf-text);

}

/*=========================================
        BUTTON
=========================================*/

.sfOutHeroBtnWrap {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-top: 2.5rem;

}

.sfOutHeroBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-width: 14rem;
    height: 4rem;
    padding: 0 2rem;
    border-radius: .8rem;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: .35s;
}

.sfOutHeroBtn:hover {
    background: var(--sf-primary-dark);
    color: var(--sf-white);
}

.sfOutHeroBtnOutline {
    background: var(--sf-white);
    color: var(--sf-primary);
    border: .1rem solid var(--sf-primary);
}

.sfOutHeroBtnOutline:hover {
    background: var(--sf-primary);
    color: var(--sf-white);
}

/*=========================================
        RESPONSIVE
=========================================*/
@media(max-width:1199.98px) {
    .sfOutHeroContent h1 {
        font-size: 3.4rem;
    }
}

@media(max-width:991.98px) {
    .sfOutHeroSec {
        padding: 5rem 0;
        min-height: auto;
        background-position: right center;
    }

    .sfOutHeroSec::before {
        background: linear-gradient(180deg,
                rgba(255, 255, 255, .95) 0%,
                rgba(255, 255, 255, .88) 45%,
                rgba(255, 255, 255, .75) 100%);
    }

    .sfOutHeroContent {
        max-width: 100%;
    }
}

@media(max-width:767.98px) {
    .sfOutHeroContent h1 {
        font-size: 2.8rem;
    }

    .sfOutHeroContent h2 {
        font-size: 1.6rem;
    }

    .sfOutHeroContent p {
        font-size: 1rem;
        line-height: 1.9;
    }

    .sfOutHeroBtn {
        width: 100%;
    }
}

@media(max-width:575.98px) {
    .sfOutHeroSec {
        padding: 3rem 0;
    }

    .sfOutHeroBread {
        margin-bottom: 1rem;
    }

    .sfOutHeroContent h1 {
        font-size: 2.2rem;
    }

    .sfOutHeroContent h2 {
        font-size: 1.4rem;
    }

    .sfOutHeroFeature {
        padding: 1.2rem;
    }
}

/*=========================================
        DESTINATION SECTION
=========================================*/
.sfDestinationSec {
    background: var(--sf-white);
}

/*=========================================
        SECTION TITLE
=========================================*/
.sfDestinationTitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sf-secondary);
    line-height: 1.3;
    margin-bottom: .8rem;
}

.sfDestinationTitle span {
    color: var(--sf-primary);
}

.sfDestinationDivider {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sfDestinationDivider span {
    width: 5rem;
    height: .2rem;
    border-radius: 5rem;
    background: var(--sf-primary);
}

/*=========================================
        CARD
=========================================*/
.sfDestinationCard {
    background: var(--sf-white);
    border: .1rem solid #e9edf2;
    border-radius: 1.2rem;
    overflow: hidden;
    height: 100%;
    transition: .35s;
    box-shadow: 0 .5rem 1.6rem rgba(0, 0, 0, .05);
}

.sfDestinationCard:hover {
    transform: translateY(-.5rem);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .12);
}

/*=========================================
        IMAGE
=========================================*/
.sfDestinationImg img {
    width: 100%;
    height: 196px;
    transition: .45s;
}

.sfDestinationCard:hover .sfDestinationImg img {
    transform: scale(1.08);
}

/*=========================================
        BODY
=========================================*/
.sfDestinationBody {
    padding: 1.2rem;
}

.sfDestinationTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sfDestinationTop h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin: 0;
}

.sfDestinationTop span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sf-primary);
    white-space: nowrap;
}

/*=========================================
        INFO LIST
=========================================*/
.sfDestinationBody ul {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sfDestinationBody li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--sf-text);
}

.sfDestinationBody li i {
    font-size: 1rem;
    color: var(--sf-primary);
}

/*=========================================
        RESPONSIVE
=========================================*/
@media(max-width:1199.98px) {
    .sfDestinationTitle {
        font-size: 2.2rem;
    }
}

@media(max-width:991.98px) {
    .sfDestinationBody {
        padding: 1.3rem;
    }
}

@media(max-width:767.98px) {
    .sfDestinationTitle {
        font-size: 1.9rem;
    }

    .sfDestinationTop h4 {
        font-size: 1.15rem;
    }

    .sfDestinationTop span {
        font-size: 1rem;
    }

    .sfDestinationBody li {
        font-size: .9rem;
    }
}

@media(max-width:575.98px) {
    .sfDestinationSec {
        padding: 3rem 0;
    }

    .sfDestinationTitle {
        font-size: 1.6rem;
    }

    .sfDestinationBody {
        padding: 1.2rem;
    }
}

/*=========================================
        RENTAL BOOKING SECTION
=========================================*/
.sfRentalBookingSec {
    padding: 4rem 0;
}

.sfRentalBookingBox {
    background: var(--sf-white);
    border: .1rem solid rgba(0, 0, 0, .06);
    border-radius: 1.4rem;
    padding: 2rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .06);
}

/*=========================================
        HEADING
=========================================*/
.sfRentalBookingHead {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: .1rem solid rgba(0, 0, 0, .08);
}

.sfRentalBookingHead h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--sf-secondary);
    line-height: 1.3;
}

/*=========================================
        LABEL
=========================================*/
.sfRentalBookingGroup label {
    display: block;
    margin-bottom: .8rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-secondary);
}

/*=========================================
        INPUT WRAPPER
=========================================*/
.sfRentalBookingField {
    position: relative;
}

.sfRentalBookingField i {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--sf-primary);
    pointer-events: none;
}

/*=========================================
        INPUT / SELECT
=========================================*/
.sfRentalBookingField .form-control,
.sfRentalBookingField .form-select {
    height: 3.8rem;
    padding: 0 1rem 0 1rem;
    border: .1rem solid rgba(0, 0, 0, .10);
    border-radius: .8rem;
    background: var(--sf-white);
    font-size: 1rem;
    color: var(--sf-secondary);
    box-shadow: none;
    transition: .3s;
}

.sfRentalBookingField .form-control::placeholder {
    color: #8a8f98;
}

.sfRentalBookingField .form-control:focus,
.sfRentalBookingField .form-select:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .15);
}

/*=========================================
        BUTTON
=========================================*/
.sfRentalBookingBtn {
    width: 100%;
    height: 3.8rem;
    min-width: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    border: none;
    border-radius: .8rem;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1rem;
    font-weight: 600;
    transition: .35s;
}

.sfRentalBookingBtn i {
    font-size: 1.2rem;
    transition: .35s;
}

.sfRentalBookingBtn:hover {
    background: var(--sf-primary-dark);
    transform: translateY(-.2rem);
}

.sfRentalBookingBtn:hover i {
    transform: translateX(.4rem);
}

/*=========================================
        RESPONSIVE
=========================================*/
@media (max-width:991.98px) {
    .sfRentalBookingBox {
        padding: 1.8rem;
    }
}

@media (max-width:767.98px) {
    .sfRentalBookingSec {
        padding: 3rem 0;
    }

    .sfRentalBookingBox {
        padding: 1.5rem;
    }

    .sfRentalBookingHead h2 {
        font-size: 1.7rem;
    }
}

@media (max-width:575.98px) {
    .sfRentalBookingBox {
        padding: 1.3rem;
        border-radius: 1rem;
    }

    .sfRentalBookingHead {
        margin-bottom: 1.5rem;
    }

    .sfRentalBookingHead h2 {
        font-size: 1.5rem;
    }

    .sfRentalBookingField .form-control,
    .sfRentalBookingField .form-select {
        height: 3.5rem;
        font-size: .95rem;
    }

    .sfRentalBookingBtn {
        min-width: 100%;
        height: 3.5rem;
    }
}


/*=========================================
        RENTAL SERVICE SECTION
=========================================*/
.sfRentalServiceSec {
    background: var(--sf-white);
}

/*=========================================
        HEADING
=========================================*/
.sfRentalServiceTitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sf-secondary);
    line-height: 1.3;
    margin-bottom: .8rem;
}

.sfRentalServiceTitle span {
    color: var(--sf-primary);
}

.sfRentalServiceDivider {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.sfRentalServiceDivider span {
    width: 5rem;
    height: .2rem;
    border-radius: 5rem;
    background: var(--sf-primary);
}

.sfRentalServiceSubTitle {
    max-width: 40rem;
    margin: 0 auto;
    font-size: 1rem;
    color: var(--sf-text);
    line-height: 1.8;
}

/*=========================================
        CARD
=========================================*/
.sfRentalServiceCard {
    height: 100%;
    background: var(--sf-white);
    border: .1rem solid rgba(0, 0, 0, .08);
    border-radius: 1.2rem;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .05);
}

.sfRentalServiceCard:hover {
    transform: translateY(-.5rem);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .12);
    border-color: rgba(22, 163, 74, .20);
}

/*=========================================
        IMAGE
=========================================*/
.sfRentalServiceImg {
    overflow: hidden;
    padding: 1.6rem 1.6rem 0;
    text-align: center;
}

.sfRentalServiceImg img {
    width: 100%;
    max-width: 15rem;
    transition: .45s;
}

.sfRentalServiceCard:hover .sfRentalServiceImg img {
    transform: scale(1.08);
}

/*=========================================
        CONTENT
=========================================*/
.sfRentalServiceBody {
    display: flex;
    flex-direction: column;
    padding: 1.3rem;
    height: 100%;
}

.sfRentalServiceBody h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin-bottom: 1rem;
}


/*=========================================
        BUTTON
=========================================*/
.sfRentalServiceBtn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-primary);
    text-decoration: none;
    transition: .35s;
}

.sfRentalServiceBtn i {
    font-size: 1.2rem;
    transition: .35s;
}

.sfRentalServiceBtn:hover {
    color: var(--sf-primary-dark);
}

.sfRentalServiceBtn:hover i {
    transform: translateX(.4rem);
}

/*=========================================
        RESPONSIVE
=========================================*/
@media(max-width:1199.98px) {
    .sfRentalServiceTitle {
        font-size: 2.2rem;
    }
}

@media(max-width:991.98px) {
    .sfRentalServiceBody {
        padding: 1.5rem;
    }
}

@media(max-width:767.98px) {
    .sfRentalServiceSec {
        padding: 4rem 0;
    }

    .sfRentalServiceTitle {
        font-size: 1.9rem;
    }

    .sfRentalServiceBody h4 {
        font-size: 1.25rem;
    }

    .sfRentalServiceBody p {
        font-size: .95rem;
    }
}

@media(max-width:575.98px) {
    .sfRentalServiceTitle {
        font-size: 1.6rem;
    }

    .sfRentalServiceSubTitle {
        font-size: .9rem;
    }

    .sfRentalServiceImg {
        padding: 1.2rem 1.2rem 0;
    }

    .sfRentalServiceBody {
        padding: 1.3rem;
    }

    .sfRentalServiceBody h4 {
        font-size: 1.2rem;
    }

    .sfRentalServiceBody p {
        font-size: .9rem;
        line-height: 1.7;
    }
}

/*=========================================
        RENTAL PRICE
=========================================*/
.sfRentalPriceWrap {
    display: flex;
    justify-content: space-between;
}

.sfRentalPriceItem {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.sfRentalPriceAmount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sf-primary);
}

.sfRentalPriceDuration {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-secondary);
    margin-bottom: .1rem;
}

/*=========================================
        FULL DAY FEATURE SECTION
=========================================*/
.sfFullDayFeatureSec {
    padding: 4rem 0;
    background: var(--sf-white);
}

.sfFullDayFeatureWrap {
    background: var(--sf-white);
    border: .1rem solid rgba(0, 0, 0, .06);
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .05);
}

/*=========================================
        FEATURE CARD
=========================================*/
.sfFullDayFeatureCard {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 2rem;
    height: 100%;
    position: relative;
    transition: .35s;
}

.sfFullDayFeatureCard::after {
    content: "";
    position: absolute;
    top: 2rem;
    right: 0;
    width: .1rem;
    height: calc(100% - 4rem);
    background: #e9ecef;
}

.sfFullDayFeatureLast::after {
    display: none;
}

.sfFullDayFeatureCard:hover {
    background: rgba(22, 163, 74, .03);
}

/*=========================================
        ICON
=========================================*/
.sfFullDayFeatureIcon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}

.sfFullDayFeatureIcon i {
    font-size: 1.5rem;
    color: var(--sf-white);
}

.sfFullDayFeatureCard:hover .sfFullDayFeatureIcon {
    transform: rotate(8deg) scale(1.08);
}

/*=========================================
        CONTENT
=========================================*/
.sfFullDayFeatureContent {
    flex: 1;
}

.sfFullDayFeatureContent h4 {
    margin: 0 0 .8rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sf-secondary);
    line-height: 1.4;
}

.sfFullDayFeatureContent p {
    margin: 0;
    font-size: 1rem;
    color: var(--sf-text);
    line-height: 1.8;
}

/*=========================================
        RESPONSIVE
=========================================*/
@media(max-width:1199.98px) {
    .sfFullDayFeatureContent h4 {
        font-size: 1.3rem;
    }
}

@media(max-width:991.98px) {
    .sfFullDayFeatureCard {
        padding: 1.8rem;
    }

    .sfFullDayFeatureCard::after {
        display: none;
    }
}

@media(max-width:767.98px) {
    .sfFullDayFeatureSec {
        padding: 3rem 0;
    }

    .sfFullDayFeatureCard {
        gap: 1.2rem;
        padding: 1.6rem;
    }

    .sfFullDayFeatureIcon {
        width: 4rem;
        height: 4rem;
    }

    .sfFullDayFeatureIcon i {
        font-size: 1.8rem;
    }

    .sfFullDayFeatureContent h4 {
        font-size: 1.2rem;
    }

    .sfFullDayFeatureContent p {
        font-size: .95rem;
    }
}

@media(max-width:575.98px) {
    .sfFullDayFeatureWrap {
        border-radius: 1rem;
    }

    .sfFullDayFeatureCard {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 1.5rem;
    }

    .sfFullDayFeatureIcon {
        margin-bottom: .4rem;
    }

    .sfFullDayFeatureContent h4 {
        font-size: 1.1rem;
    }

    .sfFullDayFeatureContent p {
        font-size: .9rem;
        line-height: 1.7;
    }
}

/*=========================================
        FULL DAY BOOKING SECTION
=========================================*/
.sfFullDayBookingSec {
    padding: 4rem 0;
    background: var(--sf-white);
}

/*=========================================
        CARD
=========================================*/
.sfFullDayBookingCard {
    height: 100%;
    background: var(--sf-white);
    border: .1rem solid rgba(0, 0, 0, .08);
    border-radius: 1.4rem;
    padding: 2rem;
    box-shadow: 0 .8rem 2.5rem rgba(0, 0, 0, .05);
    transition: .35s;
}

.sfFullDayBookingCard:hover {
    transform: translateY(-.3rem);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .08);
}

/*=========================================
        HEADING
=========================================*/
.sfFullDayBookingHead {
    margin-bottom: 2rem;
}

.sfFullDayBookingHead h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--sf-secondary);
}

.sfFullDayBookingHead span {
    display: block;
    width: 4rem;
    height: .2rem;
    margin-top: .8rem;
    border-radius: 5rem;
    background: var(--sf-primary);
}

/*=========================================
        INCLUDED LIST
=========================================*/
.sfFullDayBookingList {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sfFullDayBookingList li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.3rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sf-secondary);
}

.sfFullDayBookingList li:last-child {
    margin-bottom: 0;
}

.sfFullDayBookingList i {
    color: var(--sf-primary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/*=========================================
        IMAGE
=========================================*/
.sfFullDayBookingImage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sfFullDayBookingImage img {
    width: 100%;
    max-width: 22rem;
    transition: .35s;
}

.sfFullDayBookingCard:hover .sfFullDayBookingImage img {
    transform: scale(1.05);
}

/*=========================================
        FORM
=========================================*/
.sfFullDayBookingForm label {
    display: block;
    margin-bottom: .7rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sf-secondary);
}

.sfFullDayBookingForm .form-control,
.sfFullDayBookingForm .form-select {
    height: 3.8rem;
    border: .1rem solid #dfe5ea;
    border-radius: .8rem;
    padding: 0 1rem;
    font-size: 1rem;
    box-shadow: none;
    transition: .3s;
}

.sfFullDayBookingForm .form-control:focus,
.sfFullDayBookingForm .form-select:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .12);
}

.sfFullDayBookingInput {
    position: relative;
}

.sfFullDayBookingInput i {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--sf-primary);
    font-size: 1.2rem;
    pointer-events: none;
}

/*=========================================
        RADIO
=========================================*/
.sfFullDayBookingRadio {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3.8rem;
}

.sfFullDayBookingRadio .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sfFullDayBookingRadio .form-check-input {
    cursor: pointer;
}

.sfFullDayBookingRadio .form-check-input:checked {
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
}

.sfFullDayBookingRadio .form-check-label {
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
}

/*=========================================
        BUTTON
=========================================*/
.sfFullDayBookingBtn {
    width: 100%;
    height: 3.8rem;
    border: none;
    border-radius: .8rem;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1rem;
    font-weight: 600;
    transition: .35s;
}

.sfFullDayBookingBtn:hover {
    background: var(--sf-primary-dark);
}

/*=========================================
        BOTTOM FEATURES
=========================================*/
.sfFullDayBookingBottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: .1rem solid rgba(0, 0, 0, .08);
}

.sfFullDayBookingBottom span {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    color: var(--sf-secondary);
}

.sfFullDayBookingBottom i {
    color: var(--sf-primary);
    font-size: 1.1rem;
}

/*=========================================
        RESPONSIVE
=========================================*/
@media(max-width:991.98px) {
    .sfFullDayBookingCard {
        padding: 1.8rem;
    }

    .sfFullDayBookingImage {
        margin-top: 2rem;
    }
}

@media(max-width:767.98px) {
    .sfFullDayBookingSec {
        padding: 3rem 0;
    }

    .sfFullDayBookingHead h2 {
        font-size: 1.6rem;
    }

    .sfFullDayBookingCard {
        padding: 1.5rem;
    }

    .sfFullDayBookingBottom {
        gap: 1rem;
    }
}

@media(max-width:575.98px) {
    .sfFullDayBookingCard {
        padding: 1.3rem;
        border-radius: 1rem;
    }

    .sfFullDayBookingHead h2 {
        font-size: 1.4rem;
    }

    .sfFullDayBookingForm .form-control,
    .sfFullDayBookingForm .form-select,
    .sfFullDayBookingBtn {
        height: 3.5rem;
    }

    .sfFullDayBookingRadio {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 1rem;
    }

    .sfFullDayBookingBottom {
        flex-direction: column;
        gap: .8rem;
    }

}

/* Container to limit the scroll width */
.logo-container {
    --logo-width: 200px;
    --logo-height: 100px;
    --gap: calc(var(--logo-width) / 14);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));

    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100vw;
}

/* Scrolling area */
.logo-scroll {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 30%,
            hsl(0 0% 0% / 1) 70%,
            hsl(0 0% 0% / 0));
}

.logo-scroll__wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll var(--duration) linear infinite;
}

.logo-scroll__wrapper:nth-child(even) {
    margin-left: calc(var(--logo-width) / -2);
}

.logo-scroll__wrapper:hover {
    animation-play-state: paused;
    /* Pause animation on hover */
}

/* Logo styling */
.logo-item {
    width: var(--logo-width);
    /* Adjust for logo size */
    height: var(--logo-height);
    /* Adjust for logo size */
    /* transition: transform 0.5s; Smooth scaling effect */
    background-color: blue;
    border-radius: 4px;
}

.logo-scroll .logo-item:hover {
    transform: scale(1.05);
    /* Scale logo on hover */
}

/* Infinite scroll animation */
@keyframes scroll {
    from {
        transform: translateX(var(--scroll-start));
    }

    to {
        transform: translateX(var(--scroll-end));
    }
}

/*=====================================
   TRUSTED LOGOS
======================================*/
.sfTrustSec {
    background: var(--sf-white);
}

.sfTrustTitle {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sf-secondary);
    text-transform: uppercase;
    margin-bottom: .8rem;
}

.sfTrustTitle span {
    display: block;
}

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

.sfTrustLine span {
    width: 5rem;
    height: .25rem;
    border-radius: 5rem;
    background: #F4B400;
}

.sfTrustCard {
    height: 10rem;
    background: var(--sf-white);
    border: .1rem solid #E8ECEF;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: .35s ease;
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .04);
}

.sfTrustCard:hover {
    transform: translateY(-.4rem);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .10);
    border-color: rgba(22, 163, 74, .25);
}

.sfTrustCard img {
    max-width: 100%;
    max-height: 5.5rem;
}

/*=========================
    Responsive
=========================*/
@media (max-width:991.98px) {
    .sfTrustTitle {
        font-size: 2rem;
    }

    .sfTrustCard {
        height: 9rem;
    }

}

@media (max-width:767.98px) {
    .sfTrustTitle {
        font-size: 1.6rem;
    }

    .sfTrustCard {
        height: 8rem;
        padding: 1.2rem;
    }

    .sfTrustCard img {
        max-height: 3.4rem;
    }

}

@media (max-width:575.98px) {
    .sfTrustSec {
        padding: 3rem 0;
    }

    .sfTrustTitle {
        font-size: 1.35rem;
    }

    .sfTrustCard {
        height: 7rem;
        border-radius: .8rem;
    }

    .sfTrustCard img {
        max-height: 2.8rem;
    }
}

/*=====================================
    TRUST INFO SECTION
======================================*/

.sfTrustInfoSec {
    background: var(--sf-white);
}

.sfTrustInfoCard {
    height: 100%;
    background: var(--sf-white);
    border: .1rem solid #E8ECEF;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .04);
    transition: .35s;
}

.sfTrustInfoCard:hover {
    transform: translateY(-.4rem);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .10);
}

.sfTrustInfoIcon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--sf-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfTrustInfoIcon i {
    font-size: 2rem;
    color: var(--sf-primary);
}

.sfTrustInfoCard h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin-bottom: .6rem;
}

.sfTrustInfoCard p {
    font-size: 1rem;
    color: var(--sf-text);
    line-height: 1.7;
    margin: 0;
}

/* Certificate */

.sfTrustInfoCertificate {
    height: 100%;
    background: var(--sf-primary-light);
    border: .1rem solid var(--sf-primary);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .05);
}

.sfTrustInfoBadge {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sf-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.sfTrustInfoContent {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sfTrustInfoImg {
    flex: 0 0 7rem;
}

.sfTrustInfoImg img {
    border-radius: .5rem;
    background: #fff;
}

.sfTrustInfoText h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--sf-secondary);
}

.sfTrustInfoText p {
    font-size: .95rem;
    color: var(--sf-text);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.sfTrustInfoBtn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.2rem;
    border: .1rem solid var(--sf-primary);
    border-radius: .6rem;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    color: var(--sf-primary);
    background: var(--sf-primary-light);
    transition: .3s;
}

.sfTrustInfoBtn:hover {
    background: var(--sf-primary);
    color: #fff;
}

/* Responsive */

@media(max-width:991.98px) {

    .sfTrustInfoContent {
        flex-direction: column;
        text-align: center;
    }

    .sfTrustInfoImg {
        flex: unset;
        width: 8rem;
    }

}

@media(max-width:575.98px) {

    .sfTrustInfoCard {
        padding: 1.5rem;
    }

    .sfTrustInfoCard h3 {
        font-size: 1.6rem;
    }

    .sfTrustInfoCertificate {
        padding: 1.2rem;
    }

    .sfTrustInfoText h4 {
        font-size: 1.2rem;
    }

}

/*=====================================
    CERTIFICATE POPUP
======================================*/
.sfTrustInfoPopupImg {
    width: 100%;
    border-radius: .6rem;
    cursor: pointer;
    transition: .35s;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

.sfTrustInfoPopupImg:hover {
    transform: scale(1.03);
}

.sfCertificateModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

.sfCertificateModal .modal-body img {
    border-radius: 1rem;
    background: #fff;
}

.sfCertificateClose {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: .3s;
}

.sfCertificateClose:hover {
    background: var(--sf-primary);
    color: #fff;
}

.sfCertificateModal .modal-backdrop.show {
    opacity: .85;
}

:root {
    --sf-primary: #16A34A;
    --sf-primary-light: #F2FCF5;
    --sf-secondary: #0F172A;
    --sf-text: #475569;
    --sf-border: #D9E5DD;
    --sf-white: #FFFFFF;
    --sf-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .08);
}

/*==============================
    FLEET RATE CARD
==============================*/
.sfFleetRateCard {
    background: var(--sf-white);
    border: .1rem solid var(--sf-border);
    border-radius: 2rem;
    padding: 1.5rem;
    box-shadow: var(--sf-shadow);
    transition: .35s;

}

.sfFleetRateCard:hover {
    transform: translateY(-.4rem);
}

/* Vehicle */
.sfFleetRateImg {
    text-align: center;
    margin-bottom: 1.5rem;
}

.sfFleetRateImg img {
    max-width: 100%;
    object-fit: contain;
    height: 210px;
    transition: .35s;

}

.sfFleetRateCard:hover .sfFleetRateImg img {
    transform: scale(1.04);
}

/* Title */
.sfFleetRateTitle {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sf-secondary);
    text-align: center;
    margin-bottom: 1.4rem;
}

/* Meta */

.sfFleetRateMeta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.sfFleetRateItem {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    color: var(--sf-text);
}

.sfFleetRateItem i {
    color: var(--sf-primary);
    font-size: 1.4rem;
}

/* Price Box */

.sfFleetRatePriceBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--sf-primary-light);
    border: .1rem solid #B8E7C7;
    border-radius: 1.2rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sfFleetRateKm {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--sf-secondary);
    font-size: 1.05rem;
}

.sfFleetRateKm i {
    color: var(--sf-primary);
    font-size: 1.6rem;
}

.sfFleetRateDot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--sf-primary);
}

.sfFleetRatePrice {
    color: var(--sf-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.sfFleetRatePrice sup {
    font-size: 1rem;
    top: -.6rem;
}

.sfFleetRatePrice small {
    font-size: 1rem;
    font-weight: 700;
}

/* Note */

.sfFleetRateNote {
    text-align: center;
    font-size: 1rem;
    color: var(--sf-secondary);
    margin-bottom: 1.3rem;
}

.sfFleetRateNote span {
    color: var(--sf-primary);
    font-weight: 700;
}

/* Disclaimer */

.sfFleetRateDisclaimer {
    border-top: .1rem dashed #CBD5E1;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

.sfFleetRateDisclaimer i {
    color: var(--sf-primary);
    font-size: 1.3rem;
    margin-top: .1rem;
}

.sfFleetRateDisclaimer p {
    margin: 0;
    font-size: .95rem;
    color: var(--sf-text);
    text-align: center;
}

.sfFleetRateDisclaimer strong {
    color: var(--sf-primary);
}

/*==============================
    RESPONSIVE
==============================*/
@media (max-width:767.98px) {
    .sfFleetRateCard {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    .sfFleetRateTitle {
        font-size: 1.8rem;
    }

    .sfFleetRatePrice {
        font-size: 2rem;
    }

    .sfFleetRatePriceBox {
        gap: .8rem;
    }
}

@media (max-width:575.98px) {
    .sfFleetRateMeta {
        gap: 1.2rem;
    }

    .sfFleetRatePriceBox {
        flex-direction: column;
    }

    .sfFleetRateDot {
        display: none;
    }

    .sfFleetRateTitle {
        font-size: 1.6rem;
    }
}

/* Modal */
.sfQuickModal .modal-content {
    border: none;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: var(--sf-shadow);
}

.sfQuickHead {
    padding: 1.2rem 1.2rem 0rem 1.2rem;
}

.sfStep {
    font-size: .72rem;
    font-weight: 700;
    color: var(--sf-primary);
    letter-spacing: .05rem;
}

.sfTitle {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sf-text);
    line-height: 1.2;
    margin-top: .3rem;
}

.sfTitle span {
    color: var(--sf-primary);
}

.sfSub {
    margin-top: 0.6rem;
    font-size: .9rem;
}

.sfBody {
    padding: 1.3rem;
}

.sfLabel {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .45rem;
    color: var(--sf-text);
}

.sfIconCircle {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #e8f7ee;
    color: var(--sf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.sfInput {
    height: 3rem;
    border: .0625rem solid var(--sf-border);
    border-radius: .7rem;
    font-size: .92rem;
}

.sfInput:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 .18rem rgba(22, 163, 74, .15);
}

.sfFareBox {
    background: #f3faf5;
    border: .0625rem solid #d9efe0;
    border-radius: .8rem;
    padding: 1rem;
}

.sfFareLabel {
    font-size: .75rem;
    color: var(--sf-light);
}

.sfFarePrice {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sf-text);
    line-height: 1;
}

.sfFeature {
    font-size: .75rem;
    color: var(--sf-text);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.sfFeature i {
    color: var(--sf-primary);
}

.sfBookBtn {
    width: 100%;
    border: none;
    background: var(--sf-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: .95rem;
    border-radius: .7rem;
    transition: .3s;
}

.sfBookBtn:hover {
    background: var(--sf-primary-dark);
}

.sfInfoRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    text-align: center;
}

.sfInfoCard i {
    font-size: 1.4rem;
    color: var(--sf-primary);
}

.sfInfoCard h6 {
    font-size: .78rem;
    font-weight: 700;
    margin: .4rem 0 .1rem;
}

.sfInfoCard p {
    font-size: .68rem;
    color: var(--sf-light);
    margin: 0;
}

.sfSecure {
    text-align: center;
    font-size: .72rem;
}

@media (max-width:576px) {

    .sfTitle {
        font-size: 1.35rem;
    }

    .sfFarePrice {
        font-size: 1.5rem;
    }

    .sfInfoRow {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .sfInfoCard {
        display: flex;
        align-items: center;
        gap: .8rem;
    }

}

.sfFareCards {
    background: var(--sf-primary-light);
    border: .0625rem solid var(--sf-border);
    border-radius: var(--sf-radius);
    padding: 1rem;
    margin-left: 47px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0rem;
    flex-wrap: wrap;
}

.sfFareLeft {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.sfFareIcon i {
    font-size: 1.35rem;
    color: var(--sf-primary);
}

.sfFareLabel {
    display: block;
    font-size: .72rem;
    color: var(--sf-text);
    line-height: 1.2;
}

.sfFarePrice {
    text-align: left;
    margin-top: 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1;
}

.sfFareRight {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sfFareItem {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--sf-heading);
    white-space: nowrap;
}

.sfFareItem i {
    color: var(--sf-primary);
    font-size: .9rem;
}

/* Tablet */
@media (max-width: 62rem) {

    .sfFareCard {
        align-items: flex-start;
    }

    .sfFareRight {
        width: 100%;
        gap: .8rem;
    }

}

/* Mobile */
@media (max-width: 36rem) {
    .sfFarePrice {
        font-size: 1.55rem;
    }

    .sfFareRight {
        flex-direction: column;
        align-items: flex-start;
    }

    .sfFareItem {
        font-size: .75rem;
    }

}

.sfSecureSection {
    background: var(--sf-bg);
    border-top: .0625rem solid #f3f4f6;
    border-bottom: .0625rem solid #f3f4f6;
}

.sfSecureRow {
    margin: 0;
}

.sfSecureItem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
}

.sfSecureBorderNone {
    border-right: none;
}

.sfSecureIcon {
    color: var(--sf-primary);
    font-size: 1.65rem;
    line-height: 1;
    flex-shrink: 0;
}

.sfSecureItem h6 {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--sf-heading);
    line-height: 1.2;
}

.sfSecureItem p {
    margin: .15rem 0 0;
    font-size: .68rem;
    color: var(--sf-text);
    line-height: 1.3;
}

/* Mobile */
@media (max-width:767.98px) {

    .sfSecureItem {
        border-right: none;
        border-bottom: .0625rem solid var(--sf-border);
        padding: 0.7rem;
    }

    .sfSecureRow .col-12:last-child .sfSecureItem {
        border-bottom: none;
    }

}

:root {
    --sf-primary: #16a34a;
    --sf-primary-dark: #12863d;
    --sf-light: #e7f6eb;
    --sf-border: #d9dee3;
    --sf-text: #111827;
    --sf-muted: #6b7280;
    --sf-white: #ffffff;
    --sf-radius: 1rem;
}

/* Book Button */
.sfBookBtn {
    width: 100%;
    border: none;
    background: var(--sf-primary);
    color: var(--sf-white);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem;
    border-radius: .75rem;
    transition: .3s;
}

.sfBookBtn:hover {
    background: var(--sf-primary-dark);
}

/* Modal */
.sfOtpContent {
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
}

.sfOtpBody {
    padding: 1.6rem;
    text-align: center;
}

.sfOtpClose {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #374151;
}

.sfOtpStep {
    display: inline-block;
    background: #dff5e5;
    color: #166534;
    font-size: .68rem;
    font-weight: 700;
    padding: .45rem .8rem;
    border-radius: 2rem;
}

.sfOtpIcon {
    width: 5rem;
    height: 5rem;
    background: var(--sf-light);
    border-radius: 50%;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfOtpIcon i {
    font-size: 2.4rem;
    color: var(--sf-primary);
}

.sfOtpTitle {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sf-text);
    margin-bottom: .5rem;
}

.sfOtpText {
    font-size: .95rem;
    color: var(--sf-muted);
    margin: 0;
}

.sfOtpNumber {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sf-text);
    margin: .4rem 0 1.3rem;
}

.sfOtpNumber i {
    color: var(--sf-primary);
}

.sfOtpInputs {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.3rem;
}

.sfOtpInput {
    width: 3rem;
    height: 3.3rem;
    border: .1rem solid var(--sf-border);
    border-radius: .55rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    outline: none;
}

.sfOtpInput:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 .15rem rgba(22, 163, 74, .15);
}

.sfOtpResend {
    font-size: .88rem;
    color: var(--sf-muted);
    margin-bottom: 1.3rem;
}

.sfOtpResend a {
    color: var(--sf-primary);
    font-weight: 700;
    text-decoration: none;
}

.sfVerifyBtn {
    width: 100%;
    background: var(--sf-primary);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    transition: .3s;
}

.sfVerifyBtn:hover {
    background: var(--sf-primary-dark);
}

.sfChangeNumber {
    display: inline-block;
    margin-top: 1rem;
    color: var(--sf-primary);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

/* Mobile */
@media (max-width:575.98px) {

    .sfOtpBody {
        padding: 1.3rem;
    }

    .sfOtpTitle {
        font-size: 1.45rem;
    }

    .sfOtpInputs {
        gap: .45rem;
    }

    .sfOtpInput {
        width: 2.7rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .sfVerifyBtn {
        font-size: .95rem;
    }

}

:root {
    --sfBk-primary: #16a34a;
    --sfBk-primary-dark: #12863d;
    --sfBk-light: #eef8f1;
    --sfBk-border: #dce7dd;
    --sfBk-text: #111827;
    --sfBk-muted: #6b7280;
    --sfBk-white: #ffffff;
    --sfBk-radius: 1.25rem;
}

/* Verify Button */
.sfVerifyBtn {
    width: 100%;
    border: none;
    background: var(--sfBk-primary);
    color: #fff;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: .75rem;
    transition: .3s;
}

.sfVerifyBtn:hover {
    background: var(--sfBk-primary-dark);
}

/* Modal */
.sfBkContent {
    border: none;
    border-radius: var(--sfBk-radius);
    overflow: hidden;
    position: relative;
}

.sfBkBody {
    padding: 1.6rem;
    text-align: center;
}

.sfBkClose {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: none;
    background: none;
    font-size: 1.6rem;
    color: #374151;
}

.sfBkStep {
    display: inline-block;
    background: #dff5e5;
    color: #166534;
    font-size: .68rem;
    font-weight: 700;
    padding: .45rem .8rem;
    border-radius: 2rem;
}

/* Success Icon */
.sfBkSuccessWrap {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 1rem auto;
}

.sfBkSuccessIcon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--sfBk-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 2.6rem;
    box-shadow: 0 .4rem 1rem rgba(22, 163, 74, .25);
}

.sfBkDot {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    position: absolute;
}

.sfBkDot1 {
    background: #f59e0b;
    top: .4rem;
    left: 1.2rem;
}

.sfBkDot2 {
    background: #ef4444;
    top: .6rem;
    right: 1.1rem;
}

.sfBkDot3 {
    background: #22c55e;
    top: 1.8rem;
    left: .2rem;
}

.sfBkDot4 {
    background: #3b82f6;
    bottom: 1.4rem;
    left: .6rem;
}

.sfBkDot5 {
    background: #f97316;
    bottom: 1rem;
    right: .5rem;
}

.sfBkDot6 {
    background: #eab308;
    top: 2rem;
    right: .1rem;
}

.sfBkTitle {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sfBk-text);
    margin-bottom: .5rem;
}

.sfBkText {
    font-size: .92rem;
    color: var(--sfBk-muted);
    margin-bottom: 1.2rem;
}

/* Info Box */
.sfBkInfoBox {
    background: #f7fbf8;
    border: .0625rem solid var(--sfBk-border);
    border-radius: .8rem;
    padding: 1rem;
    text-align: left;
    margin-bottom: 1.2rem;
}

.sfBkRow {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .45rem 0;
}

.sfBkLeft {
    font-size: .82rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 8rem;
}

.sfBkLeft i {
    color: var(--sfBk-primary);
    font-size: 1rem;
}

.sfBkRight {
    font-size: .82rem;
    font-weight: 600;
    color: var(--sfBk-text);
    text-align: right;
}

/* WhatsApp */
.sfBkWhatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    text-decoration: none;
    background: var(--sfBk-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem;
    border-radius: .75rem;
    transition: .3s;
}

.sfBkWhatsapp:hover {
    background: var(--sfBk-primary-dark);
    color: #fff;
}

.sfBkWhatsapp i {
    font-size: 1.5rem;
}

.sfBkSmallText {
    margin: 1rem 0;
    font-size: .82rem;
    color: var(--sfBk-muted);
}

.sfBkFooter {
    border-top: .0625rem solid #edf2ef;
    padding-top: 1rem;
    font-size: .78rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.sfBkFooter i {
    color: var(--sfBk-primary);
}

/* Mobile */
@media (max-width:576px) {

    .sfBkBody {
        padding: 1.3rem;
    }

    .sfBkTitle {
        font-size: 1.35rem;
    }

    .sfBkRow {
        align-items: flex-start;
        gap: .15rem;
    }

    .sfBkRight {
        text-align: left;
    }

    .sfBkWhatsapp {
        font-size: .92rem;
    }

}

/* OTP Info */
.sfOtpInfoBar {
    display: flex;
    margin-top: 1rem !important;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    width: 100%;
}

.sfOtpInfoIcon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sfOtpInfoIcon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--sf-text);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sfOtpInfoText {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--sf-text);
    line-height: 1.4;
}

@media (max-width:36rem) {
    .sprQuoteCard p {
        font-size: 0.8rem;
    }

    .sprQuoteTitle {
        font-size: 1.2rem !important;
    }

    .sfOtpInfoText {
        font-size: .875rem;
    }

    .sfEventImage img {
        margin: 1rem 0rem !important;
        border-radius: 20px;
    }

    .text-craft {
        padding-top: 2.5rem !important;
    }

    #corporate {
        background-image: url(../images/corporate-bg.png);
    }

    #events {
        background-image: url(../images/Events-bg-small.jpg);
    }

    #local-bg {
        background-image: url("../images/local-bg-small.jpg");
        color: white;
    }

    #local-text {
        color: white !important;
        text-align: left !important;
    }

    #outstation-bg {
        background-image: url(../images/outstation-bg-small.jpg);
    }

    .pricing-bg {
        background-image: url(../images/pricing-bg-small.jpg) !important;
        padding: 6rem 0rem !important;
    }

    .fleet-bg {
        background-image: url(../images/Custom-bg-small.jpg) !important;
    }

    .about-bg {
        background-image: url(../images/about-bg-small.jpg) !important;
    }

    #super-title {
        color: var(--sf-hover) !important;
    }
}

/* =========================================================
   FIXED REVIEW BUTTON
========================================================= */

.sthReviewFloat {

    position: fixed;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    z-index: 1040;

}


/* Button */

.sthReviewFloat__btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    min-width: 3.25rem;

    padding: 0.9rem 0.7rem;

    border: 0;

    border-radius: 0.8rem 0 0 0.8rem;

    background: var(--sf-primary);


    color: var(--sf-white);

    box-shadow:
        0 0.5rem 1.5rem rgba(22, 163, 74, 0.28);

    font-weight: 600;

    cursor: pointer;

    writing-mode: vertical-rl;

    text-orientation: mixed;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* Icon */

.sthReviewFloat__btn i {

    font-size: 1.25rem;

    line-height: 1;

}


/* Hover */

.sthReviewFloat__btn:hover {

    background: var(--sf-primary-dark);

    box-shadow:
        0 0.7rem 1.8rem rgba(22, 163, 74, 0.35);

}


/* =========================================================
   MODAL
========================================================= */

.sthReviewModal .modal-dialog {

    max-width: 28rem;

    width: calc(100% - 2rem);

}


.sthReviewModal__content {

    position: relative;

    overflow: hidden;

    padding: 2rem 1.5rem 1.5rem;

    border: 0;

    border-radius: 1.5rem;

    background: var(--sth-review-white);

    box-shadow: var(--sth-review-shadow);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.sthReviewModal__close {

    position: absolute;

    top: 1rem;

    right: 1rem;

    width: 2.25rem;

    height: 2.25rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #f8fafc;

    color: var(--sth-review-black);

    font-size: 1.3rem;

    cursor: pointer;

    transition: 0.25s ease;

}


.sthReviewModal__close:hover {

    background: #fee2e2;

    color: #dc2626;

}


/* =========================================================
   HEADER
========================================================= */

.sthReviewModal__header {

    text-align: center;

    padding: 0 1.5rem;

}


.sthReviewModal__icon {

    width: 4rem;

    height: 4rem;

    margin: 0 auto 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--sth-review-green-light);

    color: var(--sth-review-green);

    font-size: 2rem;

}


.sthReviewModal__header h2 {

    margin: 0;

    color: var(--sf-primary);

    font-size: 1.5rem;

    font-weight: 800;

}


.sthReviewModal__header p {

    margin: 0.5rem 0 0;

    color: var(--sth-review-gray);

    font-size: 0.95rem;

    line-height: 1.6;

}


/* =========================================================
   QR AREA
========================================================= */

.sthReviewModal__qrArea {

    padding: 1.5rem 0;

    text-align: center;

}


.sthReviewModal__qrBox {

    width: 13rem;

    height: 13rem;

    margin: 0 auto;

    padding: 0.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--sth-review-white);

    border: 0.0625rem solid var(--sth-review-border);

    border-radius: 1rem;

    box-shadow:
        0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);

}


.sthReviewModal__qr {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}


.sthReviewModal__scanText {

    margin: 0.75rem 0 0;

    color: var(--sf-primary);

    font-size: 0.9rem;

    font-weight: 700;

}


/* =========================================================
   BUSINESS INFO
========================================================= */

.sthReviewModal__info {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1rem;

    padding: 0.9rem;

    border: 0.0625rem solid #dcfce7;

    border-radius: 0.75rem;

    background: var(--sth-review-green-light);

}


.sthReviewModal__infoIcon {

    width: 2.75rem;

    height: 2.75rem;

    flex: 0 0 2.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--sth-review-white);

    color: var(--sth-review-green);

    font-size: 1.35rem;

}


.sthReviewModal__info h3 {

    margin: 0;

    color: var(--sth-review-black);

    font-size: 1rem;

    font-weight: 800;

}


.sthReviewModal__info p {

    margin: 0.2rem 0 0;

    color: var(--sth-review-gray);

    font-size: 0.82rem;

}


/* =========================================================
   GOOGLE REVIEW BUTTON
========================================================= */

.sthReviewModal__reviewBtn {

    width: 100%;

    min-height: 3.25rem;

    padding: 0.75rem 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    border-radius: 0.75rem;

    background: var(--sth-review-green);

    color: var(--sth-review-white);

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 700;

    transition: 0.25s ease;

}


.sthReviewModal__reviewBtn:hover {

    background: var(--sth-review-green-dark);

    color: var(--sth-review-white);

}


.sthReviewModal__reviewBtn i {
    font-size: 1.1rem;
    color: orange;
}


/* =========================================================
   FOOTER TEXT
========================================================= */

.sthReviewModal__footerText {

    margin: 0.9rem 0 0;

    text-align: center;

    color: var(--sth-review-gray);

    font-size: 0.78rem;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 36rem) {

    .sthReviewFloat {

        top: auto;

        right: 0;

        bottom: 6rem;

        transform: none;

    }


    .sthReviewFloat__btn {

        min-width: 3rem;

        padding: 0.75rem 0.6rem;

        font-size: 0.78rem;

        border-radius: 0.7rem 0 0 0.7rem;

    }


    .sthReviewFloat__btn i {

        font-size: 1.1rem;

    }


    .sthReviewModal .modal-dialog {

        width: calc(100% - 1rem);

        margin: 0.5rem auto;

    }


    .sthReviewModal__content {

        padding: 1.5rem 1rem 1.25rem;

        border-radius: 1.25rem;

    }


    .sthReviewModal__qrBox {

        width: 11rem;

        height: 11rem;

    }


    .sthReviewModal__header h2 {

        font-size: 1.3rem;

    }

}

/* =========================================================
   SURAT TAXI HIRE
   VIDEO GALLERY
========================================================= */

:root {

    --sth-video-primary: #16a34a;
    --sth-video-primary-dark: #15803d;

    --sth-video-white: #ffffff;
    --sth-video-black: #111827;

    --sth-video-text: #1f2937;
    --sth-video-muted: #64748b;

    --sth-video-light: #f2fcf5;
    --sth-video-border: #dcfce7;

    --sth-video-radius: 1rem;

    --sth-video-shadow:
        0 0.75rem 2rem rgba(15, 23, 42, 0.10);

    --sth-video-shadow-hover:
        0 1rem 2.5rem rgba(15, 23, 42, 0.18);

}


/* =========================================================
   HEADER
========================================================= */

.sthVideoGallery__header {

    max-width: 45rem;

    margin: 0 auto 3rem;

    text-align: center;

}


.sthVideoGallery__subtitle {

    display: inline-block;

    margin-bottom: 0.75rem;

    padding: 0.4rem 1rem;

    border-radius: 10rem;

    background: var(--sth-video-light);

    color: var(--sth-video-primary);

    font-size: 0.875rem;

    font-weight: 700;

    letter-spacing: 0.04rem;

    text-transform: uppercase;

}


.sthVideoGallery__title {

    margin: 0;

    color: var(--sth-video-black);

    font-size: 2.5rem;

    font-weight: 800;

    line-height: 1.2;

}


.sthVideoGallery__title span {

    color: var(--sth-video-primary);

}


.sthVideoGallery__description {

    max-width: 38rem;

    margin: 1rem auto 0;

    color: var(--sth-video-muted);

    font-size: 1rem;

    line-height: 1.7;

}


/* =========================================================
   VIDEO GRID
========================================================= */

.sthVideoGallery__grid {

    align-items: stretch;

}


/* =========================================================
   VIDEO ITEM
========================================================= */

.sthVideoGallery__item {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border: 0.0625rem solid var(--sth-video-border);

    border-radius: var(--sth-video-radius);

    background: var(--sth-video-light);

    box-shadow: var(--sth-video-shadow);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.sthVideoGallery__item:hover {

    transform: translateY(-0.35rem);

    box-shadow: var(--sth-video-shadow-hover);

}


/* =========================================================
   9:16 VIDEO CONTAINER
========================================================= */

.sthVideoGallery__videoBox {

    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #e5e7eb;

}


/* =========================================================
   VIDEO
========================================================= */

.sthVideoGallery__video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    background: #e5e7eb;

    transition:
        transform 0.5s ease;

}


/* =========================================================
   OVERLAY
========================================================= */

.sthVideoGallery__overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.05),
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.18));

}


/* =========================================================
   PLAY ICON
========================================================= */

.sthVideoGallery__playIcon {

    width: 3rem;

    height: 3rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0.0625rem solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);

    color: var(--sth-video-white);

    font-size: 1.35rem;

    opacity: 0;

    transform: scale(0.8);

    backdrop-filter: blur(0.5rem);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

}


.sthVideoGallery__item:hover .sthVideoGallery__playIcon {

    opacity: 1;

    transform: scale(1);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 61.99875rem) {

    .sthVideoGallery {

        padding: 4rem 0;

    }


    .sthVideoGallery__header {

        margin-bottom: 2.5rem;

    }


    .sthVideoGallery__title {

        font-size: 2.15rem;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 47.99875rem) {

    .sthVideoGallery {

        padding: 3.5rem 0;

    }


    .sthVideoGallery__header {

        margin-bottom: 2rem;

        padding: 0 0.75rem;

    }


    .sthVideoGallery__title {

        font-size: 1.9rem;

    }


    .sthVideoGallery__description {

        font-size: 0.95rem;

        line-height: 1.6;

    }


    .sthVideoGallery__item {

        border-radius: 0.8rem;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 35.99875rem) {

    .sthVideoGallery {

        padding: 3rem 0;

    }


    .sthVideoGallery__title {

        font-size: 1.65rem;

    }


    .sthVideoGallery__subtitle {

        font-size: 0.75rem;

    }


    .sthVideoGallery__description {

        font-size: 0.875rem;

    }


    .sthVideoGallery__playIcon {

        width: 2.5rem;

        height: 2.5rem;

        font-size: 1.1rem;

    }

}