/*
Theme Name: Kids Summer Camps
Theme URI: 
Author: Themes Swift
Author URI:
Description: The Kids Summer Camps theme is a vibrant and user-friendly solution designed for summer camps, children’s activity centers, daycare programs, educational workshops, and youth events websites. Created with a colorful and engaging layout, it helps organizers showcase camp programs, schedules, activities, and registration details in a fun and professional way. The theme offers easy customization options through the WordPress Customizer, allowing users to personalize colors, fonts, and layouts without any coding skills. Kids Summer Camps is fully responsive and optimized for performance, ensuring a smooth browsing experience across mobile devices, tablets, and desktops. Built with Gutenberg compatibility, it enables simple drag-and-drop page creation using block editing. Pre-designed sections for programs, testimonials, galleries, and contact information make website setup quick and efficient. Perfect for kids camps, learning programs, and recreational activities, this theme helps build a lively and trustworthy online presence.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 5.6
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kids-summer-camps
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, photography

Kids Summer Camps WordPress Theme, Copyright 2026 Themes Swift
Kids Summer Camps is distributed under the terms of the GNU General Public License v3
*/


/*Banner Section*/
.banner-section{
  	position: relative;
	background-size: cover !important;
	background-repeat: no-repeat  !important;
	background-position: center right  !important;
	display: flex;
}

.banner-column{
	width: 100%;
}

.banner-section h2 mark {
  text-decoration: underline;
}
.banner-section .banner-content {
  position: relative;
  z-index: 99;
  max-width: 75%;
}
.banner-section img {
  width: 100%;
  position: relative;
  z-index: 99;
}
.banner-section figure {
  position: relative;
  z-index: 99;
}
.banner-section .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: #fff !important;
  color: var(--wp--preset--color--secondary) !important;
}
.banner-section .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--secondary) !important;
  color: #fff !important;
}

.service-section .owl-carousel .owl-stage-outer {
  padding: 30px 0px;
  margin: 0 !important;
  max-width: 100% !important;
}
.service-section .service-box {
  margin: 0 10px;
}
.summer-head a{
	text-decoration: none;
}
.service-box img{
	height: 280px;
	object-fit: cover;
}
.serv-img-div {
	position: relative;
}
.wp-block-buttons.serv-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    justify-content: center;
    display: none;
    margin: 0 auto;
}
.service-box:hover .wp-block-buttons.serv-btn{
	display: flex;
	justify-content: center;
	text-decoration: center;
	width: 100%;
}
.service-box:hover h5.summer-head a{
	color: var(--wp--preset--color--primary);
}
.blog-section .blog-img {
  height: 300px;
  width: 100%;
  border-radius: 6px;
  background-color: #ddd;
}
.blog-section .blog-img img {
  width: 100%;
  object-fit: cover;
  height: 300px ;
}
footer .wp-block-columns, footer p.has-text-align-center.has-pure-white-color.has-text-color.has-link-color.has-poppins-font-family {
  max-width: 100% !important;
}

@media screen and (max-width: 1600px) {
  .st-header-transparent .wp-block-group {
    gap: 30px !important;
  }
  .banner-section .banner-content {
    max-width: 91%;
  }
  .banner-section figure:after {
    width: 800px;
    height: 800px;
    bottom: -355px;
  }
  .service-section .wp-block-columns {
    gap: 50px !important;
  }
  .service-box {
    padding: 60px 25px 25px !important;
  }
}
@media screen and (max-width: 1440px) {
  .st-header-transparent .wp-block-columns, .banner-section .wp-block-columns , .service-section .service-slider{
    max-width: 85% !important;
  }
  .banner-section figure:after {
    width: 850px;
    height: 850px;
  }
  .service-section .wp-block-columns {
    gap: 30px !important;
  }
}
@media screen and (max-width: 1024px) {
  .st-header-transparent .wp-block-columns, .banner-section .wp-block-columns , .service-section .service-slider, footer .wp-block-group.has-global-padding{
    max-width: 95% !important;
  }
  .st-header-transparent .wp-block-navigation .wp-block-navigation-item {
    font-size: 14px !important;
  }
   .st-header-transparent .wp-block-social-link a {
    font-size: 16px ;
  }
  .st-header-transparent .wp-block-social-links, .st-header-transparent ul.wp-block-navigation__container {
    gap: 20px !important;
  }
  .banner-section h2 {
    font-size: 40px !important;
  }
  .banner-section p {
    font-size: 15px !important;
  }
  .banner-section figure:after {
    width: 750px;
    height: 750px;
  }
  .service-section .wp-block-columns {
    gap: 10px !important;
  }
}
@media screen and (max-width: 768px) {
	h1.logo-title{
	    width: 100%;
	    justify-content: center;
	    display: flex;
	}
  .service-section .service-box h5 {
    font-size: 20px !important;
  }
  .service-section .service-box p {
    font-size: 15px !important;
  }
  footer .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 47% !important;
  }
  	h1.logo-title{
	    width: 100%;
	    justify-content: center;
	    display: flex;
	}
}
@media screen and (max-width: 575px) {
  .service-section h3, .blog-section h3 {
    font-size: 30px !important;
  }
  .service-section p, .blog-section p {
    font-size: 16px !important;
  }
  .blog-section, footer {
    text-align: center;
  }
  footer .wp-block-navigation__container {
    margin: 0 auto !important;
  }
  footer ul.wp-block-social-links, footer .wp-block-group {
    justify-content: center;
  }
  footer .wp-block-group p {
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 767px) {
.banner-section{
	background-image: none !important;
	min-height: 300px !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.head-btn a{
		padding: 10px 12px;
	}
	.banner-section{
		min-height: 500px !important;
		background-position: left !important;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.banner-section .banner-content {
        max-width: 60%;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
	.banner-section{
		min-height: 500px !important;
		background-position: left !important;
	}
}