/*=====================================
LAPTOP
=====================================*/

@media(max-width:1200px){

.container{

    width:92%;

}

.grid{

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

}

.values-grid{

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

}

.stats-grid{

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

}

.facility-grid{

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

}

}

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

@media(max-width:992px){

.section-title{

    font-size:42px;

}

.hero .container,
.about-page .container,
.contact-page .container{

    display:flex;

    flex-direction:column;

}

.hero-image{

    margin-top:50px;

}

.grid{

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

}

.featured-grid{

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

}

.export-grid{

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

}

.blog-grid{

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

}

.vision-grid{

    grid-template-columns:1fr;

}

.values-grid{

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

}

.stats-grid{

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

}

.facility-grid{

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

}

}

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

@media(max-width:768px){

.container{

    width:92%;

}

.header{

    padding:20px;

}

.navbar{

    display:none;

}

.menu-toggle{

    display:block;

    font-size:32px;

    cursor:pointer;
    
    color:#fff;

}

.hero{

    padding:140px 0 80px;

}

.hero .container{

    display:flex;

    flex-direction:column;

    text-align:center;

}

.hero-content h1{

    font-size:52px;

}

.hero-content p{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-image img{

    width:100%;

}

.section-title{

    font-size:36px;

}

.grid{

    grid-template-columns:1fr;

}

.featured-grid{

    grid-template-columns:1fr;

}

.export-grid{

    grid-template-columns:1fr;

}

.blog-grid{

    grid-template-columns:1fr;

}

.values-grid{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;

}

.facility-grid{

    grid-template-columns:1fr;

}

.animal-card{

    display:block;

}

.animal-card img{

    width:100%;

    height:250px;

}

.contact-page .container{

    display:block;

}

.contact-info{

    margin-bottom:30px;

}

.footer{

    text-align:center;

}

}

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

@media(max-width:480px){

.hero-content h1{

    font-size:42px;

}

.section-title{

    font-size:30px;

}

.btn{

    width:100%;

    text-align:center;

}

.hero-buttons{

    flex-direction:column;

}

}

@media (max-width:768px){

.header{

    height:80px;

}

.menu-toggle{

    display:block;

    font-size:32px;

    cursor:pointer;

    color:#fff;

    z-index:1001;

}

.navbar{

    position:fixed;

    top:0;
    right:-100%;

    width:280px;
    height:100vh;

    background:#111;

    display:flex;

    justify-content:center;
    align-items:center;

    transition:.35s;

    z-index:1000;

}

.navbar.active{

    right:0;

}

.nav-menu{

    flex-direction:column;

    gap:30px;

}

.nav-menu a{

    font-size:20px;

}

}

/*=====================================
MKA V2 MOBILE FIX
=====================================*/

@media (max-width:768px){

html,
body{
    overflow-x:hidden;
}

.container{
    width:92%;
}

/* HEADER */

.header{
    height:75px;
    padding:0;
}

.logo img{
    width:80px;
}

/* HERO */

.hero{
    min-height:auto;
    padding:130px 0 70px;
}

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

.hero-content{
    text-align:center;
}

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

.hero p{
    font-size:16px;
    max-width:100%;
}

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

.hero-image{
    margin-top:20px;
}

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

/* ABOUT */

.about .container{
    flex-direction:column;
    gap:40px;
}

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

/* CATEGORY */

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

.category-card{
    height:320px;
}

/* WHY */

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

/* FEATURED */

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

/* EXPORT */

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

/* BLOG */

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

/* VISION */

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

/* VALUES */

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

/* FACILITY */

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

/* STATS */

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

/* CONTACT */

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

/* SECTION TITLE */

.section-title{
    font-size:34px;
    line-height:1.3;
}

}