/* =========================================================
   RITHCABS
   APP DOWNLOAD SECTION
   PREMIUM VERSION
   ========================================================= */


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

.rithcabs-app-download {
    width: 100%;
    padding: 65px 22px 70px;
    box-sizing: border-box;

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


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

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


/* =========================================================
   03. MAIN CARD
   ========================================================= */

.app-download-card {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 600px;

    display: grid;

    grid-template-columns:
        minmax(430px, 0.95fr) minmax(600px, 1.35fr);

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(6, 40, 61, 0.08);

    border-radius: 32px;

    box-shadow:
        0 30px 80px rgba(6, 40, 61, 0.10),
        0 8px 25px rgba(6, 40, 61, 0.05);
}


/* =========================================================
   04. TOP GOLD LINE
   ========================================================= */

.app-download-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 220px;
    height: 3px;

    z-index: 30;

    transform: translateX(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            #ffb800,
            transparent);
}


/* =========================================================
   05. LEFT VISUAL
   ========================================================= */

.app-download-visual {
    position: relative;

    min-width: 0;
    min-height: 600px;

    overflow: hidden;

    background:
        radial-gradient(circle at 70% 35%,
            rgba(255, 184, 0, 0.12),
            transparent 32%),
        linear-gradient(145deg,
            #07344e 0%,
            #06283d 55%,
            #031d2c 100%);
}


/* =========================================================
   06. LEFT CURVED EDGE
   ========================================================= */

.app-download-visual::after {
    content: "";

    position: absolute;

    top: -70px;
    right: -120px;

    width: 210px;
    height: 760px;

    z-index: 2;

    background: #ffffff;

    border-radius: 55% 0 0 55%;
}


/* =========================================================
   07. BACKGROUND CITY EFFECT
   ========================================================= */

.app-download-visual::before {
    content: "";

    position: absolute;

    left: 0;
    right: 70px;
    bottom: 0;

    height: 170px;

    z-index: 1;

    opacity: 0.16;

    background:
        linear-gradient(90deg,
            transparent 2%,
            #ffffff 2% 7%,
            transparent 7% 10%,
            #ffffff 10% 16%,
            transparent 16% 20%,
            #ffffff 20% 25%,
            transparent 25% 29%,
            #ffffff 29% 37%,
            transparent 37% 41%,
            #ffffff 41% 48%,
            transparent 48% 52%,
            #ffffff 52% 60%,
            transparent 60% 65%,
            #ffffff 65% 73%,
            transparent 73% 77%,
            #ffffff 77% 85%,
            transparent 85%);

    clip-path:
        polygon(0 48%,
            6% 48%,
            6% 25%,
            12% 25%,
            12% 52%,
            18% 52%,
            18% 12%,
            24% 12%,
            24% 55%,
            31% 55%,
            31% 30%,
            38% 30%,
            38% 58%,
            45% 58%,
            45% 20%,
            52% 20%,
            52% 50%,
            59% 50%,
            59% 5%,
            66% 5%,
            66% 54%,
            74% 54%,
            74% 27%,
            82% 27%,
            82% 48%,
            90% 48%,
            90% 18%,
            97% 18%,
            97% 100%,
            0 100%);
}


/* =========================================================
   08. VISUAL GLOW
   ========================================================= */

.app-visual-glow {
    position: absolute;

    top: 100px;
    right: 70px;

    width: 330px;
    height: 330px;

    z-index: 1;

    border-radius: 50%;

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

    filter: blur(55px);

    pointer-events: none;
}


/* =========================================================
   09. TOP VISUAL MESSAGE
   ========================================================= */

.app-visual-message {
    position: absolute;

    top: 42px;
    left: 38px;

    z-index: 10;

    display: flex;
    flex-direction: column;

    transform: rotate(-3deg);
}


/* =========================================================
   10. TOP MESSAGE FIRST LINE
   ========================================================= */

.app-visual-message span {
    color: #ffffff;

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

    font-weight: 600;

    font-style: italic;
}


/* =========================================================
   11. TOP MESSAGE GOLD
   ========================================================= */

.app-visual-message strong {
    margin-top: 5px;

    color: #ffb800;

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

    font-weight: 800;

    font-style: italic;
}


/* =========================================================
   12. MESSAGE GOLD LINE
   ========================================================= */

.app-visual-message div {
    width: 85px;
    height: 4px;

    margin-top: 10px;

    background: #ffb800;

    border-radius: 50px;

    transform: rotate(-5deg);
}


/* =========================================================
   13. PHONE AREA
   ========================================================= */

.app-phone-area {
    position: absolute;

    inset: 0;

    z-index: 6;

    pointer-events: none;
}


/* =========================================================
   14. PHONE BASE
   ========================================================= */

.app-phone {
    position: absolute;

    overflow: hidden;

    background: #111111;

    border:
        7px solid #111820;

    border-radius: 38px;

    box-shadow:
        0 28px 50px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.18);

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


/* =========================================================
   15. PHONE IMAGE
   ========================================================= */

.app-phone img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #ffffff;
}


/* =========================================================
   16. BACK PHONE
   ========================================================= */

.app-phone-back {
    width: 230px;
    height: 455px;

    left: 90px;
    bottom: 52px;

    z-index: 3;

    transform:
        rotate(-7deg);
}


/* =========================================================
   17. FRONT PHONE
   ========================================================= */

.app-phone-front {
    width: 270px;
    height: 530px;

    left: 245px;
    bottom: 26px;

    z-index: 5;

    transform:
        rotate(2deg);
}


/* =========================================================
   18. PHONE HOVER
   ========================================================= */

.app-download-card:hover .app-phone-back {
    transform:
        rotate(-9deg) translateX(-4px);
}


.app-download-card:hover .app-phone-front {
    transform:
        rotate(1deg) translateY(-6px);
}


/* =========================================================
   19. BOTTOM VISUAL MESSAGE
   ========================================================= */

.app-visual-bottom-message {
    position: absolute;

    left: 38px;
    bottom: 34px;

    z-index: 10;

    display: flex;
    flex-direction: column;

    transform: rotate(-4deg);
}


/* =========================================================
   20. BOTTOM MESSAGE
   ========================================================= */

.app-visual-bottom-message span {
    color:
        rgba(255, 255, 255, 0.88);

    font-size: 18px;

    font-style: italic;

    font-weight: 600;
}


.app-visual-bottom-message strong {
    color: #ffffff;

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

    font-style: italic;

    font-weight: 800;
}


/* =========================================================
   21. BOTTOM MESSAGE LINE
   ========================================================= */

.app-visual-bottom-message div {
    width: 80px;
    height: 4px;

    margin-top: 10px;

    background: #ffb800;

    border-radius: 30px;
}


/* =========================================================
   22. RIGHT CONTENT
   ========================================================= */

.app-download-content {
    position: relative;

    z-index: 10;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        52px 60px 42px 72px;

    background:
        radial-gradient(circle at 85% 15%,
            rgba(255, 184, 0, 0.05),
            transparent 25%),
        #ffffff;
}


/* =========================================================
   23. EYEBROW
   ========================================================= */

.app-download-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 8px;
}


/* =========================================================
   24. EYEBROW LINES
   ========================================================= */

.app-download-eyebrow span {
    width: 44px;
    height: 2px;

    background: #ffb800;

    border-radius: 30px;
}


/* =========================================================
   25. EYEBROW TEXT
   ========================================================= */

.app-download-eyebrow strong {
    color: #06283d;

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

    font-weight: 800;

    letter-spacing: 4px;
}


/* =========================================================
   26. TITLE
   ========================================================= */

.app-download-title {
    margin: 0;

    color: #06283d;

    font-size:
        clamp(45px,
            4vw,
            62px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2.5px;
}


/* =========================================================
   27. TITLE GOLD
   ========================================================= */

.app-download-title span {
    color: #ffb800;
}


/* =========================================================
   28. DESCRIPTION
   ========================================================= */

.app-download-description {
    margin:
        13px 0 31px;

    color: #61798c;

    font-size: 16px;
    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   29. FEATURES GRID
   ========================================================= */

.app-download-features {
    width: 100%;

    display: grid;

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

    column-gap: 34px;
    row-gap: 22px;

    margin-bottom: 34px;
}


/* =========================================================
   30. FEATURE
   ========================================================= */

.app-feature {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 14px;
}


/* =========================================================
   31. FEATURE ICON
   ========================================================= */

.app-feature-icon {
    width: 56px;
    height: 56px;

    flex:
        0 0 56px;

    display: flex;

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

    color: #06283d;

    background:
        linear-gradient(145deg,
            #ffffff,
            #edf3f6);

    border:
        1px solid #dfe8ee;

    border-radius: 50%;

    box-shadow:
        0 8px 20px rgba(6, 40, 61, 0.06);

    font-size: 21px;

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


/* =========================================================
   32. FEATURE HOVER
   ========================================================= */

.app-feature:hover .app-feature-icon {
    color: #06283d;

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

    border-color: #ffb800;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 24px rgba(255, 184, 0, 0.20);
}


/* =========================================================
   33. FEATURE CONTENT
   ========================================================= */

.app-feature-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   34. FEATURE TITLE
   ========================================================= */

.app-feature-content strong {
    color: #06283d;

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

    font-weight: 800;
}


/* =========================================================
   35. FEATURE SUBTITLE
   ========================================================= */

.app-feature-content span {
    margin-top: 4px;

    color: #718391;

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

    font-weight: 500;
}


/* =========================================================
   36. DOWNLOAD ACTIONS
   ========================================================= */

.app-download-actions {
    display: flex;

    align-items: stretch;

    gap: 15px;

    margin-bottom: 30px;
}


/* =========================================================
   37. GOOGLE PLAY BUTTON
   ========================================================= */

.app-google-play {
    position: relative;

    min-width: 245px;
    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        10px 24px;

    overflow: hidden;

    color: #ffffff;

    text-decoration: none;

    background:
        linear-gradient(145deg,
            #111111,
            #000000);

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

    border-radius: 14px;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   38. GOOGLE PLAY HOVER
   ========================================================= */

.app-google-play:hover {
    color: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 17px 32px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   39. GOOGLE PLAY ICON
   ========================================================= */

.google-play-icon {
    display: flex;

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

    color: #ffffff;

    font-size: 34px;
}


/* =========================================================
   40. GOOGLE PLAY TEXT
   ========================================================= */

.google-play-text {
    display: flex;
    flex-direction: column;

    text-align: left;
}


.google-play-text small {
    color:
        rgba(255, 255, 255, 0.78);

    font-size: 9px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 1px;
}


.google-play-text strong {
    margin-top: 3px;

    color: #ffffff;

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

    font-weight: 600;
}


/* =========================================================
   41. COMING SOON CARD
   ========================================================= */

.app-coming-soon {
    min-width: 200px;
    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 18px;

    background:
        linear-gradient(145deg,
            #ffffff,
            #f7fafb);

    border:
        1px solid #dfe7ec;

    border-radius: 14px;

    box-shadow:
        0 9px 22px rgba(6, 40, 61, 0.05);
}


/* =========================================================
   42. COMING ICON
   ========================================================= */

.app-coming-icon {
    width: 43px;
    height: 43px;

    flex:
        0 0 43px;

    display: flex;

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

    color: #ffffff;

    background: #06283d;

    border-radius: 50%;

    font-size: 17px;
}


/* =========================================================
   43. COMING TEXT
   ========================================================= */

.app-coming-soon>div:last-child {
    display: flex;
    flex-direction: column;
}


.app-coming-soon small {
    color: #718391;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.app-coming-soon strong {
    margin-top: 3px;

    color: #06283d;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 800;
}


/* =========================================================
   44. TRUST ROW
   ========================================================= */

.app-download-trust {
    width: 100%;

    display: grid;

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

    align-items: center;

    padding-top: 22px;

    border-top:
        1px solid #e6edf2;
}


/* =========================================================
   45. TRUST ITEM
   ========================================================= */

.app-trust-item {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        0 12px;
}


.app-trust-item:first-child {
    padding-left: 0;
}


/* =========================================================
   46. TRUST ICON
   ========================================================= */

.app-trust-item>i {
    color: #06283d;

    font-size: 21px;
}


/* =========================================================
   47. TRUST CONTENT
   ========================================================= */

.app-trust-item>div {
    display: flex;
    flex-direction: column;
}


.app-trust-item strong {
    color: #06283d;

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

    font-weight: 800;
}


.app-trust-item span {
    margin-top: 2px;

    color: #718391;

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

    font-weight: 500;
}


/* =========================================================
   48. TRUST DIVIDER
   ========================================================= */

.app-trust-divider {
    width: 1px;
    height: 34px;

    background: #dbe4ea;
}


/* =========================================================
   49. TOP RIGHT DECORATION
   ========================================================= */

.app-download-corner {
    position: absolute;

    top: -105px;
    right: -105px;

    z-index: 15;

    width: 220px;
    height: 220px;

    border:
        18px solid #ffb800;

    border-radius: 50%;

    pointer-events: none;
}


.app-download-corner::before {
    content: "";

    position: absolute;

    inset: 15px;

    background: #06283d;

    border-radius: 50%;
}


/* =========================================================
   50. LARGE LAPTOP
   ========================================================= */

@media (max-width: 1250px) {

    .app-download-card {
        grid-template-columns:
            minmax(390px, 0.9fr) minmax(540px, 1.2fr);
    }


    .app-download-content {
        padding:
            48px 42px 40px 58px;
    }


    .app-phone-back {
        left: 50px;
    }


    .app-phone-front {
        left: 195px;
    }


    .app-download-features {
        column-gap: 22px;
    }

}


/* =========================================================
   51. SMALL LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .app-download-card {
        grid-template-columns: 1fr;
    }


    .app-download-visual {
        min-height: 560px;
    }


    .app-download-visual::after {
        display: none;
    }


    .app-phone-back {
        left: calc(50% - 250px);
    }


    .app-phone-front {
        left: calc(50% - 70px);
    }


    .app-download-content {
        padding:
            50px 55px;
    }


    .app-download-corner {
        top: auto;

        bottom: -120px;
    }

}


/* =========================================================
   52. TABLET
   ========================================================= */

@media (max-width: 767px) {

    .rithcabs-app-download {
        padding:
            50px 14px;
    }


    .app-download-card {
        border-radius: 24px;
    }


    .app-download-visual {
        min-height: 500px;
    }


    .app-phone-back {
        width: 190px;
        height: 380px;

        left: calc(50% - 205px);

        bottom: 55px;
    }


    .app-phone-front {
        width: 225px;
        height: 440px;

        left: calc(50% - 30px);

        bottom: 30px;
    }


    .app-download-content {
        padding:
            42px 28px;
    }


    .app-download-title {
        font-size: 45px;
    }


    .app-download-description {
        font-size: 14px;
    }


    .app-download-features {
        grid-template-columns: 1fr;
    }


    .app-download-actions {
        flex-wrap: wrap;
    }


    .app-google-play,
    .app-coming-soon {
        flex: 1 1 220px;
    }

}


/* =========================================================
   53. MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .rithcabs-app-download {
        padding:
            40px 10px;
    }


    .app-download-card {
        border-radius: 20px;
    }


    /* LEFT */

    .app-download-visual {
        min-height: 420px;
    }


    .app-visual-message {
        top: 24px;
        left: 22px;
    }


    .app-visual-message span {
        font-size: 17px;
    }


    .app-visual-message strong {
        font-size: 20px;
    }


    .app-phone {
        border-width: 5px;

        border-radius: 28px;
    }


    .app-phone-back {
        width: 145px;
        height: 300px;

        left: 28px;

        bottom: 55px;
    }


    .app-phone-front {
        width: 175px;
        height: 350px;

        left: 45%;

        bottom: 25px;
    }


    .app-visual-bottom-message {
        left: 20px;
        bottom: 20px;
    }


    .app-visual-bottom-message span {
        font-size: 14px;
    }


    .app-visual-bottom-message strong {
        font-size: 19px;
    }


    /* CONTENT */

    .app-download-content {
        padding:
            35px 18px;
    }


    .app-download-eyebrow {
        gap: 8px;
    }


    .app-download-eyebrow span {
        width: 26px;
    }


    .app-download-eyebrow strong {
        font-size: 8px;

        letter-spacing: 2.5px;
    }


    .app-download-title {
        font-size: 37px;

        letter-spacing: -1.5px;
    }


    .app-download-description {
        margin-bottom: 25px;

        font-size: 13px;
    }


    .app-download-features {
        row-gap: 17px;

        margin-bottom: 27px;
    }


    .app-feature-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 19px;
    }


    .app-feature-content strong {
        font-size: 12px;
    }


    .app-feature-content span {
        font-size: 10px;
    }


    /* DOWNLOAD BUTTON */

    .app-download-actions {
        display: block;

        margin-bottom: 25px;
    }


    .app-google-play {
        width: 100%;
        min-width: 0;

        margin-bottom: 10px;
    }


    .app-coming-soon {
        width: 100%;
        min-width: 0;
    }


    /* TRUST */

    .app-download-trust {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .app-trust-item {
        padding:
            10px 0;

        border-bottom:
            1px solid #e8eef2;
    }


    .app-trust-item:last-child {
        border-bottom: 0;
    }


    .app-trust-divider {
        display: none;
    }


    .app-download-corner {
        width: 160px;
        height: 160px;

        right: -95px;
        bottom: -95px;

        border-width: 12px;
    }

}


/* =========================================================
   54. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .app-download-visual {
        min-height: 390px;
    }


    .app-phone-back {
        width: 130px;
        height: 270px;

        left: 15px;
    }


    .app-phone-front {
        width: 155px;
        height: 320px;

        left: 43%;
    }


    .app-download-title {
        font-size: 33px;
    }


    .google-play-text strong {
        font-size: 18px;
    }

}