/* 
* {
    font-family: 'Open Sans', sans-serif;
} */

* {
    font-family: 'Josefin Sans', sans-serif;
}

:root {
    --maroon-color: #62202e;
    --dark-color: #42101b;
    --yellow-color: #f5bd0e;
    --grey-color: #e5e5e5;
    --white-color: white;

}


/* Apply maroon color globally to any element using the class 'maroon-color' */
.maroon-color {
    color: var(--maroon-color);
    /* Apply the maroon color */
}

/* Example for other elements with different colors */
.dark-color {
    color: var(--dark-color);
    /* Apply dark color */
}

.yellow-color {
    color: var(--yellow-color);
    /* Apply yellow color */
}

.grey-color {
    color: var(--grey-color);
    /* Apply grey color */
}

.white-color {
    color: var(--white-color);
    /* Apply white color */
}

.text-maroon,
.navbar-toggler,
.navbar-toggler-icon {
    color: #62202e !important;
}

body {
    padding: 0%;
    margin: 0%;
    overflow-x: hidden;
}

.text-dark-marroon {
    color: #42101b !important;
}

* {
    font-family: 'Open Sans', sans-serif;

}


@media (max-width: 767px) {
    .icons {
        margin-bottom: 15px;
        /* Adds space between icons when stacked vertically */
    }

    .icons p {
        margin-top: 8px;
        /* Adds space between the icon and its label */
    }

    .text-center {
        padding-left: 10px;

    }
}


.maroon-color:hover {
    background-color: #fff;
    /* Darker maroon color on hover */
    text-decoration: none;
    /* Ensures no underline on hover */
}

/* Hover Effect */
.carousel-indicators li.active {
    background-color: #f5bd0e !important;
    /* Yellow color for active dot */
}

.carousel-indicators li {
    background-color: white !important;
    /* Transparent for inactive dots */
}



.bottom-0 {
    bottom: 20% !important;
}

/* nav bar */
/* General nav-link styles */
.navbar .nav-link {
    color: #fff !important;
    /* Set default link color to white */
    transition: color 0.3s ease;
    /* Smooth transition for hover effect */
}

/* Hover effect */
.navbar .nav-link:hover {
    color: yellow !important;
    /* Change color to yellow on hover */
}

/* Offcanvas nav-link styles */
.offcanvas .nav-link {
    color: #fff !important;
}

.offcanvas .nav-link:hover {
    color: yellow !important;
}

/* Dropdown menu background and text color */
.dropdown-menu {
    background-color: #42101b !important;
    /* Default background color */
}

.dropdown-item {
    color: #fff !important;
    /* Default text color */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth transition */
}

/* Hover styles */
.dropdown-item:hover {
    background-color: #fff !important;
    /* Hover background color */
    color: #42101b !important;
    /* Hover text color */
}

/* nav bar end */


/* schoollevel*/

@media (max-width: 768px) {
    .dynamic-font h1 {
        font-size: 10px;
        left: 80% !important;
        /* Reduce number size for MD and SM screens */
    }

    .dynamic-font p {
        font-size: 14px;
        /* Reduce label size */
    }



    img[alt="Classroom"] {
        width: 60% !important;
        /* Adjust image size for mobile view */
        top: -50% !important;

    }
}

@media (max-width: 490px) and (min-width: 400px) {
    .imgtxt1 {
        font-size: 7px !important;
        top: 16px !important;
    }

    .imgtxtp2 {
        font-size: 7px !important;
        top: 16px !important;
    }

    .imgtag2 {
        height: 80px !important;
        width: 20px !important;
        top: -40px !important;
    }

    .imgtxt2 {
        font-size: xx-small !important;
    }

    .h1txt1 {
        font-size: small !important;
        left: 10px !important;
        /* Adjust left to move further */
    }

    .h1txt2 {
        font-size: x-small !important;
        left: 10px !important;
        /* Ensure this applies if needed */
    }

    .imgtxt {
        left: 195px;
        /* Move the entire div left */
        transform: translate(0, -50%) !important;
    }

    .imgtxt2 {
        top: 60px !important;
        left: 195px;
        /* Move the entire div left */
        transform: translate(0, -50%) !important;
    }

    .imgtxt3 {
        top: 60px !important;
        left: 195px;
        /* Move the entire div left */
        transform: translate(0, -50%) !important;
    }

    .imgtxt3h1 {
        font-size: 6px !important;
    }

    .imgtxt33 {
        top: 60px !important;
        left: 200px;
        /* Move the entire div left */
        transform: translate(0, -50%) !important;
    }

    .imgtxt4h1 {
        font-size: 6px !important;
    }


}