@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

.carousel-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.bghome1 {
    background-image: url("https://lh3.googleusercontent.com/pw/AJFCJaVPXXEYTpn9zAcbkZhH--9vPddrcG-YEBYGf3PslRGkQxJ4tYjXvn4T57argalrgGwC28CCpKjViFRCEgKtibMWjYwiE5amxyDlbF3uiiIHSwFAleeG=w2400");
    background-size: cover;
    height: 100%;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.nav_item_size {
    font-size: 25px;
}

.dropdown-content {
    display: none;
    position: absolute;
    font-size: 15px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    left: -100px;
}

.dropdown-content1 {
    display: none;
    position: absolute;
    font-size: 15px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    left: -20px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropdown-content1 {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

.pull-right {
    float: right;
}

.hdinghome1 {
    color: #ded557;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.hdinghome2 {
    color: white;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.btnhome1 {
    background-color: #ded557;
    color: black;
    border-radius: 10px;
}

.btnhome1_lg {
    background-color: #ded557;
    color: black;
    border-radius: 10px;
    width: 110px;
}

.character_home {
    float: right;
}

.character_home_lg {
    float: right;
    position: absolute;
    top: -28px;
    left: 180px;
}

.character_home_el {
    float: right;
    position: absolute;
    top: 45px;
    left: 200px;
}



.bghome2 {
    background-color: #7952a3;
}

.student_mascot-container {
    position: relative;
    display: inline-block;
}

.student_mascot {

    /* Adjust the size as per your requirement */
    height: auto;
    transition: transform 0.3s;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.student_mascot-container:hover .student_mascot {
    transform: scale(1.5);
    /* Adjust the scale factor as per your requirement */
}

.student_mascot-container:hover .caption {
    opacity: 1;
}

.teacher_mascot-container {
    position: relative;
    display: inline-block;
}

.teacher_mascot {
    /* Adjust the size as per your requirement */
    height: auto;
    transition: transform 0.3s;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.teacher_mascot-container:hover .teacher_mascot {
    transform: scale(1.5);
    /* Adjust the scale factor as per your requirement */
}

.teacher_mascot-container:hover .caption {
    opacity: 1;
}

.school_mascot-container {
    position: relative;
    display: inline-block;
}

.school_mascot {
    /* Adjust the size as per your requirement */
    height: auto;
    transition: transform 0.3s;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.school_mascot-container:hover .school_mascot {
    transform: scale(1.5);
    /* Adjust the scale factor as per your requirement */
}

.school_mascot-container:hover .caption {
    opacity: 1;
}

.state_icon-container {
    position: relative;
    display: inline-block;
}

.state_icon {
    /* Adjust the size as per your requirement */
    height: auto;
    transition: transform 0.3s;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.state_icon-container:hover .state_icon {
    transform: scale(1.5);
    /* Adjust the scale factor as per your requirement */
}

.state_icon-container:hover .caption {
    opacity: 1;
}

.parent_mascot-container {
    position: relative;
    display: inline-block;
}

.parent_mascot {
    height: auto;
    transition: transform 0.3s;
}

.our_user_image {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.our_user_image_container {
    background-color: #f2ebf5;
}

.our_user_image_container:hover .our_user_image {
    transform: scale(1.5);
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.parent_mascot-container:hover .parent_mascot {
    transform: scale(1.5);
    /* Adjust the scale factor as per your requirement */
}

.parent_mascot-container:hover .caption {
    opacity: 1;
}

.hdinghome3 {
    color: white;
}

.usersbox {
    background-color: #f2ebf5;
    border-radius: 8px;
}


.bghome3 {
    background-color: white;
}

.hdinghome4 {
    color: #23047a;
    font-size: 60px;
    font-weight: bold;
}

.hdinghome4sm {
    color: #23047a;
    font-size: 25px;
    font-weight: bold;
}

.student_logo_top {
    float: right;
}

.left_icon {
    float: left;
}

.tagline_home_es {
    font-size: 18px;
}

.tagline_home_md {
    font-size: 23px;
}

.card0_student {
    background-image: linear-gradient(#ad5ad6, #4f6af0);
    padding: 10px;
}

.card1_student {
    background-image: linear-gradient(#ad5ad6, #4f6af0);
    padding: 10px;
    height: 730px;
    position: relative;
    top: 30px;
}

.card2_student {
    background-image: linear-gradient(#ad5ad6, #4f6af0);
    padding: 10px;
    height: 760px;
}

.cards_student {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 390px;
    position: relative;
    left: 115px;
}

.cards_student_lg {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 320px;
}

.cards_student_md {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 720px;
}

.cards_student_sm {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 442px;
}

.cards_student_es {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;

}

.cards_student_desc {
    font-size: 20px;
    position: relative;
    top: 6px;
}

.cards_student_desc_sm {
    font-size: 23px;
    position: relative;
    top: 13px;
}

.cards_student_desc_sm2 {
    font-size: 23px;
}

.bghome4 {
    background-image: linear-gradient(#5808fb, #9929ea);
}

.bghome4_grey {
    background-color: #9b9e9c;
    height: 100px;
}

.cards_teacher {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 270px;
}

.cards_teacher_xl {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 390px;
    position: relative;
    right: 184px;
}

.cards_teacher_md {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 700px;
}

.cards_teacher_sm {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 515px;
}

.cards_teacher_es {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 260px;
}

.teacher_logo_top {
    float: right;
}

.cards_teacher_desc_es {
    color: #23047a;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    top: 16px;
}

.cards_teacher_desc_es2 {
    color: #23047a;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    top: 5px;
}

.cards_teacher_desc_sm {
    color: #23047a;
    font-weight: bold;
    font-size: 23px;
    position: relative;
    top: 13px;
}

.cards_teacher_desc_sm2 {
    color: #23047a;
    font-weight: bold;
    font-size: 23px;
}

.cards_teacher_desc_lg {
    color: #23047a;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: 15px;
}

.cards_teacher_desc_lg2 {
    color: #23047a;
    font-weight: bold;
    font-size: 20px;
}

.cards_teacher_desc {
    color: #23047a;
    font-weight: bold;
    font-size: 30px;
}

.cards_teacher_desc2 {
    color: #23047a;
    font-weight: bold;
    font-size: 35px;
}

.card0_teacher {
    background-image: linear-gradient(#ede845, #e3c036);
    padding: 10px;
}

.card1_teacher {
    background-image: linear-gradient(#ede845, #e3c036);
    padding: 10px;
    height: 730px;
    position: relative;
    top: 30px;
}

.card2_teacher {
    background-image: linear-gradient(#ede845, #e3c036);
    padding: 10px;
    height: 760px;
}

.bghome5 {
    background-color: white;
}

.cards_school {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 600px;
    position: relative;
    left: 135px;
}

.cards_school_lg {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 460px;
}

.cards_school_md {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 660px;
}

.cards_school_sm {
    background-image: linear-gradient(to right, #9929ea, #5808fb);
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 5px;
    height: 80px;
    width: 500px;
}

.cards_school_desc {
    font-size: 28px;
}

.cards_school_desc_es {
    font-size: 20px;
    position: relative;
    top: 5px;
}

.cards_school_desc_es2 {
    font-size: 20px;
    position: relative;
    top: 6px;
}

.cards_school_desc_sm {
    font-size: 24px;
    position: relative;
    top: 10px;
}

.cards_school_desc_sm2 {
    font-size: 24px;
}

.cards_school_desc_md {
    font-size: 22px;
    position: relative;
    top: 12px;
}

.cards_school_desc_lg {
    font-size: 24px;
    position: relative;
    top: 12px;
}

.cards_school_desc_lg2 {
    font-size: 24px;
}

.cards_school_desc_xl {
    font-size: 22px;
    position: relative;
    top: 12px;
}

.cards_school_desc_xl2 {
    font-size: 22px;
}

.bghome6 {
    background-image: linear-gradient(#5808fb, #9929ea);
}

.cards_parents {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 3px;
    height: 80px;
}

.cards_parents_xl {
    background-image: linear-gradient(to left, #fba980, #f7cb6b);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 3px;
    height: 80px;
    position: relative;
    right: 154px;
}

.cards_state_desc {
    font-size: 28px;
    color: #23047a;
}

.cards_state_desc_es {
    font-size: 18px;
    color: #23047a;
    position: relative;
    top: 18px;
}

.cards_state_desc_es2 {
    font-size: 18px;
    color: #23047a;
    position: relative;
    top: 8px;
}

.cards_state_desc_sm {
    font-size: 24px;
    color: #23047a;
    position: relative;
    top: 14px;
}

.cards_state_desc_sm2 {
    font-size: 24px;
    color: #23047a;
}

.cards_state_desc_md {
    font-size: 24px;
    color: #23047a;
    position: relative;
    top: 14px;
}

.cards_state_desc_md2 {
    font-size: 24px;
    color: #23047a;
}

.cards_state_desc_lg {
    font-size: 24px;
    color: #23047a;
    position: relative;
    top: 14px;
}

.cards_state_desc_lg2 {
    font-size: 24px;
    color: #23047a;
}







.cards_parent_desc {
    font-size: 28px;
}

.cards_parent_desc_es {
    font-size: 20px;
    position: relative;
    top: 5px;
}

.cards_parent_desc_es2 {
    font-size: 20px;
    position: relative;
    top: 6px;
}

.cards_parent_desc_sm {
    font-size: 24px;
    position: relative;
    top: 10px;
}

.cards_parent_desc_sm2 {
    font-size: 24px;
}

.cards_parent_desc_md {
    font-size: 28px;
    position: relative;
    top: 12px;
}

.cards_parent_desc_lg {
    font-size: 24px;
    position: relative;
    top: 12px;
}

.cards_parent_desc_lg2 {
    font-size: 24px;
}

.cards_parent_desc_xl {
    font-size: 28px;
    position: relative;
    top: 12px;
}

.bghome7 {
    background-image: linear-gradient(#fba980, #f7cb6b);
}

.bghome7_2 {
    background-image: url("https://lh3.googleusercontent.com/ZXtfjG96Ux9OkpLWMSo9yNX9JWgWAWMNHUaXEC6i1goYFufhPJpsunfX5UVrdZkGkGROQX3HWrWRzQC-yI0cxu7EbFhRd0x5v4RGLK5e6ZnQmYnc9-j4Wcb44vlpoN-XCspcQ-rhmGg=w2400");
    background-size: cover;
    height: 40px;
    width: 160px;
}

.timer_desc_home {
    font-weight: bold;
}

.timer_desc_home_sm {
    font-weight: bold;
    font-size: 25px;
}

.timer_desc_home_lg {
    font-weight: bold;
    font-size: 30px;
}

.bghome7_desc {
    font-weight: bold;
    font-size: 30px;
}

.bghome8_text1 {
    font-weight: bold;
    font-size: 30px;
}

.bghome8_text2 {
    font-size: 20px;
    font-weight: bold;
}

.bghome9 {
    background-image: linear-gradient(to right, #5b0afb , #9527EB);
    overflow: hidden;
}

.gallery-container {
    width: 100%;
    overflow: hidden;
}

.gallery {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome, Safari, and Opera */
}

.gallery .img_home_9 {
    flex-shrink: 0;
    /* Prevent images from shrinking */
    width: 400px;
    height: 200px;
    margin-right: 10px;
}


.bg_home10 {
    background-color: white;
}

.img_home10 {
    border-radius: 8px;
}

.bg_home11 {
    background-color: black;
}

.img_home11 {
    height: 40px;
    width: 40px;
    margin: 10px;
}

.img2_home11 {
    height: 40px;
    width: 40px;
    margin: 10px;
}

.bg_home12 {
    background-color: white;
}

.my-input {
    background-color: #651bc4;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 8px;
}

.my-input::placeholder {
    color: white;
}

.my-input:focus::placeholder {
    color: grey;
}

.bg_footer {
    background-image: radial-gradient(#651bc4, #4e1991);
    padding: 10px;
}

.bg_footer_sm {
    background-image: radial-gradient(#651bc4, #4e1991);

}

.footer_small {
    font-size: 4px;
}

.footer_btn_sm {
    font-size: 2px;
    width: 30px;
    height: 10px;
    border-width: 0px;
    border-radius: 3px;
    font-weight: bold;
}