/* =========================
   RESPONSIVE CSS
========================= */


/* Large Tablets / Small Laptop */
@media (max-width: 1200px) {


.hero-section h1 {

    font-size:48px;

}


.counter-box {

    gap:25px;

}


.process-box {

    margin-bottom:20px;

}


}





/* Tablets */
@media (max-width: 992px) {


section {

    padding:60px 0;

}


/* Header */

.navbar-collapse {

    background:white;
    padding:20px;
    margin-top:15px;
    border-radius:10px;

}


.nav-link {

    padding:10px 0;

}


/* Hero */

.hero-section {

    padding-top:130px;

}


.hero-section h1 {

    font-size:42px;

}


.hero-image {

    margin-top:40px;

}


.counter-box {

    margin-top:30px;

}


/* About */

.about-section img {

    margin-bottom:40px;

}


/* Services */

.service-card {

    margin-bottom:25px;

}


/* Portfolio */

.portfolio-card img {

    height:260px;

}



/* Pricing */

.price-card {

    margin-bottom:30px;

}



/* Contact */

.contact-info {

    margin-top:40px;

}


}





/* Mobile */
@media (max-width: 768px) {


.hero-section h1 {

    font-size:34px;
    text-align:center;

}


.hero-section p {

    text-align:center;
    font-size:16px;

}



.hero-buttons {

    text-align:center;

}


.hero-buttons .btn {

    display:block;
    width:100%;
    margin:10px 0 !important;

}



.counter-box {

    flex-direction:column;
    text-align:center;
    gap:15px;

}



.section-title h2 {

    font-size:32px;

}



.feature-card,
.service-card {

    margin-bottom:20px;

}



.process-box {

    margin-bottom:20px;

}



.portfolio-card img {

    height:220px;

}



.price-card {

    padding:30px 20px;

}



.testimonial-card {

    padding:25px;

}



.contact-form button {

    width:100%;

}



.footer {

    text-align:center;

}


}





/* Small Mobile */
@media (max-width: 480px) {


.hero-section h1 {

    font-size:30px;

}


.section-title h2 {

    font-size:28px;

}


.counter-box h3 {

    font-size:30px;

}


.btn-primary {

    padding:10px 22px;

}


}