* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

/* Narbar starts here */

nav {
    width: 100vw;
    height: 5rem;
}

.header-section {
    width: 100vw;
    height: 4rem;
    display: flex;
    padding: 1.5rem;
    position: relative;
    /* display: none; */
    z-index: 5;
    background-color: white;

}

.header-logo {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
}

.header-logo img {
    width: 12vw;
    height: 9rem;
}

.header-login {
    position: absolute;
    top: 20px;
    right: 3rem;
}

.header-login-box {
    width: 16vw;
    height: 3rem;
    display: flex;
}

.header-login-box .box {
    width: 4vw;
    height: 3rem;
    background-color: #000E38;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.header-login-box span {
    color: white;
    font-size: 2rem;
    margin-left: 1rem;

}

.header-section-1 {
    width: 100vw;
    height: 4rem;
    display: flex;
    padding: 1.5rem;
    position: relative;
    background-image: linear-gradient(#000E38, #3F186A);
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
}

.header-logo-1 {
    position: absolute;
    top: 5px;
    left: 3rem;

}

.header-logo-1 img {
    width: 10vw;
    height: 7rem;
}

.header-login-1 {
    position: absolute;
    top: 20px;
    right: 6rem;
}

.header-login-box-1 {
    width: 15vw;
    height: 3rem;
    border-radius: 1rem;
    background-color: #FFFFFF;
    cursor: pointer;
    color: #230049;
    margin-top: 1rem;
}

.header-login-box-1 button {
    width: 15vw;
    height: 3rem;
    font-weight: 600;
}




/* Navbar ends here */


/* enquire section starts here */

.enquire {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(#000E38, #3F186A);
    overflow: hidden;
}

.enquire-section {
    width: 90vw;
    height: 27rem;
    display: flex;
    gap: 1rem;
    font-family: sans-serif;
}

.enquire-address {
    width: 30vw;
    height: 16rem;
    color: #FFCC81;
    margin-top: 3rem;
    
}


.equire-address-content {
    margin: auto;
    align-items: center;
    width: 28vw;
    height: 5rem;
    margin-top: 1.7rem;
    background-image: linear-gradient(#FFCC81, #E9C79F);
    border-radius: 205px;
    justify-items: center;
    align-content: center;
}

.address-content {
    width: 20vw;
    height: 1.8rem;
    display: flex;
    gap: 7px;
    
}

.address-content .line-btw-text{
    width: 1px; 
    height: 3rem; 
    background-color: black;
}

.enquire-address-text {
    text-align: center;
}

.enquire-address-text h4 {
    color: #3F186A;
}

.enquire-address-text h6 {
    color: #000E38;
}

.address-top-school {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.address-top-school h2 {
    font-size: 2rem;
}

.address-top-school h3 {
    font-size: 2.2rem;
}

.address-top-school h4 {
    font-style: normal;
    font-weight: 300;
}

.enquire-image {
    width: 35vw;
    height: 90rem;
    color: #FFCC81;
    display: flex;
    gap: 1.5rem;
}

.group-img {
    width: 10vw;
    height: 20rem;
    border-radius: 100px;
}

.group-img img {
    width: 10vw;
    height: 20rem;
    border-radius: 100px;
    object-fit: cover;
}

.enquire-mask-group,
.enquire-mask-group-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: scrollUp 15s linear infinite;
}

.enquire-mask-group-1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: scrollUp1 15s linear infinite;

}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-150rem);
    }
}

@keyframes scrollUp1 {
    0% {
        transform: translateY(-40rem);
    }

    100% {
        transform: translateY(-150rem);
    }
}



.enquire-register {
    width: 22vw;
    height: 19rem;
    color: #FFCC81;
    background-color: #230049;
    border-radius: 1rem;
    color: white;
    margin-top: 2.5rem;
}

.enquire-login-form {
    padding: 1.5rem;

}

.enquire-login-form .input-field {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.enquire-login-form input {
    font-size: 12px;
    width: 100%;
    height: 1.8rem;
    border-radius: 0.4rem;
    outline: none;
    padding-left: 4px;
    color: white;
    background-color: #320163;
}

.enquire-login-form .text-area {
    height: 3.5rem;
}

.enquire-submit-box .arrow {
    color: #230049;
    font-size: 2rem;
    margin-left: 0.5rem;
}

.enquire-submit-box {
    margin-top: 2rem;
    width: 9rem;
    height: 2.8rem;
    background-color: white;
    border-radius: 0.4rem;
}

.enquire-submit-box button {
    width: 5.5rem;
    height: 2.2rem;
    background-color: #3F186A;
    float: right;
    justify-items: center;
    margin-top: 4px;
    margin-right: 4px;
    color: white;
    cursor: pointer;
}

.enquire-submit-box button:hover {
    background-color: white;
    color: #230049;
}

.about-school {
    width: 100vw;
    height: 18rem;
    display: flex;
    justify-content: center;
    align-items: center;

}

.about-school-details {
    width: 80vw;
    height: 10rem;
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
}

.about-isolation {
    display: flex;
    width: 20vw;
    height: 10rem;
    text-align: center;
}

.about-isolation img {
    width: 5.5vw;
    height: 8.5rem;
}

.about-school-text {
    width: 7vw;
    height: 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #230049;

}

/* .participate-school{
  width: auto;
   height: 20vh;
} */

.participate-school-group {
    width: 100vw;
    height: 30vh;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.participate-school-group::-webkit-scrollbar {
    display: none;
}

.group-school {
    width: 15rem;
    height: 20vh;
    border: 1px solid rgb(218, 210, 210);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.group-school img {
    width: 8rem;
    height: 5rem;
}

h1 {
    text-align: center;
    color: #230049;
    margin-top: 1.5rem;
}

.school-path {
    display: flex;
    justify-content: center;
    align-items: center;
}

.choose-path-school {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 2.5rem;
}

.choose-school {
    position: relative;
    width: 17rem;
    height: 17rem;
    border-radius: 1rem;
}

.choose-school img {
    width: 17rem;
    height: 17rem;
    border-radius: 1rem;
    object-fit: cover;
}

.school-path-text {
    position: absolute;
    color: white;
    font-size: 15px;
    bottom: 7px;
    left: 5px;
}



/* school-appointment */

.school-appointment {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    padding: 4rem;
    background: linear-gradient(90deg, #DEC1FF 40%, transparent);
    overflow: hidden;
    margin-top: 3.5rem;
}


.school-appoint {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(241, 231, 255, 1) 40%,
            rgba(241, 231, 255, 0.6) 55%,
            rgba(0, 0, 0, 0) 70%);
    z-index: 1;
}


.school-appoint-details {
    position: relative;
    z-index: 2;
    width: 45%;
    height: 75%;
    bottom: 1rem;
}

.school-appoint-text {
    color: #7a4dd6;
    font-style: italic;
    font-size: 1.5rem;
}

.school-appoint-details h1 {
    font-size: 3rem;
    color: #2a0d52;
    line-height: 1.2;
    text-align: start;
}

.school-appoint-details p {
    font-size: 1.5rem;
    color: #6b4ca5;
    margin-bottom: 2rem;
}

.school-appoint-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 2px solid #2a0d52;
    background: transparent;
    color: #2a0d52;
    font-weight: 600;
    cursor: pointer;
    padding-right: 6px;
}

.school-appoint-btn span {
    background-color: #230049;
    color: white;
    font-size: 1.5rem;
    padding: 0.9rem 1.4rem;
}

.school-appoint-image {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60%;
}

.school-appoint-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.school-exhibition {
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(#3F186A, #000E38);
}

.school-exhibition-group h1 {
    padding-top: 3rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.exhibition-group {
    background-image: linear-gradient(#DDBFFF, #EDDDFF);
    width: 17.5rem;
    height: 16rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem;
    color: #230049;
    flex-shrink: 0;
}

.exhibition-groups {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 2rem;
    padding-left: 5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

}

.exhibition-groups::-webkit-scrollbar {
    display: none;
}


.exhibition-group img {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
}

.exhibition-group span {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 0.6rem;
}

.exhibition-group p {
    font-size: 1.1rem;
}

.bg-box {
    width: 100%;
    height: 20vh;
    border-top: 1px solid #3F186A;
    position: relative;
}

.bg-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-arrow {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: absolute;
    top: 10px;
    left: 38rem;
    margin-top: 0.5rem;
}

.box-arrow .image-1 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #3F186A;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
}

.box-arrow .image-1 img {
    width: 2rem;
    height: 2rem;

}

.box-arrow .image-2 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-arrow .image-2 img {
    width: 2rem;
    height: 2rem;

}

.footer-section {
    width: 100vw;
    height: 30%;
    background-image: linear-gradient(#3F186A, #000E38);
    margin-top: 3rem;
    color: white;
    padding: 2rem;
}

.footer-section .icon-img {
    width: 3vw;
    height: 2rem;
    /* border: 2px solid black; */
    border-radius: 4px;
    background-image: linear-gradient(#DDBFFF, #EDDDFF);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-section .icon-img img {
    width: 1.5vw;
    height: 1.2rem;
}

.footer-section .logo-image img {
    width: 6vw;
    height: 5rem;
    margin-right: 2rem;
}

.footer-contact-details {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.footer-contact-details .contact-detail {
    width: 20vw;
    height: 7rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.contact-detail-text {
    width: 20vw;
    height: 7rem;
}

.contact-detail-boldtext {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.contact-detail .media-icon {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

.copyright-text {
    padding: 0.8rem;
    color: #000E38;
    text-align: center;
    font-size: 14px;
}



/* media query starts here */
/* Medium Tablet/Laptop (900px - 1024px) */
@media screen and (min-width: 900px) and (max-width: 1024px) {
    /* Navbar */
    .header-section {
        height: 5rem;
    }

    .header-logo img {
        width: 14vw;
        height: 7.5rem;
    }

    .header-login {
        right: 2.5rem;
        top: 1.5rem;
    }

    .header-login-box {
        width: 20vw;
        height: 3.8rem;
        display: flex;
        align-items: center;
    }

    .header-login-box .box {
        width: 5.5vw;
        height: 3.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box span {
        font-size: 2.2rem;
        line-height: 3.8rem;
        margin-top: 0;
        margin-left: 0.8rem;
    }

    .header-section-1 {
        height: 5rem;
    }

    .header-logo-1 {
        top: 0.3rem;
    }

    .header-logo-1 img {
        width: 12vw;
        height: 6.5rem;
    }

    .header-login-1 {
        right: 3.5rem;
        top: 1.5rem;
    }

    .header-login-box-1 {
        width: 18vw;
        height: 3.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box-1 button {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: 600;
    }

    /* Enquire Section */
    .equire-address-content {
        width: 27vw;
        padding: 0.8rem 1rem;
    }

    .address-content {
        width: auto;
        max-width: 100%;
        flex-direction: row;
        gap: 0.6rem;
    }

    .address-content .line-btw-text {
        display: block;
        width: 1px;
        height: 2.5rem;
        background-color: black;
    }
}

/* Tablet Devices (768px - 899px) */
@media screen and (min-width: 768px) and (max-width: 899px) {
    /* Navbar */
    .header-section {
        height: 5rem;
    }

    .header-logo {
        top: 1.3rem;
    }

    .header-logo img {
        width: 16vw;
        height: 6.5rem;
    }

    .header-login {
        right: 4rem;
        top: 1.5rem;
    }

    .header-login-box button {
        width: 20vw;
        height: 3rem;
        font-size: 1rem;
        cursor: pointer;
        font-weight: 600;
    }

    .header-login-box {
        width: 26vw;
        height: 3rem;
        display: flex;
        align-items: center;
    }

    .header-login-box .box {
        width: 6.5vw;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box span {
        font-size: 1.9rem;
        line-height: 3rem;
        margin-top: 0;
        margin-left: 0.7rem;
    }

    .header-section-1 {
        height: 5rem;
    }

    .header-logo-1 {
        top: 0.4rem;
    }

    .header-logo-1 img {
        width: 14vw;
        height: 6rem;
    }

    .header-login-1 {
        right: 2.5rem;
        top: 1.5rem;
    }

    .header-login-box-1 {
        width: 21vw;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box-1 button {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Enquire Section */
    .equire-address-content {
        width: 28vw;
        padding: 0.7rem 0.9rem;
    }

    .address-content {
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .address-content .line-btw-text {
        display: none;
    }

    .enquire-address {
        width: 32vw;
    }

    .enquire-image {
        width: 28vw;
    }

    .group-img {
        width: 8.5vw;
        height: 17rem;
    }

    .group-img img {
        width: 8.5vw;
        height: 17rem;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (max-width: 1024px) {
    /* Navbar */
    .header-logo img {
        width: 15vw;
        height: 7rem;
    }

    .header-login {
        right: 2rem;
        top: 1.8rem;
    }

    .header-login-box {
        width: 22vw;
        height: 3.5rem;
        display: flex;
        align-items: center;
    }

    .header-login-box .box {
        width: 6vw;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box span {
        font-size: 2rem;
        line-height: 3.5rem;
        margin-top: 0;
    }

    .header-login-1 {
        right: 3rem;
        top: 2rem;
    }

    .header-logo-1 img {
        width: 13vw;
        height: 6rem;
    }

    .header-login-box-1 {
        width: 20vw;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box-1 button {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1rem;
    }

    /* Enquire Section */
    .enquire-section {
        width: 95vw;
        height: auto;
        gap: 1.5rem;
    }

    .enquire-address {
        width: 30vw;
    }

    .equire-address-content {
        width: 28vw;
        padding: 0.7rem 0.9rem;
        min-height: auto;
        height: auto;
    }

    .address-content {
        width: auto;
        max-width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .address-content .line-btw-text {
        display: none;
    }

    .address-top-school {
        gap: 0.15rem;
    }

    .enquire-address-text {
        margin-top: 0.4rem;
    }

    .enquire-image {
        width: 30vw;
        height: 60rem;
        overflow: hidden;
        gap: 0.8rem;
    }

    .group-img {
        width: 9vw;
        height: 18rem;
    }

    .group-img img {
        width: 9vw;
        height: 18rem;
    }

    .enquire-register {
        width: 28vw;
        margin-top: 2rem;
    }

    /* About School */
    .about-school {
        height: auto;
        min-height: 18rem;
        padding: 2rem 0;
    }

    .about-school-details {
        width: 90vw;
        height: auto;
        justify-content: center;
    }

    .about-isolation {
        width: 22vw;
        height: auto;
        margin-bottom: 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .about-isolation img {
        width: 5vw;
        height: 6rem;
        flex-shrink: 0;
    }

    .about-school-text {
        width: auto;
        flex: 1;
        height: auto;
        text-align: center;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .choose-path-school {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* School Appointment */
    .school-appointment {
        padding: 2rem;
    }

    .school-appoint-details {
        width: 55%;
    }

    .school-appoint-details h1 {
        font-size: 2.5rem;
    }

    .school-appoint-image {
        width: 50%;
    }

    /* Exhibition */
    .exhibition-groups {
        padding-left: 2rem;
    }

    .box-arrow {
        left: 25rem;
    }

    /* Footer */
    .footer-contact-details {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .footer-contact-details .contact-detail {
        width: 30vw;
        margin-bottom: 0.3rem;
        height: auto;
        min-height: auto;
    }

    .contact-detail-text {
        width: 25vw;
        height: auto;
    }

    .footer-section .icon-img {
        width: 4vw;
    }

    .footer-section .icon-img img {
        width: 2vw;
    }

    .footer-section .logo-image img {
        width: 8vw;
        margin-bottom: 1rem;
    }

    .contact-detail-boldtext {
        margin-bottom: 0.3rem;
    }

    .copyright-text {
        padding: 0.6rem;
        margin-top: 0.5rem;
    }
}

/* Mobile Devices (481px - 767px) */
@media screen and (max-width: 767px) {
    /* Navbar */
    .header-section {
        padding: 1rem;
        height: 5.5rem;
    }

    .header-logo {
        left: 1rem;
        top: 1rem;
    }

    .header-logo img {
        width: 30vw;
        height: 5rem;
    }

    .header-login {
        right: 4rem;
        top: 1.3rem;
    }

    .header-login-box {
        width: 38vw;
        height: 3rem;
        display: flex;
        align-items: center;
    }

    .header-login-box button {
        width: 25vw;
        height: 2.8rem;
        font-size: 1rem;
        cursor: pointer;
        font-weight: 600;
    }

    .header-login-box .box {
        width: 10vw;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box span {
        font-size: 1.4rem;
        margin-left: 0.5rem;
        margin-top: 0;
        line-height: 3rem;
    }

    .header-section-1 {
        padding: 1rem;
        height: 5.5rem;
    }

    .header-logo-1 {
        left: 1rem;
        top: 0.6rem;
    }

    .header-logo-1 img {
        width: 28vw;
        height: 5rem;
    }

    .header-login-1 {
        right: 1rem;
        top: 1.3rem;
    }

    .header-login-box-1 {
        width: 38vw;
        height: 3.2rem;
        margin-top: 0;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box-1 button {
        width: 100%;
        height: 100%;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    /* Enquire Section */
    .enquire {
        height: auto;
        min-height: 100vh;
        padding: 2rem 0;
    }

    .enquire-section {
        width: 95vw;
        flex-direction: column;
        height: auto;
        gap: 2rem;
        align-items: center;
    }

    .enquire-address {
        width: 90vw;
        height: auto;
        margin-top: 1rem;
        order: 1;
    }

    .equire-address-content {
        width: 75vw;
        height: auto;
        min-height: auto;
        padding: 0.6rem 0.9rem;
        border-radius: 70px;
    }

    .address-content {
        width: auto;
        max-width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
    }

    .address-content .line-btw-text {
        display: none;
    }

    .address-top-school {
        gap: 0.1rem;
    }

    .address-top-school h2 {
        font-size: 1.3rem;
        text-align: center;
    }

    .address-top-school h3 {
        font-size: 1.5rem;
        text-align: center;
    }

    .address-top-school h4 {
        text-align: center;
        font-size: 0.9rem;
    }

    .enquire-address-text {
        margin-top: 0.25rem;
    }

    .enquire-address-text h4 {
        font-size: 0.95rem;
    }

    .enquire-address-text h6 {
        font-size: 0.85rem;
    }

    .enquire-image {
        width: 90vw;
        height: 30rem;
        gap: 0.7rem;
        order: 2;
        overflow: hidden;
        margin-top: 0;
        justify-content: center;
    }

    .group-img {
        width: 28vw;
        height: 11rem;
        border-radius: 50px;
    }

    .group-img img {
        width: 28vw;
        height: 11rem;
        border-radius: 50px;
    }

    .enquire-mask-group,
    .enquire-mask-group-1,
    .enquire-mask-group-2 {
        gap: 0.7rem;
    }

    @keyframes scrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-70rem);
        }
    }

    @keyframes scrollUp1 {
        0% {
            transform: translateY(-22rem);
        }
        100% {
            transform: translateY(-70rem);
        }
    }

    .enquire-register {
        width: 85vw;
        height: auto;
        padding-bottom: 1rem;
        order: 3;
        margin-top: 0;
    }

    .enquire-submit-box {
        width: 100%;
    }

    /* About School */
    .about-school {
        height: auto;
        padding: 2rem 0;
        min-height: auto;
    }

    .about-school-details {
        width: 90vw;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        height: auto;
    }

    .about-isolation {
        width: 42vw;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
    }

    .about-isolation img {
        width: 14vw;
        height: 5rem;
        flex-shrink: 0;
    }

    .about-school-text {
        width: auto;
        flex: 1;
        text-align: center;
        margin-top: 0;
        height: auto;
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .participate-school-group {
        height: auto;
        padding: 1rem;
    }

    .group-school {
        width: 12rem;
        height: 15vh;
    }

    h1 {
        font-size: 1.8rem;
        padding: 0 1rem;
    }

    .choose-path-school {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .choose-school {
        width: 85vw;
        height: 15rem;
    }

    .choose-school img {
        width: 85vw;
        height: 15rem;
    }

    /* School Appointment */
    .school-appointment {
        min-height: auto;
        padding: 2rem 1rem;
        background: linear-gradient(180deg, #DEC1FF 60%, transparent);
        flex-direction: column;
    }

    .school-appoint {
        background: linear-gradient(180deg,
                rgba(241, 231, 255, 1) 60%,
                rgba(241, 231, 255, 0.6) 75%,
                rgba(0, 0, 0, 0) 90%);
    }

    .school-appoint-details {
        width: 100%;
        height: auto;
        bottom: 0;
        margin-bottom: 2rem;
    }

    .school-appoint-text {
        font-size: 1.2rem;
    }

    .school-appoint-details h1 {
        font-size: 2rem;
    }

    .school-appoint-details p {
        font-size: 1.2rem;
    }

    .school-appoint-btn {
        font-size: 0.9rem;
    }

    .school-appoint-btn span {
        font-size: 1.2rem;
        padding: 0.7rem 1rem;
    }

    .school-appoint-image {
        position: relative;
        width: 100%;
        height: 40vh;
    }

    /* Exhibition */
    .school-exhibition {
        height: auto;
        padding-bottom: 2rem;
    }

    .school-exhibition-group h1 {
        padding-top: 2rem;
        font-size: 1.5rem;
    }

    .exhibition-group {
        width: 15rem;
        height: auto;
        min-height: 14rem;
    }

    .exhibition-groups {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .bg-box {
        height: 15vh;
    }

    .box-arrow {
        left: 50%;
        transform: translateX(-50%);
        top: 5px;
    }

    .box-arrow .image-1,
    .box-arrow .image-2 {
        width: 2.5rem;
        height: 2.5rem;
    }

    .box-arrow .image-1 img,
    .box-arrow .image-2 img {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Footer */
    .footer-section {
        padding: 1.5rem 1rem;
        height: auto;
    }

    .footer-section .icon-img {
        width: 10vw;
        height: 2.5rem;
    }

    .footer-section .icon-img img {
        width: 5vw;
        height: 1.5rem;
    }

    .footer-section .logo-image img {
        width: 20vw;
        height: 4rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

    .footer-contact-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-contact-details .contact-detail {
        width: 85vw;
        height: auto;
        min-height: auto;
        gap: 0.8rem;
    }

    .contact-detail-text {
        width: 75vw;
        height: auto;
    }

    .contact-detail-boldtext {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }

    .contact-detail .media-icon {
        margin-top: 0.3rem;
    }

    .copyright-text {
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
}

/* Small Mobile Devices (320px - 480px) */
@media screen and (max-width: 480px) {
    /* Navbar */
    .header-logo img {
        width: 35vw;
        height: 4.5rem;
    }

    .header-login {
        top: 1.3rem;
        right: 3rem;
    }

    .header-login-box {
        width: 42vw;
        height: 2.8rem;
        display: flex;
        align-items: center;
    }

    .header-login-box .box {
        width: 12vw;
        height: 2.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box span {
        font-size: 1.3rem;
        line-height: 2.8rem;
        margin-top: 0;
    }

    .header-login-box button {
        width: 25vw;
        height: 2.8rem;
        font-size: 1rem;
        cursor: pointer;
        font-weight: 600;
    }

    .header-logo-1 img {
        width: 32vw;
        height: 4.5rem;
    }

    .header-login-1 {
        top: 1.3rem;
    }

    .header-login-box-1 {
        width: 40vw;
        font-size: 0.85rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-login-box-1 button {
        width: 100%;
        height: 100%;
        font-size: 0.85rem;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    

    /* Enquire Section */
    .enquire {
        min-height: 100vh;
        height: auto;
    }

    .enquire-section {
        gap: 1.5rem;
    }

    .equire-address-content {
        width: 80vw;
        padding: 0.5rem 0.8rem;
    }

    .address-content {
        width: auto;
        max-width: 100%;
        gap: 0.15rem;
    }

    .address-content .line-btw-text {
        display: none;
    }

    .enquire-image {
        height: 28rem;
        gap: 0.6rem;
    }

    .group-img {
        width: 29vw;
        height: 10rem;
    }

    .group-img img {
        width: 29vw;
        height: 10rem;
    }

    @keyframes scrollUp {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-60rem);
        }
    }

    @keyframes scrollUp1 {
        0% {
            transform: translateY(-18rem);
        }
        100% {
            transform: translateY(-60rem);
        }
    }

    .address-top-school h2 {
        font-size: 1.15rem;
    }

    .address-top-school h3 {
        font-size: 1.35rem;
    }

    .address-top-school h4 {
        font-size: 0.8rem;
    }

    .enquire-address-text h4 {
        font-size: 0.9rem;
    }

    .enquire-address-text h6 {
        font-size: 0.8rem;
    }

    .enquire-register {
        width: 90vw;
    }

    /* About School */
    .about-isolation {
        width: 44vw;
    }

    .about-isolation img {
        width: 16vw;
        height: 4.5rem;
    }

    .about-school-text {
        font-size: 0.85rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    .school-appoint-details h1 {
        font-size: 1.7rem;
    }

    .school-appoint-details p {
        font-size: 1rem;
    }

    .exhibition-group {
        width: 13rem;
    }

    .box-arrow {
        gap: 1rem;
    }

    /* Footer */
    .footer-section .logo-image img {
        width: 25vw;
        height: 3.5rem;
        margin-bottom: 0.8rem;
    }

    .footer-section .icon-img {
        width: 12vw;
    }

    .footer-section .icon-img img {
        width: 6vw;
    }

    .footer-contact-details {
        gap: 0.4rem;
    }

    .footer-contact-details .contact-detail {
        min-height: auto;
        height: auto;
    }

    .contact-detail-text {
        height: auto;
    }

    .contact-detail-boldtext {
        margin-bottom: 0.15rem;
    }

    .copyright-text {
        padding: 0.5rem;
        margin-top: 0.3rem;
    }
}

/* Large Desktop (1440px and above) */
@media screen and (min-width: 1440px) {
    .header-logo img {
        width: 10vw;
    }

    .header-login-box {
        width: 14vw;
    }

    .header-login-box .box {
        width: 3.5vw;
    }

    .header-logo-1 img {
        width: 8vw;
    }

    .header-login-box-1 {
        width: 12vw;
    }

    .header-login-box-1 button {
        width: 12vw;
    }

    .enquire-section {
        width: 85vw;
    }

    .enquire-address {
        width: 26vw;
    }

    .equire-address-content {
        width: 24vw;
        padding: 0.8rem 1rem;
    }

    .address-content {
        width: 18vw;
    }

    .enquire-image {
        width: 30vw;
    }

    .group-img {
        width: 8.5vw;
    }

    .group-img img {
        width: 8.5vw;
    }

    .enquire-register {
        width: 20vw;
    }

    .about-isolation img {
        width: 4.5vw;
    }

    .about-school-text {
        width: 6vw;
    }

    .box-arrow {
        left: 45rem;
    }

    .footer-section .icon-img {
        width: 2.5vw;
    }

    .footer-section .icon-img img {
        width: 1.2vw;
    }

    .footer-section .logo-image img {
        width: 5vw;
    }

    .footer-contact-details .contact-detail {
        width: 18vw;
    }

    .contact-detail-text {
        width: 16vw;
    }
}