@media(max-width:768px){

    .navbar{

        width:92%;

        padding:18px 25px;

        position:relative;

    }

    .logo img{

        width:85px;

    }

    .logo-text h2{

        font-size:22px;

    }

    .logo-text span{

        font-size:13px;

    }

    .menu-toggle{

        display:block;

    }

    .desktop-btn{

        display:none;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#0b2236;

        border-radius:20px;

        margin-top:15px;

        padding:30px;

        display:none;

        flex-direction:column;

        gap:20px;

        text-align:center;

        box-shadow:0 20px 50px rgba(0,0,0,.35);

    }

    .nav-links.active{

        display:flex;

    }

    .mobile-button{

        display:block;

    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding-top:160px;

        gap:40px;

    }

    .hero-content{

        order:1;

    }

    .hero-image{

        order:2;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        margin:auto auto 35px;

        max-width:330px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-image img{

        width:90%;

    }

}

/* ==========================================
   ABOUT PAGE RESPONSIVE
========================================== */

/* ===========================
   TABLETS
=========================== */

@media (max-width:992px){

    .about-hero{
        width:92%;
        padding:170px 0 40px;
    }

    .about-hero h1{
        font-size:46px;
    }

    .about-section{
        width:92%;
        grid-template-columns:1fr;
        gap:50px;
        text-align:center;
    }

    .about-image{
        order:1;
    }

    .about-text{
        order:2;
    }

    .about-text h2{
        font-size:42px;
    }

    .check-list{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .values,
    .why-grid{
        grid-template-columns:1fr;
    }

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

}


/* ===========================
   PHONES
=========================== */

@media (max-width:768px){

    /* ---------------- NAVBAR ---------------- */

    .navbar{

        width:92%;
        padding:15px 20px;

        display:flex;
        justify-content:space-between;
        align-items:center;

        position:relative;

    }

    .logo{

        display:flex;
        align-items:center;
        gap:10px;

    }

    .logo img{

        width:55px;

    }

    .logo-text h2{

        font-size:18px;

        margin-bottom:2px;

    }

    .logo-text span{

        font-size:10px;

    }

    .desktop-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

        font-size:28px;

        color:#fff;

        cursor:pointer;

    }

    .nav-links{

        display:none;

        position:absolute;

        top:85px;

        left:0;

        width:100%;

        background:#10263d;

        border-radius:20px;

        padding:25px;

        flex-direction:column;

        align-items:center;

        gap:18px;

        border:1px solid rgba(255,255,255,.08);

        backdrop-filter:blur(20px);

        box-shadow:0 20px 40px rgba(0,0,0,.35);

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        list-style:none;

    }

    .nav-links a{

        font-size:17px;

    }

    .mobile-button{

        display:block;

        width:100%;

    }

    .mobile-button .btn-nav{

        width:100%;

        display:block;

        text-align:center;

        margin-top:10px;

    }

    /* ---------------- HERO ---------------- */

    .about-hero{

        width:92%;

        padding:140px 0 30px;

    }

    .about-hero h1{

        font-size:36px;

        line-height:1.2;

    }

    .about-hero p{

        font-size:15px;

        max-width:330px;

        margin:auto;

    }

    /* ---------------- ABOUT ---------------- */

    .about-section{

        width:92%;

        margin:30px auto 80px;

        grid-template-columns:1fr;

        gap:40px;

    }

    .about-image img{

        width:100%;

        border-radius:25px;

    }

    .about-text{

        text-align:center;

    }

    .about-text h2{

        font-size:34px;

    }

    .about-text p{

        font-size:15px;

        line-height:1.8;

    }

    .check-list{

        grid-template-columns:1fr;

        gap:15px;

        max-width:280px;

        margin:auto;

        text-align:left;

    }

    .value-card,
    .why-card{

        padding:30px;

    }

    .industry-grid{

        grid-template-columns:1fr;

    }

    .cta{

        width:92%;

        padding:45px 25px;

    }

    .cta h2{

        font-size:34px;

    }

}


/* ===========================
   SMALL PHONES
=========================== */

@media (max-width:480px){

    .navbar{

        padding:15px;

    }

    .logo img{

        width:50px;

    }

    .logo-text h2{

        font-size:16px;

    }

    .logo-text span{

        font-size:9px;

    }

    .about-hero{

        padding-top:130px;

    }

    .about-hero h1{

        font-size:30px;

    }

    .about-text h2{

        font-size:28px;

    }

    .subtitle{

        font-size:11px;

        letter-spacing:2px;

    }

    .cta h2{

        font-size:30px;

    }

}