/*============================================

Responsive CSS V2
AMROS Projects LLP

==============================================*/


/*============================================
1400px
=============================================*/

@media (max-width:1400px) {

    .container {

        max-width: 1140px;

    }

    .hero h1 {

        font-size: 36px;

    }

    .hero-main-image {

        width: 500px;

    }

    .section-heading h2 {

        font-size: 20px;

    }

}



/*============================================
1200px
=============================================*/

@media (max-width:1199px) {

    .container {

        max-width: 960px;

    }

    .topbar {

        display: none;

    }

    .amros-navbar {

        top: 0;

    }

    .hero {

        height: auto;

        padding: 180px 0 120px;

    }

    .hero h1 {

        font-size: 18px;

    }

    .hero p {

        font-size: 17px;

    }

    .hero-main-image {

        width: 430px;

    }

    .hero-right {

        height: auto;

        margin-top: 60px;

    }

    .floating-card {

        transform: scale(.9);

    }

    .section-heading h2 {

        font-size: 18px;

    }

    .about-images {

        padding-right: 0;

    }

    .experience-badge {

        right: 20px;

        bottom: 20px;

    }

    .manufacturing-counter {

        flex-direction: column;

    }

    .cta-box {

        padding: 60px;

    }

    .navbar-collapse {

        background: #fff;

        padding: 30px;

        margin-top: 20px;

        border-radius: 18px;

        box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    }

    .nav-link {

        color: #081C34 !important;

        padding: 14px 0;

    }

    .dropdown-menu {

        box-shadow: none;

        padding: 10px;

    }

    .quote-btn {

        width: 100%;

        margin: 20px 0 0;

        text-align: center;

    }

}



/*============================================
992px
=============================================*/

@media (max-width:991px) {

    section {

        padding: 90px 0;

    }

    .hero {

        text-align: center;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-bottom {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-right {

        margin-top: 80px;

    }

    .hero-main-image {

        width: 100%;

        max-width: 500px;

        margin: auto;

    }

    .card-one {

        left: 0;

        top: 20px;

    }

    .card-two {

        right: 0;

        top: 180px;

    }

    .card-three {

        left: 50%;

        transform: translateX(-50%);

        bottom: -20px;

    }

    .about-images {

        margin-bottom: 70px;

    }

    .section-heading {

        text-align: center;

    }

    .about-btn {

        text-align: center;

    }

    .group-gallery {

        margin-top: 50px;

    }

    .cta-box {

        text-align: center;

    }

    .cta-box .text-lg-end {

        text-align: center !important;

        margin-top: 30px;

    }

    .footer {

        text-align: center;

    }

    .footer-social {

        justify-content: center;

    }

}



/*============================================
768px
=============================================*/

@media (max-width:767px) {

    .hero {

        padding-top: 150px;

    }

    .hero h1 {

        font-size: 18px;

    }

    .hero p {

        font-size: 16px;

    }

    .section-heading h2 {

        font-size: 20px;

    }

    .section-heading p {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

        gap: 18px;

    }

    .btn-outline-custom {

        margin-left: 0;

    }

    .hero-bottom {

        gap: 25px;

    }

    .hero-mini h3 {

        font-size: 20px;

    }

    .hero-tag {

        font-size: 12px;

    }

    .hero-main-image {

        max-width: 100%;

    }

    .floating-card {

        position: relative;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

        margin: 15px auto;

        width: 100%;

        max-width: 340px;

    }

    .hero-right {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .about-images img {

        width: 100%;

    }

    .experience-badge {

        position: relative;

        margin: 25px auto 0;

        right: auto;

        bottom: auto;

    }

    .feature-box {

        flex-direction: column;

        text-align: center;

    }

    .why-item {

        flex-direction: column;

        text-align: center;

    }

    .counter-box {

        padding: 25px;

    }

    .counter-box h2 {

        font-size: 18px;

    }

    .country-list {

        justify-content: center;

    }

    .cta-box {

        padding: 45px 25px;

    }

    .cta-box h2 {

        font-size: 20px;

    }

    .footer {

        padding: 80px 0 30px;

    }

    .back-top {

        width: 50px;

        height: 50px;

        font-size: 18px;

    }

    .whatsapp-btn {

        width: 55px;

        height: 55px;

        font-size: 18px;

    }

}



/*============================================
576px
=============================================*/

@media (max-width:575px) {

    .hero {

        padding-top: 130px;

        padding-bottom: 80px;

    }

    .hero h1 {

        font-size: 20px;

        line-height: 1.25;

    }

    .hero p {

        font-size: 15px;

    }

    .section-heading span {

        font-size: 11px;

        padding: 8px 16px;

    }

    .section-heading h2 {

        font-size: 18px;

    }

    .section-heading p {

        font-size: 15px;

    }

    .btn-primary-custom,

    .btn-outline-custom {

        width: 100%;

        padding: 15px;

    }

    .hero-mini {

        width: 100%;

    }

    .hero-bottom {

        flex-direction: column;

    }

    .navbar-brand img {

        height: 48px;

    }

    .quote-btn {

        display: none;

    }

    .division-content {

        padding: 25px;

    }

    .division-content h4 {

        font-size: 18px;

    }

    .product-box {

        height: 320px;

    }

    .product-overlay {

        padding: 25px;

    }

    .product-overlay h3 {

        font-size: 18px;

    }

    .application-content {

        padding: 25px;

    }

    .application-content h4 {

        font-size: 18px;

    }

    .why-item {

        padding: 20px;

    }

    .quality-card {

        padding: 35px 20px;

    }

    .download-card {

        padding: 35px 20px;

    }

    .download-card h4 {

        font-size: 18px;

    }

    .footer-logo {

        height: 55px;

    }

    .footer h4 {

        margin-top: 20px;

    }

    .copyright {

        text-align: center;

    }

    .copyright .text-lg-end {

        text-align: center !important;

        margin-top: 10px;

    }

}

/*====================================================

RESPONSIVE V2 PART 2

======================================================*/


/*==========================================
1024px
==========================================*/

@media (max-width:1024px) {

    .hero {

        padding-top: 170px;

    }

    .hero h1 {

        font-size: 28px;

        line-height: 1.2;

    }

    .hero-content {

        text-align: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-bottom {

        justify-content: center;

    }

    .hero-right {

        margin-top: 60px;

        height: auto;

    }

    .hero-main-image {

        max-width: 460px;

        margin: auto;

    }

    .card-one {

        left: 0;

        top: 30px;

    }

    .card-two {

        right: 0;

        top: 180px;

    }

    .card-three {

        left: 40px;

        bottom: 20px;

    }

    .about-section {

        padding: 90px 0;

    }

    .about-images {

        margin-bottom: 60px;

    }

    .about-btn {

        text-align: center;

    }

    .group-gallery {

        margin-top: 60px;

    }

}


/*==========================================
991px
==========================================*/

@media (max-width:991px) {

    .hero {

        padding-bottom: 80px;

    }

    .hero-right {

        display: flex;

        flex-direction: column;

        align-items: center;

        /* gap: 20px; */

    }

    .floating-card {

        position: relative;

        left: auto;

        right: auto;

        top: auto;

        bottom: auto;

        width: 100%;

        max-width: 350px;

    }

    .hero-main-image {

        width: 100%;

        max-width: 480px;

    }

    .section-heading {

        text-align: center;

    }

    .section-heading p {

        margin: auto;

    }

    .feature-box {

        text-align: left;

    }

    .division-card {

        margin-bottom: 20px;

    }

    .product-box {

        height: 360px;

    }

    .application-card {

        margin-bottom: 20px;

    }

    .manufacturing-counter {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }

    .country-list {

        justify-content: center;

    }

}


/*==========================================
768px
==========================================*/

@media (max-width:768px) {

    .hero {

        padding-top: 140px;

    }

    .hero h1 {

        font-size: 18px;

    }

    .hero p {

        font-size: 16px;

    }

    .hero-tag {

        font-size: 12px;

        padding: 8px 18px;

    }

    .hero-buttons {

        flex-direction: column;

        gap: 15px;

    }

    .btn-primary-custom,

    .btn-outline-custom {

        width: 100%;

        margin: 0;

    }

    .hero-bottom {

        flex-direction: column;

        gap: 20px;

    }

    .hero-mini {

        text-align: center;

    }

    .hero-mini h3 {

        font-size: 20px;

    }

    .hero-main-image {

        max-width: 100%;

    }

    .experience-badge {

        width: 180px;

        padding: 20px;

    }

    .experience-badge h2 {

        font-size: 20px;

    }

    .feature-box {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .feature-icon {

        margin-bottom: 15px;

    }

    .group-gallery img {

        margin-bottom: 20px;

    }

    .division-image img {

        height: 220px;

    }

    .division-content {

        padding: 25px;

    }

    .product-box {

        height: 300px;

    }

    .product-overlay {

        padding: 22px;

    }

    .product-overlay h3 {

        font-size: 18px;

    }

    .application-content {

        padding: 25px;

    }

    .application-content i {

        width: 60px;

        height: 60px;

        font-size: 18px;

        margin-bottom: 18px;

    }

    .why-item {

        flex-direction: column;

        text-align: center;

    }

    .why-icon {

        margin: auto;

    }

    .manufacturing-counter {

        grid-template-columns: 1fr;

    }

    .counter-box {

        padding: 25px;

    }

}


/*==========================================
600px
==========================================*/

@media (max-width:600px) {

    .navbar-brand img {

        height: 48px;

    }

    .hero {

        padding-top: 120px;

    }

    .hero h1 {

        font-size: 20px;

    }

    .hero p {

        font-size: 15px;

    }

    .section-heading h2 {

        font-size: 18px;

    }

    .section-heading p {

        font-size: 15px;

    }

    .hero-main-image {

        border-radius: 20px;

    }

    .floating-card {

        padding: 15px;

    }

    .floating-card img {

        width: 60px;

        height: 60px;

    }

    .floating-card h5 {

        font-size: 16px;

    }

    .about-images {

        padding-right: 0;

    }

    .experience-badge {

        position: relative;

        right: auto;

        bottom: auto;

        margin: 20px auto 0;

    }

    .division-content h4 {

        font-size: 18px;

    }

    .application-content h4 {

        font-size: 18px;

    }

    .counter-box h2 {

        font-size: 18px;

    }

    .country-list span {

        width: 100%;

        text-align: center;

    }

    .download-card {

        padding: 30px 20px;

    }

    .download-card i {

        font-size: 28px;

    }

    .download-card h4 {

        font-size: 16px;

    }

}


/*==========================================
480px
==========================================*/

@media (max-width:480px) {

    .hero h1 {

        font-size: 18px;

    }

    .hero-buttons {

        gap: 12px;

    }

    .hero-tag {

        font-size: 11px;

    }

    .hero-bottom {

        gap: 15px;

    }

    .hero-mini h3 {

        font-size: 18px;

    }

    .feature-box {

        padding: 20px;

    }

    .division-card {

        border-radius: 20px;

    }

    .product-box {

        height: 260px;

    }

    .application-card {

        border-radius: 20px;

    }

    .application-content {

        padding: 20px;

    }

    .application-content h4 {

        font-size: 16px;

    }

    .why-item {

        padding: 20px;

    }

    .counter-box {

        padding: 20px;

    }

    .counter-box h2 {

        font-size: 20px;

    }

    .download-card {

        border-radius: 20px;

    }

    .download-card a {

        width: 100%;

        justify-content: center;

    }
}
    /*====================================================

RESPONSIVE V2 PART 3
(CTA • FOOTER • LARGE SCREEN • LANDSCAPE • UTILITIES)

======================================================*/


    /*==========================================
CTA
==========================================*/

    @media (max-width:991px) {

        .cta-box {

            padding: 60px 40px;

            text-align: center;

        }

        .cta-box h2 {

            font-size: 18px;

        }

        .cta-box p {

            font-size: 17px;

            margin-bottom: 25px;

        }

        .cta-box .btn-primary-custom {

            margin-top: 15px;

        }

    }



    @media (max-width:768px) {

        .cta-section {

            padding-bottom: 90px;

        }

        .cta-box {

            padding: 45px 25px;

            border-radius: 24px;

        }

        .cta-box h2 {

            font-size: 18px;

            line-height: 1.3;

        }

        .cta-box p {

            font-size: 15px;

        }

    }



    @media (max-width:480px) {

        .cta-box {

            padding: 35px 20px;

        }

        .cta-box h2 {

            font-size: 20px;

        }

        .cta-box .btn-primary-custom {

            width: 100%;

        }

    }



    /*==========================================
FOOTER
==========================================*/

    @media (max-width:991px) {

        .footer {

            text-align: center;

            padding: 90px 0 30px;

        }

        .footer-logo {

            margin: auto auto 25px;

        }

        .footer-social {

            justify-content: center;

            margin-bottom: 30px;

        }

        .footer h4 {

            margin-top: 35px;

        }

        .footer ul {

            margin-bottom: 20px;

        }

    }



    @media (max-width:768px) {

        .footer {

            padding: 70px 0 30px;

        }

        .footer-logo {

            height: 58px;

        }

        .footer h4 {

            font-size: 18px;

        }

        .footer p {

            font-size: 15px;

        }

        .footer ul li {

            margin-bottom: 12px;

        }

    }



    @media (max-width:480px) {

        .footer {

            padding: 60px 0 25px;

        }

        .footer-logo {

            height: 48px;

        }

        .footer-social {

            gap: 10px;

        }

        .footer-social a {

            width: 42px;

            height: 42px;

        }

    }



    /*==========================================
COPYRIGHT
==========================================*/

    @media (max-width:991px) {

        .copyright {

            text-align: center;

        }

        .copyright .text-lg-end {

            text-align: center !important;

            margin-top: 10px;

        }

    }



    /*==========================================
BACK TO TOP
==========================================*/

    @media (max-width:768px) {

        .back-top {

            width: 48px;

            height: 48px;

            font-size: 18px;

            right: 18px;

            bottom: 18px;

        }

    }



    @media (max-width:480px) {

        .back-top {

            width: 44px;

            height: 44px;

            font-size: 16px;

            right: 15px;

            bottom: 15px;

        }

    }



    /*==========================================
WHATSAPP
==========================================*/

    @media (max-width:768px) {

        .whatsapp-btn {

            left: 18px;

            bottom: 18px;

            width: 52px;

            height: 52px;

            font-size: 18px;

        }

    }



    @media (max-width:480px) {

        .whatsapp-btn {

            left: 15px;

            bottom: 15px;

            width: 48px;

            height: 48px;

            font-size: 18px;

        }

    }



    /*==========================================
LARGE DESKTOP
==========================================*/

    @media (min-width:1600px) {

        .container {

            max-width: 1500px;

        }

        .hero h1 {

            font-size: 60px;

        }

        .hero p {

            font-size: 16px;

            max-width: 720px;

        }

        .hero-main-image {

            width: 620px;

        }

        .section-heading h2 {

            font-size: 44px;

        }

        .product-box {

            height: 520px;

        }

    }



    /*==========================================
ULTRA WIDE
==========================================*/

    @media (min-width:1920px) {

        .container {

            max-width: 1650px;

        }

        .hero {

            min-height: 100vh;

        }

        .hero-main-image {

            width: 680px;

        }

        .hero h1 {

            font-size: 64px;

        }

        .hero p {

            font-size: 21px;

        }

        .section-heading h2 {

            font-size: 46px;

        }

    }



    /*==========================================
TABLET LANDSCAPE
==========================================*/

    @media (min-width:768px) and (max-width:1024px) and (orientation:landscape) {

        .hero {

            padding: 140px 0 90px;

            height: auto;

        }

        .hero h1 {

            font-size: 36px;

        }

        .hero-main-image {

            width: 400px;

        }

        .hero-right {

            margin-top: 40px;

        }

    }



    /*==========================================
MOBILE LANDSCAPE
==========================================*/

    @media (max-height:500px) and (orientation:landscape) {

        .hero {

            height: auto;

            padding: 130px 0 80px;

        }

        .hero-bottom {

            flex-direction: row;

            justify-content: center;

        }

        .hero-main-image {

            max-width: 380px;

        }

    }



    /*==========================================
FOLD DEVICES
==========================================*/

    @media (max-width:320px) {

        .hero h1 {

            font-size: 20px;

        }

        .hero p {

            font-size: 14px;

        }

        .section-heading h2 {

            font-size: 18px;

        }

        .btn-primary-custom,

        .btn-outline-custom {

            padding: 14px;

            font-size: 14px;

        }

        .product-box {

            height: 220px;

        }

        .application-content {

            padding: 18px;

        }

        .counter-box h2 {

            font-size: 18px;

        }

    }



    /*==========================================
IMAGE RESPONSIVE
==========================================*/

    img {

        max-width: 100%;

        height: auto;

    }



    /*==========================================
GRID HELPERS
==========================================*/

    @media (max-width:991px) {

        .row.g-5 {

            --bs-gutter-y: 2rem;

        }

        .row.g-4 {

            --bs-gutter-y: 1.8rem;

        }

    }



    /*==========================================
ANIMATION OPTIMIZATION
==========================================*/

    @media (max-width:991px) {

        .float,

        .rotate,

        .pulse {

            animation: none !important;

        }

        .floating-card {

            transition: .3s;

        }

        .product-box img,

        .division-image img,

        .application-card img {

            transition: .4s;

        }

    }



    /*==========================================
PERFORMANCE
==========================================*/

    @media (prefers-reduced-motion:reduce) {

        * {

            scroll-behavior: auto !important;

            animation: none !important;

            transition: none !important;

        }

    }



    /*==========================================
PRINT
==========================================*/

    @media print {

        .topbar,

        .navbar,

        .whatsapp-btn,

        .back-top,

        .cta-section,

        .footer {

            display: none !important;

        }

        body {

            background: #fff;

            color: #000;

        }

        a {

            text-decoration: none;

            color: #000;

        }

    }



/*====================================================
GLOBAL PAGE BANNER RESPONSIVE
======================================================*/

@media (max-width: 991px) {
  .page-banner {
    height: 420px;
  }

  .page-content {
    text-align: center;
  }

  .page-content h1 {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .page-banner {
    height: 360px;
  }

  .page-content {
    padding-top: 70px;
  }

  .page-content h1 {
    font-size: 28px;
  }

  .breadcrumb-list {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .page-content h1 {
    font-size: 18px;
  }
}

    /*==========================================
END RESPONSIVE.CSS V2
==========================================*/