/*
  Project Name: Kinter - Kids Kindergarten & School HTML Template
  Author: themerunch -->> (https://themeforest.net/user/themerunch)
  Support: themerunch@gmail.com
  Description: Kids Kindergarten & School HTML Template.
  Developer: Wasim Mia
  Version: 1.0
*/

/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. banner
4. feature
5. about
6. classes
7. counter
8. team
9. school fecilities
10. portfolio
11. blog
12. brand
13. footer
14. page title
15. contact
16. Preloader
*/


/* 1. Theme default css */
@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');
 body {
	font-family: "Poppins", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	background: #000;
	
}
.body-bg{
	position: relative;
}

.body-bg:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	content: '';
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: url('../../img/bg.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	opacity: 0.40;
}

.banner-section-contaner{
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.inner-banner-section{
	min-height: 100vh;
}


.header-section{
	width: 100%;
	height: auto;
	padding: 20px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.head-logo-box{
	width: 180px;
	height: fit-content;
}

.call-to-action-container{
	padding: 10px 20px;
	background: #3F2BFE;
	border-radius: 10px;


}

.call-to-action-container a {
	margin-bottom: 4px;
	display: inline-block;
}
.call-to-action-container a svg{
	margin: 0px 3px;
}

.call-to-action-container a ,  .call-to-action-container h4{
	font-size: 15px;
	color: #fff;
	font-weight: 400 !important;
	text-decoration: none;
}
.call-to-action-container h4{
	margin-bottom: 0px;
}

/* .banner-content{

} */

.banner-content h1{
	font-size: 35px;
	line-height: 55px;
	color: #fff;
	margin-bottom: 20px;
}

.banner-content h1 span{
	color: #3F2BFE;
	/* text-transform: uppercase; */
}

.banner-content p{
	font-size: 18px;
	line-height: 28px;
	font-weight: 300;
	color: #fff;
}

.btn-primary-cus{
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	background: #3F2BFE;
	border-radius: 50px;
	padding: 10px 20px;
	text-decoration: none;
	display: inline-block;
	border: none;
}

.btn-primary-cus:hover{
	color: #fff;
	opacity: 0.9;
}

.btn-secodery-cus{
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	background: #222222;
	border-radius: 50px;
	padding: 10px 20px;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #d7d7d7;
}

.btn-secodery-cus:hover{
	color: #fff;
	opacity: 0.8;
}

.swiper {
	width: 100%;
	padding: 20px 70px;
  }

  .swiper-slide {
	width: auto;
	white-space: nowrap;
	/* padding: 20px; */
	/* background: #e0e0e0;
	border: 1px solid #bbb;
	border-radius: 8px;
	font-size: 16px; */
	margin-right: 10px;
  }


  .commer-bg{
	width: 100%;
	height: fit-content;
	position: relative;
  }

  .right-fixed-img{
	position: absolute;
	top: 0;
	right: 0;
  }
  .left-fixed-img {
	position: absolute;
	top: 0;
	left: 0;
  }

  .left-bottom-fixed-img {
	position: absolute;
	bottom: 0;
	left: 0;
  }


  .left-fixed-img .img1 , .left-bottom-fixed-img .img1{
	width: 180px;
	height: auto;
	opacity: 0.55;
  }

  
  .right-fixed-img .img1{
	width: 200px;
	height: auto;
	opacity: 0.55;
  }

  .left-fixed-img .img2 , .right-fixed-img  .img2{
	max-width: 350px;
	height: auto;
	opacity: 0.55;
  }

  .title-section-box h2{
	font-size: 28px;
	font-weight: 400;
	color: #fff;
	margin-bottom: 15px;
  }

  .title-section-box p{
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	color: #D6D6D6;
	
  }

  .inner-title{
	max-width: 600px;
  }

  .payment-option-bg-img{
	width: 100%;
	height: auto;
  }

  .flip-horizontal {
	transform: scaleX(-1);
  }
  
  .flip-vertical {
	transform: scaleY(-1);
  }

  .service-items-img img{
	 width: 100%;
	 height: auto;
	 border-top-right-radius: 10px;
	 border-bottom-right-radius: 10px;
  }

  .progress-cus {
	width: 100%;
	height: 6px;
	/* background: #ccc; */
	border-radius: 50px;
	position: relative;
	overflow: hidden;
  }
  
  .progress-cus::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 6px;
	background: #3F2BFE;
	border-radius: 50px;
	animation: progressLoop 6s ease-in-out infinite;
  }
  
  /* Keyframes for progress width loop */
  @keyframes progressLoop {
	0%   { width: 30%; }
	25%  { width: 100%; }
	50%  { width: 20%; }
	75%  { width: 80%; }
	100% { width: 30%; }
  }



  .ser-content-box h3{
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 20px;

  }

  .ser-content-box p{
	font-size: 15px;
	font-weight: 400;
	color: #D6D6D6;
	margin-bottom: 30px;
  }

  .btn-nav{
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #222;
	color: #fff;
	padding: 10px;
	border: none;
  }

  .btn-nav:hover{
	opacity: 0.8;
  }

  .ser-content-box{
	max-width: 450px;
	margin: 0px auto;
  }

  .p-relativex{
	position: relative;
  }

  .easy-integration-container .nav-tabs .nav-item{
	width: 50%;
  }

  .easy-integration-container .nav-tabs{
	border: none;
  }

  .easy-integration-container .nav-tabs .nav-item button{
	width: 100%;
	background: none;
	border: none !important;
	font-size: 14px;
	color: #fff;
  }

  .easy-integration-container .nav-tabs .nav-item .active{
	border-bottom: 1px solid #ccc !important;
  }

  .checkout-blog{
	width: 100%;
	height: fit-content;
	padding: 20px;
	background: #222222;
	border-radius: 10px
    
  }

  .checkout-blog .checkout-blog-box{
	width: 100%;
	height: 200px;
	
  }

  
  .checkout-blog .checkout-blog-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .checkout-blog  h4{
	font-size: 17px;
	color: #fff;
	font-weight: 500;
	margin: 20px 0px 10px 0px;
  }

  .checkout-blog p{
	font-size: 14px;
	color: #D6D6D6;
	margin-bottom: 15px !important;
  }

  .plugin-container{
	width: 100%;
	height: fit-content;
	background: #222222;
	padding: 40px 20px;
	border-radius: 10px;
  }

  .btn-txt-cus{
	font-size: 14px;
	font-weight: 500;
	color:#3F2BFE;
	text-decoration: none;
	display: inline-block;
  }

  .plugin-conent-box h3{
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
  }

  .checkout-content-box h4{
	font-weight: 400;
  }




  
  .digital-blog{
	width: 100%;
	height: fit-content;
	padding: 20px;
	background: #222222;
	border-radius: 10px
    
  }

  .digital-blog .digital-blog-box{
	width: 100%;
	height: 300px;
	
  }

  
  .digital-blog .digital-blog-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .digital-blog  h4{
	font-size: 17px;
	color: #fff;
	font-weight: 500;
	margin: 20px 0px 10px 0px;
  }

  .digital-blog p{
	font-size: 14px;
	color: #D6D6D6;
	margin-bottom: 15px !important;
  }

 .owl-nav button.owl-prev,
 .owl-nav button.owl-next {
	width: 40px;
	height: 40px;

	background: #222 !important;
	color: #fff !important;
	padding: 10px 15px;
	margin: 5px;
	border-radius: 4px;
	font-size: 35px !important;
	line-height: 35px !important;
	border: none;
	transition: 0.3s;
	}

 .owl-nav button:hover {
  background: #555;
}


.blog-slider .owl-nav {
	margin-top: 50px;
	display: flex !important;
	justify-content: center;
  }

/* 
  .blog-slider .owl-nav{
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #222;
	color: #fff;
	padding: 10px;
  }

  .blog-slider.owl-nav:hover{
	opacity: 0.8;
  } */

  .pricing-banner{
	width: 100%;
	height: fit-content;
	border-radius: 20px;
	

	background-image: url('../../img/bg-banner.png'); /* Replace with your image path */
	background-size: cover;       /* Cover the entire container */
	background-position: center;  /* Center the image */
	background-repeat: no-repeat; 
  }


  .btn-primary-cus-squer{
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	background: #3F2BFE;
	border-radius: 10px;
	padding: 12px 25px;
	text-decoration: none;
	display: inline-block;
}

.btn-primary-cus-squer:hover{
	color: #fff;
	opacity: 0.9;
}



.pricing-content-box h3{
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 20px;

  }

  .pricing-content-box p{
	font-size: 15px;
	font-weight: 400;
	color: #D6D6D6;
	margin-bottom: 30px;
  }

  .testimonals-items{
	position: relative;
	margin-top: 35px;
	width: 100%;
    min-height: 380px;
	background: #222222;
	border-radius: 10px;
	padding: 30px 20px;
  }

  .testimonals-img-box{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	top: -35px;
	left: 50%;
	z-index: 1;
	transform: translateX( -50%);
  }

  .testimonals-img-box img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
	border: 1px solid #fff;
  }

  .testimonals-content {
	text-align: center;
	padding-top: 15px;
  }

  .testimonals-content h4{
	font-size: 16px;
	margin-top: 15px;
	color: #fff;
	font-weight: 600;
	margin-bottom: 0px;

  }

  .testimonals-content span{
	font-size: 14px;
	color: #D6D6D6;
  }

  .testimonals-content p{
	margin-top: 15px;
	font-size: 16px;
	color: #D6D6D6;

  }

  .testimonals-content .star-box i{
	font-size: 14px;
	color: #fec946;
  }

  .testimonals-content .star-box i:last-child{
	color: #fff;
  }


  .accordion .accordion-item {
	margin-bottom: 1rem; /* or use 10px, 16px, etc. */
	border-radius: 8px;  /* optional: for rounded corners */
	overflow: hidden;    /* ensures corners stay rounded */
  }
  


  .accordion .accordion-item {
	background-color: #434343;
	color: #fff;
	border: none;
	margin-bottom: 1rem;
	border-radius: 6px;
	overflow: hidden;
  }
  
  .accordion-button {
	background-color: #434343;
	color: #fff;
	font-weight: 400;
	font-size: 15px;
	border: none;
	box-shadow: none;         /* remove glow/outline */
  }
  
  .accordion-button:not(.collapsed) {
	background-color: #434343; /* same color when open */
	color: #fff;
	box-shadow: none;
  }
  
  .accordion-button:focus {
	box-shadow: none; /* removes the blue focus ring */
  }
  
  .accordion-body {
	font-weight: 400;
	font-size: 15px;
	background-color: #434343;
	color: #D6D6D6;
	padding-top: 0px;
	border-top:none; /* optional separator */
  }
  
  /* Icon (chevron) color */
  .accordion-button::after {
	filter: brightness(0) invert(1); /* makes the arrow white */
  }
  


  .upi-banner{
	width: 100%;
	height: fit-content;
	border-radius: 20px;
	background-image: url('../../img/banner-2.png'); /* Replace with your image path */
	background-size: cover;       /* Cover the entire container */
	background-position: right;  /* Center the image */
	background-repeat: no-repeat; 
  }

  .upi-banner-img{
	text-align: center;
	width: 100%;
	height: 250px;
	margin-bottom: -26px;
  }

  .upi-banner-img img{
	width: auto;
	height: 100%;
	
  }


  
  .upi-banner h3{
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 20px;

  }

  .upi-banner p{
	font-size: 15px;
	font-weight: 400;
	color: #D6D6D6;
	margin-bottom: 30px;
  }



  .card-box-form{
	width: 100%;
	background: #222222;
	border-radius: 20px;
	height: 100%;
	padding: 15px;
	
  }
  .cf-icon-box{
	width: 45px;
	height: 45px;
	background:#3F2BFE;
	border-radius: 12px;
	padding: 2px;
	text-align: center;
	line-height: 45px;
  }

  .cf-icon-box svg{
	width: 28px;
	height: 28px;
  }

  .card-box-form h4{
    font-size: 18px;
	color: #fff;
	font-weight: 500;
	margin-top: 20px;
  }

  .card-box-form p{
    font-size: 14px;
	color: #D6D6D6;
	font-weight: 300;
	
	
  }

  .cx-mb-20{
	margin-bottom: 20px;
  }



  
  .form-card-box{
	width: 100%;
	height: auto;
	background: #222222;
	border-radius: 20px;
	padding: 40px 30px;
  }

  .form-card-box h4{
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 15px;
  }

  .form-card-box .form-label{
	font-size: 14px;
	color: #fff;
	font-weight: 500;
  }

  .form-card-box input{
	border: none;
	border-bottom: 2px solid #959595;
	background: transparent;
	border-radius: 0px;
	font-size: 15px;
	font-weight: 300;
	color: #fff !important;
	padding: 10px 15px;
  }

  .form-card-box input:focus {
	background-color: transparent; /* Transparent background when focused */
	box-shadow: none; /* Remove the focus box shadow */
	border-color: #3F2BFE; /* Keep border color light */
  }

  .form-card-box input:hover {
	border-color: #3F2BFE; /* On hover, keep the border color */
  }


  .form-card-box textarea{
	
	border: 2px solid #959595;
	background: transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 300;
	color: #fff !important;
  }

  .form-card-box textarea:focus {
	background-color: transparent; /* Transparent background when focused */
	box-shadow: none; /* Remove the focus box shadow */
	border-color: #3F2BFE; /* Keep border color light */
  }

  .form-card-box textarea:hover {
	border-color: #3F2BFE; /* On hover, keep the border color */
  }



  /* footer section  */
.footer-section{
	background:#222222;
	width: 100%;
	position: relative;
	padding: 60px 0px 0px 0px;

}

.foot-logo-box{
	max-width: 200px;
	height: auto;
	margin-bottom: 20px;
}


.foot-logo-box img{
	width: 100%;
	height: auto;
}


.foot-main-box p{
	font-size: 14px;
	font-weight: 400;
	color: #CACACA;
	line-height: 22px;
 }


 .grid-foot-box{
	display: grid;
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    padding: 20px;
 }


 .grid-foot-box .foot-items:nth-child(4),
 .grid-foot-box .foot-items:nth-child(5) {
   grid-row: span 2;
 }

.foot-content-box{
	margin-bottom: 25px;
}

.foot-content-box h4{
	font-size: 15px;
	color: #3F2BFE;
	font-weight: 500;
	margin-bottom: 15px;
}

.ul-foot{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.ul-foot li{
	margin-bottom: 6px;
}
.ul-foot li a{
	font-size: 13px;
	font-weight: 400;
	color: #CACACA;
	text-decoration: none;
	
}

.foot-copyright{
	padding: 25px 0px;
	border-top: 1px solid #9999996b;
}

.foot-copyright p{
	font-size: 13px;
	text-align: center;
	font-weight: 400;
	color: #CACACA;
	text-decoration: none;
	margin-bottom: 0px;
	
}

@media (max-width: 1024px) {
	.grid-foot-box {
	  grid-template-columns: repeat(4, 1fr);
	  grid-template-rows: repeat(2, auto);
	}
  
	.grid-foot-box .foot-items:nth-child(4),
	.grid-foot-box .foot-items:nth-child(5) {
	  grid-row: span 2;
	}
  }
  
  /* Medium screens: switch to 3 columns */
  @media (max-width: 992px) {
	.grid-foot-box {
	  grid-template-columns: repeat(2, 1fr);
	}
	.grid-foot-box .foot-items:nth-child(4),
	.grid-foot-box .foot-items:nth-child(5) {
	  grid-row: auto; /* remove span on small screens */
	}
  }
  
  /* Small screens: switch to 2 columns, no row-span to prevent layout break */
  @media (max-width: 768px) {
	.grid-foot-box {
	  grid-template-columns: repeat(2, 1fr);
	  grid-template-rows: auto; /* let it grow naturally */
	}
  
	.grid-foot-box .foot-items:nth-child(4),
	.grid-foot-box .foot-items:nth-child(5) {
	  grid-row: auto; /* remove span on small screens */
	}
  }
  
  /* Extra small screens: single column */
  @media (max-width: 480px) {
	.grid-foot-box {
	  grid-template-columns: 1fr;
	}
  }
  

  .payment-option-bg-img img{
     width: 100%;
  }

  .event-container{
		position: fixed;
		right: 20px;
		bottom: 40px;
		z-index: 1;
	
  }

  .whatsapp-icon a{
	text-decoration: none;
	width: 55px;
	height: 55px;
	display: inline-block;

  }

  .whatsapp-icon a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .topup {
	padding: 20px 10px;
	background-color: #3F2BFE;
	border-radius: 20px;
	margin-bottom: 14px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;

  }

  .topup :hover{
	opacity: 0.8;
  }

  .whatsapp-icon a img:hover{
	opacity: 0.8;
  }


  

/* --------- */
  
.btn-gro-items
{

	font-size: 14px;
	font-weight: 400;
	color: #fff;
	background: #222222;
	border-radius: 50px;
	padding: 10px 20px;
	text-decoration: none;
	margin-bottom: 13px;
	display: inline-block;
	border: 1px solid #d7d7d7;
}

.btn-gro-items:hover{
	color: #fff;
	opacity: 0.9;
}

.btn-active{
	background: #3F2BFE;
	color: #fff;
	border: none;
}


.hilighter{
	padding: 3px 15px;
	background-color: #402bfea2;
	color: #fff;
	border-radius: 50px;
	font-size: 13px;
	margin-bottom: 2px;
	display: inline-block;
	font-weight: 400;
}


/* Default: Show the desktop image */
.pay-opt1 {
    display: block;
}

/* Hide tablet and mobile images by default */
.pay-opt2, .pay-opt3 {
    display: none;
}

/* For tablet screen sizes (e.g., between 768px and 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .pay-opt1 {
        display: none;  /* Hide desktop image */
    }
    .pay-opt2 {
        display: block;  /* Show tablet image */
    }
}

/* For mobile screen sizes (e.g., less than 768px) */
@media (max-width: 767px) {
    .pay-opt1 {
        display: none;  /* Hide desktop image */
    }
    .pay-opt2 {
        display: none;  /* Hide tablet image */
    }
    .pay-opt3 {
        display: block;  /* Show mobile image */
    }

	  
.btn-gro-items
{


	padding: 4px 14px;
	
}
}


.testimonals-slider .owl-nav{
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.ban-back-img-box{
	position: relative;
	background-image: url('../../img/pri-back-img.png');
	background-size: contain;     
	background-repeat: no-repeat;
	background-position: center;  
	width: 100%;
	height: 100%;
}



.center-fixed-img{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
  }

.center-fixed-img .img-main{
	width: auto;
	height: 340px;
	opacity: 0.70;
  }


  /* ----------- */
  /* .owl-carousel img {
	width: 100%;
	height: auto;
	border-radius: 8px;
  } */