@media screen and (max-width: 1200px) {
    .hero-section .hero-content h1 {
        font-size: 60px;
        width: 80%;
        margin: auto;
        text-align: center;
    }

    .hero-section .hero-content p {
        font-size: 17px;
        color: #dddddd;
        width: 80%;
        margin: auto;
        text-align: center;
    }

    .hero-section .hero-content .custom-btn {
        margin: auto;
        display: flex;
    }

    .section {
        padding: 50px 20px !important;
    }

    .section-title {
        font-size: 30px;
    }


    .hero-section .swiper-slide {
        padding: 300px 0
    }
}

@media screen and (max-width: 780px) {
    .hero-section .hero-content h1 {
        font-size: 40px;
    }

    .hero-section .hero-content p {
        font-size: 15px;
    }

    .login_page .columns {
        display: flex;
        flex-direction: column-reverse;
        align-items: normal !important;
    }
}

@media screen and (max-width: 1296px) {
    nav.navbar {
        padding: 10px 0 !important;
    }
}