/*
Theme Name: Legacy Preschool Kindergarten Pro
Theme URI: https://www.legacytheme.net/products/preschool-wordpress-theme
Author: Legacytheme
Author URI: https://www.legacytheme.net/
Description: The Preschool WordPress Theme is designed to create a warm, friendly, and professional online presence for early education institutions. It perfectly suits a Preschool, Kindergarten, Early Learning Center, Daycare, Montessori School, Nursery School, Play School, or Childcare Center. The theme blends colorful visuals with a clean, minimal layout to appeal to both parents and children. Its responsive and mobile-friendly structure ensures smooth browsing across devices. With easy navigation, customizable sections, and engaging design elements, schools can clearly present programs, staff, and facilities. The theme supports testimonials, image galleries, and call-to-action buttons, helping institutions build trust and encourage inquiries. It offers a balanced mix of creativity and professionalism for modern education websites.
Version: 0.0.1
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: legacy-preschool-kindergarten-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Legacy Preschool Kindergarten Pro WordPress Theme has been created by Legacytheme(legacytheme.net), 2025.
Legacy Preschool Kindergarten Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */



@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.bypostauthor {
  font-weight: 600;
}
body {
  font-family: "Poppins", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Protest Riot", sans-serif;
}
a {
  color: #CB49A6;
}
/*--------- Site Loader --------------*/
.preloader {
  background: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.pencil {
  display: block;
  width: 60px;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
 /* 3/8 of diameter */
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

  50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

  35%,
	65% {
    transform: skewX(-4deg);
  }

  37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

  40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

  42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

  to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

  75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}





@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: #F69E77 !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-family: 'Poppins' !important;
    }
    
    @media only screen and (max-width: 1050px) {
        #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
            margin: 0 auto !important;
            display: inline-block !important;
            height: auto !important;
            vertical-align: middle !important;
            float: left !important;
            width: 100% !important;
        }
        .main-navigation a:hover {
            color: #F69E77 !important;
        }
    .main-navigation ul ul a {
      text-transform: none;
      font-weight: 500;
      color: #000;
      font-size: 14px;
      line-height: 1.5;
      cursor: pointer;
    }
    .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: #F69E77;
        color: #ffffff !important;
        font-weight: normal;
        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;
      }
    }
    
    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;
        }
    }
    .mega-menu-row:first-child .mega-sub-menu:first-child > li#mega-menu-item-media_image-9{
        position:relative;
    }
  .mega-menu-row:first-child .mega-sub-menu:first-child > li#mega-menu-item-media_image-4 > a::after {
    content: "New";
    position: absolute;
    top: 3px;
    height: 20px;
    left: -10px;
    background-color: #ff0000;
    transform: unset;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    width: 50px;
    border-radius: 3px;
    text-transform: uppercase;
    display: block;
    text-align: center;
}