/*
Theme Name: Preschools Classes Pro
Theme URI: https://www.themagnifico.net/products/education-wordpress-theme-bundle
Author: Themagnifico
Author URI: https://www.themagnifico.net/
Description: The Education WordPress Theme Bundle is a premium and professionally designed website tailored specifically for educational institutions. Whether you’re managing schools, colleges, universities, or online learning platforms, this theme offers everything you need to create a dynamic and engaging website. Designed with both functionality and aesthetics in mind, this theme is perfect for showcasing classroom resources, special education programs, extracurricular activities, and more. With a clean, minimal, and elegant design, this theme is fully responsive and retina-ready, ensuring that your site looks stunning on all devices. The theme also offers user-friendly personalization options, allowing you to customise layouts, colours, and fonts to match and personalise your institution's branding. The Education WordPress Theme is also multipurpose, offering flexibility for various educational needs, whether you’re creating websites for early childhood education, graduate programs, or international education. Additionally, this free theme is packed with features that enhance both the user experience and website management.
Version: 0.0.2
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.2.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: preschools-classes-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Preschools Classes Pro WordPress Theme has been created by Themagnifico(themagnifico.net), 2025.
Preschools Classes Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Peralta&display=swap');


/*--------- Site Loader --------------*/
.preloader {
  background: #1CBBB4;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  align-items: center;
    justify-content: center;
}


.woocommerce .loader::before{
  background: none !important;
}
.loader {
  position: relative;
  height: 40px;
  width: 6px;
  color: #FFF;
  animation: paddles 0.75s ease-out infinite;
}
.loader:before {
  content: "";
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 15px;
  width: 12px;
  height: 12px;
  background-color: #ED145B;
  border-radius: 50%;
  animation: ballbounce 0.6s ease-out infinite;
}

@keyframes paddles {
  0% { box-shadow: -25px -10px, 25px 10px}
  50% { box-shadow: -25px 8px, 25px -10px }
  100% { box-shadow: -25px -10px, 25px 10px}
}
@keyframes ballbounce {
  0% { transform: translateX(-20px) scale(1, 1.2) }
  25% { transform: scale(1.2, 1) }
  50% { transform: translateX(15px) scale(1, 1.2) }
  75% { transform: scale(1.2, 1) }
  100% { transform: translateX(-20px) }
}
      













@media only screen and (max-width: 1050px) {
mega-menu-wrap-primary #mega-menu-primary {
    text-align: left;
    display: flex !important;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    margin: 0 auto 0 0 !important;
    display: inline-block;
    height: auto;
    vertical-align: middle;
    float: left;
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    background: #dddddd;
    font-weight: bold;
    text-decoration: none;
    color: #ff782d !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-family: 'Inter' !important;
}




@media only screen and (max-width: 1050px) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        margin: 0 auto !important !important;
        display: inline-block !important;
        height: auto !important;
        vertical-align: middle !important;
        float: left !important;
        width: 100% !important;
    }
    .main-navigation a:hover {
        color: #ff782d !important;
    }
    .main-navigation ul ul a {
    text-transform: none;
    font-weight: 500;
    color: #000;
    font-size: 18px;
    line-height: 1.5;
    cursor: pointer;
}.main-navigation a {
    color: #fff !important;
    letter-spacing: 0.1em;
    font-family: Inter;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}
.main-navigation ul ul p a {
    text-transform: none;
    color: #000 !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
    color:#000 !important;
}
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
        color:#fff !important;
    }
}

@media only screen and (max-width: 500px) {
    .main-navigation ul ul a {
    text-transform: none;
    font-weight: 500;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: #FFB200;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    border-color: #fff;
}
@media only screen and (min-width: 1025px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
    color: #ffffff !important;
  }
}
#mySidenav .mega-sub-menu li#mega-menu-251-0 a, #mySidenav .mega-sub-menu li#mega-menu-251-1 a, #mySidenav .mega-sub-menu li#mega-menu-251-2 a {
    color: #000 !important;
    padding: 5px 0px;
}

div#mySidenav::before {
    content: 'New';
    position: absolute;
    top: -15px;
    left: -25px;
    background-color: white;
    color: #ff0000;
    padding: 8px 5px; 
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    z-index: 10;
    animation: flash 2s linear infinite; /* Continuous rotation */
    transition: background-color 0.5s ease, color 0.5s ease;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
    padding: 10px !important;
}
div#mySidenav {
    position: relative;
    top: 0;
}

div#mySidenav:hover::before {
    background-color: #ff0000; /* Changes color on hover */
    color: yellow; /* Changes text color on hover */
}


@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}
li#mega-menu-219-0-0 ul li ::after {
    display: block;
}

.mega-menu-row:first-child .mega-sub-menu:first-child > li#mega-menu-item-media_image-10 > a::after {
    content: "New";
    position: absolute;
    top: 3px;
    left: -10px;
    background-color: #ff0000;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    width: 50px;
    border-radius: 3px;
    text-transform: uppercase;
    display: block; /* Ensure it shows */
    text-align: center;
}

/* Hide the "New" label from other menus */
.mega-menu-row:first-child .mega-sub-menu:first-child > li:not(:first-child) > a::after {
    content: none; /* This removes the label from other items */
}






@media only screen and (max-width: 1024px) {
    #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251 ul.mega-sub-menu {
        overflow-x: scroll;
        height: 400px;
    }
    li#mega-menu-item-251-0 ul.mega-sub-menu,li#mega-menu-item-251-1 ul.mega-sub-menu,li#mega-menu-item-251-2 ul.mega-sub-menu {
        overflow-x: unset !important;
        height: 100% !important;
    }
    li#mega-menu-251-0 ul.mega-sub-menu {
    height: 100% !important;
    overflow: unset !important;
}

li#mega-menu-251-1 ul.mega-sub-menu {
    height: 100% !important;
    overflow: unset !important;
}

li#mega-menu-251-2 ul.mega-sub-menu {
    height: 100% !important;
    overflow: unset !important;
}

    #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-0-0 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-0-1 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-0-2 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-0-3 ul.mega-sub-menu {
        overflow-x: unset;
        height: 100%;
    }
    #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-1-0 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-1-1 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-1-2 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-1-3 ul.mega-sub-menu {
        overflow-x: unset;
        height: 100%;
    }
    #mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-2-0 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-2-1 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-2-2 ul.mega-sub-menu,#mega-menu-wrap-primary #mega-menu-primary li#mega-menu-item-251-2-3 ul.mega-sub-menu {
        overflow-x: unset;
        height: 100%;
    }
}


@media only screen and (max-width: 1025px) {
    div#mySidenav::before {
        left: unset;
        right: -16px;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
    color:#fff !important;
}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .main-navigation li {
        padding: 0 !important;
    }
}