/* ==========================================
   RESPONSIVE.CSS
   Website Syatiroh
==========================================*/


/* ==========================================
   LAPTOP
   Max Width : 1200px
==========================================*/

@media (max-width:1200px){

.container{

    width:95%;

}

.hero-text h1{

    font-size:48px;

}

.section-title h2{

    font-size:34px;

}

}


/* ==========================================
   TABLET LANDSCAPE
   Max Width : 992px
==========================================*/

@media (max-width:992px){

.hero-content{

    grid-template-columns:1fr;
    text-align:center;

}

.hero-button{

    justify-content:center;

}

.hero-image{

    margin-top:40px;

}

.about-grid{

    grid-template-columns:1fr;

}

.feature-grid{

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

}

.subject-grid{

    grid-template-columns:1fr;

}

.price-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:32px;

}

.page-header h1{

    font-size:40px;

}

}


/* ==========================================
   TABLET
   Max Width : 768px
==========================================*/

@media (max-width:768px){

/* NAVBAR */

.menu-toggle{

    display:block;

}

.btn-nav{

    display:none;

}

nav{

    position:fixed;

    top:80px;

    right:-100%;

    width:280px;

    height:calc(100vh - 80px);

    background:#fff;

    box-shadow:-5px 0 20px rgba(0,0,0,.1);

    transition:.4s;

    padding-top:30px;

}

nav.active{

    right:0;

}

nav ul{

    flex-direction:column;

    gap:0;

}

nav ul li{

    border-bottom:1px solid #eee;

}

nav ul li a{

    display:block;

    padding:18px 25px;

}

/* HERO */

.hero{

    padding:60px 0;

}

.hero-text h1{

    font-size:40px;

}

.hero-text p{

    font-size:16px;

}

.hero-button{

    flex-direction:column;

    align-items:center;

}

.btn-secondary{

    margin-left:0;

}

/* SECTION */

section{

    padding:60px 0;

}

.page-header{

    padding:90px 0;

}

.page-header h1{

    font-size:36px;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:30px;

}

.card{

    padding:30px;

}

.subject-card{

    padding:30px;

}

.price-card{

    padding:35px;

}

.price-card h1{

    font-size:40px;

}

.cta h2{

    font-size:32px;

}

footer{

    padding:50px 0;

}

.social{

    flex-direction:column;

    gap:15px;

}

}


/* ==========================================
   MOBILE
   Max Width : 576px
==========================================*/

@media (max-width:576px){

.container{

    width:92%;

}

.hero-text h1{

    font-size:32px;

}

.hero-text p{

    font-size:15px;

}

.badge{

    font-size:12px;

}

.page-header h1{

    font-size:30px;

}

.section-title h2{

    font-size:26px;

}

.feature-grid{

    grid-template-columns:1fr;

}

.subject-grid{

    grid-template-columns:1fr;

}

.price-grid{

    grid-template-columns:1fr;

}

.about-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.card{

    padding:25px;

}

.subject-card{

    padding:25px;

}

.price-card{

    padding:25px;

}

.price-card h1{

    font-size:34px;

}

.cta h2{

    font-size:28px;

}

.cta p{

    font-size:15px;

}

.btn-primary,

.btn-secondary,

.btn-price{

    width:100%;
    text-align:center;

}

.contact-form input,

.contact-form textarea,

.contact-form select{

    font-size:14px;

}

.contact-form button{

    width:100%;

}

.floating{

    width:58px;
    height:58px;
    font-size:30px;
    right:18px;
    bottom:18px;

}

}


/* ==========================================
   SMALL MOBILE
   Max Width : 400px
==========================================*/

@media (max-width:400px){

.logo h2{

    font-size:26px;

}

.hero-text h1{

    font-size:28px;

}

.section-title h2{

    font-size:22px;

}

.page-header h1{

    font-size:26px;

}

.btn-primary,

.btn-secondary,

.btn-price{

    padding:14px 20px;

}

.card{

    padding:20px;

}

.subject-card{

    padding:20px;

}

.price-card{

    padding:20px;

}

.price-card h3{

    font-size:24px;

}

.price-card h1{

    font-size:30px;

}

footer h2{

    font-size:28px;

}

footer p{

    font-size:14px;

}

}


/* ==========================================
   EXTRA LARGE
==========================================*/

@media (min-width:1400px){

.container{

    max-width:1320px;

}

.hero-text h1{

    font-size:62px;

}

.section-title h2{

    font-size:44px;

}

}