/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container {
        max-width: calc(var(--container) + (var(--container-padding) * 2));
    }

    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width: 1399px) {

    /* ==================== [ Headings ] ==================== */
    :root {
        --h1-fs: 56px;
        --h1-lh: 120%;

        --h2-fs: 42px;
        --h2-lh: 145%;

        /* --h3-fs: 32px;
        --h3-lh: 40px;

        --h4-fs: 26px;
        --h4-lh: 34px;

        --h5-fs: 22px;
        --h5-lh: 30px;

        --h6-fs: 18px;
        --h6-lh: 26px; */
    }

    /* ==================== [ Root CSS End ] ==================== */
}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {

    /* ==================== [ Headings ] ==================== */
    :root {
        --h1-fs: 48px;
        --h1-lh: 125%;

        --h2-fs: 36px;
        --h2-lh: 140%;

        /* --h3-fs: 32px;
        --h3-lh: 40px;

        --h4-fs: 26px;
        --h4-lh: 34px;

        --h5-fs: 22px;
        --h5-lh: 30px;

        --h6-fs: 18px;
        --h6-lh: 26px; */
    }

    /* ==================== [ Root CSS End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header .navbar .navbar-nav {
        padding: 40px 0px 20px;
        gap: 8px;
    }

    .header .navbar .navbar-collapse .btn {
        margin: 0 auto;
    }

    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner .banner-container .heading .title span img {
        width: 60px;
        border-radius: 16px;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        -ms-border-radius: 16px;
        -o-border-radius: 16px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(2) {
        margin-left: -14px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(3) {
        margin-left: -14px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ About Our Brand Start ] ==================== */
    .about-our-brand .content {
        position: relative;
        padding: 30px;
    }

    .about-our-brand .title * {
        margin-bottom: 20px;
    }

    .about-our-brand .disc {
        margin-bottom: 20px;
    }

    .about-our-brand ul {
        margin: 0 0 24px 0;
    }

    .about-our-brand ul li {
        padding: 12px 0 12px 32px;
    }

    /* ==================== [ About Our Brand End ] ==================== */
}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {

    /* ==================== [ Headings ] ==================== */
    :root {
        --h1-fs: 40px;
        --h1-lh: 130%;

        --h2-fs: 30px;
        --h2-lh: 135%;

        /* --h3-fs: 32px;
        --h3-lh: 40px;

        --h4-fs: 26px;
        --h4-lh: 34px;

        --h5-fs: 22px;
        --h5-lh: 30px;

        --h6-fs: 18px;
        --h6-lh: 26px; */
    }

    /* ==================== [ Root CSS End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner {
        padding-bottom: 60px;
    }

    .home-banner .banner-container .heading .title span img {
        width: 55px;
        border-radius: 14px;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        -ms-border-radius: 14px;
        -o-border-radius: 14px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(2) {
        margin-left: -10px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(3) {
        margin-left: -10px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ About Our Brand Start ] ==================== */
    .about-our-brand {
        padding: 60px 0;
    }

    .about-our-brand .about-container {
        flex-direction: column;
    }

    .about-our-brand .image {
        max-width: 100%;
    }

    .about-our-brand .content {
        max-width: 100%;
        position: relative;
        padding: 30px;
    }


    .about-our-brand .title * {
        margin-bottom: 20px;
    }

    .about-our-brand .disc {
        margin-bottom: 20px;
    }

    .about-our-brand ul {
        margin: 0 0 24px 0;
    }

    .about-our-brand ul li {
        padding: 12px 0 12px 32px;
    }

    /* ==================== [ About Our Brand End ] ==================== */
}

/* ==================== [ 767px ] ==================== */
@media (max-width: 767px) {

    /* ==================== [ Headings ] ==================== */
    :root {
        --h1-fs: 32px;
        --h1-lh: 135%;

        --h2-fs: 24px;
        --h2-lh: 135%;

        /* --h3-fs: 32px;
        --h3-lh: 40px;

        --h4-fs: 26px;
        --h4-lh: 34px;

        --h5-fs: 22px;
        --h5-lh: 30px;

        --h6-fs: 18px;
        --h6-lh: 26px; */
    }

    /* ==================== [ Root CSS End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner {
        padding-bottom: 40px;
    }

    .home-banner .banner-container .heading .title {
        padding-bottom: 20px;
    }

    .home-banner .banner-container .heading .title span img {
        width: 45px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(2) {
        margin-left: -8px;
    }

    .home-banner .banner-container .heading .title span img:nth-child(3) {
        margin-left: -8px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ About Our Brand Start ] ==================== */
    .about-our-brand {
        padding: 40px 0;
    }

    .about-our-brand .content {
        padding: 24px;
    }


    .about-our-brand .title * {
        margin-bottom: 20px;
    }

    .about-our-brand .disc {
        margin-bottom: 20px;
    }

    .about-our-brand .disc * {
        font-size: 16px;
    }

    .about-our-brand ul {
        margin: 0 0 24px 0;
    }

    .about-our-brand ul li {
        padding: 12px 0 12px 32px;
        font-size: 16px;
    }

    .about-our-brand ul li::before {
        top: 12px;
    }

    /* ==================== [ About Our Brand End ] ==================== */
}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {}