/* ==========================================
   responsive.css
   Cargo Solution Indonesia
========================================== */

/* ==============================
   Large Device (1200px)
============================== */

@media (max-width:1200px){

.container{
    max-width:95%;
}

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

.page-header h1{
    font-size:42px;
}

}

/* ==============================
   Laptop (992px)
============================== */

@media (max-width:992px){

.navbar-brand{
    font-size:22px;
}

.navbar-nav{
    margin-top:15px;
}

.hero{

    min-height:75vh;
    text-align:center;
    padding:80px 0;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:18px;

}

.page-header{

    padding:80px 0;

}

.page-header h1{

    font-size:36px;

}

.section-title{

    font-size:32px;

}

.service-card{

    margin-bottom:25px;

}

.counter{

    text-align:center;

}

.counter .col-md-3{

    margin-bottom:25px;

}

.footer{

    text-align:center;

}

}

/* ==============================
   Tablet (768px)
============================== */

@media (max-width:768px){

body{

    font-size:15px;

}

.hero{

    min-height:65vh;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.page-header{

    padding:70px 0;

}

.page-header h1{

    font-size:30px;

}

section{

    padding:50px 0;

}

.section-title{

    font-size:28px;

}

.card{

    margin-bottom:20px;

}

.service-card{

    padding:25px;

}

.service-card i{

    font-size:45px;

}

.gallery-card img{

    height:220px;

}

.timeline{

    margin-top:30px;

}

iframe{

    height:300px;

}

.footer{

    padding:40px 0;

}

}

/* ==============================
   Smartphone (576px)
============================== */

@media (max-width:576px){

.navbar-brand{

    font-size:20px;

}

.hero{

    padding:60px 0;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.hero .btn{

    width:100%;
    margin-bottom:10px;

}

.page-header{

    padding:60px 0;

}

.page-header h1{

    font-size:26px;

}

.section-title{

    font-size:24px;

}

h2{

    font-size:24px;

}

h3{

    font-size:22px;

}

h4{

    font-size:20px;

}

.table{

    font-size:14px;

}

.table th{

    width:40%;

}

.contact-icon{

    width:50px;
    height:50px;
    font-size:20px;

}

.gallery-card img{

    height:200px;

}

.whatsapp{

    width:55px;
    height:55px;
    right:15px;
    bottom:15px;
    font-size:24px;

}

.footer{

    font-size:14px;

}

}

/* ==============================
   Small Smartphone (420px)
============================== */

@media (max-width:420px){

.hero{

    min-height:55vh;

}

.hero h1{

    font-size:24px;

}

.hero p{

    font-size:14px;

}

.page-header h1{

    font-size:22px;

}

.section-title{

    font-size:22px;

}

.btn{

    width:100%;

}

.form-control,
.form-select{

    font-size:14px;

}

.gallery-card img{

    height:180px;

}

.card{

    border-radius:12px;

}

.footer{

    padding:30px 0;

}

}

/* ==============================
   Extra Small Device (360px)
============================== */

@media (max-width:360px){

.hero h1{

    font-size:20px;

}

.hero p{

    font-size:13px;

}

.navbar-brand{

    font-size:18px;

}

.section-title{

    font-size:20px;

}

.card{

    padding:15px;

}

.table{

    font-size:13px;

}

.whatsapp{

    width:50px;
    height:50px;

}

}