/* =========================================================
   RITHCABS
   WHY CHOOSE RITHCABS
   PREMIUM SECTION
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.rithcabs-why-choose {
    width: 100%;
    padding: 70px 22px 60px;
    box-sizing: border-box;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fafc 100%);
}


/* =========================================================
   02. CONTAINER
   ========================================================= */

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


/* =========================================================
   03. SECTION HEADING
   ========================================================= */

.why-choose-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}


/* =========================================================
   04. EYEBROW
   ========================================================= */

.why-choose-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 10px;
}


.why-choose-eyebrow span {
    width: 42px;
    height: 2px;

    background: #ffb800;

    border-radius: 30px;
}


.why-choose-eyebrow strong {
    color: #06283d;

    font-size: 11px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 4px;
}


/* =========================================================
   05. MAIN HEADING
   ========================================================= */

.why-choose-heading h2 {
    margin: 0;

    color: #06283d;

    font-size: 46px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}


.why-choose-heading h2 span {
    color: #ffb800;
}


/* =========================================================
   06. HEADING DESCRIPTION
   ========================================================= */

.why-choose-heading p {
    max-width: 600px;

    margin: 14px auto 0;

    color: #61798c;

    font-size: 15px;
    line-height: 1.65;

    font-weight: 500;
}


/* =========================================================
   07. TITLE GOLD LINE
   ========================================================= */

.why-choose-title-line {
    width: 62px;
    height: 4px;

    margin: 18px auto 0;

    background: #ffb800;

    border-radius: 50px;
}


/* =========================================================
   08. MAIN CONTENT
   ========================================================= */

.why-choose-content {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(390px, 0.90fr) minmax(600px, 1.45fr);

    gap: 28px;

    align-items: stretch;
}


/* =========================================================
   09. LEFT VISUAL
   ========================================================= */

.why-choose-visual {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #07344e 0%,
            #041f31 100%);

    border-radius: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 24px 55px rgba(6, 40, 61, 0.16);
}


/* =========================================================
   10. LEFT VISUAL GLOW
   ========================================================= */

.why-choose-visual::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 320px;
    height: 320px;

    z-index: 1;

    border-radius: 50%;

    background:
        rgba(255, 184, 0, 0.12);

    filter: blur(20px);
}


/* =========================================================
   11. LEFT VISUAL GOLD DECORATION
   ========================================================= */

.why-choose-visual::after {
    content: "";

    position: absolute;

    left: -70px;
    bottom: -100px;

    width: 260px;
    height: 260px;

    z-index: 1;

    border:
        35px solid rgba(255, 184, 0, 0.08);

    border-radius: 50%;
}


/* =========================================================
   12. VISUAL TITLE
   ========================================================= */

.why-choose-visual-title {
    position: absolute;

    top: 38px;
    left: 38px;

    z-index: 8;

    display: flex;
    flex-direction: column;

    color: #ffffff;

    font-size: 30px;
    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -1px;
}


.why-choose-visual-title strong {
    color: #ffb800;

    font-size: 40px;
    line-height: 1;

    font-weight: 800;
}


.why-choose-visual-title span {
    color: #ffffff;
}


/* =========================================================
   13. VISUAL GOLD LINE
   ========================================================= */

.why-choose-visual-line {
    position: absolute;

    top: 178px;
    left: 40px;

    z-index: 8;

    width: 85px;
    height: 5px;

    background: #ffb800;

    border-radius: 50px;

    transform: rotate(-5deg);
}


/* =========================================================
   14. CAB IMAGE
   ========================================================= */

.why-choose-car {
    position: absolute;

    right: -20px;
    bottom: 20px;

    z-index: 5;

    width: 88%;
    max-width: 520px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 25px 22px rgba(0, 0, 0, 0.32));

    transition:
        transform 0.55s cubic-bezier(.2, .8, .2, 1);
}


.why-choose-visual:hover .why-choose-car {
    transform:
        translateX(-5px) scale(1.025);
}


/* =========================================================
   15. QUOTE BOX
   ========================================================= */

.why-choose-quote {
    position: absolute;

    left: 30px;
    bottom: 28px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 17px;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: 16px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.why-choose-quote>i {
    color: #ffb800;

    font-size: 24px;
}


.why-choose-quote>div {
    display: flex;
    flex-direction: column;
}


.why-choose-quote span {
    color: #61798c;

    font-size: 10px;

    font-weight: 600;
}


.why-choose-quote strong {
    margin-top: 1px;

    color: #06283d;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   16. BENEFITS GRID
   ========================================================= */

.why-choose-benefits {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   17. BENEFIT CARD
   ========================================================= */

.why-benefit-card {
    position: relative;

    min-width: 0;

    min-height: 205px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;

    padding: 25px 23px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fbfcfd 100%);

    border:
        1px solid #e3ebf0;

    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(6, 40, 61, 0.055);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}


/* =========================================================
   18. CARD GOLD TOP LINE
   ========================================================= */

.why-benefit-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 42px;
    height: 3px;

    background: #ffb800;

    border-radius:
        0 0 10px 10px;

    transition:
        width 0.28s ease;
}


/* =========================================================
   19. CARD DECORATIVE CIRCLE
   ========================================================= */

.why-benefit-card::after {
    content: "";

    position: absolute;

    right: -40px;
    bottom: -45px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        rgba(255, 184, 0, 0.045);

    transition:
        transform 0.3s ease;
}


/* =========================================================
   20. CARD HOVER
   ========================================================= */

.why-benefit-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(255, 184, 0, 0.50);

    box-shadow:
        0 20px 40px rgba(6, 40, 61, 0.10);
}


.why-benefit-card:hover::before {
    width: 72px;
}


.why-benefit-card:hover::after {
    transform:
        scale(1.25);
}


/* =========================================================
   21. BENEFIT ICON
   ========================================================= */

.why-benefit-icon {
    position: relative;

    z-index: 3;

    width: 58px;
    height: 58px;

    flex:
        0 0 58px;

    display: flex;

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

    margin-bottom: 20px;

    color: #ffffff;

    background:
        linear-gradient(145deg,
            #07344e 0%,
            #041f31 100%);

    border-radius: 17px;

    box-shadow:
        0 9px 20px rgba(6, 40, 61, 0.18);

    font-size: 24px;

    transition:
        transform 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease;
}


/* =========================================================
   22. ICON HOVER
   ========================================================= */

.why-benefit-card:hover .why-benefit-icon {
    color: #06283d;

    background:
        linear-gradient(145deg,
            #ffc72c 0%,
            #ffb800 100%);

    transform:
        rotate(-4deg) scale(1.05);

    box-shadow:
        0 10px 22px rgba(255, 184, 0, 0.25);
}


/* =========================================================
   23. BENEFIT TITLE
   ========================================================= */

.why-benefit-card h3 {
    position: relative;

    z-index: 3;

    margin:
        0 0 8px;

    color: #06283d;

    font-size: 17px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.3px;
}


/* =========================================================
   24. BENEFIT DESCRIPTION
   ========================================================= */

.why-benefit-card p {
    position: relative;

    z-index: 3;

    margin: 0;

    color: #6d7f8d;

    font-size: 12px;
    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   25. STATS / TRUST BAR
   ========================================================= */

.why-choose-stats {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    margin-top: 28px;

    padding:
        22px 28px;

    background:
        linear-gradient(135deg,
            #07344e 0%,
            #06283d 55%,
            #041f31 100%);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 22px;

    box-shadow:
        0 18px 40px rgba(6, 40, 61, 0.14);
}


/* =========================================================
   26. STAT ITEM
   ========================================================= */

.why-stat-item {
    min-width: 0;

    display: flex;

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

    gap: 13px;

    padding:
        5px 16px;
}


/* =========================================================
   27. STAT ICON
   ========================================================= */

.why-stat-icon {
    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    display: flex;

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

    color: #06283d;

    background:
        linear-gradient(145deg,
            #ffc72c,
            #ffb800);

    border-radius: 50%;

    box-shadow:
        0 7px 18px rgba(255, 184, 0, 0.18);

    font-size: 19px;
}


/* =========================================================
   28. STAT CONTENT
   ========================================================= */

.why-stat-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.why-stat-content strong {
    color: #ffffff;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 800;
}


.why-stat-content span {
    margin-top: 3px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 10px;
    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   29. STAT DIVIDER
   ========================================================= */

.why-stat-divider {
    width: 1px;
    height: 42px;

    background:
        rgba(255, 255, 255, 0.15);
}


/* =========================================================
   30. SIGNATURE
   ========================================================= */

.why-choose-signature {
    display: flex;

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

    gap: 6px;

    margin-top: 25px;

    color: #61798c;

    font-size: 13px;

    font-style: italic;
}


.why-choose-signature strong {
    color: #06283d;

    font-weight: 800;
}


.why-choose-signature div {
    width: 45px;
    height: 3px;

    margin-left: 5px;

    background: #ffb800;

    border-radius: 50px;

    transform:
        rotate(-5deg);
}


/* =========================================================
   31. LARGE LAPTOP
   ========================================================= */

@media (max-width: 1250px) {

    .why-choose-content {
        grid-template-columns:
            minmax(340px, 0.85fr) minmax(560px, 1.4fr);

        gap: 22px;
    }


    .why-choose-benefits {
        gap: 14px;
    }


    .why-benefit-card {
        min-height: 195px;

        padding:
            22px 19px;
    }


    .why-benefit-card h3 {
        font-size: 15px;
    }

}


/* =========================================================
   32. TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .rithcabs-why-choose {
        padding:
            55px 18px 48px;
    }


    .why-choose-content {
        grid-template-columns: 1fr;
    }


    .why-choose-visual {
        min-height: 400px;
    }


    .why-choose-car {
        width: 60%;

        right: 5%;
    }


    .why-choose-benefits {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .why-choose-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


    .why-stat-divider {
        display: none;
    }


    .why-stat-item {
        justify-content: flex-start;
    }

}


/* =========================================================
   33. SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .why-choose-heading {
        margin-bottom: 32px;
    }


    .why-choose-heading h2 {
        font-size: 38px;
    }


    .why-choose-benefits {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .why-benefit-card {
        min-height: 190px;
    }


    .why-choose-visual {
        min-height: 360px;
    }


    .why-choose-car {
        width: 70%;
    }

}


/* =========================================================
   34. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .rithcabs-why-choose {
        padding:
            45px 12px 38px;
    }


    .why-choose-heading {
        margin-bottom: 28px;
    }


    .why-choose-eyebrow {
        gap: 9px;
    }


    .why-choose-eyebrow span {
        width: 28px;
    }


    .why-choose-eyebrow strong {
        font-size: 9px;

        letter-spacing: 3px;
    }


    .why-choose-heading h2 {
        font-size: 32px;

        letter-spacing: -1.2px;
    }


    .why-choose-heading p {
        margin-top: 11px;

        font-size: 13px;
    }


    .why-choose-title-line {
        width: 50px;

        margin-top: 14px;
    }


    /* LEFT VISUAL */

    .why-choose-visual {
        min-height: 330px;

        border-radius: 20px;
    }


    .why-choose-visual-title {
        top: 25px;
        left: 25px;

        font-size: 22px;
    }


    .why-choose-visual-title strong {
        font-size: 31px;
    }


    .why-choose-visual-line {
        top: 135px;
        left: 26px;

        width: 65px;
    }


    .why-choose-car {
        width: 90%;

        right: -12%;

        bottom: 35px;
    }


    .why-choose-quote {
        left: 18px;
        bottom: 18px;

        padding:
            9px 13px;
    }


    /* BENEFITS */

    .why-choose-benefits {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .why-benefit-card {
        min-height: auto;

        padding: 19px;

        border-radius: 17px;
    }


    .why-benefit-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        margin-bottom: 15px;

        border-radius: 14px;

        font-size: 21px;
    }


    .why-benefit-card h3 {
        font-size: 15px;
    }


    .why-benefit-card p {
        font-size: 11px;
    }


    /* STATS */

    .why-choose-stats {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 18px;

        padding:
            12px 18px;

        border-radius: 18px;
    }


    .why-stat-item {
        justify-content: flex-start;

        padding:
            12px 4px;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }


    .why-stat-item:last-child {
        border-bottom: 0;
    }


    .why-stat-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 17px;
    }


    .why-stat-content strong {
        font-size: 14px;
    }


    .why-choose-signature {
        margin-top: 20px;
    }

}


/* =========================================================
   35. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .why-choose-heading h2 {
        font-size: 29px;
    }


    .why-choose-visual {
        min-height: 300px;
    }


    .why-choose-car {
        width: 100%;

        right: -18%;
    }


    .why-choose-visual-title {
        font-size: 20px;
    }


    .why-choose-visual-title strong {
        font-size: 28px;
    }

}