/* SIZE 320 - 568 pixel */
@media only screen and (min-width: 320px) and (max-width: 1024px){

    .banner-info h1{
        font-size: 2rem;
        letter-spacing: 5px;
    }
    .banner-info span{
        color: #A9D65C;
    }
    .banner-info p{
        font-size: 1rem;
        line-height: 27px;
    }
    .banner-button button{
        padding: 10px 20px;
    }
    .banner-button button > a{
        font-size: 1rem;
    }
    .service-title h1{
        font-size: 2rem;
        letter-spacing: 5px;
    }
    .service-title h3{
        font-size: 0.8rem;
        letter-spacing: 5px;
        margin-bottom: 20px;
    }
    .carousel-card h5{
        font-size: 1rem;
        font-weight: 700;
    }
    .about-info h1{
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 10px;
    }
    .about-info p{
        font-size: 1rem;
    }
    .social-media i{
        font-size: 1.5rem;
    }
    .learn-button button{
        margin-bottom: 5px;
        padding: 8px 20px;
    }
    .learn-button button > a{
        font-size: 1rem;
    }

    .contact-title h1{
        font-size: 2.5rem;
    }
    .contact-detail{
        margin: 15px 15px;
        padding: 20px;
    }
    .contact-detail i{
        font-size: 1rem;
    }
    .contact-detail h4{
        font-size: 1.2rem;
    }
    .contact-detail p{
        font-size: 0.5rem;
    }
}