/* ======================================
   LARGE DEVICES (1200px)
====================================== */

@media (max-width:1200px){

.container{
    width:92%;
}

.hero-text h1{
    font-size:48px;
}

}


/* ======================================
   TABLETS (992px)
====================================== */

@media (max-width:992px){

section{
    padding:80px 0;
}

.hero-content{
    grid-template-columns:1fr;
    text-align:center;
    gap:50px;
}

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

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

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

.hero-text h1{
    font-size:42px;
}

.nav-links{
    gap:22px;
}

}


/* ======================================
   MOBILE DEVICES (768px)
====================================== */

@media (max-width:768px){

header nav{
    height:70px;
}

.logo{
    font-size:22px;
}

.menu-toggle{
    display:block;
}

.nav-links{

    position:absolute;
    top:70px;
    left:0;

    width:100%;

    background:#fff;

    flex-direction:column;

    text-align:center;

    gap:0;

    max-height:0;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.nav-links.show{
    max-height:400px;
}

.nav-links li{
    padding:18px;
    border-bottom:1px solid #eee;
}

.hero{
    padding-top:120px;
}

.hero-text h1{
    font-size:36px;
}

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

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

.section-title{
    font-size:30px;
}

.btn{
    padding:13px 28px;
}

.card{
    padding:28px;
}

}


/* ======================================
   SMALL MOBILE (576px)
====================================== */

@media (max-width:576px){

.container{
    width:92%;
}

.hero{
    padding-top:110px;
}

.hero-text h1{
    font-size:30px;
}

.hero-text p{
    font-size:14px;
}

.section-title{
    font-size:27px;
}

.section-subtitle{
    font-size:15px;
}

.card{
    padding:24px;
}

.btn{
    display:inline-block;
    width:100%;
    text-align:center;
    margin-bottom:12px;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
}

footer{
    padding:25px 15px;
}

}


/* ======================================
   EXTRA SMALL DEVICES (400px)
====================================== */

@media (max-width:400px){

.hero-text h1{
    font-size:26px;
}

.logo{
    font-size:19px;
}

.section-title{
    font-size:24px;
}

.card{
    padding:20px;
}

}

@media(max-width:768px){

.logo-text h2{
    font-size:18px;
}

.logo-text p{
    display:none;
}

}

.footer-logo{
    flex-direction:column;
    text-align:center;
}

.footer-about{
    text-align:center;
}

/*======================================
CONTACT TABLE RESPONSIVE
======================================*/

@media (max-width:768px){

.contact-table{
    overflow-x:auto;
}

.contact-table table{
    min-width:600px;
}

}

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

@media (max-width:768px){

.footer-content{
    grid-template-columns:1fr;
    gap:35px;
    text-align:left;
}

.footer-about,
.footer-links,
.footer-contact{
    text-align:left;
}

.footer-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:15px;
}

.footer-logo img{
    width:60px;
    height:60px;
}

.footer-logo h3{
    font-size:20px;
}

.footer-logo .tagline{
    font-size:12px;
}

.footer-links ul{
    padding:0;
}

.footer-links ul li{
    margin-bottom:10px;
}

.footer-contact p{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:15px;
}

footer hr{
    margin:20px 0;
}

.copyright{
    text-align:center;
    font-size:13px;
}

}