body {
    overflow-x: hidden;
}

@media (max-width: 1024px) {
    .heroSection {
        padding: 0 5%;
    }
    .heroSectionSlogan {
        font-size: 8rem !important;
        top: -175px !important;
    }
    .heroSectionCardsContainer {
        width: 90%;
    }
    .heroSectionCard {
        height: 550px !important;
    }
}

/* Large phones (up to 768px) */
@media (max-width: 768px) {
    .heroSection {
        height: 80vh !important;
        padding: 0 3% !important;
    }
    .heroSectionSlogan {
        font-size: 5.5rem !important;
        top: -150px !important;
    }
    .heroSectionCardsContainer {
        width: 95% !important;
    }
    .heroSectionCard {
        height: 450px !important;
    }
}

/* Phones (up to 600px) */
@media (max-width: 600px) {
    .heroSection {
        height: 100vh !important;
        padding: 0 2% !important;
    }
    .heroSectionSlogan {
        font-size: 5rem !important;
        top: -120px !important;
    }
    .heroSectionCardsContent {
        gap: 16px !important;
    }
    .heroSectionCard {
        height: 520px !important;
    }
}

/* Small phones (up to 480px) */
@media (max-width: 480px) {
    .heroSection {
        height: 98.5vh !important;
    }
    .heroSectionSlogan {
        font-size: 4.5rem !important;
        top: -125px !important;
    }
    .heroSectionCard {
        height: 430px !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .expertiseSection {
        padding: 10vh 0 20vh !important;
    }

    .domainsSectionHeader {
        padding: 0 100px !important;
    }

    .domainsSectionHeader h2 {
        font-size: 3em !important;
    }

    .domainsSectionHeader p {
        font-size: 1em !important;
        width: 85% !important;
        text-align: center !important;
    }

    .domainsSectionBody {
        /* gap: 50px !important; */
    }

    .domainsSectionItem {
        flex-direction: column !important;
        align-items: center !important;
        padding: 45px 50px !important;
    }

    .domainItemImageContainer {
        width: 85% !important;
        height: 375px !important;
    }

    .domainsSectionItem .text-content {
        max-width: 100% !important;
        width: 85% !important;
        text-align: left !important;
    }

    .domainsSectionItem p {
        font-size: 1.5em !important;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    .expertiseSection {
        padding: 7.5vh 0 15vh !important;
    }

    .domainsSectionHeader {
        padding: 0 50px !important;
    }

    .domainsSectionHeader h2 {
        font-size: 3.25em !important;
    }

    .domainsSectionHeader p {
        font-size: 0.85em !important;
        width: 75% !important;
    }

    .domainsSectionBody {
        gap: 0px !important;
        width: 100% !important;
    }

    .domainsSectionItem {
        padding: 50px 25px !important;
        gap: 20px !important;
        border-top: rgb(233, 233, 233) 25px solid !important;
    }

    .domainsSectionItem:hover .domainItemImageContainer {
        box-shadow: 0 0px 100px rgba(83, 13, 13, 0.493) !important;
    }

    .domainsSectionItem .text-content {
        text-align: left !important;
        max-width: 100% !important;
        width: 75% !important;
    }

    .domainItemImageContainer {
        width: 75% !important;
    }

    .domainsSectionItem h3 {
        font-size: 2.5em !important;
    }

    .domainsSectionItem p {
        font-size: 1.25em !important;
    }

    .domainItemButton {
        font-size: 1.4rem !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 600px) {
    .expertiseSection {
        padding: 5vh 0 10vh !important;
    }

    .domainsSectionHeader {
        padding: 0 20px !important;
    }

    .domainsSectionHeader h2 {
        font-size: 2em !important;
    }

    .domainsSectionHeader p {
        font-size: 0.9em !important;
        width: 100% !important;
    }

    .domainsSectionBody {
        gap: 0px !important;
    }

    .domainsSectionItem .text-content {
        text-align: left !important;
        max-width: 100% !important;
        width: 85% !important;
    }

    .domainsSectionItem {
        padding: 37.5px 15px !important;
        gap: 15px !important;
        border-top: rgb(233, 233, 233) 5px solid !important;
    }

    .domainItemImageContainer {
        width: 85% !important;
        height: 275px !important;
    }

    .domainsSectionItem h3 {
        font-size: 2em !important;
    }

    .domainsSectionItem p {
        font-size: 1.1em !important;
        line-height: 1.5em !important;
    }

    .domainItemButton {
        font-size: 1.2rem !important;
        padding: 6px 12px !important;
    }
}

@media (max-width: 480px) {
    .expertiseSection {
        padding: 5vh 0 !important;
    }

    .domainsSectionHeader {
        padding: 0 15px !important;
    }

    .domainsSectionHeader h2 {
        font-size: 2.05em !important;
    }

    .domainsSectionHeader p {
        font-size: 0.85em !important;
        width: 75% !important;
    }

    .domainsSectionBody {
        gap: 0px !important;
        width: 100% !important;
    }

    .domainsSectionItem {
        padding: 35px 10px !important;
        gap: 10px !important;
        border-top: rgb(233, 233, 233) 25px solid !important;
    }

    .domainsSectionItem:hover .domainItemImageContainer {
        box-shadow: 0 0px 100px rgba(83, 13, 13, 0.527) !important;
    }

    .domainsSectionItem .text-content {
        text-align: left !important;
        max-width: 85% !important;
    }

    .domainItemImageContainer {
        width: 85% !important;
        height: 275px !important;
    }

    .domainsSectionItem h3 {
        font-size: 1.75em !important;
    }

    .domainsSectionItem p {
        font-size: 1em !important;
        line-height: 1.3em !important;
        width: 100% !important;
    }

    .domainItemButton {
        font-size: 1rem !important;
        padding: 5px 10px !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .whyChooseUsSection {
        margin: 20px 50px !important;
        gap: 20px !important;
    }

    .whyChooseUsSectionHeader {
        flex-direction: column !important;
        gap: 20px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .whyChooseUsToggleContainer {
        font-size: 3.25rem !important;
        line-height: 50px !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .toggle-wrapper {
        flex-direction: column !important;
    }

    .butToggle {
        font-size: 3.75rem !important;
        gap: 0.2rem !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .visible {
        width: 105px !important;
    }

    .brandsCard {
        width: 800px !important;
        height: 250px !important;
    }

    .brandCardName h5 {
        font-size: 30px !important;
    }

    .brandCardName p {
        font-size: 15.5px !important;
    }

    .whyChooseUsButton {
        font-size: 1rem !important;
        padding: 10px 20px !important;
    }
}

@media (max-width: 870px) {
    .whyChooseUsSection {
        margin: 20px 50px !important;
        gap: 20px !important;
    }

    .whyChooseUsSectionHeader {
        flex-direction: column !important;
        gap: 20px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .whyChooseUsToggleContainer {
        font-size: 3.25rem !important;
        line-height: 50px !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .toggle-wrapper {
        flex-direction: column !important;
    }

    .butToggle {
        font-size: 3.75rem !important;
        gap: 0.2rem !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .visible {
        width: 105px !important;
    }

    .brandsCard {
        width: 700px !important;
        height: 250px !important;
    }

    .brandCardName h5 {
        font-size: 30px !important;
    }

    .brandCardName p {
        font-size: 15.5px !important;
    }

    .whyChooseUsButton {
        font-size: 1rem !important;
        padding: 10px 20px !important;
    }
}

@media (max-width: 768px) {
    .whyChooseUsSection {
        margin: 10px 20px !important;
        gap: 15px !important;
    }

    .whyChooseUsSectionHeader {
        width: 100% !important;
        margin: 0 25px 25px 25px !important;
        gap: 25px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .whyChooseUsToggleContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 2.5rem !important;
        line-height: 45px !important;
    }

    .butToggle {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 3rem !important;
        gap: 0.1rem !important;
    }

    .visible {
        width: 80px !important;
    }

    .toggle__switch {
        --w-toggle-switch: 90px !important;
        --w-h-toggle-circle: 30px !important;
        height: 45px !important;
    }

    .brandsCard {
        width: 550px !important;
        height: 175px !important;
    }

    .brandCardName h5 {
        font-size: 25px !important;
    }

    .brandCardName p {
        font-size: 13px !important;
    }

    .whyChooseUsButton {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 600px) {
    .whyChooseUsSection {
        margin: 10px 15px !important;
        gap: 10px !important;
    }

    .whyChooseUsSectionHeader {
        width: 100% !important;
        margin: 0 25px 25px 25px !important;
        gap: 25px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .whyChooseUsToggleContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 2rem !important;
        line-height: 45px !important;
    }

    .butToggle {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 2.25rem !important;
        gap: 0.15rem !important;
    }

    .visible {
        width: 65px !important;
    }

    .toggle__switch {
        --w-toggle-switch: 100px !important;
        --w-h-toggle-circle: 25px !important;
        height: 40px !important;
    }

    .brandsCard {
        width: 450px !important;
        height: 250px !important;
    }

    .brandCardName h5 {
        font-size: 22.5px !important;
    }

    .brandCardName p {
        font-size: 15px !important;
    }

    .whyChooseUsButton {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
}

@media (max-width: 480px) {
    .whyChooseUsSection {
        margin: 5px 10px !important;
        gap: 10px !important;
    }

    .whyChooseUsSectionHeader {
        width: 100% !important;
        margin: 0 25px 25px 25px !important;
        gap: 25px !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        text-align: left !important;
    }

    .whyChooseUsToggleContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 1.5rem !important;
        line-height: 30px !important;
        width: 100% !important;
    }

    .butToggle {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        font-size: 1.85rem !important;
        gap: 0.125rem !important;
        position: relative !important;
        left: 0 !important;
    }

    .visible {
        width: 47.5px !important;
    }

    .toggle__switch {
        --w-toggle-switch: 70px !important;
        --w-h-toggle-circle: 20px !important;
        height: 35px !important;
    }

    .brandsCard {
        width: 350px !important;
        height: 250px !important;
    }

    .brandCardName h5 {
        font-size: 18px !important;
    }

    .brandCardName p {
        font-size: 11px !important;
    }

    .whyChooseUsButton {
        font-size: 0.75rem !important;
        padding: 5px 10px !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .custom-footer {
        margin: 125px 0 0 !important;
        height: 125vh !important;
        padding: 20px 50px !important;
    }

    .custom-footer-container {
        padding: 75px !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 30px !important;
    }

    .footer-contact-info {
        max-width: 100% !important;
        gap: 20px !important;
    }

    .footer-contact-info strong {
        font-size: 2.5em !important;
        line-height: 40px !important;
    }

    .footer-contact-info p {
        font-size: 1em !important;
    }

    .footer-social-links {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 50px !important;
    }

    .footerContactLinks {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .footerContactLinks p {
        font-size: 16px !important;
    }

    .footerContactLinks a {
        font-size: 14px !important;
    }

    .footerContactButton .footer-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 768px) {
    .custom-footer {
        margin: 125px 0 0 !important;
        height: 65vh !important;
        padding: 15px 30px !important;
    }

    .custom-footer-container {
        padding: 55px !important;
        width: 100% !important;
        align-items: flex-start !important;
        gap: 25px !important;
    }

    .footer-contact-info strong {
        font-size: 2em !important;
        line-height: 35px !important;
    }

    .footer-contact-info p {
        font-size: 0.95em !important;
    }

    .footer-social-links {
        gap: 30px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footerContactLinks p {
        font-size: 14px !important;
    }

    .footerContactLinks a {
        font-size: 13px !important;
    }

    .footerContactButton .footer-btn {
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .custom-footer {
        margin: 125px 0 0 !important;
        padding: 10px 15px !important;
    }

    .custom-footer-container {
        gap: 15px !important;
    }

    .footer-contact-info strong {
        font-size: 1.5em !important;
        line-height: 25px !important;
    }

    .footer-contact-info p {
        font-size: 0.8em !important;
    }

    .footer-social-links {
        gap: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footerContactLinks p {
        font-size: 11px !important;
    }

    .footerContactLinks a {
        font-size: 11px !important;
    }

    .footerContactButton .footer-btn {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .topheaderBg {
        height: 10vh !important;
        padding: 0 15px !important;
    }

    .topheader {
        height: 10vh !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 768px) {
    .topheaderBg {
        height: 10vh !important;
        padding: 0 15px !important;
    }

    .topheader {
        height: 10vh !important;
        padding: 0 15px !important;
    }

    .logo-container {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .logo-text {
        font-size: 1.4rem !important;
    }

    nav {
        gap: 5px !important;
    }

    nav a {
        font-size: 1rem !important;
        padding: 10px 10px !important;
    }

    .contact-btn {
        font-size: 1.1rem !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 600px) {
    .topheaderBg {
        height: 8vh !important;
        padding: 0 10px !important;
    }

    .topheader {
        height: 8vh !important;
        padding: 0 10px !important;
    }

    .logo-text {
        font-size: 1.1rem !important;
    }

    .contact-btn {
        font-size: 1rem !important;
        padding: 8px 14px !important;
    }

    .contact-btn {
        font-size: 1rem !important;
        padding: 8px 14px !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

/* Default styles for desktop are already provided */

/* Large Tablets and smaller laptops (1024px and below) */
@media screen and (max-width: 1024px) {
    .agencySection {
        margin: 100px auto 0px auto !important;
        width: 90% !important;
        flex-direction: column !important;
        border-radius: 12px !important;
    }

    .image-container {
        width: 100% !important;
        height: 700px !important;
        margin: 50px 0px !important;
        border-radius: 12px !important;
        box-shadow: 0 0px 75px rgba(78, 7, 7, 0.45) !important;
    }

    .ultraText {
        font-size: 20px !important;
        padding: 25px !important;
        line-height: 1.7 !important;
    }

    .circle-cursor {
        width: 70px !important;
        height: 70px !important;
        font-size: 11px !important;
    }
}

/* Tablet view (768px and below) */
@media screen and (max-width: 768px) {
    .agencySection {
        margin: 75px auto 0px auto !important;
        width: 90% !important;
        flex-direction: column !important;
        border-radius: 10px !important;
    }

    .image-container {
        width: 100% !important;
        height: 600px !important;
        margin: 50px 0px !important;
        box-shadow: 0 0px 50px rgba(78, 7, 7, 0.4) !important;
    }

    .ultraText {
        font-size: 17px !important;
        padding: 20px !important;
        line-height: 1.6 !important;
    }

    .circle-cursor {
        width: 60px !important;
        height: 60px !important;
        font-size: 10px !important;
    }
}

/* Phone view (480px and below) */
@media screen and (max-width: 480px) {
    .agencySection {
        margin: 50px auto 0px auto !important;
        width: 95% !important;
        border-radius: 8px !important;
    }

    .image-container {
        width: 100% !important;
        height: 400px !important;
        margin: 25px 0px !important;
        border-radius: 8px !important;
        box-shadow: 0 0px 25px rgba(78, 7, 7, 0.3) !important;
    }

    .interactive-image {
        transform: translate(-50%, -50%) scale(1.2) !important;
    }

    .ultraText {
        font-size: 11px !important;
        padding: 25px 25px !important;
        text-align: left !important;
    }

    .circle-cursor {
        width: 50px !important;
        height: 50px !important;
        font-size: 9px !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

/* Default styles for desktop are already provided */

/* Large Tablets and smaller laptops (1024px and below) */
@media screen and (max-width: 1024px) {
    .modal {
        width: 75% !important;
        height: 100% !important;
    }

    .modal-content {
        font-size: 1.25rem !important;
        padding: 15px !important;
    }

    .close-button {
        top: 15px !important;
        right: 15px !important;
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
    }

    .modalDomainName {
        font-size: 1.25em !important;
        padding: 40px 10px !important;
    }

    .modalDomainDescription {
        font-size: 0.8em !important;
        padding: 20px 50px !important;
    }

    .modalDomainDescription p {
        margin-bottom: 30px !important;
    }
}

/* Tablet view (768px and below) */
@media screen and (max-width: 768px) {
    .modal {
        width: 85% !important;
        height: 100% !important;
    }

    .modal-content {
        font-size: 1.1rem !important;
        padding: 10px !important;
    }

    .close-button {
        top: 10px !important;
        right: 10px !important;
        font-size: 0.85rem !important;
        padding: 8px 10px !important;
    }

    .modalDomainName {
        font-size: 1.15em !important;
        padding: 35px 5px !important;
    }

    .modalDomainDescription {
        font-size: 0.75em !important;
        padding: 20px 25px !important;
    }

    .modalDomainDescription p {
        margin-bottom: 25px !important;
    }
}

/* Phone view (480px and below) */
@media screen and (max-width: 480px) {
    .modal {
        width: 95% !important;
        height: 100% !important;
    }

    .modal-content {
        font-size: 1rem !important;
        padding: 8px !important;
    }

    .close-button {
        top: 8px !important;
        right: 8px !important;
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }

    .modalDomainName {
        font-size: 1em !important;
        padding: 30px 5px !important;
    }

    .modalDomainDescription {
        font-size: 0.7em !important;
        padding: 15px 10px !important;
    }

    .modalDomainDescription p {
        margin-bottom: 20px !important;
    }
}