/* =====================================
Template Name:   Ayushfit
Description: Buy herbal medicines at Ayushfit, your trusted herbal specialist.
Version:    1.1
========================================*/

/* ================================
   Mobile and Tablet Specific Styles
================================= */

/* Mobile Screens (max-width: 450px) */
@media only screen and (max-width: 450px) {
    .main-menu {
        display: block;
    }

    .btn {
        padding: 11px 20px;
        font-weight: 400;
        font-size: 13px;
    }
}

/* ================================
   Mobile Screens (max-width: 767px)
================================= */
@media (max-width: 767px) {
    body {
        font-size: 12px;
    }

    /* Mobile Menu */
    .main-menu {
        display: none; /* Initially hide the menu */
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 20px;
        text-align: left;
    }

    .main-menu.active {
        display: block; /* Show menu when it has 'active' class */
    }

    .main-menu .nav.menu li {
        display: block;
        margin: 10px 0;
    }

    .main-menu .nav.menu li a {
        font-size: 16px;
        padding: 10px 0;
    }
}





    /* Doctor Section */
    .doctorsection {
        padding: 10px;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .doctor-left, .doctor-right {
        padding: 15px;
    }

    .doctor-right h3 {
        font-size: 1.6rem;
    }

    .doctor-right p {
        font-size: 1.2rem;
    }

    /* ScrollUp Button */
    #scrollUp {
        font-size: 20px;
        width: 40px;
        height: 40px;
    }

    /* Logo */
    .header .logo img {
        width: 120px;
    }

    /* Main Menu */
    .main-menu .nav.menu {
        flex-direction: column;
        align-items: center;
    }

    .main-menu .nav.menu li {
        margin-bottom: 10px;
    }

    /* Buttons */
    .get-quote .btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Hero Section */
    .slider .single-slider {
        height: 400px;
    }

    .slider .single-slider h1 {
        font-size: 28px;
    }

    .slider .single-slider p {
        font-size: 1.2rem;
    }

    /* Fun Facts Section */
    .fun-facts {
        padding: 60px 20px;
    }

    .fun-facts .single-fun {
        margin-bottom: 20px;
    }

    .fun-facts .single-fun .counter {
        font-size: 2rem;
    }

    .fun-facts .single-fun i {
        font-size: 30px;
        width: 50px;
        height: 50px;
        line-height: 48px;
    }

    .fun-facts .single-fun .content {
        padding-left: 40px;
    }

    .fun-facts .single-fun span {
        font-size: 1.8rem;
    }

    .fun-facts .single-fun p {
        font-size: 14px;
    }

    /* Advice Section */
    .advicesection {
        padding: 60px 20px;
    }

    .advice-left h3 {
        font-size: 28px;
    }

    .advice-left p {
        font-size: 16px;
    }

    .advice-right .video-play {
        font-size: 22px;
        padding: 12px 20px;
    }

    #video-container {
        margin-top: 20px;
    }

    #video-player {
        width: 100%;
        height: auto;
    }

    /* Testimonials Grid Layout */
    .testimonials-wrapper {
        grid-template-columns: 1fr;
    }

    /* Muscle Section */
    .musclesection {
        padding: 40px 0;
    }

    .muscle-left .list p {
        font-size: 18px;
    }

    /* Footer */
    .footer-top .col-lg-3 {
        flex: 1 1 100%;
        margin-right: 0;
    }


/* Tablets and Medium Devices (max-width: 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    body {
        font-size: 13px;
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    .doctor-left, .doctor-right {
        padding: 20px;
    }

    .doctor-right h3 {
        font-size: 1.7rem;
    }

    .doctor-right p {
        font-size: 1.3rem;
    }

    #scrollUp {
        font-size: 22px;
        width: 42px;
        height: 42px;
    }

    .header .logo img {
        width: 140px;
    }

    .main-menu .nav.menu {
        flex-direction: column;
        align-items: center;
    }

    .main-menu .nav.menu li {
        margin-bottom: 12px;
    }

    .get-quote .btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    .slider .single-slider {
        height: 500px;
    }

    .slider .single-slider h1 {
        font-size: 32px;
    }

    .slider .single-slider p {
        font-size: 1.3rem;
    }

    .fun-facts {
        padding: 70px 20px;
    }

    .fun-facts .single-fun .counter {
        font-size: 2.2rem;
    }

    .fun-facts .single-fun i {
        font-size: 35px;
        width: 60px;
        height: 60px;
        line-height: 58px;
    }

    .fun-facts .single-fun span {
        font-size: 2rem;
    }

    .fun-facts .single-fun p {
        font-size: 16px;
    }

    .advicesection {
        padding: 70px 20px;
    }

    .advice-left h3 {
        font-size: 32px;
    }

    .advice-left p {
        font-size: 18px;
    }

    .advice-right .video-play {
        font-size: 24px;
        padding: 15px 25px;
    }

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

    .footer-top .col-lg-3 {
        flex: 1 1 48%;
        margin-right: 2%;
    }

    .muscle-left .list li {
        font-size: 16px;
    }

    .footer h2 {
        font-size: 18px;
    }

    .contact-us .contact-us-form input,
    .contact-us .contact-us-form textarea {
        font-size: 13px;
    }
}

/* Mobile Screens (max-width: 768px) */
@media only screen and (max-width: 768px) {
    /* ===================
       Header Styles
    ==================== */
    .main-menu {
        display: none;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 20px;
        text-align: left;
    }

      
     /* Mobile Menu Toggle */
     .mobile-nav-toggle {
        display: block; /* Make sure it's visible on mobile */
        background-color: #000; /* Background color for better visibility */
        color: #fff; /* White color for the button */
        padding: 10px 20px; /* Padding for the button */
        cursor: pointer; /* Pointer cursor on hover */
        font-size: 18px; /* Font size for the button */
        text-align: center; /* Align text in the middle */
    }

    /* Ensure the mobile menu toggle is properly positioned */
.mobile-nav-toggle {
    position: absolute;
    top: 20px; /* Adjust based on where you want the button */
    right: 20px; /* Position it on the right side */
    z-index: 999; /* Make sure it's above other elements */
}



    .main-menu.active {
        display: block;
    }

  

    .nav.menu li {
        display: block;
        margin: 10px 0;
    }

    .nav.menu li a {
        font-size: 16px;
        padding: 10px 0;
    }

    .btn {
        padding: 10px 20px;
        font-weight: 400;
        font-size: 20px;
       
    }

    #scrollUp {
        font-size: 20px;
    }
}


/* Large Devices (Desktop, min-width: 1200px) */
@media (min-width: 1200px) {
    body {
        font-size: 14px;
    }

    .section-title h2 {
        font-size: 2.5rem;
    }

    .doctor-left, .doctor-right {
        padding: 30px;
    }

    .doctor-right h3 {
        font-size: 2rem;
    }

    .doctor-right p {
        font-size: 1.5rem;
    }

    #scrollUp {
        font-size: 25px;
        width: 50px;
        height: 50px;
    }

    .header .logo img {
        width: 180px;
    }

    .main-menu .nav.menu {
        flex-direction: row;
    }

    .main-menu .nav.menu li {
        margin-right: 25px;
    }

    .get-quote .btn {
        font-size: 18px;
        padding: 12px 25px;
    }

    .slider .single-slider {
        height: 600px;
    }

    .slider .single-slider h1 {
        font-size: 36px;
    }

    .slider .single-slider p {
        font-size: 1.5rem;
    }

    .fun-facts .single-fun .counter {
        font-size: 2.5rem;
    }

    .fun-facts .single-fun i {
        font-size: 40px;
        width: 70px;
        height: 70px;
        line-height: 68px;
    }

    .fun-facts .single-fun span {
        font-size: 2.5rem;
    }

    .fun-facts .single-fun p {
        font-size: 18px;
    }

    .advicesection {
        padding: 90px 0;
    }

    .advice-left h3 {
        font-size: 36px;
    }

    .advice-left p {
        font-size: 20px;
    }

    .advice-right .video-play {
        font-size: 28px;
        padding: 20px 30px;
    }

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

    .footer-top .col-lg-3 {
        flex: 1 1 22%;
    }

    .muscle-left .list li {
        font-size: 18px;
    }
}