@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 .mainLogo {
        height: 64px;
    }

    .header .logo .newLogo {
        left: 94px;
        width: 60px;
        top: 10px;
    }

    .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;
    }

    .heroLeftBottom {
        flex-direction: column;
    }

    .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;
    }

    .aboutContent {
        flex-direction: column;
        gap: 20px;
    }

    .aboutLeft {
        width: calc(100% - 40px);
        padding: 20px;
    }

    .aboutRight {
        width: calc(100% - 40px);
        padding: 20px;
        margin-left: 0;
    }

    .bannerLogo {
        display: none;
    }

    .sliderSec{
        margin-top: 30px;
    }

    .aboutRight ul {
    padding-left: 20px;
}

.privacy-policy{
    margin-top: 80px;
}

.privacy-policy h1 {
    font-size: 25px;
}

.image-content {
    border-radius: 20px;
    height: auto;
}

.privacy-policy .container{
    margin: 0 10px;
    width: calc(100% - 20px);
}
}