/* =========================================
   Responsive Styles
========================================= */



/* ==========================================================
   HEADER RESPONSIVE
========================================================== */

@media (max-width:992px) {

    /* Header */

    .header {

        padding: 14px 0;

    }

    .header .container {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    /* Logo */

    .logo img {

        height: 55px;

        width: auto;

    }

    /* Hide desktop navigation */

    .nav-links {

        gap: 0;

    }

}

@media (max-width:576px) {

    .header {

        padding: 12px 0;

    }

    .logo img {

        height: 48px;

    }

    .navbar {

        width: 260px;

        padding: 90px 25px 30px;

    }

    .nav-links a {

        font-size: 1rem;

    }

    .menu-toggle {

        width: 42px;

        height: 42px;

    }

    .menu-toggle svg {

        width: 26px;

        height: 26px;

    }

}

@media (max-width:991px) {

    .container {

        width: min(100% - 40px);

    }

}

@media (max-width:768px) {

    .section {

        padding: 80px 0;

    }

}

@media (max-width:576px) {

    .container {

        width: min(100% - 32px);

    }

}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */

/* ==========================
   Tablet
========================== */

@media (max-width:992px) {

    .hero {

        padding-top: 140px;

    }

    .hero-image {

        display: none;

    }

    .hero-container {

        display: block;

    }

    .hero-content {

        width: 100%;

        max-width: 100%;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .hero {

        padding-top: 120px;

    }

    .hero-container {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-image {

        display: none;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .hero {

        padding-top: 110px;

    }

    .hero-image {

        display: none;

    }

}

/* ==========================================================
   ABOUT SECTION RESPONSIVE
========================================================== */

/* =========================
   Large Laptop
========================= */

@media (max-width:1200px) {

    .about-container {

        grid-template-columns: 380px 1fr;
        gap: 70px;

    }

    .about-content h2 {

        font-size: 3rem;

    }

}


/* =========================
   Tablet
========================= */

@media (max-width:992px) {

    .about {

        padding: 90px 0;

    }

    .about-container {

        grid-template-columns: 1fr;
        gap: 60px;

    }

    .about-specs {

        max-width: 650px;
        margin: 0 auto;

    }

    .about-content {

        max-width: 100%;
        text-align: center;

    }

    .section-tag {

        justify-content: center;

    }

    .about-content h2::after {

        margin: 25px auto 0;

    }

}


/* =========================
   Mobile
========================= */

@media (max-width:768px) {

    .about {

        padding: 70px 0;

    }

    .about-specs {

        padding: 35px 28px;

        border-radius: 16px;

    }

    .about-label {

        font-size: .8rem;
        letter-spacing: 3px;

    }

    .about-content h2 {

        font-size: 2.2rem;
        line-height: 1.15;

        letter-spacing: -1px;

    }

    .about-content p {

        font-size: 1rem;
        line-height: 1.8;

    }

    .spec-item {

        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

    }

    .spec-item strong {

        text-align: left;
        white-space: normal;

    }

}


/* =========================
   Small Mobile
========================= */

@media (max-width:576px) {

    .about {

        padding: 60px 0;

    }

    .about-container {

        gap: 45px;

    }

    .about-specs {

        padding: 28px 22px;

    }

    .about-top-line {

        width: 55px;

    }

    .about-content h2 {

        font-size: 1.85rem;

    }

    .section-tag {

        font-size: .8rem;
        gap: 12px;

    }

    .section-tag span {

        width: 28px;

    }

}

/* ==========================================================
   PRODUCTS RESPONSIVE
========================================================== */

@media (max-width:1200px) {

    .products-grid {

        gap: 28px;

    }

    .product-image {

        height: 280px;

    }

}

/* ==========================
   Tablet
========================== */

@media (max-width:992px) {

    .products {

        padding: 90px 0;

    }

    .products-grid {

        grid-template-columns: 1fr;

        gap: 35px;

        max-width: 720px;

        margin: auto;

    }

    .products-header {

        margin-bottom: 55px;

    }

    .product-image {

        height: 360px;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .products {

        padding: 70px 0;

    }

    .products-header {

        margin-bottom: 45px;

    }

    .product-content {

        padding: 24px;

    }

    .product-content h3 {

        font-size: 1.5rem;

    }

    .product-content p {

        font-size: .95rem;

        min-height: auto;

        margin-bottom: 22px;

    }

    .product-image {

        height: 260px;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .products-grid {

        gap: 24px;

    }

    .product-card {

        border-radius: 18px;

    }

    .product-image {

        height: 220px;

    }

    .product-content {

        padding: 20px;

    }

    .product-content h3 {

        font-size: 1.3rem;

    }

    .product-btn {

        font-size: .95rem;

    }

}

/* ==========================================================
   QUALITY SECTION RESPONSIVE
========================================================== */

/* ==========================
   Large Tablet
========================== */

@media (max-width:992px) {

    .quality {

        padding: 100px 0;

    }

    .quality-content {

        max-width: 100%;

        text-align: center;

    }

    .quality .section-title {

        font-size: 2.8rem;

        margin-bottom: 50px;

    }

    .quality-item {

        padding: 22px 0;

    }

    .quality-item span {

        font-size: 1.2rem;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .quality {

        padding: 80px 0;

    }

    .quality .section-title {

        font-size: 2.2rem;

        line-height: 1.15;

        margin-bottom: 40px;

        text-align: center;

    }

    .quality-item {

        align-items: flex-start;

        gap: 15px;

        padding: 20px 0;

    }

    .quality-item svg {

        width: 20px;

        height: 20px;

        margin-top: 4px;

    }

    .quality-item span {

        font-size: 1.05rem;

        line-height: 1.7;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .quality {

        padding: 70px 0;

    }

    .quality .section-title {

        font-size: 2rem;

    }

    .quality-item {

        gap: 12px;

    }

    .quality-item span {

        font-size: 1rem;

    }

}

/* ==========================================================
   WHY CHOOSE US RESPONSIVE
========================================================== */

/* ==========================
   Tablet
========================== */

@media (max-width:992px) {

    .why {

        padding: 80px 0;

    }

    .why-header {

        margin-bottom: 50px;

    }

    .why .section-title {

        font-size: 2.8rem;

        text-align: center;

    }

    .why-grid {

        gap: 24px;

    }

    .why-card {

        padding: 32px;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .why {

        padding: 70px 0;

    }

    .why-header {

        margin-bottom: 40px;

    }

    .why .section-title {

        font-size: 2.2rem;

        line-height: 1.2;

        text-align: center;

    }

    .why-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .why-card {

        padding: 28px;

    }

    .why-icon {

        width: 54px;

        height: 54px;

        margin-bottom: 20px;

    }

    .why-icon svg {

        width: 26px;

        height: 26px;

    }

    .why-card h3 {

        font-size: 1.3rem;

    }

    .why-card p {

        font-size: 1rem;

        line-height: 1.7;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .why {

        padding: 60px 0;

    }

    .why .section-title {

        font-size: 2rem;

    }

    .why-card {

        padding: 24px;

    }

    .why-icon {

        width: 50px;

        height: 50px;

    }

    .why-icon svg {

        width: 24px;

        height: 24px;

    }

}

/* ==========================================================
   CONTACT RESPONSIVE
========================================================== */

/* ==========================
   Tablet
========================== */

@media (max-width:992px) {

    .contact {

        padding: 80px 0;

    }

    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .contact-header {
        margin-bottom: 40px;
    }

    .contact-header .section-title {
        font-size: 2.8rem;
        margin-bottom: 0;
    }

    .contact-map {

        height: 500px;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .contact {

        padding: 70px 0;

    }

    .contact-content .section-title {

        font-size: 2.2rem;

    }

    .contact-text {

        font-size: 1rem;

        margin-bottom: 35px;

    }

    .contact-item {

        padding: 20px;

        gap: 18px;

    }

    .contact-icon {

        width: 54px;

        height: 54px;

    }

    .contact-icon svg {

        width: 24px;

        height: 24px;

    }

    .contact-item h3 {

        font-size: 1.2rem;

    }

    .contact-item p,

    .contact-item a {

        font-size: 1rem;

    }

    .contact-map {

        height: 400px;

        border-radius: 18px;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .contact {

        padding: 60px 0;

    }

    .contact-content .section-title {

        font-size: 2rem;

    }

    .contact-item {

        flex-direction: column;

        align-items: flex-start;

    }

    .contact-icon {

        width: 50px;

        height: 50px;

    }

    .contact-map {

        height: 320px;

    }

}

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

/* ==========================
   Tablet
========================== */

@media (max-width:992px) {

    .footer {

        padding: 70px 0 25px;

    }

    .footer-middle {

        display: grid;

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .footer-brand h2 {

        font-size: 1.8rem;

    }

    .footer-brand{
    margin-bottom:0;
}

.footer-middle > *{
    width:100%;
}

.footer-column{
    margin-top:0;
}

.footer-column h3{
    margin-bottom:18px;
}

.footer-column ul{
    margin-top:18px;
}

.footer-contact li{
    justify-content:flex-start;
}

.footer-bottom{
    text-align:center;
    margin-top:40px;
}

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px) {

    .footer {

        padding: 60px 0 20px;

    }

    .footer-top {

        padding-bottom: 35px;

    }

    .footer-logo {

        width: 75px;

    }

    .footer-brand h2 {

        font-size: 1.6rem;

    }

    .footer-brand p {

        font-size: 1rem;

    }

    .footer-middle{
    display:grid;
    grid-template-columns:1fr;
    gap:35px;
}

    .footer-column h3 {

        display: block;

    }

    .footer-column h3::after {

        left: 0%;

        transform: none;

    }

    .footer-column ul {

        margin-top: 20px;

    }

    .footer-column li {

        margin-bottom: 14px;

    }

    .footer-contact li {

        justify-content: flex-start;

    }

    .footer-column a:hover {

        padding-left: 0;

    }

    .footer-column li:hover {

        transform: none;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:576px) {

    .footer {

        padding: 50px 0 20px;

    }

    .footer-logo {

        width: 65px;

    }

    .footer-brand h2 {

        font-size: 1.4rem;

        letter-spacing: 1px;

    }

    .footer-brand p {

        font-size: .95rem;

        line-height: 1.7;

    }

    .footer-middle {

        gap: 30px;

        padding: 35px 0;

    }

    .footer-column h3 {

        font-size: 1.15rem;

    }

    .footer-column li {

        font-size: .95rem;

    }

    .footer-bottom {

        padding-top: 20px;

    }

    .footer-bottom p {

        font-size: .85rem;

        line-height: 1.6;

    }

}

/* Floating WhatsApp */

@media(max-width:768px) {

    .whatsapp-float {

        width: 58px;

        height: 58px;

        right: 18px;

        bottom: 18px;

    }

    .whatsapp-float svg {

        width: 26px;

        height: 26px;

    }

}