@media (max-width:991px) {
    section {
        margin: 3rem 0
    }

    .map-desc,
    .navbar .navbar-nav .nav-item .nav-link.active::after,
    .navbar-top,
    .profile-project .pdf-desc {
        display: none
    }

    .navbar {
        top: 0;
        background-color: rgba(0, 0, 0, .164)
    }

    .navbar .navbar-brand .logo-resp,
    .navbar .navbar-brand img {
        width: 80px;
        height: 50px
    }

    .navbar .btn-mob {
        display: flex;
        align-items: center
    }

    .about-habitat .sec-title h2,
    .footer .footer-content a,
    .navbar .btn-mob .mob-whats,
    .navbar .navbar-nav .nav-item .nav-link,
    .navbar .navbar-nav .nav-item .nav-link.active,
    .navbar .navbar-nav .nav-item .nav-link:hover,
    .other-links a {
        color: #fff
    }

    .navbar .btn-mob .mob-whats .icon {
        margin-left: 5px
    }

    .navbar .btn-mob .sidebar-btn {
        position: relative;
        top: 0;
        left: 5px;
        width: 20px;
        height: 2px;
        margin-right: 1rem;
        background-color: #fff;
        transition: .3s
    }

    .navbar .btn-mob .sidebar-btn::before {
        content: "";
        position: absolute;
        top: -6px;
        width: 30px;
        height: 2px;
        background-color: #fff
    }

    .navbar .btn-mob .sidebar-btn::after {
        content: "";
        position: absolute;
        top: 6px;
        width: 15px;
        height: 2px;
        background-color: #fff
    }

    .navbar .btn-mob .sidebar-btn:hover,
    .navbar .btn-mob .sidebar-btn:hover::after {
        width: 30px
    }

    .navbar .sidebar .close-btn,
    .navbar .sidebar .close-btn::after {
        right: 0;
        width: 25px;
        height: 3px;
        transition: .2s;
        background-color: #fff
    }

    .navbar .sidebar {
        position: absolute;
        top: 0;
        left: -500px;
        width: 350px;
        height: 100vh;
        padding: .8rem;
        text-align: right;
        background-color: #d4a866;
        transition: .5s;
        z-index: 999
    }

    .navbar .sidebar .close-btn {
        position: relative;
        top: 30px;
        transform: rotate(-45deg);
        cursor: pointer;
        z-index: 9999
    }

    .navbar .sidebar .close-btn::after {
        content: "";
        position: absolute;
        top: 0;
        transform: rotate(90deg)
    }

    .navbar .sidebar .close-btn:active,
    .navbar .sidebar .close-btn:active::after {
        background-color: #fff
    }

    .navbar .sidebar.active {
        left: 0
    }

    .navbar .navbar-nav {
        display: block;
        margin-top: 50px
    }

    .navbar .navbar-nav .nav-item {
        margin-right: 0;
        margin-bottom: 10px
    }

    .static-nav {
        top: -100px
    }

    .fixedmenu .btn-mob .mob-whats {
        color: #313131
    }

    .fixedmenu .btn-mob .sidebar-btn,
    .fixedmenu .btn-mob .sidebar-btn::after,
    .fixedmenu .btn-mob .sidebar-btn::before {
        background-color: #313131
    }

    .other-links {
        display: block !important;
        margin: 20px 0;
        font-weight: 600
    }

    .social {
        display: flex !important;
        height: 35px;
        font-size: 1.2rem;
        margin-bottom: 20px
    }

    .social li {
        margin: 0 5px
    }

    .social li a {
        padding: 2px 7px;
        color: #fff;
        border-radius: 50%;
        transition: .4s
    }

    .social .twitter a:hover {
        background-color: #1da1f2
    }

    .social .instagram a:hover {
        background-image: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
    }

    .social .tiktok a:hover {
        background-color: #000
    }

    .social .whatsapp a:hover {
        background-color: #09cc16
    }

    .social .mail a:hover {
        background-color: #d4a866
    }

    .social .facebook a:hover {
        background-color: #3b5998
    }

    .social .youtube a:hover {
        background-color: #cd201f
    }

    #main-slider .carousel-item .carousel-caption p,
    .latest-projects .content .sub-title {
        font-size: 2rem
    }

    .contact form,
    .footer .footer-content .footer-menu-link li,
    .latest-projects .content {
        margin-bottom: 1rem
    }

    .latest-projects .content p {
        color: #6b6b6b;
        margin-bottom: 1.5rem
    }

    .about-habitat p {
        font-size: 1rem
    }

    .about-habitat .icon-info {
        text-align: center;
        margin: 1.5rem 0
    }

    .about-habitat .icon-info .icon {
        font-size: 1.8rem;
        line-height: 50px;
        width: 50px;
        height: 50px
    }

    .portfolio-img .portfolio-info {
        padding: 1.5rem;
        width: 80%
    }

    .features-project,
    .portfolio-img .portfolio-info .info {
        padding: 2rem
    }

    .portfolio-img .portfolio-info img {
        width: 150px
    }

    .portfolio-img .portfolio-info p {
        font-size: 1.1rem
    }

    .footer {
        padding-top: 4rem
    }

    .footer .footer-content {
        text-align: right;
        font-size: .8rem;
        margin-bottom: 2rem
    }

    .footer .footer-content img {
        width: 150px;
        height: 100px;
        margin-bottom: 1.5rem
    }

    .footer .footer-content .phone-icon {
        font-size: 1.8rem
    }

    .footer .footer-content .content-title,
    .project .project-info {
        margin-bottom: 1rem;
        font-size: 1.3rem
    }

    .footer .footer-content .footer-menu-project {
        display: block
    }

    .footer .footer-content .footer-menu-project li {
        border-bottom: 1px solid #777
    }

    .footer .footer-content .footer-menu-project li a {
        padding: 1rem 0;
        display: block;
        transition: .4s
    }

    .footer .footer-content .footer-menu-project li a:hover {
        color: #d4a866
    }

    .project .project-info .icon {
        font-size: 2.3rem
    }

    .features-project .sec-title h2 {
        margin-bottom: 3rem
    }

    .features-project ul li {
        text-align: center;
        margin-bottom: 2rem
    }

    .features-project ul li img {
        width: 50px;
        height: 50px;
        margin-bottom: .5rem
    }

    .features-project ul li p {
        font-size: .9rem
    }

    .profile-project .pdf-mobile {
        display: inline-block
    }

    .map-mobile {
        display: block !important;
        width: 100%;
        height: 50%
    }
}

@media (max-width:767px) {
    .sec-title {
        margin-bottom: 1.5rem
    }

    .sec-title h2 {
        font-size: 2rem
    }

    .navbar .sidebar {
        font-size: .9rem
    }

    .partner .partner-logo .info-logo p {
        font-size: 1rem
    }

    .partner .partner-logo .info-logo img {
        width: 140px;
        height: 114px
    }
}

@media (max-width:575px) {
    #main-slider .carousel-indicators button {
        margin: 0 3px;
        width: 8px;
        height: 8px
    }

    #main-slider .carousel-item .carousel-caption {
        position: absolute;
        top: 30%
    }

    #main-slider .carousel-item .carousel-caption p {
        font-size: 1.7rem
    }

    .portfolio-img .portfolio-info {
        padding: 1rem
    }

    .portfolio-img img {
        width: 150px;
        height: 100px
    }
}

@media (max-width:424px) {
    .navbar .sidebar {
        width: 100%
    }

    #main-slider .carousel-indicators button {
        margin: 0 3px;
        width: 8px;
        height: 8px
    }

    #main-slider .carousel-item .carousel-caption {
        top: 35%
    }

    #main-slider .carousel-item .carousel-caption p,
    .main-banner .banner .title-banner p {
        font-size: 1.3rem
    }

    .portfolio-img .portfolio-info {
        padding: .5rem;
        width: 90%
    }

    .partner .partner-logo .info-logo p,
    .portfolio-img .portfolio-info p {
        font-size: 1rem
    }

    .partner .partner-logo {
        display: block;
        text-align: center
    }

    .partner .partner-logo .info-logo {
        margin-bottom: 1.5rem
    }

    .partner .partner-logo .info-logo img {
        width: 130px
    }

    .contact .habitat-contact,
    .contact .habitat-contact .icon,
    .contact .habitat-contact a {
        font-size: 13px
    }

    .contact .habitat-contact .social li a {
        padding: 2px 8px;
        font-size: 1.3rem
    }

    .contact .habitat-contact .num-list .icon {
        margin-bottom: .9rem !important
    }
}