/* =========================================================
   RESPONSIVE.CSS
   PART 1 OF 3

   DESKTOP
   LAPTOP
   HERO
   HEADER
========================================================= */


/* =========================================================
   1600px
========================================================= */

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

    .container{

        width:min(96%,1500px);

    }

}


/* =========================================================
   1440px
========================================================= */

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

    .container{

        width:min(97%,1380px);

    }

    .logo img{

        width:90px;

        min-width:90px;

    }

    .logo-text span{

        font-size:2.5rem;

    }

    .logo-text small{

        font-size:.95rem;

        letter-spacing:5px;

    }

    .logo-text em{

        font-size:.75rem;

    }

    .nav-links{

        gap:22px;

    }

    .nav-links a{

        font-size:.85rem;

    }

    .header-actions{

        gap:10px;

    }

    .login-btn{

        min-width:100px;

        height:42px;

    }

    .join-btn{

        min-width:130px;

        height:42px;

    }

    .hero-home{

        padding:50px 0 45px;

    }

    .hero-home-container{

        grid-template-columns:
            minmax(420px,520px)
            minmax(520px,1fr);

        gap:40px;

    }

    .hero-home-left h1{

        font-size:4.2rem;

        line-height:1;

        margin-bottom:28px;

    }

    .hero-home-left p{

        font-size:1.05rem;

        line-height:1.8;

    }

    .hero-home-right img{

        max-width:860px;

    }

}


/* =========================================================
   1366px
========================================================= */

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

    .container{

        width:97%;

    }

    .nav-container{

        min-height:92px;

        gap:18px;

    }

    .logo{

        gap:12px;

    }

    .logo img{

        width:80px;

        min-width:80px;

    }

    .logo-text span{

        font-size:2.1rem;

    }

    .logo-text small{

        font-size:.82rem;

        letter-spacing:4px;

    }

    .logo-text em{

        font-size:.70rem;

    }

    .nav-links{

        gap:16px;

    }

    .nav-links a{

        font-size:.78rem;

    }

    .search-btn{

        width:36px;

        height:36px;

    }

    .login-btn{

        min-width:90px;

        height:38px;

        font-size:.75rem;

    }

    .join-btn{

        min-width:115px;

        height:38px;

        font-size:.75rem;

    }

    .hero-home-container{

        grid-template-columns:
            minmax(400px,500px)
            minmax(500px,1fr);

        gap:35px;

    }

    .hero-home-left h1{

        font-size:3.8rem;

    }

    .hero-home-left p{

        font-size:1rem;

    }

    .hero-home-right img{

        max-width:760px;

    }

}


/* =========================================================
   1280px
   CRITICAL LAPTOP
========================================================= */

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

    .container{

        width:98%;

    }

    .nav-container{

        min-height:84px;

        gap:12px;

    }

    .logo{

        gap:10px;

    }

    .logo img{

        width:72px;

        min-width:72px;

    }

    .logo-text span{

        font-size:1.8rem;

    }

    .logo-text small{

        font-size:.72rem;

        letter-spacing:3px;

    }

    .logo-text em{

        display:none;

    }

    .navigation{

        margin-left:auto;

    }

    .nav-links{

        gap:12px;

    }

    .nav-links a{

        font-size:.72rem;

        font-weight:600;

    }

    .header-actions{

        gap:8px;

    }

    .search-btn{

        width:32px;

        height:32px;

    }

    .login-btn{

        min-width:78px;

        height:34px;

        font-size:.70rem;

    }

    .join-btn{

        min-width:98px;

        height:34px;

        font-size:.70rem;

    }

    .hero-home{

        padding:35px 0 35px;

    }

    .hero-home-container{

        grid-template-columns:
            minmax(450px,1fr)
            minmax(500px,650px);

        gap:25px;

        align-items:center;

    }

    .hero-home-left h1{

        font-size:3.3rem;

        line-height:1;

        margin-bottom:22px;

    }

    .hero-home-left p{

        font-size:.95rem;

        line-height:1.8;

        margin-bottom:24px;

    }

    .hero-home-right{

        justify-content:flex-end;

    }

    .hero-home-right img{

        width:100%;

        max-width:650px;

    }

    .btn-green,
    .btn-outline{

        min-height:48px;

        padding:0 22px;

        font-size:.82rem;

    }

}
/* =========================================================
   RESPONSIVE.CSS
   PART 2 OF 3

   TABLETS
   MOBILE
   GRID REFLOW

   NO SQUEEZING
   NO SHRINKING

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


/* =========================================================
   1100px
   TABLET LANDSCAPE
========================================================= */

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

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

    .navigation{

        display:none !important;

    }

    .header-actions{

        display:none !important;

    }

    .mobile-toggle{

        display:flex !important;

        align-items:center;

        justify-content:center;

        margin-left:auto;

    }

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

    .hero-home{

        padding:50px 0;

    }

    .hero-home-container{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-home-left{

        text-align:center;

        max-width:900px;

        margin:auto;

    }

    .hero-home-left h1{

        font-size:3.4rem;

    }

    .hero-home-left p{

        max-width:760px;

        margin:0 auto 24px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-home-right{

        justify-content:center;

    }

    .hero-home-right img{

        width:100%;

        max-width:760px;

    }

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

    .stats-grid{

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

        gap:20px;

    }

    /* =====================================
       PANELS
    ===================================== */

    .home-panels-grid{

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

        gap:24px;

    }

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

    .grid-5{

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

    }

    .grid-4{

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

    }

    .grid-3{

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

    }

}


/* =========================================================
   900px
   TABLET PORTRAIT
========================================================= */

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

    .container{

        width:95%;

    }

    .nav-container{

        min-height:74px;

    }

    .logo img{

        width:68px;

        min-width:68px;

    }

    .logo-text span{

        font-size:1.7rem;

    }

    .logo-text small{

        font-size:.72rem;

    }

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

    .hero-home{

        padding:40px 0;

    }

    .hero-home-left h1{

        font-size:2.8rem;

    }

    .hero-home-left p{

        font-size:.95rem;

    }

    .hero-home-right img{

        max-width:650px;

    }

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

    .stats-grid{

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

        gap:18px;

    }

    /* =====================================
       PANELS
    ===================================== */

    .home-panels-grid{

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

        gap:20px;

    }

    /* =====================================
       GENERIC
    ===================================== */

    .grid-5{

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

    }

    .grid-4{

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

    }

    .grid-3{

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

    }

    .grid-2{

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   768px
   LARGE PHONES
========================================================= */

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

    .container{

        width:94%;

    }

    .nav-container{

        min-height:70px;

    }

    .logo{

        gap:8px;

    }

    .logo img{

        width:58px;

        min-width:58px;

    }

    .logo-text span{

        font-size:1.35rem;

    }

    .logo-text small{

        font-size:.60rem;

    }

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

    .hero-home{

        padding:32px 0;

    }

    .hero-home-left h1{

        font-size:2.2rem;

        line-height:1.05;

    }

    .hero-home-left p{

        font-size:.9rem;

        line-height:1.7;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:12px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

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

    .stats-grid{

        grid-template-columns:1fr;

    }

    /* =====================================
       PANELS
    ===================================== */

    .home-panels-grid{

        grid-template-columns:1fr;

    }

    /* =====================================
       GENERIC
    ===================================== */

    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2{

        grid-template-columns:1fr;

    }

}


/* =========================================================
   600px
========================================================= */

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

    .logo img{

        width:52px;

        min-width:52px;

    }

    .logo-text span{

        font-size:1.15rem;

    }

    .logo-text small{

        display:none;

    }

    .hero-home-left h1{

        font-size:1.9rem;

    }

    .hero-home-left p{

        font-size:.85rem;

    }

    .stat-card{

        padding:24px 18px;

    }

    .panel-card{

        padding:22px 18px;

    }

}


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

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

    .container{

        width:92%;

    }

    .hero-home{

        padding:24px 0;

    }

    .hero-home-left h1{

        font-size:1.7rem;

    }

    .hero-home-left p{

        font-size:.82rem;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:none;

    }

    .stats-grid{

        gap:14px;

    }

    .home-panels-grid{

        gap:16px;

    }

}
/* =========================================================
   RESPONSIVE.CSS
   PART 3 OF 3

   FOOTER
   HAMBURGER
   MOBILE MENU

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


/* =========================================================
   HAMBURGER
========================================================= */

.mobile-toggle{

    display:none;

    width:42px;

    height:42px;

    padding:0;

    margin-left:auto;

    background:none;

    border:none;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    z-index:100001;

}

.mobile-toggle span{

    display:block;

    width:28px;

    height:3px;

    border-radius:3px;

    background:#0B4EA2;

    transition:.3s ease;

}

.mobile-toggle.active span:nth-child(1){

    transform:
        rotate(45deg)
        translate(6px,6px);

}

.mobile-toggle.active span:nth-child(2){

    opacity:0;

}

.mobile-toggle.active span:nth-child(3){

    transform:
        rotate(-45deg)
        translate(6px,-6px);

}


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

.mobile-menu{

    position:fixed;

    top:85px;

    left:0;

    width:100%;

    display:none;

    flex-direction:column;

    background:#FFFFFF;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

    z-index:99999;

}

.mobile-menu.active{

    display:flex;

}

.mobile-menu a{

    display:block;

    padding:16px 24px;

    border-bottom:1px solid #E5E7EB;

    color:#111827;

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

}

.mobile-menu a:hover{

    background:#F8FAFC;

    color:var(--pemexa-green);

}


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

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

    .footer-top{

        padding:30px 0;

    }

    .footer-top-grid{

        display:grid;

        grid-template-columns:

            1.5fr
            1fr
            1fr
            1fr
            1fr
            1.35fr;

        gap:22px;

        align-items:start;

    }

    .footer-brand{

        gap:14px;

    }

    .footer-brand img{

        width:90px;

        min-width:90px;

        height:auto;

    }

    .footer-brand h3{

        font-size:.88rem;

        line-height:1.2;

        margin-bottom:10px;

    }

    .footer-brand p{

        font-size:.78rem;

        line-height:1.45;

        margin-bottom:10px;

    }

    .footer-top h4{

        font-size:.86rem;

        margin-bottom:12px;

    }

    .footer-top a{

        font-size:.76rem;

        line-height:1.45;

        margin-bottom:5px;

    }

	/* =====================================
	   NEWSLETTER
	===================================== */

	.newsletter-text{

		font-size:.62rem;

		line-height:1.35;

		max-width:180px;

		margin-bottom:10px;

	}

	.newsletter-form{

		width:100%;

		max-width:180px;

	}

	.newsletter-form input{

		height:30px;

		font-size:.65rem;

		padding:0 10px;

	}

	.newsletter-form button{

		width:68px;

		height:30px;

		font-size:.62rem;

		font-weight:700;

	}

    /* SOCIALS */

    .social-links{

        gap:8px;

    }

    .social-links a{

        width:22px;

        height:22px;

        min-width:22px;

    }

    .social-links i{

        font-size:.95rem;

    }

    /* FOOTER BOTTOM */

    .footer-bottom{

        padding:12px 0;

    }

    .footer-bottom-content{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:10px;

    }

    .footer-bottom-content p{

        font-size:.78rem;

    }

    .footer-bottom-links{

        gap:10px;

    }

    .footer-bottom-links a{

        font-size:.78rem;

    }

}


/* =========================================================
   TABLET
========================================================= */

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

    .footer-top-grid{

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

        gap:28px;

    }

    .footer-brand{

        grid-column:1 / -1;

        justify-content:center;

        text-align:center;

    }

    .footer-brand-content{

        align-items:center;

    }

    .footer-brand img{

        width:100px;

        min-width:100px;

    }

    .social-links{

        justify-content:center;

    }

    .newsletter-form{

        max-width:260px;

    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

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

    .footer-top-grid{

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

        gap:30px;

    }

    .footer-top{

        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

        gap:12px;

    }

}


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

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

    .footer-top{

        padding:32px 0;

    }

    .footer-top-grid{

        grid-template-columns:1fr;

        gap:24px;

        text-align:center;

    }

    .footer-brand{

        justify-content:center;

        text-align:center;

    }

    .footer-brand-content{

        align-items:center;

    }

    .footer-brand img{

        width:110px;

        min-width:110px;

    }

    .newsletter-text{

        max-width:none;

    }

    .newsletter-form{

        max-width:360px;

        margin:auto;

    }

    .social-links{

        justify-content:center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

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

    .footer-brand{

        flex-direction:column;

        align-items:center;

    }

    .newsletter-form{

        display:flex;

        flex-direction:column;

        gap:10px;

    }

    .newsletter-form input{

        width:100%;

        border-radius:4px;

    }

    .newsletter-form button{

        width:100%;

        border-radius:4px;

    }

    .footer-bottom-links{

        flex-wrap:wrap;

        justify-content:center;

    }

}