/*=========================================================
    BestEV Cash Offer Hero
    PART 2
    Global Styles + Hero + Left Content + Buttons
==========================================================*/

.be-cash-hero{

    --be-primary:#0A7C8C;
    --be-primary-dark:#06616d;
    --be-white:#ffffff;
    --be-black:#05070a;
    --be-text:#d7dde4;
    --be-border:rgba(255,255,255,.10);
    --be-glass:rgba(18,22,30,.45);
    --be-shadow:0 30px 80px rgba(0,0,0,.55);

    position:relative;
    overflow:hidden;
    isolation:isolate;
    font-family:"Exo 2",sans-serif;
}

/*-----------------------------
Background
------------------------------*/

.be-cash-bg{

    position:absolute;
    inset:0;

    background-image:
      
        url("../images/abouthero.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    z-index:-3;

}

.be-cash-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 75% 35%,
    rgba(10,124,140,.28),
    transparent 35%),

    radial-gradient(circle at 20% 70%,
    rgba(10,124,140,.12),
    transparent 40%),

    linear-gradient(90deg,
    rgba(2,8,15,.92) 0%,
    rgba(2,8,15,.78) 40%,
    rgba(2,8,15,.35) 70%,
    rgba(2,8,15,.18) 100%);

    z-index:-2;

}

/*-----------------------------
Container
------------------------------*/

.be-cash-hero .container{

    max-width:1320px;
    position:relative;
    z-index:5;

}

/*-----------------------------
Left Content
------------------------------*/

.be-cash-content{

    max-width:760px;
    position:relative;
    z-index:10;

}

/*-----------------------------
Badge
------------------------------*/

.be-cash-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:9px 18px;

    border-radius:50px;

    background:rgba(10,124,140,.12);

    border:1px solid rgba(10,124,140,.35);

    color:#c7fbff;

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

    backdrop-filter:blur(12px);

}

.be-cash-badge i{

    color:#0A7C8C;
    font-size:15px;

}

/*-----------------------------
Heading
------------------------------*/

.be-cash-title{

    font-family:"Exo 2",sans-serif;

    font-weight:800;

    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1.05;

    letter-spacing:-0.02em;

    color:#ffffff;

    margin-bottom:24px;

}

.be-cash-title span{

    color:#00B6CD;

}

/*-----------------------------
Description
------------------------------*/

.be-cash-desc{

    color:#d4dce3;

    font-size:1.18rem;

    line-height:1.8;

    

    margin-bottom:38px;

    opacity:.95;

}

/*-----------------------------
Features
------------------------------*/

.be-cash-features{

    display:flex;

    align-items:flex-start;

    gap:28px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.be-cash-feature{

    display:flex;

    align-items:center;

    gap:14px;

}

.be-cash-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    background:rgba(10,124,140,.10);

    border:1px solid rgba(10,124,140,.30);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#00B6CD;

    font-size:24px;

    transition:.35s;

}

.be-cash-feature strong{

    display:block;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    line-height:1.2;

}

.be-cash-feature span{

    display:block;

    color:#d2d8df;

    font-size:14px;

    margin-top:3px;

}

/*-----------------------------
Buttons
------------------------------*/

.be-cash-buttons{

    display:flex;

    gap:18px;

    align-items:center;

    flex-wrap:wrap;

}

.be-btn-primary{

    min-width:230px;

    height:60px;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:#0A7C8C;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 15px 40px rgba(10,124,140,.28);

}

.be-btn-primary:hover{

    background:#0c92a5;

    color:#fff;

    transform:translateY(-4px);

}

.be-btn-primary i{

    transition:.35s;

}

.be-btn-primary:hover i{

    transform:translateX(5px);

}

.be-btn-outline{

    min-width:180px;

    height:60px;

    border-radius:14px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#ffffff;

    font-weight:700;

    font-size:17px;

    border:2px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.be-btn-outline:hover{

    background:#ffffff;

    color:#111;

    border-color:#ffffff;

    transform:translateY(-4px);

}

/*-----------------------------
Spacing before image
------------------------------*/

.be-cash-image-wrap{

    position:relative;

    min-height:650px;

}
/*=========================================================
    BestEV Cash Offer Hero
    PART 3
    Right Side • Car • Review Card • Stats Bar
==========================================================*/


/*==========================================
RIGHT SIDE WRAPPER
==========================================*/

.be-cash-image-wrap{

    position:relative;
    min-height:720px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;

}


/*==========================================
BACKGROUND GLOW
==========================================*/

.be-car-glow{

    position:absolute;

    width:650px;
    height:650px;

    right:5%;
    bottom:30px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(10,124,140,.22) 0%,
    rgba(10,124,140,.10) 40%,
    transparent 72%);

    filter:blur(45px);

    z-index:1;

}


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

.be-car-image{

    position:absolute;

    right:-20px;
    bottom:0;

    width:100%;
    max-width:820px;

    object-fit:contain;

    z-index:5;

    user-select:none;
    pointer-events:none;

    filter:

    drop-shadow(0 40px 90px rgba(0,0,0,.55))
    drop-shadow(0 15px 40px rgba(10,124,140,.15));

}


/*==========================================
GROUND REFLECTION
==========================================*/

.be-cash-image-wrap::after{

    content:"";

    position:absolute;

    left:10%;
    right:0;
    bottom:-30px;

    height:130px;

    background:

    radial-gradient(
    ellipse at center,
    rgba(255,255,255,.12),
    transparent 70%);

    filter:blur(35px);

    z-index:2;

}


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

.be-review-card{

    position:absolute;

    top:40px;
    left:80px;

    width:245px;

    padding:22px;

    border-radius:22px;

    background:rgba(18,23,31,.48);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.35);

    z-index:20;

}


/*==========================================
STAR ROW
==========================================*/

.be-stars{

    display:flex;

    align-items:center;

    gap:6px;

    margin-bottom:10px;

}

.be-stars i{

    color:#10d4ec;

    font-size:16px;

}

.be-stars strong{

    margin-left:6px;

    font-size:30px;

    color:#fff;

    font-weight:800;

}


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

.be-review-text{

    color:#d5dde4;

    font-size:15px;

    font-weight:500;

    margin-bottom:18px;

}


/*==========================================
AVATARS
==========================================*/

.be-review-users{

    display:flex;

    align-items:center;

}

.be-review-users img{

    width:42px;
    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #081018;

    margin-right:-12px;

    transition:.35s;

}

.be-review-users img:hover{

    transform:translateY(-6px);

    z-index:10;

}


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

.be-cash-stats{

    margin-top:-20px;

    position:relative;

    z-index:50;

    border-radius:22px;

    overflow:hidden;

    background:

    rgba(10,16,23,.70);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.45);

}


/*==========================================
STAT ITEM
==========================================*/

.be-stat{

    display:flex;

    align-items:center;

    gap:18px;

    padding:32px;

    position:relative;

    height:100%;

}

.be-stat::after{

    content:"";

    position:absolute;

    right:0;
    top:50%;

    width:1px;
    height:55%;

    background:rgba(255,255,255,.08);

    transform:translateY(-50%);

}

.be-cash-stats .col-lg-3:last-child .be-stat::after{

    display:none;

}


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

.be-stat-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(10,124,140,.10);

    border:1px solid rgba(10,124,140,.28);

    color:#0A7C8C;

    font-size:28px;

    flex-shrink:0;

}


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

.be-stat h3{

    margin:0;

    color:#fff;

    font-size:2rem;

    font-weight:800;

    line-height:1;

}

.be-stat p{

    margin:8px 0 0;

    color:#c8d1d8;

    font-size:15px;

    font-weight:500;

}


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

.be-stat{

    transition:.35s;

}

.be-stat:hover{

    background:rgba(255,255,255,.025);

}

.be-stat:hover .be-stat-icon{

    transform:translateY(-4px);

    transition:.35s;

    background:#0A7C8C;
    color:#fff;

}


/*==========================================
FLOATING ANIMATION
==========================================*/

@keyframes beFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.be-review-card{

    animation:beFloat 5s ease-in-out infinite;

}

.be-car-image{

    animation:beFloat 7s ease-in-out infinite;

}
/*=========================================================
    BestEV Cash Offer Hero
    PART 4
    Responsive CSS
==========================================================*/


/*==============================================
≤ 1400px
==============================================*/

@media (max-width:1400px){

    .be-cash-hero{
        padding:80px 0 35px;
    }

    .be-car-image{
        max-width:740px;
        right:-10px;
    }

    .be-review-card{
        left:40px;
        top:30px;
    }

    .be-stat{
        padding:26px;
    }

}


/*==============================================
≤ 1200px
==============================================*/

@media (max-width:1199px){

    .be-cash-title{
        font-size:clamp(2rem,5vw,3.2rem);
    }

    .be-cash-desc{
        font-size:17px;
    }

    .be-cash-image-wrap{
        min-height:620px;
    }

    .be-car-image{

        max-width:650px;

        right:0;

    }

    .be-review-card{

        width:220px;

        left:15px;

    }

    .be-stars strong{

        font-size:26px;

    }

    .be-stat h3{

        font-size:1.7rem;

    }

}


/*==============================================
≤ 991px
==============================================*/

@media (max-width:991px){

    .be-cash-hero{

        text-align:center;

        padding:70px 0 30px;

    }

    .be-cash-content{

        max-width:100%;

        margin-bottom:40px;

    }

    .be-cash-desc{

        max-width:700px;

        margin-left:auto;
        margin-right:auto;

    }

    .be-cash-features{

        justify-content:center;

        gap:20px;

    }

    .be-cash-buttons{

        justify-content:center;

    }

    .be-cash-image-wrap{

        min-height:520px;

        justify-content:center;

    }

    .be-car-image{

        position:relative;

        right:auto;
        left:auto;

        width:100%;

        max-width:650px;

        margin:auto;

    }

    .be-review-card{

        top:10px;

        left:50%;

        transform:translateX(-50%);

    }

    .be-car-glow{

        left:50%;

        transform:translateX(-50%);

        width:550px;

        height:550px;

    }

    .be-cash-stats{

        margin-top:40px;

    }

    .be-stat{

        padding:25px 20px;

    }

}


/*==============================================
≤ 767px
==============================================*/

@media (max-width:767px){

    .be-cash-hero{

        padding:60px 0 25px;

    }

    .be-cash-title{

        font-size:2.6rem;

        line-height:1.05;

    }

    .be-cash-desc{

        font-size:16px;

        line-height:1.8;

    }

    .be-cash-features{

        flex-direction:column;

        align-items:center;

    }

    .be-cash-feature{

        width:250px;

        justify-content:flex-start;

    }

    .be-cash-buttons{

        flex-direction:column;

        width:100%;

    }

    .be-btn-primary,
    .be-btn-outline{

        width:100%;

        max-width:340px;

    }

    .be-cash-image-wrap{

        min-height:430px;

    }

    .be-review-card{

        width:210px;

        padding:18px;

        top:0;

    }

    .be-review-users img{

        width:36px;
        height:36px;

    }

    .be-stars strong{

        font-size:24px;

    }

    .be-stat{

        justify-content:center;

        text-align:left;

    }

}


/*==============================================
≤ 575px
==============================================*/

@media (max-width:575px){

    .be-cash-title{

        font-size:2.15rem;

    }

    .be-cash-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .be-cash-desc{

        font-size:15px;

    }

    .be-cash-image-wrap{

        min-height:320px;

    }

    .be-car-image{

        max-width:100%;

    }

    .be-car-glow{

        width:350px;

        height:350px;

    }

    .be-review-card{

        width:190px;

        padding:15px;

        border-radius:18px;

    }

    .be-review-text{

        font-size:13px;

    }

    .be-stars strong{

        font-size:21px;

    }

    .be-stars i{

        font-size:13px;

    }

    .be-review-users img{

        width:32px;
        height:32px;

        border-width:2px;

    }

    .be-stat{

        padding:20px 15px;

        gap:14px;

    }

    .be-stat-icon{

        width:48px;
        height:48px;

        font-size:22px;

        border-radius:14px;

    }

    .be-stat h3{

        font-size:1.35rem;

    }

    .be-stat p{

        font-size:13px;

    }

    .be-stat::after{

        display:none;

    }

}


/*==============================================
Extra Small (≤420px)
==============================================*/

@media (max-width:420px){

    .be-cash-title{

        font-size:1.95rem;

    }

    .be-cash-desc{

        font-size:14px;

    }

    .be-cash-feature{

        width:100%;

    }

    .be-cash-image-wrap{

        min-height:280px;

    }

    .be-review-card{

        transform:translateX(-50%) scale(.90);

    }

}
/*=========================================================
    BestEV Cash Offer Hero
    PART 5
    Premium Effects & Animations
==========================================================*/


/*=========================================
Smooth Rendering
=========================================*/

.be-cash-hero *,
.be-cash-hero *::before,
.be-cash-hero *::after{

    box-sizing:border-box;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}


/*=========================================
Background Animated Glow
=========================================*/

.be-cash-hero::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    top:-250px;
    right:-180px;

    background:
    radial-gradient(circle,
    rgba(10,124,140,.16),
    transparent 72%);

    filter:blur(45px);

    animation:beGlowMove 12s ease-in-out infinite;

    pointer-events:none;

}

.be-cash-hero::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-160px;
    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(10,124,140,.12),
    transparent 72%);

    filter:blur(40px);

    animation:beGlowMove2 10s ease-in-out infinite;

    pointer-events:none;

}

@keyframes beGlowMove{

    0%{
        transform:translateY(0px) scale(1);
    }

    50%{
        transform:translateY(25px) scale(1.08);
    }

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

}

@keyframes beGlowMove2{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(40px);
    }

    100%{
        transform:translateX(0);
    }

}


/*=========================================
Premium Badge Hover
=========================================*/

.be-cash-badge{

    transition:.35s;

}

.be-cash-badge:hover{

    background:rgba(10,124,140,.18);

    border-color:rgba(10,124,140,.55);

    transform:translateY(-3px);

}


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

.be-cash-feature{

    transition:.35s;

}

.be-cash-feature:hover{

    transform:translateY(-6px);

}

.be-cash-feature:hover .be-cash-icon{

    background:#0A7C8C;

    color:#fff;

    border-color:#0A7C8C;

    box-shadow:
    0 15px 35px rgba(10,124,140,.35);

}


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

.be-btn-primary{

    position:relative;

    overflow:hidden;

}

.be-btn-primary::before{

    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:70%;
    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transition:.8s;

}

.be-btn-primary:hover::before{

    left:150%;

}


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

.be-btn-outline{

    position:relative;

    overflow:hidden;

}

.be-btn-outline::after{

    content:"";

    position:absolute;

    inset:0;

    background:#ffffff;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

    z-index:-1;

}

.be-btn-outline:hover::after{

    transform:scaleX(1);

}


/*=========================================
Review Card Hover
=========================================*/

.be-review-card{

    transition:.45s;

}

.be-review-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 35px 90px rgba(0,0,0,.45);

}


/*=========================================
Car Hover Animation
=========================================*/

.be-cash-image-wrap:hover .be-car-image{

    transform:

    translateY(-10px)
    scale(1.02);

    transition:.7s ease;

}

.be-cash-image-wrap:hover .be-car-glow{

    transform:scale(1.08);

    opacity:1;

    transition:.7s;

}


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

.be-stat{

    overflow:hidden;

}

.be-stat::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    background:

    linear-gradient(90deg,
    rgba(10,124,140,.18),
    transparent);

    transition:.45s;

    z-index:-1;

}

.be-stat:hover::before{

    width:100%;

}

.be-stat:hover h3{

    color:#0A7C8C;

}

.be-stat:hover .be-stat-icon{

    transform:rotate(-8deg) scale(1.08);

}


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

.be-review-users img{

    transition:.35s;

}

.be-review-users img:hover{

    transform:translateY(-8px) scale(1.08);

}


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

.be-cash-title{

    animation:beFadeUp .8s ease;

}

.be-cash-desc{

    animation:beFadeUp 1s ease;

}

.be-cash-buttons{

    animation:beFadeUp 1.2s ease;

}

@keyframes beFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@keyframes beCarFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

.be-car-image{

    animation:beCarFloat 7s ease-in-out infinite;

}


/*=========================================
Glass Shine Effect
=========================================*/

.be-cash-stats,
.be-review-card{

    position:relative;

    overflow:hidden;

}

.be-cash-stats::before,
.be-review-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent);

    transform:skewX(-20deg);

}

.be-cash-stats:hover::before,
.be-review-card:hover::before{

    animation:beShine 1.4s;

}

@keyframes beShine{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}


/*=========================================
Performance
=========================================*/

.be-car-image,
.be-review-card,
.be-stat,
.be-btn-primary,
.be-btn-outline,
.be-cash-feature{

    will-change:transform;

}


/*=========================================
Reduce Motion Support
=========================================*/

@media (prefers-reduced-motion:reduce){

    .be-cash-hero *,
    .be-cash-hero::before,
    .be-cash-hero::after{

        animation:none !important;
        transition:none !important;

    }

}

/*==================================================
    BestEV Process Section
    Part 2.1
==================================================*/

.be-process-section{
    position:relative;
    overflow:hidden;
    background:#02131b;
    padding:90px 0;
    font-family:"Exo 2",sans-serif;
}

.be-process-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at left center,
            rgba(0,160,210,.18),
            transparent 45%),
        radial-gradient(circle at right center,
            rgba(0,180,170,.12),
            transparent 35%),
        linear-gradient(90deg,#03131c 0%,#012a2f 50%,#04434c 100%);
    z-index:0;
}

.be-process-section .container{
    position:relative;
    z-index:2;
    max-width:1320px;
}

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

.be-process-content{
    max-width:520px;
}

.be-process-subtitle{

    display:inline-block;

    color:#00b8b8;

    text-transform:uppercase;

    font-size:15px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:20px;

}

.be-process-title{

    color:#ffffff;

    font-size:clamp(2rem,4vw,3.4rem);

    line-height:1.08;

    font-weight:800;

    margin-bottom:28px;

}

.be-process-title span{

    color:#00B6CD;

}

.be-process-desc{

    color:#d2dce4;

    font-size:18px;

    line-height:1.9;

    max-width:480px;

}

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

.be-process-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    align-items:stretch;

}

/*=========================
CONNECTOR LINE
=========================*/

.be-process-line{

    position:absolute;

    left:10%;

    right:10%;

    top:18px;

    border-top:2px dashed rgba(255,255,255,.12);

    z-index:1;

}
/*==================================================
    BestEV Process Section
    Part 2.2 - Cards
==================================================*/

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

.be-process-card{
    position:relative;
    z-index:2;
    padding-top:40px;
}

.be-process-inner{

    position:relative;

    height:100%;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:70px 24px 30px;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);

    transition:.25s ease;

}

/*=========================
STEP NUMBER
=========================*/

.be-process-step{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    background:#ffffff;

    border:5px solid #062636;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:800;

    z-index:10;

}

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

.be-process-icon{

    width:72px;

    height:72px;

    margin:0 auto 25px;

    border-radius:18px;

    background:rgba(0,184,184,.10);

    border:1px solid rgba(0,184,184,.30);

    display:flex;

    align-items:center;

    justify-content:center;

}

.be-process-icon i{

    font-size:34px;

    color:#00b8b8;

}

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

.be-process-inner h4{

    color:#ffffff;

    text-align:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

    line-height:1.3;

}

/*=========================
DESCRIPTION
=========================*/

.be-process-inner p{

    color:#cfd9df;

    text-align:center;

    font-size:15px;

    line-height:1.8;

    margin:0;

}

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

.be-process-card:hover .be-process-inner{

    border-color:rgba(0,184,184,.35);

    background:rgba(255,255,255,.08);

    box-shadow:
        0 30px 55px rgba(0,0,0,.35);

}

.be-process-card:hover .be-process-icon{

    background:#00b5cd3d;

    border-color:rgba(0,184,184,.45);

}

/*=========================
ACTIVE CARD (Optional)
=========================*/

.be-process-card:first-child .be-process-inner{

    border-color:rgba(0,184,184,.30);

}

/*=========================
BETTER SPACING
=========================*/

.be-process-card:nth-child(2){

    margin-top:25px;

}

.be-process-card:nth-child(3){

    margin-top:25px;

}

.be-process-card:nth-child(4){

    margin-top:25px;

}
/*==================================================
    BestEV Process Section
    Part 2.3 - Responsive CSS
==================================================*/


/*=========================================
1400px
=========================================*/

@media (max-width:1400px){

    .be-process-section{
        padding:80px 0;
    }

    .be-process-wrapper{
        gap:18px;
    }

}


/*=========================================
1200px
=========================================*/

@media (max-width:1199px){

    .be-process-title{
        font-size:clamp(2rem,4vw,3rem);
    }

    .be-process-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

    }

    .be-process-line{

        display:none;

    }

    .be-process-card{

        margin-top:0 !important;

        padding-top:25px;

    }

    .be-process-inner{

        padding:65px 25px 28px;

    }

}


/*=========================================
991px
=========================================*/

@media (max-width:991px){

    .be-process-section{

        text-align:center;

        padding:70px 0;

    }

    .be-process-content{

        max-width:100%;

        margin-bottom:40px;

    }

    .be-process-desc{

        max-width:700px;

        margin:auto;

    }

    .be-process-wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

    }

}


/*=========================================
768px
=========================================*/

@media (max-width:767px){

    .be-process-section{

        padding:60px 0;

    }

    .be-process-wrapper{

        grid-template-columns:1fr;

        gap:30px;

    }

    .be-process-card{

        margin-top:0 !important;

        padding-top:22px;

    }

    .be-process-inner{

        padding:65px 25px 30px;

    }

    .be-process-title{

        font-size:2.3rem;

        line-height:1.15;

    }

    .be-process-desc{

        font-size:16px;

        line-height:1.8;

    }

    .be-process-icon{

        width:66px;
        height:66px;

    }

    .be-process-icon i{

        font-size:30px;

    }

    .be-process-inner h4{

        font-size:21px;

    }

}


/*=========================================
576px
=========================================*/

@media (max-width:575px){

    .be-process-section{

        padding:55px 0;

    }

    .be-process-title{

        font-size:2rem;

    }

    .be-process-subtitle{

        font-size:13px;

        letter-spacing:2px;

    }

    .be-process-desc{

        font-size:15px;

    }

    .be-process-inner{

        padding:60px 22px 25px;

        border-radius:18px;

    }

    .be-process-icon{

        width:60px;

        height:60px;

        border-radius:16px;

    }

    .be-process-icon i{

        font-size:28px;

    }

    .be-process-step{

        width:38px;

        height:38px;

        font-size:15px;

    }

    .be-process-inner h4{

        font-size:19px;

    }

    .be-process-inner p{

        font-size:14px;

        line-height:1.7;

    }

}


/*=========================================
Extra Small
=========================================*/

@media (max-width:420px){

    .be-process-title{

        font-size:1.75rem;

    }

    .be-process-inner{

        padding:55px 18px 22px;

    }

    .be-process-icon{

        width:55px;

        height:55px;

    }

    .be-process-icon i{

        font-size:24px;

    }

}
/*==================================================
    BestEV Benefits Section
    Part 2.1
==================================================*/

.be-benefits-section{
    position:relative;
    padding:90px 0;
    background:#f8fafb;
    overflow:hidden;
    font-family:"Exo 2",sans-serif;
}

.be-benefits-section *{
    box-sizing:border-box;
}

.be-benefits-section .container{
    max-width:1280px;
}

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

.be-benefits-heading{
    text-align:center;
    margin-bottom:45px;
}

.be-benefits-heading h2{

    margin:0;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#111827;

    line-height:1.15;

}

.be-benefits-heading h2 span{

    color:#0A7C8C;

}

.be-benefits-line{

    width:65px;

    height:3px;

    background:#0A7C8C;

    border-radius:30px;

    margin:18px auto 0;

}

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

.be-benefit-card{

    position:relative;

    background:#ffffff;

    border:1px solid #eef2f4;

    border-radius:18px;

    padding:28px 20px;

    text-align:center;

    height:100%;

    transition:.25s ease;

    box-shadow:
        0 8px 30px rgba(0,0,0,.04);

}

.be-benefit-card:hover{

    border-color:#0A7C8C;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);

}

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

.be-benefit-icon{

    width:62px;

    height:62px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#e8f8fa;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(10,124,140,.18);

}

.be-benefit-icon i{

    font-size:28px;

    color:#00B5CC;

}

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

.be-benefit-card h5{

    margin:0 0 12px;

    font-size:20px;

    font-weight:700;

    color:#1f2937;

    line-height:1.3;

}

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

.be-benefit-card p{

    margin:0;

    color:#5b6472;

    font-size:15px;

    line-height:1.75;

}

/*==================================
Spacing
==================================*/

.be-benefits-section .row.g-4{

    --bs-gutter-x:1.5rem;
    --bs-gutter-y:1.5rem;

}
/*==================================================
    BestEV Benefits Section
    Part 2.1
==================================================*/

.be-benefits-section{
    position:relative;
    padding:90px 0;
    background:#f8fafb;
    overflow:hidden;
    font-family:"Exo 2",sans-serif;
}

.be-benefits-section *{
    box-sizing:border-box;
}

.be-benefits-section .container{
    max-width:1280px;
}

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

.be-benefits-heading{
    text-align:center;
    margin-bottom:45px;
}

.be-benefits-heading h2{

    margin:0;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#111827;

    line-height:1.15;

}

.be-benefits-heading h2 span{

    color:#0A7C8C;

}

.be-benefits-line{

    width:65px;

    height:3px;

    background:#0A7C8C;

    border-radius:30px;

    margin:18px auto 0;

}

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

.be-benefit-card{

    position:relative;

    background:#ffffff;

    border:1px solid #eef2f4;

    border-radius:18px;

    padding:28px 20px;

    text-align:center;

    height:100%;

    transition:.25s ease;

    box-shadow:
        0 8px 30px rgba(0,0,0,.04);

}

.be-benefit-card:hover{

    border-color:#0A7C8C;

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);

}

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

.be-benefit-icon{

    width:62px;

    height:62px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#e8f8fa;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(10,124,140,.18);

}

.be-benefit-icon i{

    font-size:28px;

    color:#0A7C8C;

}

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

.be-benefit-card h5{

    margin:0 0 12px;

    font-size:20px;

    font-weight:700;

    color:#1f2937;

    line-height:1.3;

}

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

.be-benefit-card p{

    margin:0;

    color:#5b6472;

    font-size:15px;

    line-height:1.75;

}

/*==================================
Spacing
==================================*/

.be-benefits-section .row.g-4{

    --bs-gutter-x:1.5rem;
    --bs-gutter-y:1.5rem;

}
/*==================================================
    BestEV Benefits Section
    Part 2.3 FINAL
==================================================*/

/*==============================
COMPARE SECTION
===============================*/

.be-compare-wrapper{
    position:relative;
    margin-top:70px;
}

.be-compare-left,
.be-compare-right{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    min-height:380px;
}

.be-compare-left{
    background:#fff;
    border:1px solid #edf1f5;
    box-shadow:0 15px 45px rgba(0,0,0,.06);
}

.be-compare-right{
    background:linear-gradient(135deg,#00B6CD 0%,#028293 100%);
    box-shadow:0 15px 45px rgba(10,124,140,.20);
}

.be-compare-left .row,
.be-compare-right .row{
    height:380px;
    margin:0;
}

.be-left-image,
.be-right-image{
    height:100%;
    overflow:hidden;
}

.be-left-image img,
.be-right-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius: 12px;
}

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

.be-compare-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    padding:40px;
}

.be-compare-content h3{
    margin:0 0 25px;
    font-size:32px;
    font-weight:800;
    line-height:1.2;
}

.be-compare-left h3{
    color:#111827;
}

.be-compare-right h3{
    color:#fff;
}

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

.be-compare-content ul{
    margin:0;
    padding:0;
    list-style:none;
}

.be-compare-content li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    font-size:16px;
    line-height:1.7;
    font-weight:500;
}

.be-compare-content li:last-child{
    margin-bottom:0;
}

.be-compare-left li{
    color:#4b5563;
}

.be-compare-right li{
    color:#fff;
}

.be-compare-left li i{
    color:#ef4444;
    font-size:18px;
    margin-top:4px;
}

.be-compare-right li i{
    color:#9ef2c2;
    font-size:18px;
    margin-top:4px;
}

/*==============================
VS
===============================*/

.be-vs-circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90px;
    height:90px;
    border-radius:50%;
    background:#fff;
    border:4px solid #0A7C8C;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
    z-index:50;
}

.be-vs-circle span{
    font-size:32px;
    font-weight:800;
    color:#0A7C8C;
}

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

@media (max-width:1199px){

    .be-compare-content{
        padding:30px;
    }

    .be-compare-content h3{
        font-size:28px;
    }

}

@media (max-width:991px){

    .be-compare-left,
    .be-compare-right{
        min-height:auto;
        margin-bottom:35px;
        border-radius:20px;
    }

    .be-compare-left .row,
    .be-compare-right .row{
        height:auto;
    }

    .be-left-image,
    .be-right-image{
        height:260px;
    }

    .be-compare-content{
        height:auto;
        padding:30px;
        text-align:center;
    }

    .be-compare-content ul{
        display:inline-block;
        text-align:left;
    }

    .be-vs-circle{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        margin:0 auto 35px;
    }

}

@media (max-width:767px){

    .be-left-image,
    .be-right-image{
        height:220px;
    }

    .be-compare-content{
        padding:25px;
    }

    .be-compare-content h3{
        font-size:24px;
    }

    .be-compare-content li{
        font-size:15px;
    }

    .be-vs-circle{
        width:75px;
        height:75px;
    }

    .be-vs-circle span{
        font-size:26px;
    }

}

@media (max-width:575px){

    .be-left-image,
    .be-right-image{
        height:180px;
    }

    .be-compare-content{
        padding:20px;
    }

    .be-compare-content h3{
        font-size:22px;
    }

    .be-compare-content li{
        font-size:14px;
    }

    .be-vs-circle{
        width:65px;
        height:65px;
    }

    .be-vs-circle span{
        font-size:22px;
    }

}