@media only screen and (max-width: 1399px) {}

@media only screen and (max-width: 1199px) {}

@media only screen and (max-width: 991px) {
    .navbar-custom .nav-link {
        margin: 0 22px 0 0px;
    }

    .top-header img {
        height: 80px;
    }

    .head-txt span {
        display: block;
        font-size: 16px;
        text-align: right;
    }

    .hero-txt h1 {
        font-size: 62px;
        line-height: 86px;
    }

    .hero-txt p {
        font-size: 32px;
    }

    .hero-ui {
        height: fit-content;
        padding: 14% 0;
    }

    .hero-title h1 {
        font-size: 40px;
    }

    .gallery-img img {
        width: 100%;
    }

    .gallery-img {
        flex-wrap: wrap;
    }

    .gallery-img a {
        width: 33.33%;
    }

    .case-gallery a {
        width: 31%;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-social span {
        margin: 0;
    }

    .navbar-toggler {
        padding: 5px 0;
        color: #cd9944;
        font-size: 24px;
        display: grid;
        box-shadow: none !important;
    }

    .top-header {
        background: var(--white);
        box-shadow: 0px 0px 12px 0px #0000005c;
        padding: 20px 0 !important;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .btn-hero {
        font-size: 20px;
        padding: 12px 15px;
    }

    .hero-txt h1 {
        font-size: 50px;
        line-height: 70px;
    }

    .hero-txt p {
        font-size: 28px;
    }

    .icon-ui img {
        width: 150px;
    }

    .icon-ui h4 {
        font-size: 16px;
        margin: 10px 0;
    }

    .cnt-list {
        margin-bottom: 25px;
    }

    .logo-foot,
    .foot-link {
        margin-bottom: 20px;
    }

    .hero-title h1 {
        font-size: 34px;
    }

    .team-section h2 {
        font-size: 32px;
    }

    .team-section p,
    .team-section li,
    .team-img span,
    .area-txt p,
    .law-list ul,
    .about-common p,
    .martime-set ul {
        font-size: 16px;
    }

    .area-txt {
        margin-bottom: 15px;
    }

    .area-bg {
        padding: 40px 0;
    }

    .btn-div {
        padding: 50px 15px;
    }

    .btn-blue {
        font-size: 15px;
    }

    .case-gallery img {
        height: 180px;
    }
}

@media only screen and (max-width: 575px) {
    .top-header img {
        height: auto;
        width: 75%;
    }

    .hero-txt h1>br {
        display: none;
    }

    .hero-txt h1 {
        font-size: 34px;
        line-height: 52px;
    }

    .hero-txt p {
        font-size: 22px;
    }

    .btn-hero {
        font-size: 16px;
        max-width: 100%;
    }

    .hero-ui {
        padding: 10% 0;
    }

    .icon-ui img {
        width: 120px;
    }

    .icon-ui {
        padding-bottom: 15px;
    }

    .call-action h2 {
        font-size: 24px;
    }

    .call-action h1,
    .call-action a {
        font-size: 26px;
    }

    .call-action {
        padding: 60px 0;
    }

    .foot-contact p {
        font-size: 16px;
    }

    .copyright {
        padding: 25px 15px;
    }

    .hero-title {
        padding: 50px 0;
    }

    .gallery-img a {
        width: 50%;
    }

    .gallery-img img {
        height: 180px;
    }

    .title-meet {
        font-size: 30px;
    }

    .hero-title h1>br {
        display: none;
    }

    .gallery-img a {
        width: 47%;
    }

    .form-btn-group {
        padding: 40px 0;
    }

    .form-btn-group .btn-hero {
        font-size: 16px;
        height: 55px;
        margin: 12px auto 0;
    }
}

@media only screen and (max-width: 450px) {}