/* ==========================================
   MOBILE VIEW (320px - 768px)
========================================== */

@media (max-width:868px){

    *{
        box-sizing:border-box;
    }

    body{
        overflow-x:hidden;
    }

    .container{
        width:100%;
        overflow:hidden;
    }

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

    .top-bar{
        display:relative;
    }

    /*====================
      NAVBAR
    ====================*/

    .navbar{
        padding:15px 20px;
        justify-content:space-between;
    }

    .logo img{
        width:150px;
    }

    .menu-toggle{
        display:block;
        font-size:24px;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        display:flex;
        flex-direction:column;
        padding:20px;
        gap:15px;
        display:none;
        box-shadow:0 8px 20px rgba(0,0,0,.1);
    }

    .nav-links.active{
        display:flex;
    }

    .call-btn{
        display:none;
    }

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

    .hero{
        padding:60px 20px;
    }

    .hero-inner{
        flex-direction:column;
        gap:40px;
    }

    .hero-copy,
    .growth-path{
        width:100%;
    }

    .hero-copy h1{
        font-size:34px;
        line-height:1.2;
    }

    .hero-copy p{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions a{
        width:100%;
        text-align:center;
    }

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

    .stats-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    /*====================
      SEARCH
    ====================*/

    .search-box{
        flex-direction:column;
    }

    .search-field,
    .search-box button{
        width:100%;
    }

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

    .services-container{
        grid-template-columns:1fr;
    }

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

    .about-container{
        flex-direction:column;
    }

    .about-visual,
    .about-copy{
        width:100%;
    }

    .about-box{
        flex-direction:column;
    }

    /*====================
      WHY US
    ====================*/

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

    /*====================
      INDUSTRIES
    ====================*/

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

    /*====================
      INTERNSHIP
    ====================*/

    .internship-container{
        grid-template-columns:1fr;
    }

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

    /*====================
      JOB CATEGORY
    ====================*/

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

    /*====================
      FEATURED CANDIDATE
    ====================*/

    .carousel-track{
        gap:20px;
    }

    .employer-card{
        min-width:100%;
    }

    /*====================
      LATEST JOB
    ====================*/

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

    .job-filter{
        flex-wrap:wrap;
        justify-content:center;
    }

    /*====================
      GALLERY
    ====================*/

    .gallery-container{
        grid-template-columns:1fr;
    }

    .gallery-info-section{
        grid-template-columns:1fr;
    }

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

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

    .contact-form-row{
        flex-direction:column;
    }

    .contact-input,
    .contact-select{
        width:100%;
    }

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

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

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

}