/* responsive.css */

@media(max-width:1920px) {

    .container {

        max-width: 100%;

    }



    .glowup-section {

        background: linear-gradient(to bottom, #dfb58d 0%, #FAEDE1 20%, #e5e5e5 42%, #e5e5e5 100%);

    }

}



@media(max-width:1440px) {

    .glowup-section {

        background: linear-gradient(to bottom, #dfb58d 0%, #FAEDE1 20%, #e5e5e5 42%, #e5e5e5 100%);

    }

}



@media(max-width:1200px) {



    .services-grid {

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

    }



    .ingredients-grid {

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

    }



    .footer-grid {

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

    }



    .hero-content h1 {

        font-size: 62px;

    }



}



@media(max-width:1024px) {


   
    .nav {

        display: none;

    }



    .stats-grid {

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

    }



    .glowup-wrapper {

        grid-template-columns: 1fr;

    }



    .hero {

        min-height: 800px;

    }



    .hero-content h1 {

        font-size: 52px;

    }



    .section-title h2,

    .ingredients-title h2 {

        font-size: 46px;

    }



    .menu-toggle {

        display: block;

    }



    .nav-wrapper {

        position: relative;

    }



    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 30px;

        color: #7e170e;

        cursor: pointer;

        z-index: 1001;

        margin-left: auto;

        /* FIXED */

    }



    .nav {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: #470904;

        padding: 20px;

        border-radius: 0 0 12px 12px;



        display: none;

    }



    .nav.active {

        display: block;

    }



    .nav ul {

        flex-direction: column;

        gap: 0;

    }



    .nav ul li {

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    }



    .nav ul li a {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 16px 0;

        font-size: 16px;

        color: #fff;

    }



    /* Mobile Dropdown */



    .has-dropdown .dropdown {

        position: static;

        opacity: 1;

        visibility: visible;

        background: rgba(255, 255, 255, 0.03);

        box-shadow: none;

        border-radius: 8px;



        max-height: 0;

        overflow: hidden;

        transition: max-height 0.35s ease;



        display: flex;

        flex-direction: column;

    }



    .has-dropdown.active .dropdown {

        max-height: 300px;

        margin-bottom: 10px;

    }



    .has-dropdown .dropdown li {

        border: none;

    }



    .has-dropdown .dropdown li a {

        color: #ddd !important;

        padding: 12px 18px;

        font-size: 14px;

    }



    .has-dropdown.active>a::after {

        transform: rotate(180deg);

    }



}



@media(max-width:767px) {



    .hero {

        min-height: 720px;

    }



    .hero-content h1 {

        font-size: 42px;

    }



    .hero-content p {

        font-size: 18px;

    }



    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;

    }



    .stats-grid {

        grid-template-columns: 1fr;

    }



    .services-grid {

        grid-template-columns: 1fr;

    }



    .ingredients-grid {

        grid-template-columns: 1fr;

    }



    .footer-grid {

        grid-template-columns: 1fr;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }



    .glowup-content h2 {

        font-size: 42px;

    }



    .glowup-content h2 span {

        font-size: 70px;

    }



    .glowup-content ul li {

        font-size: 24px;

    }



    .section-title h2,

    .ingredients-title h2 {

        font-size: 38px;

    }



}



@media(max-width:480px) {



    .hero-content h1 {

        font-size: 34px;

    }



    .btn {

        width: 100%;

        text-align: center;

    }



    .stat-box h2 {

        font-size: 40px;

    }



    .section-title h2,

    .ingredients-title h2 {

        font-size: 32px;

    }



    .glowup-content h2 span {

        font-size: 50px;

    }



    .glowup-section {

        padding: 25px 10px;

    }



}