/* Lock scrolling when popup is active */

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


#pop-up-container,
#pop-up-container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee5da6d;
    flex-direction: column;
    gap: 2vw;
    width: 100%;
    height: 100vh;
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

#pop-up-container2 {
    /* display: flex; */
    padding: 6vw;
}

#pop-up,
#pop-up2 {
    width: 30vw;
    height: 15vw;
    background-color: #262424;
    border-radius: 2vw;
    padding: 20px 40px;
    color: #EEE5DA;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    transition: all 1.5s ease linear;
}

#pop-up2 {
    gap: 2vw;
}

h2.pop-heading {
    text-align: center;
    font-size: 1.8vw;
    font-weight: 600;
    color: var(--primary-color);
}

h3.pop-sub-head {
    text-align: center;
    font-size: 1.3vw;
    font-weight: 400;
    color: var(--primary-color);
}

button.pop-btn {
    background-color: #E06E2E;
    margin: 0 35%;
    border-radius: 20px;
    padding: 5px 20px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #EEE5DA;
    font-size: 1vw;
    cursor: pointer;
}

#contact-hero {
    margin-top: 4vw;
    width: 100%;
    height: 60vmax;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contact-info {
    width: 60%;
    height: 100%;
}

#info-top {
    width: 100%;
    height: 60%;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: fit-content;
}

#info-top p {
    font-size: 1.5vw;
    padding-right: 8rem;
}

ul#mails li,
ul#call li {
    list-style: none;
}

ul#mails li a,
ul#call li a {
    text-decoration: none;
}

#info-bottom {
    width: 100%;
    height: 30%;
    padding-top: 4vw;
    padding-right: 12vw;
    padding-left: 4rem;
}

#info-heading h2 {
    font-size: 1.6rem;
    font-weight: 600;
}

p#info-para {
    font-size: 1.3vw;
}

#contact-form {
    /* background-color: red; */
    height: 100%;
    width: 40%;
    display: flex;
    /* align-items: center; */
    padding: 4vw 0;
    justify-content: center;
}

form {
    background-color: var(--secondary-color);
    /* width: 35vmax; */
    width: 90%;
    height: 46vmax;
    min-height: 50vmax;
    border-radius: 30px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    padding: 3vw 3vw;
    display: flex;
    gap: 2vw;
    flex-direction: column;
    justify-content: center;
    color: var(--primary-color);
}

.inputs-holder {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    width: 100%;
    justify-content: space-between;
}

.input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input input {
    padding: .3vw 1.5vw;
    width: 100%;
}

.input select {
    padding: .2vw 1vw;
    width: 100%;
    font-size: 1.2rem;
}

label {
    color: var(--primary-color);
    font-size: 1vw;
}

textarea {
    font-size: 1vw;
    resize: vertical;
    padding: 1rem;
    font-weight: 500;
    /* border-radius: 20px; */
    min-height: 10vw;
}

.input-btn {
    width: 40%;
    display: inline-block;
    margin: 0 auto;
    color: var(--secondary-color);
    background-color: var(--primary-color);
}

.input-btn:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

#upper-texts {
    display: flex;
    flex-direction: column;
    min-height: 6vw;
}

.input-heading {
    text-transform: uppercase;
    color: var(--primary-color);
    font-size: 2vw;
    font-weight: 500;
}

.input-subheading {
    font-size: 1.4vw;
    color: var(--primary-color);
    font-weight: 400;
}





#achievements {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    width: 100%;
    height: 35vmax;
}

#stats-container {
    width: 60%;
    height: 90%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: baseline;
    padding: 0 4rem;
    justify-content: center;
}

.stat-card {
    width: 20vmax;
    height: 12vmax;
    background-color: #FF8C00;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-txt {
    font-size: 4vw;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: -20px;
}

.small {
    color: var(--primary-color);
    font-size: 1.7vw;
}

.sub-txt {
    font-size: 1.5vw;
    color: var(--primary-color);
}

.stat-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

#stats-text {
    display: flex;
    align-items: end;
    padding: 6rem 2rem;
}


/* Main Location */

#main-location {
    width: 100%;
    height: 40vmax;
    display: flex;
}

#loc-left {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-wrapper iframe {
    width: 30vmax;
    height: 30vmax;
    /* background-color: #FF8C00; */
    border-radius: 30px;
}

#loc-right {
    padding: 14vw 2vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.small-heading {
    font-size: 1.3vw;
    font-weight: 500;
}

.main-heading {
    font-size: 2.5vw;
    font-weight: 500;
}

.loc-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.branch {
    font-size: 1.4vw;
    font-weight: 5 00;
}

.branch-loc {
    font-size: 1.3vw;
    font-weight: 400;
    /* padding-right: 20vw; */
}


#other-location {
    width: 100%;
    height: 40vmax;
    display: flex;
}

#other-loc-left {
    padding: 14vw 8vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 50%;
    height: 100%;
}

#other-loc-right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#faqs {
    width: 100%;
    height: 40vmax;
    display: flex;
}

#faqs-left {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 4vw 4vw;
}

.sub-text {
    font-size: 3vw;
    font-weight: 400;
    padding-right: 16vw;
    line-height: 90%;
}

.small-txt {
    font-size: 1.6vw;
}

.small-txt a {
    text-decoration: none;
    border-bottom: 2px solid #FF8C00;
}

#faqs-right {
    width: 50%;
    height: 100%;
    padding: 4vw 6vw;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#faqs-right details {
    font-size: 1.4vw;
    cursor: pointer;
    border-bottom: 2px solid #FF8C00;
    padding-bottom: 10px;
}

#faqs-right details p {
    font-size: 1.2vw;
    border: 2px solid #E06E2E;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-top: 10px;
    padding: 1vw;
    background-color: #D9D9D9;
}


/* Responsive Layout */

@media screen and (max-width: 1000px) {
    #pop-up-container2 {
        padding: 6vw;
    }

    #pop-up,
    #pop-up2 {
        width: 60vw;
        height: fit-content;
        background-color: #262424;
        border-radius: 4vw;
        padding: 20px 40px;
        color: #EEE5DA;
        display: flex;
        flex-direction: column;
        gap: 2vw;
        transition: all 1.5s ease linear;
    }

    #pop-up2 {
        gap: 2vw;
    }

    h2.pop-heading {
        text-align: center;
        font-size: 3vw;
        font-weight: 600;
        color: var(--primary-color);
    }

    h3.pop-sub-head {
        text-align: center;
        font-size: 2vw;
        font-weight: 400;
        color: var(--primary-color);
    }

    button.pop-btn {
        font-size: 2vw;
    }

    #contact-hero {
        height: fit-content;
        flex-direction: column;
    }

    #contact-info {
        width: 100%;
        height: 50%;
    }

    #info-top {
        gap: 3vw;
        align-items: center;
    }

    #info-top p {
        font-size: 2.5vw;
        padding-right: 0;
    }

    #contact-form {
        /* background-color: red; */
        height: 100%;
        width: 100%;
        display: flex;
        /* align-items: center; */
        padding: 4vw 0;
        justify-content: center;
    }

    form {
        width: 90%;
        height: fit-content;
        min-height: fit-content;
        padding: 4vw 6vw;
    }

    .inputs-holder {
        gap: 3vw;
    }

    .input input {
        padding: 1vw 1.5vw;
        width: 100%;
    }

    .input select {
        padding: 1vw 1.5vw;
        width: 100%;
        font-size: 1.2rem;
    }

    label {
        color: var(--primary-color);
        font-size: 1.4vw;
    }

    textarea {
        font-size: 1.4vw;
        resize: vertical;
        padding: 2vw;
        font-weight: 500;
        /* border-radius: 20px; */
        min-height: 12vw;
    }

    .input-heading {
        font-size: 4vw;
    }

    .input-subheading {
        font-size: 2.4vw;
    }

    ul#mails li a,
    ul#call li a {
        font-size: 2vw;
    }

    #info-bottom {
        width: 100%;
        height: fit-content;
        padding-top: 4vw;
        padding-bottom: 4vw;
        padding-right: 12vw;
        padding-left: 4rem;
    }

    #info-heading h2 {
        font-size: 4vw;
        font-weight: 600;
    }

    p#info-para {
        font-size: 2.5vw;
    }

    .input-btn:hover {
        color: var(--secondary-color);
        background-color: var(--primary-color);
    }

    #achievements {
        height: 70vmax;
        flex-direction: column-reverse;
        align-items: center;
        margin: 4vw 0;
    }

    #stats-container {
        width: 100%;
        height: 80%;
        padding: 0 6vw;
        align-items: center;

    }

    #stats-text {
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2vw;
    }

    .stat-card {
        width: 40vw;
        height: 20vw;
    }

    .main-txt {
        font-size: 8vw;
        font-weight: 500;
        color: var(--primary-color);
        margin-bottom: -2vw;
    }

    .small {
        color: var(--primary-color);
        font-size: 4vw;
    }

    .sub-txt {
        font-size: 3vw;
        color: var(--primary-color);
    }

    /* Location Section */

    #main-location {
        width: 100%;
        display: flex;
    }


    #loc-right {
        gap: 2vw;
    }

    .small-heading {
        font-size: 2vw;
        font-weight: 500;
    }

    .main-heading {
        font-size: 3.4vw;
        font-weight: 500;
    }

    .loc-bottom {
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }

    .branch {
        font-size: 2vw;
        font-weight: 5 00;
    }

    .branch-loc {
        font-size: 1.8vw;
        font-weight: 400;
        /* padding-right: 20vw; */
    }

    #other-loc-left {
        gap: 2vw;
    }

    /* FAQs */
    #faqs {
        height: fit-content;
        margin-top: 6vw;
        flex-direction: column;
        align-items: center;
    }

    #faqs-left {
        width: 100%;
        gap: 2vw;
        align-items: center;
        /* margin: 0 auto; */
        height: 40%;
    }

    .sub-text {
        font-size: 4vw;
        padding-right: 0;
        margin-top: 6vw;

    }

    .small-txt {
        font-size: 2vw;
    }

    .small-txt a {
        text-decoration: none;
        border-bottom: 2px solid #FF8C00;
    }

    #faqs-right {
        width: 90%;
    }

    #faqs-right details {
        font-size: 2.5vw;
    }

    #faqs-right details p {
        font-size: 2vw;
        border: 2px solid #E06E2E;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 10px;
        padding: 2vw;
        background-color: #D9D9D9;
    }
}



@media screen and (max-width: 500px) {

    #pop-up,
    #pop-up2 {
        width: 80vw;
        align-items: center;
        justify-content: center;
    }

    button.pop-btn {
        font-size: 4vw;
        padding: 1vw 15vw;
    }

    h2.pop-heading {
        font-size: 5vw;
    }

    h3.pop-sub-head {
        font-size: 3vw;
    }

    #info-top p {
        font-size: 4vw;
        padding-right: 0;
        text-align: center;
    }

    ul#mails li a,
    ul#call li a {
        font-size: 3vw;
    }

    #info-bottom {
        gap: 4vw;
        display: flex;
        flex-direction: column;
    }

    #info-heading h2 {
        font-size: 5.5vw;
        font-weight: 600;
    }

    p#info-para {
        font-size: 3.5vw;
        line-height: 4vw;
    }

    form {
        width: 90%;
        height: fit-content;
        min-height: fit-content;
        padding: 4vw 6vw;
        gap: 4vw;
    }

    .inputs-holder {
        gap: 3vw;
    }

    .input input {
        padding: 1vw 1.5vw;
        width: 100%;
    }

    .input select {
        padding: 1vw 1.5vw;
        width: 100%;
        font-size: 3.5vw;
    }

    label {
        color: var(--primary-color);
        font-size: 2.4vw;
    }

    textarea {
        font-size: 4vw;
        resize: vertical;
        padding: 2vw;
        font-weight: 500;
        /* border-radius: 20px; */
        min-height: 12vw;
    }

    .input-heading {
        font-size: 7vw;
    }

    .input-subheading {
        font-size: 4vw;
    }


    #achievements {
        height: 100vh;
        flex-direction: column-reverse;
        align-items: center;
        margin: 4vw 0;
        gap: 6vw;
        justify-content: start;
    }

    #stats-container {
        width: 100%;
        height: 80%;
        padding: 0 6vw;
        align-items: center;
        gap: 6vw;

    }

    .stat-holder {
        /* background-color: red; */
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 6vw;
    }

    #stats-text {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2vw;
    }

    .stat-card {
        width: 90%;
        height: 30vw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .main-txt {
        font-size: 10vw;
        font-weight: 500;
        color: var(--primary-color);
        margin-bottom: -2vw;
    }

    .small {
        color: var(--primary-color);
        font-size: 6vw;
    }

    .sub-txt {
        font-size: 4vw;
        color: var(--primary-color);
    }

    /* Location Section */

    #main-location {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 80vh;
        align-items: center;
    }

    #loc-left {
        /* background-color: yellow; */
        width: 100%;
        height: 50%;
    }

    #loc-right {
        gap: 2vw;
    }

    .small-heading {
        font-size: 8vw;
        font-weight: 500;
    }

    .main-heading {
        font-size: 5vw;
        font-weight: 500;
    }

    .loc-bottom {
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }

    .branch {
        font-size: 4.6vw;
        font-weight: 5 00;
    }

    .branch-loc {
        font-size: 4vw;
        font-weight: 400;
        /* padding-right: 20vw; */
    }

    #other-location {
        flex-direction: column-reverse;
        height: 70vh;
        align-items: center;
    }

    #other-loc-left {
        gap: 2vw;
        width: 90%;
    }

    #other-loc-right {
        height: 50%;
        width: 100%;
    }

    /* FAQs */
    #faqs {
        height: fit-content;
        margin-top: 6vw;
        flex-direction: column;
        align-items: center;
        padding: 4vw 0;

    }

    #faqs-left {
        width: 100%;
        gap: 4vw;
        align-items: center;
        /* margin: 0 auto; */
        height: 40%;
    }

    .sub-text {
        font-size: 6vw;
        padding-right: 0;
        margin-top: 6vw;

    }

    .small-txt {
        font-size: 4vw;
        text-align: center;
    }

    .small-txt a {
        text-decoration: none;
        border-bottom: 2px solid #FF8C00;
    }

    #faqs-right {
        width: 100%;
        padding: 0 6vw;
    }

    #faqs-right details {
        font-size: 4.5vw;
    }

    #faqs-right details p {
        font-size: 4vw;
        border: 2px solid #E06E2E;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 10px;
        padding: 2vw;
        background-color: #D9D9D9;
    }

}