/*====================================================

Exterior Creations, Inc
responsive.css

Responsive Layout
Desktop • Laptop • Tablet • Mobile

======================================================*/


/*====================================================

LARGE DESKTOP
1400px

======================================================*/

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

.container{

    width:92%;

}

.hero-grid{

    gap:60px;

}

.hero-image img{

    max-width:500px;

}

}


/*====================================================

DESKTOP
1200px

======================================================*/

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

h1{

    font-size:3.3rem;

}

h2{

    font-size:2.5rem;

}

.hero-grid{

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.about-grid{

    gap:50px;
	

}

.contact-grid{
    grid-template-columns:1fr minmax(340px,400px);
}

.services-grid{

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

}

.projects-grid{

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

}

.features-grid{

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

}

.process-grid{

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

}

.technology-grid{

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

}

.stats-grid{

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

}

.footer-grid{

    grid-template-columns:2fr 1fr 1fr;

}

}


/*====================================================

LAPTOP
1024px

======================================================*/

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

section{

    padding:90px 0;

}

.hero{

    padding-top:150px;

}

.hero-content h1{

    font-size:3rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-wrap:wrap;

}

.hero-features{

    gap:15px;

}

.contact-grid{
    grid-template-columns:1fr;
    gap:45px;
}


.footer-grid{

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

}

}


/*====================================================

    TABLET
    <= 992px

======================================================*/

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

    /*==================================================
        GENERAL
    ==================================================*/

    section{
        padding:90px 0;
    }

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

    .navbar{
        position:relative;
    }

    .logo img{
        height:50px;
        width:auto;
    }

    .header-right{
        display:flex;
        align-items:center;
        gap:10px;
        margin-left:auto;
    }

    /*==================================================
        BUTTONS
    ==================================================*/

    .btn-header{
        display:none;
    }

    /*==================================================
        MOBILE MENU
    ==================================================*/

    .mobile-menu{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        background:none;
        border:none;
        cursor:pointer;
        font-size:30px;
        color:#2E7D32 !important;
        flex:none;
    }

    /*==================================================
        NAVIGATION
    ==================================================*/

    .menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#ffffff;
        box-shadow:0 10px 25px rgba(0,0,0,.15);
        border-radius:0 0 12px 12px;
        flex-direction:column;
        z-index:1000;
        padding:10px 0;
    }

    .menu.open{
        display:flex;
    }

    .menu li{
        width:100%;
        list-style:none;
    }

    .menu a{
        display:block;
        width:100%;
        padding:16px 24px;
        font-size:16px;
        font-weight:600;
        color:#333;
        text-decoration:none;
        border-bottom:1px solid #ececec;
        transition:.25s;
    }

    .menu li:last-child a{
        border-bottom:none;
    }

    .menu a:hover{
        background:#f5f5f5;
        color:var(--primary);
    }

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

    .hero{
        min-height:auto;
        padding-top:150px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
    }

    .hero-image img{
        max-width:420px;
        margin:auto;
    }

    .hero-content h1{
        font-size:3rem;
    }

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

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

    .hero-features{
        justify-content:center;
        gap:15px;
    }

    /*==================================================
        ABOUT
    ==================================================*/

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

    .about-image{
        order:1;
    }

    .about-content{
        order:2;
    }

    /*==================================================
        SERVICES
    ==================================================*/

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

    /*==================================================
        PROJECTS
    ==================================================*/

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

    /*==================================================
        FEATURES
    ==================================================*/

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

    /*==================================================
        PROCESS
    ==================================================*/

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

    /*==================================================
        TECHNOLOGY
    ==================================================*/

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


    /*==================================================
        TESTIMONIALS
    ==================================================*/

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

    /*==================================================
        STATS
    ==================================================*/

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

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

    .contact-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:25px;
}

    .contact-card{
        padding:30px;
    }

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

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

    .section-header{
        margin-bottom:55px;
    }

    .feature-card,
    .service-card,
    .project-card{
        padding:30px;
    }

}

/*====================================================

SMALL TABLET
850px

======================================================*/

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

.container{

    width:94%;

}

.hero-content h1{

    font-size:2.7rem;

}

h2{

    font-size:2.2rem;

}

.footer-grid{

    gap:35px;

}

.hero-image img{

    max-width:380px;

}

.service-card{

    min-height:auto;

}

.project-card img{

    height:220px;

}

}


/*====================================================

END PART 1

Next:
768px
576px
480px
360px

======================================================*/

/*====================================================

    MOBILE
    <= 768px

======================================================*/

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

    /*==================================================
        GENERAL
    ==================================================*/

    section{
        padding:70px 0;
    }

    .container{
        width:92%;
    }

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

    h2{
        font-size:1.9rem;
    }

    h3{
        font-size:1.3rem;
    }

    /*==================================================
        TOP BAR
    ==================================================*/

    .top-bar{
        padding:8px 0;
    }

    .top-bar-content{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        gap:12px;
    }

    .top-bar-left{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        gap:18px;
        width:100%;
    }

    .top-bar-right{
        display:none;
    }

    .top-bar-item{
        display:flex;
        align-items:center;
        gap:6px;
        font-size:13px;
        white-space:nowrap;
    }

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

    .header{
        padding:12px 0;
    }

    .navbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:80px;
        position:relative;
    }

    /*==================================================
        LOGO
    ==================================================*/

    .logo{
        flex:none;
    }

    .logo img{
        height:60px;
        width:auto;
        display:block;
    }

    /*==================================================
        HEADER RIGHT
    ==================================================*/

    .header-right{
    display:flex;
    align-items:center;
    margin-left:auto;
    gap:12px;
}
    

    /*==================================================
        BUTTONS
    ==================================================*/

    .btn-header{
        display:none;
    }

    .btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
		order:1;

    width:135px;
    height:42px;

    padding:0 18px;

    background:var(--primary);
    color:#fff;

    border:2px solid var(--primary);

    border-radius:25px;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:.3s;

    flex:none;
}

.btn-outline:hover{
    background:#fff;
    color:var(--primary);
}

    /*==================================================
        MOBILE MENU BUTTON
    ==================================================*/

    .mobile-menu{
    display:flex;
    order:2;
    justify-content:center;
    align-items:center;
    width:42px;
    height:42px;
    background:none;
    border:none;
    color:#2E7D32 !important;
    font-size:30px;
    cursor:pointer;
    flex:none;
}

.mobile-menu i{
    color:#2E7D32 !important;
}

    /*==================================================
    MOBILE MENU
==================================================*/

.menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    margin-top:6px;

    background:#fff;
    border-radius:10px;

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

    overflow-y:auto;
    max-height:calc(100vh - 150px);

    flex-direction:column;
    z-index:9999;
}

.menu.open{
    display:flex;
}

.menu li{
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
}

.menu a{
    display:block;

    padding:10px 18px;

    font-size:14px;
    line-height:1.3;
    font-weight:600;

    color:#333;
    text-decoration:none;

    border-bottom:1px solid #ececec;

    transition:.2s;
}

.menu li:last-child a{
    border-bottom:none;
}

.menu a:hover,
.menu a.active{
    background:#f5f7f5;
    color:var(--primary);
    padding-left:22px;
}

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

    .hero{
        padding-top:120px;
        text-align:center;
    }

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

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
    }

    .hero-image img{
        max-width:340px;
        margin:auto;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{
        width:100%;
        max-width:320px;
    }

    .hero-features{
        flex-direction:column;
        align-items:center;
        gap:15px;
    }
	
	.technology-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.technology-image{
    width:100%;
    max-width:100%;
}

.technology-image img{
    width:100%;
    height:auto;
}
	.projects-grid{
    grid-template-columns:1fr;
}
	


    /*==================================================
        GRIDS
    ==================================================*/

    .about-grid,
    .services-grid,
    .projects-grid,
    .features-grid,
    .process-grid,
    .technology-grid,
    .stats-grid,
    .contact-grid,
    .footer-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        gap:40px;
    }

    /*==================================================
        CARDS
    ==================================================*/

    .service-card,
    .feature-card,
    .project-card,
    .contact-card{
        padding:30px;
    }

    .project-card img{
        height:220px;
    }

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

    .footer{
        text-align:center;
    }

    .footer-logo{
        margin:0 auto 25px;
    }

    .footer-bottom{
        display:flex;
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .social-links{
        justify-content:center;
    }

    /*==================================================
        CONTACT SUMMARY
    ==================================================*/

    .contact-summary{
        grid-template-columns:1fr;
    }

    .contact-summary .contact-item{
        border-right:none;
        border-bottom:1px solid #e8e8e8;
    }

    .contact-summary .contact-item:last-child{
        border-bottom:none;
    }



/*==================================================
    HOME CONTACT PREVIEW - MOBILE FIX
==================================================*/

.home-page .contact-preview .contact-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:35px;
    width:100%;
    max-width:100%;
    min-width:0;
}

.home-page .contact-preview .contact-info,
.home-page .contact-preview .contact-card{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    left:auto;
    right:auto;
    transform:none;
}

.home-page .contact-preview .contact-card{
    grid-column:1;
}

.home-page .contact-preview .contact-summary{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    max-width:100%;
    min-width:0;
}

.home-page .contact-preview .contact-item{
    width:100%;
    max-width:100%;
    min-width:0;
}

.home-page .contact-preview .contact-item > div{
    width:100%;
    max-width:100%;
    min-width:0;
}

.home-page .contact-preview p,
.home-page .contact-preview li{
    max-width:100%;
    overflow-wrap:anywhere;
}
/*==================================================
    MOBILE MENU - FINAL COMPACT FIX
==================================================*/

.menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;

    margin-top:2px;
    padding:0 0 15px !important;

    flex-direction:column;
    justify-content:flex-start !important;

    height:auto !important;
    min-height:0 !important;

    /* IMPORTANTE PARA TELÉFONO REAL */
    max-height:calc(100dvh - 160px) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;

    background:#fff;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.14);

    z-index:9999;
}

.menu.open{
    display:flex;
}

.menu li{
    flex:0 0 auto !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.menu li a{
    display:flex !important;
    align-items:center;

    width:100%;
    height:38px !important;
    min-height:38px !important;

    margin:0 !important;
    padding:0 16px !important;

    font-size:13px !important;
    line-height:1.2 !important;
}

.menu li:last-child a{
    border-bottom:none;
    margin-bottom:6px !important;
}

.menu li a:hover,
.menu li a.active{
    padding-left:18px !important;
}
	}

/*====================================================

    SMALL MOBILE
    <= 576px

======================================================*/

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

    /*==================================================
        GENERAL
    ==================================================*/

    section{
        padding:60px 0;
    }

    .container{
        width:94%;
    }

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

    h2{
        font-size:1.7rem;
    }

    h3{
        font-size:1.2rem;
    }

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

    .header{
        padding:10px 0;
    }

    .navbar{
        min-height:70px;
    }

    .logo img{
        height:44px;
        width:auto;
    }

    .header-right{
        gap:8px;
    }

    /*==================================================
        BUTTONS
    ==================================================*/

    .btn-outline{
        width:120px;
        height:38px;
        font-size:12px;
        border-radius:20px;
    }

    .mobile-menu{
        width:40px;
        height:40px;
        font-size:28px;
    }

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

    .hero{
        padding-top:110px;
    }

    .hero-content h1{
        font-size:2.2rem;
    }

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

    .hero-image img{
        max-width:300px;
    }

    .hero-tag{
        font-size:.8rem;
        padding:8px 16px;
    }

    /*==================================================
        SECTION HEADER
    ==================================================*/

    .section-header{
        margin-bottom:45px;
    }

    .section-header span{
        font-size:.85rem;
    }

    /*==================================================
        CARDS
    ==================================================*/
   
    .service-card,
    .feature-card,
    .project-card,
    .step,
    .contact-card,
    .technology-item{
        padding:25px;
    }

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

    .contact-item{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .contact-item i{
        margin-bottom:10px;
    }
	
	.contact-grid{
    grid-template-columns:1fr;
    gap:20px;
}

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

    .footer{
        padding:70px 0 25px;
        text-align:center;
    }

    .footer-bottom{
        flex-direction:column;
        gap:15px;
    }

    .social-links{
        justify-content:center;
    }
/*==================================================
    ABOUT - SERVICE AREAS MOBILE FIX
==================================================*/

.about-page .service-areas{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.about-page .service-areas .container{
    width:94%;
    max-width:94%;
}

.about-page .areas-grid{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    min-width:0;
}

.about-page .area-card{
    width:100%;
    max-width:100%;
    min-width:0;

}
	



/*====================================================

PRINT

======================================================*/

@media print{

.header,

.footer,

.mobile-menu,

.btn,

.btn-outline{

display:none;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

}


/*====================================================

LANDSCAPE MOBILE

======================================================*/

@media screen and (max-height:500px) and (orientation:landscape){

.hero{

min-height:auto;

padding-top:100px;

padding-bottom:50px;

}

.hero-grid{

grid-template-columns:1fr 1fr;

}

.hero-image img{

max-width:260px;

}

}


/*====================================================

HIGH RESOLUTION

======================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

img{

image-rendering:auto;

}

}


/*====================================================

ACCESSIBILITY

======================================================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

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

.contact-summary{

    grid-template-columns:1fr;

}

.contact-summary .contact-item{

    border-right:none;

    border-bottom:1px solid #E8E8E8;

}

.contact-summary .contact-item:last-child{

    border-bottom:none;

}

}


/*====================================================

END OF FILE

Axis Solutions LLC
Responsive Stylesheet
Version 1.0

======================================================*/