/*Hero Section*/
.hero-viewpoint {
    width: 100%;
    height: 80vh;
}

.pe-50 {
    padding-right: 50px;
}

.bottom-250 {
    bottom: 25%;
}

.custom-search-input {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
}

#searchDropdown,
#cityResultPanel {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    max-width: calc(100% - 3rem);
}

/*Intro section*/
.intro-section {
    padding-top: 96px;
}

.custom-intro {
    font-family: var(--font-serif);
    color: var(--accent);
    font-style: italic;
    font-weight: 900;
}

/*Why AHP section*/
.custom-radius {
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.split-line {
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

    /* IMPORTANT: block removes the baseline gap that inline-block creates */
    .split-line > * {
        display: block;
        margin: 0;
        padding: 0;
        line-height: inherit;
    }

/*Gallery section*/
#officeGallery .gallery-image {
    max-width: 650px;
    height: 500px;
    border-radius: 1rem;
    flex-shrink: 0;
    width: 100%;
}


/*testimonial*/
.testimonial div::-webkit-scrollbar {
    width: 8px;
}

.testimonial div::-webkit-scrollbar-track {
    background: var(--gray-55);
    border-radius: 10px;
}

.testimonial div::-webkit-scrollbar-thumb {
    background: var(--gray-medium);
    border-radius: 10px;
}


.process-section {
    width: 75%;
}

.cta-img {
    width: 80%;
    max-height: 870px;
    object-fit: cover;
    will-change: transform;
}

.cta-box {
    margin-right: 10rem;
}


/*Footer section*/
.map-wrapper {
    background-image: url('/Assets/Homepage/Screenshot\ 2025-05-07\ 100030.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #000;
}

.map-overlay {
    background-color: rgba(247, 247, 247, 0.93);
    /* Light gray overlay */
    width: 100%;
    height: 100%;
    break-inside: avoid;
}


/* Remove weird alignment artifacts */
.city-name li::marker {
    content: none;
}

.state-item.open .city-name {
    display: block !important;
}

.state-name {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

/* Ensure all city lists align left and have no bullets */
.city-name {
    list-style: none;
    padding-left: 0;
    margin: 0;
    text-align: left;
    font-size: 18px;
}


    .city-name li {
        color: var(--secondary);
        font-weight: 500;
        cursor: pointer;
        display: block;
        font-size: 16px;
    }


.state-item.open .fa-chevron-right {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

#menuScroll > ul > li {
    font-family: var(--font-sans);
    color: var(--secondary);
    font-weight: 600;
    font-size: 16px;
}

/* Keep the state header aligned left */
.state-header {
    text-align: left;
}

    /* Prevent chevron from shifting */
    .state-header i {
        flex-shrink: 0;
    }

.menu-list li {
    margin-bottom: 10px;
    font-weight: 500;
    list-style: none;
}

.copyright,
.footer-links {
    color: var(--gray-25);
    font-size: 14px !important;
    font-weight: 400;
    color: #fff !important;
}

/* Add spacing between each footer column */
.footer-menu .row > div {
    margin-bottom: 1rem;
}

/* Add spacing between heading and submenu */
.footer-menu span,
.footer-menu a.text-uppercase {
    display: block;
    margin-bottom: 0.5rem;
}

/* Space between list items */
.footer-menu ul li {
    margin-bottom: 0.25rem;
}

/* Ensure columns don't collapse into each other */
.footer-menu .row {
    gap: 2rem;
    /* Adjust to add more breathing room */
}

.city-list li {
    color: var(--gray-dark);
    font-weight: 500;
    margin-bottom: 5px;
    letter-spacing: 1px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    margin-left: 20px;
}


@media (max-width:1780px) {
    .modal-dialog {
        max-width: 60%;
    }

    #locationModal .modal-dialog {
        max-width: 45%;
    }
}


/*Laptop Viewpoint */
@media (max-width: 1408px) {

    .custom-margin {
        margin-inline: 4rem;
    }

    #mainNav {
        top: 37px;
        transition: top 0.3s ease;
    }

        #mainNav.no-top {
            top: 0;
        }

    #navbarNav {
        justify-content: end !important;
    }

    .cta-box {
        margin-right: 5rem;
    }
}


@media(max-width:1064px) {
    .nav-label {
        display: none;
    }
}


@media(min-width:992px) {
    .mobile-submenu {
        display: block !important;
    }
}

/*Tablet Viewpoint*/
@media (max-width: 986px) {


    .custom-margin {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .hero-viewport {
        height: 65vh;
    }

    .bottom-250 {
        bottom: 35%;
    }

    .process-section {
        width: 100%;
    }


    .cta-img {
        width: 93%;
    }


    #officeGallery .gallery-image {
        max-width: 360px;
        height: 200px;
    }
}


/*Mobile Viewpoint*/
@media (max-width: 652px) {
    .above-nav { display: none; }

    .above-header { display: block; }

    .modal-dialog { max-width: 90%; }

    #locationModal .modal-dialog { max-width: 90%; }


    .custom-padding { padding-inline: 1rem; }

    .hero-viewpoint {
        width: 100%;
        height: 68vh;
    }

    .intro-section { padding-top: 36px; }

    #dropdownMenu { height: calc(100vh - 95px); }
}



/*hero section */
#heroCarousel .carousel-item {
    height: 55vh;
}

#heroCarousel .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.plan-card {
    width: calc(33.8% - 1.5rem); /* Default: 3 per row */
}

/* overview section */


.form-section {
    width: 65%;
    padding-inline: 5rem;
}

.form-label {
    color: var(--primary);
}

.map-img {
    height: 650px;
    
}

.collapse-toggle {
    color: var(--beige);
    transition: color 0.2s ease;
}

.collapse-toggle.active {
    color: var(--accent-light);
    font-weight: 600;
    text-decoration: none;
}


@media (max-width: 1480px) {

    .form-section {
        width: 85%;
        padding-inline: 0rem;
    }

    .plan-card {
        width: calc(50% - 1rem); /* 2 per row */
    }
}


@media (max-width: 1140px) {
    #overview .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .plan-card {
        width: 100%; /* 1 per row */
    }
}





@media (max-width: 576px) {
    #heroCarousel .carousel-item {
        height: 25vh;
    }

    .map-img {
        height: 350px;
    }

    .form-section {
        width: 95%;
        padding-inline: 0rem;
    }
}