/*
Theme Name: Legacy Kindergarten Child
Theme URI: https://www.legacytheme.net/products/legacy-kindergarten-child
Author: LegacyThemes
Author URI: https://www.legacytheme.net/
Description: Legacy Kindergarten Child Theme is a child theme designed for creating structured and informative educational websites for young learners. It can be used with the features and layout options provided by its parent theme while allowing separate customization of the child theme’s design and content. The theme supports standard website elements such as navigation menus, page sections, headings, images, and content blocks, making it possible to organize information clearly. Its layout can accommodate details about classes, activities, learning programs, schedules, admission information, and contact details. Responsive design helps the website adapt its presentation across desktops, tablets, and mobile devices. Customizable colors, typography, page layouts, and other visual settings can be adjusted according to the website’s requirements. Legacy Kindergarten Child Theme can also support blog or news sections for publishing announcements, educational updates, and event information. Its child-theme structure allows modifications to be maintained separately from the parent theme, helping preserve custom changes when parent-theme updates are applied. The overall design is suited to websites that need a simple, organized interface for presenting educational information and resources.
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 5.6
Version: 0.0.1
Template: kindergarten-art-school
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: legacy-kindergarten-child
Tags: education, entertainment, blog, custom-menu, featured-images, theme-options, custom-colors, custom-logo, flexible-header, threaded-comments, right-sidebar, left-sidebar, one-column, two-columns, three-columns, four-columns, grid-layout, full-width-template, sticky-post, custom-background, custom-header, footer-widgets, block-styles, rtl-language-support, translation-ready, post-formats
*/

/**
====================================================================
  General Classes
====================================================================
*/

:root {
    --alpha-color: #FF682D;
    --beta-color: #ffda48;
	--gamma-color: #8BC34A;
}
a {
    text-decoration: none;
    display: inline-block;
    transition: 0.5s;
    color: #151519;
}

/* Banner Section */
.main-banner-content-box .bnnr-sm-hd{
	color: #33691E;
    font-size: 38px;
    font-weight: 500;
}
/* Category Section */

/* =========================================
   Categories Section
========================================= */

.legacy-kindergarten-child-categories {
	position: relative;
	padding: 45px 0 50px;
	background:var(--alpha-color);
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;

}
.legacy-kindergarten-child-categories::after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #C35225;
	content: '';
	opacity: 0.8;
}
.categories-heading {
	text-align: center;
	max-width: 750px;
	margin: 0 auto 20px;
}

.categories-heading .section-title {
    margin: 0 0 5px;
    color: #fff;
    font-family: cursive;
    font-size: 41px;
    font-weight: 400;
    font-family: "Pacifico", serif;
    padding: 0px;
}

.categories-heading .section-description {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
	font-family: Ubuntu, sans-serif;
	font-weight: 300;
    margin: 20px auto;
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	align-items: start;
	margin-top: 30px;
}

.category-item {
	text-align: center;
}

.category-image {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 100%;
	margin: 0 auto 10px;
	overflow: hidden;
	clip-path: polygon( 12.92% 72.578%,12.92% 72.578%,9.847% 72.04%,7.131% 70.499%,4.803% 68.067%,2.896% 64.855%,1.444% 60.975%,0.477% 56.539%,0.029% 51.656%,0.131% 46.44%,0.817% 41%,2.119% 35.45%,2.119% 35.45%,3.164% 30.163%,4.646% 25.462%,6.518% 21.373%,8.729% 17.925%,11.232% 15.145%,13.979% 13.061%,16.919% 11.701%,20.006% 11.093%,23.19% 11.265%,26.422% 12.244%,26.422% 12.244%,29.155% 7.357%,32.406% 3.779%,36.046% 1.426%,39.945% 0.215%,43.974% 0.062%,48.003% 0.883%,51.903% 2.596%,55.543% 5.116%,58.794% 8.36%,61.527% 12.244%,61.527% 12.244%,64.91% 8.88%,68.505% 7.046%,72.196% 6.605%,75.871% 7.418%,79.417% 9.344%,82.719% 12.244%,85.666% 15.98%,88.142% 20.413%,90.035% 25.402%,91.231% 30.809%,91.231% 30.809%,94.15% 34.118%,96.437% 38.346%,98.109% 43.298%,99.181% 48.779%,99.67% 54.594%,99.591% 60.549%,98.962% 66.447%,97.798% 72.095%,96.116% 77.298%,93.931% 81.86%,93.931% 81.86%,91.274% 86.882%,88.228% 90.845%,84.89% 93.806%,81.358% 95.821%,77.729% 96.944%,74.1% 97.232%,70.568% 96.74%,67.23% 95.524%,64.184% 93.64%,61.527% 91.143%,61.527% 91.143%,58.059% 94.772%,54.203% 97.343%,50.056% 98.912%,45.713% 99.533%,41.274% 99.264%,36.835% 98.16%,32.492% 96.275%,28.345% 93.667%,24.489% 90.391%,21.021% 86.501%,21.021% 86.501%,18.607% 86.362%,16.29% 85.944%,14.168% 85.248%,12.337% 84.274%,10.895% 83.02%,9.939% 81.489%,9.566% 79.679%,9.874% 77.59%,10.96% 75.223%,12.92% 72.578% );
}

.category-image img {
	width: 100%;
	height: 100%;
	max-height: 222px;
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.category-image:hover img {
	transform: scale(1.08);
}

.category-title {
    color: #fff;
    font-size: 25px;
    text-decoration: none;
    font-family: "Pacifico", serif;
}

.category-title a {
	color: #fff;
	text-decoration: none;
}

.category-title a:hover {
	color: #fff;
	text-decoration: underline;
}

.category-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eee;
	color: #777;
	font-size: 11px;
}
.legacy-kindergarten-child-categories .container{
	position: relative;
	z-index: 1;
}
.site-title a{
	font-family: "Pacifico", serif;
	text-decoration: none;
}

@media (max-width: 480px) {
	.categories-heading .section-title {
		font-size: 24px;
	}
}
@media (min-width: 999px) and (max-width: 1023px) {
	.categories-grid {
		grid-template-columns: repeat(3,1fr);
	}
}
@media (min-width: 500px) and (max-width: 999px) {
	.categories-grid {
		grid-template-columns: repeat(2,1fr);
	}
}
@media (min-width: 300px) and (max-width: 500px) {
	.categories-grid {
		grid-template-columns: repeat(1,1fr);
	}
}