@media screen and (max-width :922px) {


}

@media screen and (max-width :576px) {
  
    /* HERO SECTION */
    
    #hero {
        height: 100vh;
    }

    .hero-tagline h1 {
        margin-top: 5em;
        line-height: 1.5em;
        font-size: 1.5rem;
        height: auto;
        
    }               


    .hero-tagline P {
        font-size: 1rem;
        width: 12em;
        line-height: 1.5em;
        margin-bottom: 15px;
        margin-top: 15  px;
    } 

    .button-lg-primary {
        width: 150px;
        height: 45px;
        border: none;
        background-color: #fff;
        font-weight: 500;
        font-size: 1.4rem;
        color: var(--pr-color);
    }

    .arrow-heros {
        width: 35px;
        height: 40px;
        margin-bottom: 10px;
    }

    .img-hero{
        width: 55vw;
        height: 45vh;
        margin-bottom: 1.5em;
    }

    .accent-img {
        width: 50vw;
        height: 10%;
        
    }


    /* LAYANAN KAMI SECTION */
    
    .card-layanan {
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        

    }

    h2 {
        font-size: 2.5rem;
        color: var(--pr-color);
        font-weight: 500;
    }
    
    .sub-layanan {
        
        font-size: 1.25rem;
        font-weight: 700;
        color: #293C79;
    }

    /* RUTE SECTION */

    
    h5 {
        font-weight: 700;
        color: #fff;
        font-size: 2.3rem;
    }
    /* Untuk card rute perjalanan */
   #rute {
    width: 100%;
    height: 86vh;
   }
   
    .card-rute {
        text-align: center;
        padding: 10px 10px 10px 10px;
        height: 4em;

        background-color: var(--pr-color);
        border-radius: 10px;
    }
    

    .card-rute p {
        font-weight: 500;
        font-size: 1em;
        color: #fff;
    }

    /* hover card rute */
    .card-rute:hover {
        padding: 10px 10px 10px 10px;
        height: 4em;
        border-radius: 5px;
        background-color: #fff;
        border-radius: 10px; 
    }
    
    .card-rute:hover p {
        font-weight: 500;
        font-size: 1em;
        color: #000;
      
    }

    /* Card Armada */
    
    #armada {
        width: 100%;
        height: 85vh;
    }

    #armada h5 {
        font-size: 2.3rem;
        font-weight: 700;
        color: var(--pr-color);
    }

    /* CARD CONTACT */

    #contact-person {
        height: auto;
    }
    #contact-person .container {
        padding: 50px 0 120px 0;
    }


    #contact-person h3 {
        font-size: 2.4rem;
        width: 100%;
        height: 190px;
    }

    #contact-person span {
        font-size: 2rem;
        
    }
    
    #contact-person p {
        font-size: 1.8rem;
        margin-top: 10px;
    
    }
    
    .card-contact h2{
        font-size: 2rem;
        margin-bottom: 1.5em;
        line-height: 1em;
    }
            
    .form-control {
        height: auto;
        border-radius: 9;
    }   

    .button-kontak {
        
        height: auto;
        background: #043FB7;
        font-size: 2rem;
        font-weight: 700;
        border: none;
        border-radius: 9px;
    }

    .alert {
        height: 50px;   
        font-size: 10px;
        align-items: center;
    }

    /* FOOTER */



    .footernav a {
        font-size: 1rem;
        margin-bottom: 2em;

    }

    .carousel {
        display: flex;
        flex-wrap: nowrap;
        transition: transform 0.5s ease; /* Menambahkan transisi halus pada transformasi */
    }
    

    
}

/* @media screen and (max-width :369px) {
    /* .button-kontak {
        
        background: #043FB7;
        font-size: 30px;
        font-weight: 700;   
        border: none;
    }

    footer {
        width: 100%;
        height: 200px;
        background: #000;
    }
    

    footer a {
        text-decoration: none;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
    } */
    /* #hero { 
        background: brown;
    }
    
/* } */