/* default classes */

.container {
    max-width: 1170px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
        padding-inline: 40px;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
        padding-inline: 60px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
        padding-inline: 0;
    }
}

.row {
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* responsive content below */

@media (max-width: 1200px) {

    .inner-text {
        padding-top: 50px;
        text-align: center;
    }

    .hero-section .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .vertical-form {
        margin-top: 40px;
    }

    .hero-section .row {
        justify-content: center;
    }

    .footer .img {
        width: 50%;
    }

    .black-bg-btn {
        white-space: nowrap;
    }

    .navbar img {
        width: 90%;
    }
    
    .footer img {
        width: 100%;
    }

    .copyright {
        text-align: center;
        padding-left: 10%;
    }

    .hover-content p {
        font-size: 16px;
    }

    .hover-content {
        right: 35%;
        bottom: 71%;
    }

    .location .col-sm-6 img {
        width: 100%;
        padding-top: 20px;
    }

    .location .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .location .col-sm-6 iframe {
        margin-top: 30px;
    }

    .location .col-sm-6 p, .location .col-sm-6 h2, hr {
        margin-inline: auto;
    }

}


@media (max-width: 767px) {

    .hero-section {
        background-position: unset;
    }

    .inner-text h1, .unique-project h2, .grid-gallery h2, .location .col-sm-6 h2,
    .perks h2, .content h2 {
        font-size: 50px;
        line-height: 60px;
    }

    .footer {
        gap: 20px;
    }

    .footer img {
        width: -webkit-fill-available;
    }

    input {
        width: 100%;
    }

    .glance-points .col-sm-4 {
        padding-top: 15px;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .location .col-sm-6 img {
        width: 100%;
    }

    hr {
        width: 100%;
    }

    .location .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .hover-content {
        display: none;
    }

    .grid-card-container {
        height: 1000px;
    }

    .location .col-sm-6 iframe {
        width: 100%;
        height: 400px;
    }

}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding-inline: 20px;
    }

    .custom-checkbox {
        width: 50px;
    }
}