/*==================================================
        RESPONSIVE.CSS
        LumexFrame
==================================================*/


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

@media screen and (max-width:1400px){

.container{

    width:92%;

}

.hero-wrapper{

    gap:60px;

}

.hero h1{

    font-size:60px;

}

.section-title h2{

    font-size:44px;

}

.project-card img{

    height:330px;

}

.footer-grid{

    gap:40px;

}

}


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

@media screen and (max-width:1200px){

.container{

    width:94%;

}

.section{

    padding:90px 0;

}


/* Navigation */

.nav-links{

    gap:30px;

}

.logo img{

    width:190px;

}


/* Hero */

.hero-wrapper{

    gap:50px;

}

.hero h1{

    font-size:56px;

}

.hero p{

    font-size:17px;

}

.hero-image img{

    min-height:580px;

    object-fit:cover;

}


/* Floating Cards */

.floating-card{

    width:240px;

    padding:16px;

}

.floating-card i{

    width:52px;

    height:52px;

    font-size:22px;

}

.card-1{

    left:-20px;

}

.card-2{

    right:-20px;

}


/* Features */

.features-bar .container{

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

}


/* Products */

.product-grid{

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

}


/* About */

.about-wrapper{

    gap:60px;

}

.about-content h2{

    font-size:40px;

}


/* Statistics */

.stats-grid{

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

}


/* Process */

.process-grid{

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

}


/* Projects */

.project-grid{

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

}


/* Why Us */

.why-grid{

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

}


/* Testimonials */

.testimonial-grid{

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

}


/* Contact */

.contact-wrapper{

    grid-template-columns:350px 1fr;

}


/* Footer */

.footer-grid{

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

}

.footer-bottom{

    flex-wrap:wrap;

    gap:15px;

}

}


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

@media screen and (max-width:1024px){

/* Navigation */

.navbar{

    height:80px;

}

.nav-links{

    gap:24px;

}

.btn-primary{

    padding:15px 28px;

}


/* Hero */

.hero{

    padding-top:120px;

    min-height:auto;

}

.hero-wrapper{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

    max-width:650px;

    margin:auto;

}

.hero h1{

    font-size:50px;

}

.hero p{

    width:85%;

    margin:0 auto 40px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.hero-image img{

    min-height:auto;

}

.card-1{

    left:20px;

}

.card-2{

    right:20px;

}


/* Section Title */

.section-title p{

    width:80%;

}


/* About */

.about-wrapper{

    grid-template-columns:1fr;

}

.about-image{

    max-width:700px;

    margin:auto;

}

.about-content{

    text-align:center;

}

.about-features{

    max-width:650px;

    margin:35px auto;

}

.experience-card{

    left:30px;

}


/* Products */

.product-grid{

    gap:25px;

}


/* Process */

.process-grid{

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

}


/* Projects */

.project-grid{

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

}


/* Why Us */

.why-grid{

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

}


/* Testimonials */

.testimonial-grid{

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

}


/* Contact */

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-info{

    margin-bottom:35px;

}


/* CTA */

.cta-content h2{

    font-size:44px;

}

.cta-content p{

    width:80%;

}


/* Footer */

.footer-grid{

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

    gap:40px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}


/* WhatsApp */

.whatsapp{

    right:25px;

    bottom:25px;

}

#backToTop{

    right:25px;

    bottom:100px;

}

}

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

@media screen and (max-width:992px){

/*------------------------------
    Navigation
------------------------------*/

.menu-toggle{

    display:block;
    color:#fff;
    z-index:1001;

}

.nav-links{

    position:fixed;

    top:80px;
    right:-100%;

    width:300px;
    height:calc(100vh - 80px);

    background:var(--primary);

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:50px 30px;

    gap:25px;

    transition:.4s ease;

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

}

.nav-links.active{

    right:0;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    display:block;
    width:100%;
    font-size:18px;

}

.navbar .btn-primary{

    display:none;

}

/*------------------------------
    Hero
------------------------------*/

.hero h1{

    font-size:44px;

}

.hero p{

    width:100%;
    font-size:16px;

}

.hero-buttons{

    flex-wrap:wrap;

}

.hero-features{

    gap:15px;

}

/*------------------------------
    Features
------------------------------*/

.features-bar .container{

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

}

/*------------------------------
    Section Titles
------------------------------*/

.section-title h2{

    font-size:38px;

}

.section-title p{

    width:100%;

}

/*------------------------------
    Product Grid
------------------------------*/

.product-grid{

    grid-template-columns:1fr;

}

/*------------------------------
    About
------------------------------*/

.about-features{

    grid-template-columns:1fr;

}

/*------------------------------
    Statistics
------------------------------*/

.stats-grid{

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

}

/*------------------------------
    Process
------------------------------*/

.process-grid{

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

}

/*------------------------------
    Projects
------------------------------*/

.project-grid{

    grid-template-columns:1fr;

}

/*------------------------------
    Why Us
------------------------------*/

.why-grid{

    grid-template-columns:1fr;

}

/*------------------------------
    Testimonials
------------------------------*/

.testimonial-grid{

    grid-template-columns:1fr;

}

/*------------------------------
    Contact
------------------------------*/

.contact-info{

    padding:35px;

}

.contact-form{

    padding:35px;

}

/*------------------------------
    Footer
------------------------------*/

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:35px;

}

.footer-logo{

    width:180px;

}

}



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

@media screen and (max-width:768px){

.section{

    padding:70px 0;

}

/*------------------------------
    Hero
------------------------------*/

.hero{

    padding-top:110px;

}

.hero h1{

    font-size:36px;

}

.hero-subtitle{

    font-size:12px;
    letter-spacing:1px;

}

.hero-buttons{

    flex-direction:column;
    align-items:center;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-outline{

    width:250px;
    justify-content:center;

}

.hero-features{

    flex-direction:column;

    align-items:center;

}

/* Floating cards */

.floating-card{

    display:none;

}

/*------------------------------
    Features
------------------------------*/

.features-bar{

    margin-top:0;

}

.features-bar .container{

    grid-template-columns:1fr;

}

/*------------------------------
    About
------------------------------*/

.about-content h2{

    font-size:34px;

}

.experience-card{

    position:relative;

    left:0;
    bottom:0;

    margin-top:20px;

    width:100%;

}

/*------------------------------
    Statistics
------------------------------*/

.stats-grid{

    grid-template-columns:1fr;

}

/*------------------------------
    Process
------------------------------*/

.process-grid{

    grid-template-columns:1fr;

}

.process-card::after{

    display:none;

}

/*------------------------------
    CTA
------------------------------*/

.cta{

    padding:80px 0;

}

.cta-content h2{

    font-size:36px;

}

.cta-content p{

    width:100%;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-buttons .btn-primary,
.cta-buttons .btn-outline{

    width:240px;
    justify-content:center;

}

/*------------------------------
    Contact
------------------------------*/

.contact-wrapper{

    gap:30px;

}

.contact-form button{

    width:100%;

}

/*------------------------------
    Footer
------------------------------*/

.footer{

    padding-top:70px;

}

.footer-grid{

    grid-template-columns:1fr;

}

.footer-column{

    text-align:center;

}

.footer-column h4::after{

    margin:10px auto 0;

}

.social-links{

    justify-content:center;

}

.newsletter{

    max-width:420px;

    margin:auto;

}

.footer-bottom{

    font-size:14px;

    gap:10px;

}

/*------------------------------
    Floating Buttons
------------------------------*/

.whatsapp{

    width:55px;
    height:55px;

    font-size:26px;

}

#backToTop{

    width:48px;
    height:48px;

    font-size:16px;

}

}

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

@media screen and (max-width:576px){

.container{

    width:94%;

}

.section{

    padding:60px 0;

}

/* Navigation */

.logo img{

    width:160px;

}

.navbar{

    height:72px;

}

.nav-links{

    top:72px;
    width:100%;
    height:calc(100vh - 72px);

    padding:40px 25px;

}

/* Hero */

.hero{

    padding-top:100px;

}

.hero h1{

    font-size:32px;
    line-height:1.25;

}

.hero p{

    font-size:15px;
    line-height:1.8;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-outline{

    width:100%;

}

.hero-subtitle{

    padding:8px 16px;

}

/* Section */

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

/* Cards */

.product-card,
.project-card,
.why-card,
.testimonial-card,
.process-card,
.feature-item{

    border-radius:18px;

}

.product-content{

    padding:24px;

}

.product-content h3{

    font-size:22px;

}

.project-card img{

    height:260px;

}

.client{

    flex-direction:column;
    text-align:center;

}

.client img{

    margin-bottom:10px;

}

/* About */

.about-content h2{

    font-size:30px;

}

.about-features{

    gap:16px;

}

/* Contact */

.contact-info,
.contact-form{

    padding:28px;

}

.info-item{

    gap:15px;

}

.info-item i{

    width:52px;
    height:52px;

    font-size:20px;

}

/* CTA */

.cta-content h2{

    font-size:30px;

}

.cta-buttons .btn-primary,
.cta-buttons .btn-outline{

    width:100%;

}

}


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

@media screen and (max-width:480px){

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:14px;

}

.section-title h2{

    font-size:26px;

}

.about-content h2{

    font-size:26px;

}

.cta-content h2{

    font-size:28px;

}

.stat-card h2{

    font-size:40px;

}

.feature-item{

    padding:22px 16px;

}

.feature-item i{

    width:60px;
    height:60px;

    font-size:24px;

}

.product-card img{

    height:220px;

}

.project-card img{

    height:220px;

}

.testimonial-card{

    padding:28px;

}

.footer{

    padding-top:60px;

}

.footer-column{

    text-align:center;

}

.newsletter input,
.newsletter button{

    width:100%;

}

.whatsapp{

    width:52px;
    height:52px;

    right:18px;
    bottom:18px;

}

#backToTop{

    width:46px;
    height:46px;

    right:18px;
    bottom:84px;

}

}


/*==================================================
        360px
==================================================*/

@media screen and (max-width:360px){

.container{

    width:95%;

}

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:13px;

}

.section-title h2{

    font-size:24px;

}

.about-content h2{

    font-size:24px;

}

.product-content{

    padding:20px;

}

.product-content h3{

    font-size:20px;

}

.contact-info,
.contact-form{

    padding:22px;

}

.info-item{

    flex-direction:column;
    text-align:center;

}

.info-item i{

    margin:0 auto 10px;

}

.btn-primary,
.btn-outline{

    padding:14px 22px;

    font-size:14px;

}

.whatsapp{

    width:48px;
    height:48px;

    font-size:22px;

}

#backToTop{

    width:42px;
    height:42px;

    font-size:14px;

}

}


/*==================================================
        UTILITY FIXES
==================================================*/

img{

    max-width:100%;
    height:auto;

}

iframe{

    max-width:100%;

}

table{

    width:100%;
    border-collapse:collapse;

}

button{

    cursor:pointer;

}

textarea{

    resize:vertical;

}


/*==================================================
        ACCESSIBILITY
==================================================*/

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{

    outline:2px solid var(--accent);
    outline-offset:3px;

}


/*==================================================
        SMOOTH TRANSITIONS
==================================================*/

.product-card,
.project-card,
.why-card,
.process-card,
.testimonial-card,
.feature-item,
.btn-primary,
.btn-outline{

    transition:all .35s ease;

}


/*==================================================
        REDUCE MOTION
==================================================*/

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

*{

    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;

}

}