@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



/*---------------------------------------------------- Color------------------------- ------------*/
:root {

    --bg_color: #fff;
    --black_one: #262626;
    --primary_blue: #0C6CA7;
    --primary_blue_light: #00A0E3;
    --yellow: #FFB700;
    --black_secondary: #717171;


}

@media (max-width: 700px) {
    .container {
        width: 95vw;
    }

    button {
        padding: 10px 24px;
        font-size: 15px;
    }

    .header {
        grid-template-columns: 1fr 1fr;
        height: 74px;
    }

    .header .logo img {
        height: 64px;
    }

    .header .navbar {
        display: none;
    }

    .heroSection {
        padding-top: 100px;
    }

    .heroCon {
        grid-template-columns: 1fr;
        padding: 48px 30px 36px;
        border-radius: 20px;
        width: calc(100% - 60px);
    }

    .heroCon .heroRight img {
        height: auto;
        width: 112%;
        position: absolute;
        right: 0;
        top: 20px;
    }

    .heroCon .heroLeft h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .heroCon .heroLeft p {
        font-size: 16px;
    }

    .heroCon .cercleBorder {
        width: 100%;
        height: 18%;
        border-left: 0;
        border-top: 20px solid var(--bg_color);
        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 20px;
    }

    .heroCon .heropettarn1 {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .stepSec {
        padding-top: 50px;
    }

    .stepGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }


    .stepGrid .stepLeft h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .stepGrid .stepRight img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .offerSec {
        padding-top: 50px;
    }

    .offerSec h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .medeaSec {
        padding-top: 50px;
    }

    .medeaSec h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .videoGrid {
        grid-template-columns: 1fr;
    }

    .contactGrid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contactInfoItem p {
        width: 248px;
    }

    .contactInfoItem {
        gap: 20px;
    }

    .contactSec {
        padding-top: 50px;
    }

    .contactInfo h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .contactForm {
        padding: 24px;
        width: calc(100% - 48px);
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    footer {
        margin-top: 72px;
        font-size: 12px;
    }

    .downloadSec {
        padding-top: 100px;

    }

    .downloadGrid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .downloadLeft {
        height: calc(100vh - 148px);
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 0px;
        height: auto;
        padding: 20px 0;
    }

    .downloadLeft #qrImage {
        border-radius: 12px;
        padding: 10px;
        width: 200px;
    }

    .downloadRight {
        padding: 0 3vw;
    }
    footer .container {
        flex-direction: column;
        gap: 10px;
    }
}