/* ==========================================================
   CV. MEUTUAH RAYA
   RESPONSIVE STYLESHEET
========================================================== */


/* ==========================================================
   DESKTOP BESAR
========================================================== */

@media (max-width:1400px){

.container{

    max-width:1140px;

}

}


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

@media (max-width:1200px){

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:18px;

}

.section{

    padding:80px 0;

}

}


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

@media (max-width:992px){

#mainNavbar{

    background:#0d6efd;

}

.navbar-collapse{

    background:#0d6efd;

    margin-top:15px;

    border-radius:10px;

    padding:15px;

}

.navbar-nav .nav-item{

    margin:5px 0;

}

.hero{

    min-height:90vh;

}

.hero-content{

    padding:30px;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.hero-social{

    display:none;

}

.page-header{

    padding-top:130px;

    padding-bottom:60px;

}

.section{

    padding:70px 0;

}

.section-title{

    margin-bottom:40px;

}

}


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

@media (max-width:768px){

.hero{

    min-height:80vh;

}

.hero-content h1{

    font-size:34px;

}

.hero-content p{

    font-size:17px;

}

.hero .btn{

    width:100%;

    margin-bottom:10px;

}

.page-header h1{

    font-size:36px;

}

.section{

    padding:60px 0;

}

.section-title h2{

    font-size:30px;

}

.card{

    margin-bottom:20px;

}

.table{

    font-size:14px;

}

}


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

@media (max-width:576px){

.navbar-brand{

    font-size:18px;

}

.navbar-brand img{

    width:38px;

}

.hero{

    min-height:75vh;

}

.hero-content{

    padding:20px;

}

.hero-content h1{

    font-size:28px;

    line-height:1.4;

}

.hero-content p{

    font-size:15px;

}

.page-header{

    padding-top:120px;

    padding-bottom:50px;

}

.page-header h1{

    font-size:28px;

}

.section{

    padding:50px 0;

}

.section-title h2{

    font-size:26px;

}

.section-title p{

    font-size:15px;

}

.btn{

    width:100%;

}

.card-body{

    padding:20px;

}

.table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

.cover{

    height:220px !important;

}

.gallery img{

    height:150px !important;

}

footer{

    text-align:center;

}

}


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

@media (max-width:400px){

.hero-content h1{

    font-size:24px;

}

.hero-content p{

    font-size:14px;

}

.section-title h2{

    font-size:22px;

}

.navbar-brand{

    font-size:16px;

}

.navbar-brand img{

    width:34px;

}

}


/* ==========================================================
   IMAGE RESPONSIVE
========================================================== */

img{

    max-width:100%;

    height:auto;

}


/* ==========================================================
   IFRAME RESPONSIVE
========================================================== */

iframe{

    width:100%;

}


/* ==========================================================
   FORM RESPONSIVE
========================================================== */

input,
textarea,
select{

    width:100%;

}


/* ==========================================================
   BUTTON RESPONSIVE
========================================================== */

.btn{

    white-space:normal;

}


/* ==========================================================
   END RESPONSIVE
========================================================== */