/* =====================================================
   BIOCURON RESPONSIVE STYLES
===================================================== */

/* =========================
   Large Tablets
========================= */

@media (max-width: 1200px) {

    h1 {
        font-size: 3.4rem;
    }

    h2 {
        font-size: 2.4rem;
    }

    .container {
        width: 92%;
    }

}

/* =========================
   Tablets
========================= */

@media (max-width: 992px) {

    /* Typography */

    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        font-size: 0.95rem;
    }

    /* Hero */

    .hero-grid,
    .grid-2 {

        grid-template-columns: 1fr;

        gap: 50px;
    }

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

    .hero-buttons {
        justify-content: center;
    }

    .hero-image img {

        max-width: 500px;

        margin: auto;
    }

    /* Cards */

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}

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

@media (max-width: 768px) {

    .header {
        position: sticky;
    }

    .navbar {
        height: 75px;
    }

    .hamburger {

        display: flex;

        z-index: 1001;
    }

    .nav-links {

        position: fixed;

        top: 75px;

        right: -100%;

        width: 280px;

        height: calc(100vh - 75px);

        background: #ffffff;

        flex-direction: column;

        align-items: flex-start;

        padding: 40px 30px;

        gap: 25px;

        box-shadow: -10px 0 30px rgba(0,0,0,.08);

        transition: .35s ease;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {

        display: block;

        width: 100%;

        font-size: 1rem;
    }

}

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

@media (max-width: 767px) {

    .section {
        padding: 70px 0;
    }

    .page-hero,
    .hero {
        padding: 80px 0;
    }

    h1 {
        font-size: 2.3rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading p {
        font-size: 1rem;
    }

    /* Hero */

    .hero-grid {
        text-align: center;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Layout */

    .grid-2,
    .grid-3,
    .grid-4,
    .products-grid,
    .stats-grid,
    .footer-grid {

        grid-template-columns: 1fr;
    }

    /* Cards */

    .card,
    .product-card,
    .team-card,
    .testimonial-card,
    .contact-card {

        padding: 25px;
    }

    /* Product Toolbar */

    .products-toolbar {

        flex-direction: column;

        align-items: stretch;
    }

    .search-box {
        width: 100%;
    }

    .filter-buttons {

        justify-content: center;

        gap: 8px;
    }

    .filter-btn {

        font-size: 0.9rem;

        padding: 10px 14px;
    }

    /* Statistics */

    .counter {
        font-size: 2.3rem;
    }

    /* Timeline */

    .timeline-item {

        padding: 20px;

        border-left-width: 4px;
    }

    /* Modal */

    .modal-content {

        width: 95%;

        margin: 60px auto;

        padding: 25px;
    }

    /* Forms */

    .contact-form input,
    .contact-form textarea {

        font-size: 16px;
    }

    /* Map */

    .map-box {
        height: 280px;
    }

    /* Footer */

    .footer {

        text-align: center;
    }

    .footer-grid {
        gap: 30px;
    }

    .copyright {
        margin-top: 30px;
    }

}

/* =========================
   Small Phones
========================= */

@media (max-width: 480px) {

    .container {
        width: 94%;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .logo {
        font-size: 1.5rem;
    }

    .btn {

        width: 100%;

        text-align: center;
    }

    .tagline {

        font-size: 0.85rem;

        padding: 6px 14px;
    }

    .counter {
        font-size: 2rem;
    }

    .product-card img {
        width: 100%;
    }

}

/* =========================
   Ultra Wide Screens
========================= */

@media (min-width: 1600px) {

    .container {
        max-width: 1400px;
    }

    h1 {
        font-size: 4.8rem;
    }

    h2 {
        font-size: 3.2rem;
    }

}