@media(max-width:1599.98px) {
    .hero-right {
        padding: 100px 100px 180px;
    }
}

@media(max-width:1399.98px) {
    .gallery-card h5 {
        font-size: 16px;
    }

    .product-tab .nav-item .nav-link {
        font-size: 14px;
    }

    .about-hero-content {
        padding: 50px;
    }

    .hero-right::after {
        height: 235px;
    }

    .hero-right {
        padding: 100px 24px 140px;
    }

    .about-hero-content h2 {
        margin-bottom: 28px;
    }
}

@media(max-width:1199.98px) {
    .hero-round {
        scale: .6;
        right: -35%;
    }

    .aboutus-section .about-title h2 {
        font-size: 24px;
    }

    .aboutus-section .about-title img {
        width: 72px;
    }

    .about-description {
        padding-left: 24px;
    }

    footer .contact-info .numbers {
        flex-wrap: wrap;
    }

    .banner-content div h2 {
        font-size: 28px;
    }

    .banner-content div {
        max-width: 245px;
    }

    .banner-content {
        gap: 42px;
    }

    .product-tab .nav-pills {
        gap: 0;
        margin-bottom: 42px;
    }

    .product-tab .nav-item {
        width: 20%;
    }

    .hero-right div img {
        transform: translate(0px, 36px);
        width: 130%;
    }

    .hero-right::after {
        height: 225px;
    }

    .about-hero-content {
        padding: 42px 24px;
    }

    .about-hero-content h2 {
        font-size: 24px;
    }

    .drop-icon {
        width: 180px;
        top: -190px;
        left: 10px;
    }

    .navbar .btn {
        width: fit-content;
        min-width: unset;
    }

    .hero-right div {
        width: unset;
    }

    .about-hero-content p {
        font-size: 14px;
    }

    .hero-img { 
        width: 100%;
        height: auto;
        position: static;
    }
}

@media(max-width:991.98px) {
    .hero-round {
        top: -30%;
    }

    .aboutus-section .about-title {
        flex-wrap: wrap;
    }

    .banner-content {
        flex-wrap: wrap;
    }

    .banner-content div {
        width: 79%;
        max-width: unset;
    }

    .about-hero-content p,
    .about-hero-content h2 {
        max-width: unset;
    }

    .drop-icon {
        width: 140px;
        top: -150px;
        left: -10px;
    }

    .hero-right {
        padding: 100px 24px 0px;
    }

    .hero-right div img {
        width: 240px;
    }

    .navbar .btn {
        min-width: 160px;
    }

    .navbar .btn.ms-2 {
        margin-left: 0 !important;
        margin-top: 12px;
    }

    .hero-right div {
        width: fit-content;
    }
}

@media(max-width:767.98px) {
    .hero-section h1 {
        font-size: 38px;
    }

    .hero-round {
        top: -37%;
        right: -58%;
    }

    .about-description {
        padding: 0;
    }

    .aboutus-section .about-cards {
        margin-left: 50px;
    }

    .getintouch-section form {
        padding: 28px;
    }

    .getintouch-section h2 {
        margin-bottom: 28px;
        font-size: 24px;
    }

    .form-control {
        margin-bottom: 28px;
    }

    .purewater-section,
    .product-tab,
    .product-banner,
    .gallery-imgs,
    .getintouch-section,
    .counter {
        padding: 42px 0;
    }

    .aboutus-section {
        padding-top: 42px;
    }

    .gallery-section .gallery-header .line {
        width: 70px;
    }

    .gallery-section::after {
        width: 44px;
    }

    .gallery-section .gallery-container {
        padding-left: 50px;
    }

    .banner-content div {
        width: 72%;
    }

    .product-tab .nav-item {
        width: 100%;
    }

    .product-tab .nav-pills {
        flex-wrap: wrap;
    }

    .contact-detail,
    .contact-map {
        margin-bottom: 42px;
    }

    .contact-title {
        font-size: 24px;
        margin: 42px 0;
    }

    .contact-detail .form {
        padding: 42px 24px;
    }

    .contact-detail .form .btn {
        margin-top: 0;
    }

    .contact-div h5 {
        font-size: 18px;
    }

    .contact-list a,
    .contact-list p {
        font-size: 16px;
    }

    .contact-rightpart {
        padding: 24px 14px 1px;
    }

    .purewater-section .content h2,
    .hero-right div h2 {
        font-size: 24px;
    }

    .products-list h2 {
        margin-bottom: 42px;
        font-size: 24px;
    }

    .products-list {
        padding-bottom: 42px;
    }

    .hero-right {
        padding: 50px 24px 0px;
    }

    .gallery-section .gallery-header {
        margin-bottom: 24px;
    }
}

@media(max-width:575.98px) {
    .main-headre {
        top: -55px;
    }

    .site-info-div {
        flex-direction: column;
        gap: 5px;
        align-items: start;
    }

    .site-social-medial-main-div ul {
        gap: 6px;
    }

    .top-header-man-div {
        padding: 11px 0;
    }

    .site-info-sub-div a {
        font-size: 12px;
    }

    .top-header-man-div img {
        width: 14px;
        height: 14px;
    }

    .site-info-sub-div {
        gap: 6px;
    }

    .hero-round {
        top: -37%;
        right: -118%;
        scale: .4;
    }

    .hero-section h1 {
        font-size: 28px;
    }

    .gallery-section .gallery-header .title h2 {
        font-size: 24px;
    }

    .hero-section {
        padding-bottom: 42px;
    }

    .gallery-section {
        margin-bottom: 42px;
    }

    footer h5 {
        font-size: 20px;
    }

    footer .contact-info div.locaction,
    footer .links a {
        margin-bottom: 18px;
    }

    .footer-bottom p {
        text-align: center;
    }

    .footer-bottom {
        justify-content: center;
    }

    .title-header img {
        height: 157px;
    }

    .title-header .title h1 {
        font-size: 24px;
    }

    .banner-content div h2 {
        font-size: 24px;
    }

    .banner-content div {
        width: 100%;
    }

    .banner-content img {
        width: 72px;
    }

    .banner-content {
        gap: 24px;
    }

    .banner-content div h5 {
        margin-bottom: 12px;
    }

    .hero-right {
        padding: 42px 14px 0;
    }

    .hero-right div h2 {
        width: 100%;
    }

    .hero-right div {
        padding: 24px 24px 0;
    }

    .hero-right div img {
        transform: translate(3px, 36px);
    }

    .about-hero-content h2 {
        font-size: 18px;
    }

    .about-hero-content {
        padding: 24px 14px;
    }

    .drop-icon {
        width: 120px;
        top: -130px;
        left: 10px;
    }

    .purewater-section .content {
        padding: 24px;
    }

    .products-list ul li {
        font-size: 16px;
    }

    footer .contact-info p,
    footer .contact-info a {
        font-size: 14px;
    }

    .gallery-section .swiper-slide {
        padding: 8px;
    }

    .products-section h3 {
        font-size: 18px;
    }
    .products-section .img{
        padding: 14px;
    }
}