@media (max-width:1200px) {
    #main {}

    .hero-title {
        font-size: 2.8rem
    }

    .hero-subtitle {
        font-size: 1.2rem
    }

    .button {
        padding: .8rem 1.5rem
    }

    .intro-title {
        font-size: 2.5rem
    }

    .intro-subtitle {
        font-size: 1.2rem
    }

    .services-section {
        gap: 3.5rem;
        flex-direction: column
    }

    .service img {
        width: 63%;
        height: auto
    }

    .about-header h2 {
        font-size: 2.8rem
    }

    .about-header p {
        font-size: 1.2rem
    }

    .about-content {
        width: 100vw
    }

    #elem-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem
    }

    .elem {
        padding: 1rem
    }

    .cta-title {
        font-size: 2rem
    }

    .cta-description {
        font-size: 1.2rem
    }
}

@media (max-width:992px) {
    .hero-content {
        text-align: center;
        padding: 2rem
    }

    .hero-title {
        font-size: 2.2rem
    }

    .hero-subtitle {
        font-size: 1.1rem
    }

    .services-section {
        gap: 3.5rem;
        flex-direction: column
    }

    .about-header,
    .about-section {
        padding: 1rem;
        text-align: center
    }

    #elem-container {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .elem h1 {
        font-size: 1.2rem
    }

    .team-members {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .cta-section {
        padding: 1.5rem
    }

    .cta-title {
        font-size: 1.8rem
    }

    .cta-description {
        font-size: 1rem
    }
}

@media (max-width:768px) {
    .intro-section p {
        padding: 10vw !important
    }

    .inner-nav {
        display: none
    }

    .our-work img {
        width: 41vw;
        margin-top: 18vw;
        height: auto
    }

    .navbar {
        padding: 3.2vw 2vw
    }

    .menu-icon {
        display: block !important;
        font-size: .8rem;
        padding: 7px 11px
    }
#menu-whatsapp-btn{
    display: none;
}
    .logo a img {
        width: 27vw
    }

    .hero-title {
        font-size: 1.8rem
    }

    .hero-subtitle {
        font-size: 1.3rem
    }

    .button p {
        font-size: .9rem
    }

    .section-title {
        text-align: center
    }

    .intro-title {
        font-size: 2rem
    }

    .intro-subtitle {
        font-size: 1rem
    }

    .service-info {
        bottom: 90px;
        left: 7vw;
        transform: translate(50%, -50%);
        width: 40vw
    }

    .service-info h3 {
        font-size: 1rem
    }

    .service-info p {
        font-size: .9rem
    }

    #animated-keywords {
        height: 60px
    }

    .scrolling-keywords {
        font-size: 1.6rem
    }

    .about-header h2 {
        font-size: 1.8rem
    }

    #about-us {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .about-header p {
        font-size: 1.7rem
    }

    .team {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .section-description p {
        font-size: 1.4rem;
        padding: 2rem 1rem;
        line-height: 2.5rem
    }

    #elem-container {
        gap: 1rem
    }

    .elem h1 {
        font-size: 1.6rem
    }

    .cta-title {
        font-size: 2.5rem
    }

    .cta-section {
        width: 93vw
    }

    .cta-description {
        font-size: .9rem
    }

    #fixed-image {
        height: 45vw;
        width: 30vw;
        top: 25%;
        left: 55%
    }

    .team-member {
        padding: 3rem;
        width: 70vw
    }
}

@media (max-width:576px) {
    .hero-content {
        padding: 1rem
    }

    .logo a img {
        width: 30vw
    }

    .hero-title {
        font-size: 2.2rem
    }

    .hero-subtitle {
        font-size: 1rem
    }

    .services-section {
        gap: 1rem
    }

    .large-text h1 {
        font-size: 7vw;
        padding: 5vw
    }

    .service img {
        width: 80%;
        height: auto
    }

    .service-info {
        bottom: 90px;
        left: 7vw;
        transform: translate(50%, -50%);
        width: 40vw
    }

    .service-info h3 {
        font-size: .9rem
    }

    .service-info p {
        font-size: .8rem
    }

    #about-us {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .about-header h2 {
        font-size: 2rem
    }

    .section-description p {
        font-size: 1.2rem;
        padding: 2rem;
        line-height: 2.2rem
    }

    .about-header p {
        font-size: 1.4rem
    }

    #elem-container {
        gap: .8rem
    }

    .elem h1 {
        font-size: 1.2rem
    }

    .team-members {
        gap: 2rem;
        width: 70vw
    }

    .team-members h4 {
        font-size: 1.2rem;
        color: #dbdbdb
    }

    .team-members p {
        font-size: .7rem
    }

    .cta-title {
        font-size: 2.2rem
    }

    .cta-section {
        width: 100vw
    }

    .cta-description {
        font-size: .8rem
    }

    .cta-button {
        font-size: .8rem;
        padding: .8rem 1rem
    }

    #footer-text h1 {
        font-size: 1rem;
        text-align: center
    }

    #home-links ul li a {
        font-size: .8rem
    }

    #home-links ul li {
        font-size: .8rem;
        padding: 6px 0
    }
}

@media (max-width:768px) {
    #Explore-btn-hero-page .btn {
        font-size: 10px
    }

    #contact-section header h1 {
        font-size: 2rem
    }

    .form-btn {
        font-size: 0.8rem !important;
        width: 20vw
    }

    #form-container {
        padding: 1rem;
        width: 90vw
    }

    #quote-section button {
        margin-top: 4vw
    }

    #quote-section h2 {
        margin: 1vw 0
    }

    button[type="submit"] {
        font-size: .9rem
    }

    .elem {
        height: 100px
    }
    .swiper-wrapper {
        justify-content: flex-start;
        padding: 0;
    }
}

@media (max-width:480px) {
    #contact-section header h1 {
        font-size: 1.5rem
    }

    .elem {
        height: 100px
    }

    #contact-section .cta-description {
        font-size: .9rem
    }

    #form-container {
        padding: 1.5rem
    }

    button[type="submit"] {
        font-size: .8rem;
        width: 35vw
    }
}

@media (max-width:768px) {
    .dropdown-2{
        /* display: block !important; */
        left: 0;
        top: 12px;
    }
    #page-4 h1 {
        font-size: 18vw
    }

    #contact-container {
        flex-direction: column;
        padding-bottom: 8vw
    }

    #social-icons,
    #address-box,
    #home-links {
        padding: 3vw;
        width: 90%;
        justify-content: space-evenly
    }

    .links-h3 {
        font-size: 1.4rem;
        border-bottom: 1px solid #bababa;
        padding: 1vw 0;
        border-radius: 4px;
        margin-bottom: 2rem
    }

    .link-hover {
        transition: all ease 0.4s;
        font-size: .7rem
    }
}

@media (max-width:480px) {
    #page-4 h1 {
        font-size: 14vw
    }

    #social-icons,
    #address-box,
    #home-links {
        padding: 4vw;
        border-radius: 1%
    }

    #footer {
        height: 6vh
    }

    #footer p {
        font-size: .8em
    }
}