@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:wght@400;500;600;700&display=swap');

/* New Design System In Progres */
/* Global Css */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:active,
:hover,
:focus {
    outline: 0 !important;
    outline-offset: 0;
}

a,
a:hover {
    text-decoration: none;
}

b,
strong {
    font-weight: 600 !important;
}

a:hover {
    /* color: var(--primary-color) !important; */
}

ul,
ol {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto !important;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400 !important;
    font-style: normal;
    font-size: 100% !important;
    line-height: 1.5 !important;
    background-color: #fff !important;
    font-size: 16px;
    /* optional  */
}


.btn {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Tag classes Css */

.h1 {
    font-size: 36px !important;
    line-height: 1.5 !important;
}

.h2 {
    font-size: 30px !important;
    line-height: 1.5 !important;
}

.h3 {
    font-size: 24px !important;
    line-height: 1.5 !important;
}

.h4 {
    font-size: 18px !important;
    line-height: 1.75 !important;
}

.body {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.para {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.small {
    font-size: 14px !important;
    line-height: 1.75 !important;
}

.poppins {
    font-family: 'Poppins', sans-serif !important;
}

.w-400 {
    font-weight: 400 !important;}
.w-500 {
    font-weight: 500 !important;
}

.w-600 {
    font-weight: 600 !important;
}

.w-700 {
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .h1 {
        font-size: 30px !important;
        line-height: 1.5 !important;
    }

    .h2 {
        font-size: 24px !important;
        line-height: 1.5 !important;
    }

    .h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .h4 {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .body {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .para {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .small {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }
}

@media (max-width: 390px) {
    .h1 {
        font-size: 24px !important;
        line-height: 1.5 !important;
    }

    .h2 {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }

    .h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .h4 {
        font-size: 16px !important;
                line-height: 1.75 !important;
    }

    .body {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .para {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .small {
        font-size: 12px !important;
        line-height: 1.75 !important;
    }

    .btn {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}