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

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

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

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

    /* ==================== [ Review Start ] ==================== */
    .review .imageSlider .content-group {
        padding: 40px;
    }

    /* ==================== [ Review End ] ==================== */
}

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

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

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

        --h3-fs: 28px;
        --h3-lh: 38px;

        --h4-fs: 24px;
        --h4-lh: 32px;

        --h5-fs: 20px;
        --h5-lh: 28px;

        --h6-fs: 17px;
        --h6-lh: 24px;
    }

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


    /* ==================== [ Contact Us Start ] ==================== */
    .contact-us .contact-card .form-group {
        max-width: 700px;
    }

    /* ==================== [ Contact Us Start ] ==================== */
}

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

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

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

        --h3-fs: 26px;
        --h3-lh: 36px;

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

        --h5-fs: 19px;
        --h5-lh: 26px;

        --h6-fs: 16px;
        --h6-lh: 24px;
    }

    /* ==================== [ 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 ] ==================== */

    /* ==================== [ Review Start ] ==================== */
    .review .imageSlider .content-group {
        padding: 24px;
    }

    .review .imageSlider .content-group .content {
        padding: 20px;
    }

    .review .message-card .thumbSlider .thumb-image {
        width: 70px;
        height: 70px;
    }

    /* ==================== [ Review End ] ==================== */


    /* ==================== [ All Product Banner End ] ==================== */
    .all-product-banner .product-banner .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;
    }

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

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

    /* ==================== [ All Product Banner End ] ==================== */


    /* ==================== [ Contact Us Start ] ==================== */
    .contact-us .contact-card .form-group {
        max-width: 600px;
    }

    /* ==================== [ Contact Us Start ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer {
        position: relative;
        padding: 80px 20px 20px;
    }

    .footer .footer-container {
        padding: 80px 0 0;
    }

    .footer .footer-container .heading .title {
        width: fit-content;
        margin-bottom: 148px;
    }

    .footer .footer-container .heading .title * {
        font-size: 100px;
    }

    .footer .footer-container .footer-contact {
        flex-direction: column;
        margin-bottom: 50px;
        gap: 20px;
    }

    .footer .footer-container .footer-contact .contact {
        gap: 20px;
    }

    .footer .footer-container .copyright .copyright-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .footer .footer-container .copyright .social ul {
        gap: 16px;
    }

    /* ==================== [ Footer End ] ==================== */
}

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

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

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

        --h3-fs: 24px;
        --h3-lh: 34px;

        --h4-fs: 20px;
        --h4-lh: 28px;

        --h5-fs: 18px;
        --h5-lh: 26px;

        --h6-fs: 16px;
        --h6-lh: 24px;
    }

    /* ==================== [ 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 ] ==================== */

    /* ==================== [ Our Product Start ] ==================== */

    .our-product {
        padding: 60px 20px;
    }

    .our-product .bg {
        padding: 60px 20px;
    }

    .our-product .product-group .main-slider {
        flex-direction: column;
    }

    .our-product .product-group .main-slider .content .top-details .subtitle * {
        font-size: 16px;
    }

    .our-product .product-group .main-slider .content .top-details .title * {
        margin-bottom: 20px;
    }

    .our-product .heading .title * {
        margin-bottom: 30px;
    }

    .our-product .product-group .main-slider .content .top-details .price-group .rating .number {
        font-size: 18px;
        letter-spacing: 0px;
    }

    .our-product .product-group .main-slider .content .top-details .disc strong {
        font-size: 20px;
    }

    /* ==================== [ Our Product End ] ==================== */

    /* ==================== [ Review Start ] ==================== */
    .review {
        padding: 60px 0;
    }

    /* ==================== [ Review End ] ==================== */

    /* ==================== [ All Product Banner Start ] ==================== */
    .all-product-banner {
        padding: 60px 0;
    }

    .all-product-banner .product-banner {
        padding: 60px 0 0;
    }

    .all-product-banner .product-banner .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;
    }

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

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

    .all-product-banner .product-banner .banner-image-container {
        padding: 0 20px;
    }

    /* ==================== [ All Product Banner End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
    .contact-us {
        padding: 60px 0;
    }

    .contact-us .heading .title * {
        margin-bottom: 30px;
    }

    .contact-us .contact-card .form-group {
        max-width: 100%;
    }

    .contact-us .contact-card .bg {
        display: none;
    }

    /* ==================== [ Contact Us Start ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer {
        position: relative;
        padding: 60px 20px 20px;
    }

    .footer .footer-container {
        padding: 60px 0 0;
    }

    .footer .footer-container .heading .title {
        width: fit-content;
        margin-bottom: 100px;
    }

    .footer .footer-container .heading .title * {
        font-size: 80px;
        line-height: 115%;
    }

    .footer .footer-container .footer-brand {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }

    .footer .footer-container .footer-brand .footer-menu {
        max-width: 100%;
    }

    .footer .footer-container .footer-contact {
        flex-direction: column;
        margin-bottom: 50px;
        gap: 20px;
    }

    .footer .footer-container .footer-contact .contact {
        gap: 20px;
    }

    .footer .footer-container .copyright .copyright-container {
        flex-direction: column;
        gap: 24px;
    }

    .footer .footer-container .copyright .social ul {
        gap: 16px;
    }

    /* ==================== [ Footer End ] ==================== */



    /* ==================== [ Product Details Start ] ==================== */

    .product-details {
        padding: 60px 0;
    }

    .product-details .thumb-slider img {
        max-width: 80px;
    }

    .product-details .thumb-slider .swiper-slide {
        border-radius: 14px;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        -ms-border-radius: 14px;
        -o-border-radius: 14px;
    }

    .product-details .thumb-slider .swiper-slide-thumb-active {
        opacity: 1;
    }

    .product-details .productDetailsTable tbody {
        display: flex;
        flex-direction: column;
    }

    .product-details .productDetailsTable tr {
        margin-bottom: 16px !important;
    }

    .product-details .productDetailsTable tr th {
        position: relative;
        font-weight: 600;
    }

    .product-details .productDetailsTable tr th::after {
        display: none;
    }

    .product-details .productDetailsTable tr th,
    .product-details .productDetailsTable tr td {
        font-size: 16px;
        line-height: 150%;
        display: table-row;
    }

    /* ==================== [ Product Details End ] ==================== */

    /* ==================== [ Tips & Hack Start ] ==================== */
    .tips-hack {
        position: relative;
        padding: 60px 20px;
    }

    .tips-hack .tips-hack-container {
        background-color: var(--extra-light-primary);
        padding: 60px 0px;
        border-radius: 24px;
        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        -ms-border-radius: 24px;
        -o-border-radius: 24px;
    }

    .tips-hack .step-card-group .top-card .step * {
        font-size: 16px;
    }

    /* ==================== [ Tips & Hack End ] ==================== */
}

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

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

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

        --h3-fs: 22px;
        --h3-lh: 32px;

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

        --h5-fs: 17px;
        --h5-lh: 24px;

        --h6-fs: 16px;
        --h6-lh: 22px;
    }

    /* ==================== [ 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 ] ==================== */

    /* ==================== [ Our Product Start ] ==================== */
    .our-product {
        padding: 40px 20px;
    }

    .our-product .bg {
        padding: 40px 20px;
    }

    .our-product .product-group .main-slider {
        flex-direction: column;
    }

    .our-product .product-group .main-slider .content .top-details .subtitle * {
        font-size: 16px;
    }

    .our-product .product-group .main-slider .content .top-details .title * {
        margin-bottom: 20px;
    }

    .our-product .heading .title * {
        margin-bottom: 30px;
    }

    .our-product .product-group .main-slider .content .top-details .price-group .rating .number {
        font-size: 18px;
        letter-spacing: 0px;
    }

    .our-product .product-group .main-slider .content .top-details .disc strong {
        font-size: 20px;
    }

    /* ==================== [ Our Product End ] ==================== */

    /* ==================== [ Review Start ] ==================== */
    .review {
        padding: 40px 0;
    }

    .review .imageSlider .content-group .content .title * {
        font-size: 16px;
    }

    .review .message-card .card .number {
        font-size: 16px;
    }

    /* ==================== [ Review End ] ==================== */


    /* ==================== [ All Product Banner Start ] ==================== */
    .all-product-banner {
        padding: 40px 0;
    }

    .all-product-banner .product-banner {
        padding: 40px 0 0;
    }

    .all-product-banner .product-banner .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;
    }

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

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

    /* ==================== [ All Product Banner End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
    .contact-us {
        padding: 40px 0;
    }

    /* ==================== [ Contact Us Start ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer {
        position: relative;
        padding: 40px 20px 20px;
    }

    .footer .footer-container {
        padding: 40px 0 0;
    }

    .footer .footer-container .heading .title {
        margin-bottom: 80px;
    }

    .footer .footer-container .heading .title * {
        font-size: 60px;
    }

    .footer .footer-container .footer-brand {
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer .footer-container .footer-contact {
        margin-bottom: 40px;
        gap: 20px;
    }

    .footer .footer-container .footer-contact .contact {
        gap: 10px;
    }

    .footer .footer-container .copyright .copyright-container {
        gap: 24px;
    }

    .footer .footer-container .copyright .social ul {
        gap: 16px;
    }

    .footer .footer-container .footer-contact .contact .icon img {
        width: 24px;
        margin-top: 2px;
    }

    /* ==================== [ Footer End ] ==================== */


    /* ==================== [ Product Details Start ] ==================== */

    .product-details {
        padding: 40px 0;
    }

    .product-details .thumb-slider img {
        max-width: 60px;
    }

    .product-details .thumb-slider .swiper-slide {
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    /* ==================== [ Product Details End ] ==================== */

    /* ==================== [ Tips & Hack Start ] ==================== */
    .tips-hack {
        position: relative;
        padding: 40px 20px;
    }

    .tips-hack .tips-hack-container {
        background-color: var(--extra-light-primary);
        padding: 60px 0px;
        border-radius: 24px;
        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        -ms-border-radius: 24px;
        -o-border-radius: 24px;
    }

    .tips-hack .step-card-group .top-card .step * {
        font-size: 16px;
    }

    /* ==================== [ Tips & Hack End ] ==================== */
}

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

    /* ==================== [ Review Start ] ==================== */
    .review .imageSlider .content-group {
        padding: 16px;
    }

    .review .imageSlider .content-group .content {
        padding: 16px;
    }

    .review .message-card .thumbSlider .thumb-image {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
    }

    .review .message-card {
        padding: 16px;
    }

    /* ==================== [ Review End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
    .footer .footer-container .heading .title {
        margin-bottom: 60px;
    }

    .footer .footer-container .heading .title * {
        font-size: 45px;
        font-weight: 600;
    }

    .footer .footer-container .footer-brand .logo * {
        width: 90px;
    }

    .footer .footer-container .footer-brand {
        gap: 30px;
        margin-bottom: 40px;
    }

    .footer .footer-container .footer-brand ul {
        flex-direction: column;
    }

    .footer .footer-container .footer-brand li .nav-link {
        font-size: 16px;
        padding: 10px 18px;
    }

    .footer .footer-container .footer-brand li .nav-link::before {
        width: 16px;
        height: 16px;
    }

    .footer .footer-container .footer-contact {
        margin-bottom: 40px;
        gap: 20px;
    }

    .footer .footer-container .footer-contact .contact {
        gap: 10px;
    }

    .footer .footer-container .developer,
    .footer .footer-container .copyright .copy *,
    .footer .footer-container .footer-contact .contact .title *,
    .footer .footer-container .footer-contact .contact .disc * {
        font-size: 15px;
    }

    .footer .footer-container .copyright .copyright-container {
        gap: 24px;
    }

    .footer .footer-container .copyright .social ul {
        gap: 16px;
    }

    .footer .footer-container .footer-contact .contact .icon img {
        width: 24px;
        margin-top: 2px;
    }

    /* ==================== [ Footer End ] ==================== */
}