/*!
Theme Name: stephen-school
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: stephen-school
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

stephen-school is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.global-template #mc4wp-form-1 p {
    color: #8a1515;
}

:root {
  /* Brand Colors */
  --primary-color: #8A1515;
  --secondary-color: #1B2945;
  --brand-light: #FEE6BA;
  --button-color: #8A1515;
  --institute: #C50227;
  --academics:#980A25;
  --Activities:#8A1515;
  --note-bg:#FEE6BA;
  --calendar-cl-bg:#336600;
  --notification-nt-bg:#800000;
  --notification-btn-clr:#f3f4f6;
  --nw-notification-bg:#2563eb;

  /* Text Colors */
  --heading-color: #1B2945;
  --post-meta-color: #959595;
  --breadcrumb-color: #545454;
  --white:#ffffff;
  --text:#111827;
}
/* @font-face {
    font-family: "English157";
    src: url("./font/English%20157%20Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */



.hero-font{

	font-family: "Great Vibes", cursive;
  font-weight: bold;
  font-style: normal;
}

.heading-font{
	font-family: "Petit Formal Script", cursive;
  	font-weight: 400;
  	font-style: normal;
	
}

.z-max {
    z-index: 99999;
}

.default-template header a.nav-link {
    color: black;
}
.default-template header .group a {
    color: black;
}
.default-template header .group i {
    color: black;
}
.default-template header #menuBtn {
    color: black;
}
.default-template header .stp-chd-search i {
    color: black;
}
/* #wpadminbar{
	display:none;
} */

body {
  font-family: 'Poppins', sans-serif;
}


/* .heading {
  font-family: 'Playfair Display', serif;
} */

/* New hero section css */
   /* Progress bar animation */
    @keyframes progress {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }

    .animate-progress {
        animation: progress 4.5s linear forwards;
    }

    .paused-progress {
        animation-play-state: paused;
    }

    /* 3D perspective support */
    .preserve-3d {
        transform-style: preserve-3d;
    }

    .backface-hidden {
        backface-visibility: hidden;
    }

/* HERO */
.hero-slide {
  height: 90vh;
  position: relative;
}
.stp-hero-overlay {
  position: absolute;
  inset: 0;
      background-image:linear-gradient(30deg, #8a1515, transparent);
}
header{
  transition: 0.3s;
}

.header-white  .site-location-stp {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--primary-color);
    color: #fff;
    padding: 3px 8px;
    border: 1px solid var( --secondary-color);
    border-radius: 50px;
    height: fit-content;
    font-size: 14px;
    transition: 0.3s;
    box-shadow: 0px 13px 17px -8px #000;
}

/* NAV */
.nav-link {
  position: relative;
  padding-bottom: 6px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--primary-color);
  transition: 0.3s;
}
.header-white .header-inner{
  padding: 5px 1rem;
}
.header-white .header-inner .stp-logo{
  width: 20%;
  transition: 0.3s;
}
.stp-logo{
  transition: 0.3s;
}
.header-white .header-inner .stp-chd-search{
  color: #000;
}
.stp-chd-search{
  color: #fff;
}
.nav-link:hover::after { width:100%; }
.nav-link.active::after { width:100%; }

/* MEGA */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s;
}
.group:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ARROWS */
.slick-prev, .slick-next {
  z-index: 20;
  width: 45px;
  height: 45px;
}

.slick-prev { left: 20px; }
.slick-next { right: 20px; }

.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: 0.3s;
}

.custom-arrow:hover {
  background: var(--primary-color);
}

.custom-arrow.prev {
  left: 30px;
}

.custom-arrow.next {
  right: 30px;
}

/* MOBILE */
.drawer {
  transform: translateX(100%);
  transition: 0.3s;
}
.drawer.open { transform: translateX(0); }

.header-white a, .header-white button {
  color: var(--text) !important;
}

/* Feature section css */
.stp-feature-pic {
    position: relative;
}
/* .stp-feature-pic:before {
    content: "";
   background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.8) 0%,
  rgba(0, 0, 0, 0.35) 100%
); 
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
} */

/* Apply now section css start here */
.stp-cta-overlay {
    background: linear-gradient(105deg, #dcdcdc00 50%, #8d352b66 40% 0%, #8a1515d1 100%);
}

/* Form section css start here */
.stp-form-overlay{
  background-color:#00000094;
  opacity: 0.9;
}
/* notification section css  */
.news-slider .slick-slide {
  display: flex !important;
  align-items: center;
}

.news-slider .slick-track {
  display: flex !important;
}


/* Admission Page css start here */
.stp-banner-overlay {
    background-image: linear-gradient(180deg, #1b294556, #000000b7);
}


/* Contact Us page css start here */

.stp-contact-overlay {
    background-image: linear-gradient(180deg, #000000 0%, var(--primary-color) 40%, var(--primary-color) 100%);
    opacity: 0.9;
}
form#wpforms-form-5371 input, form#wpforms-form-5371 select, form#wpforms-form-5371 textarea {
    border: none;
    padding: 14px;
    height: auto;
    border-radius: 2px;
	background-color:#fff;
}
textarea#wpforms-5371-field_3 {
    height: 160px!important;
}
 .wpforms-field {
    padding: 10px 0px !important;
}
button#wpforms-submit-5371 {
    background-color: var(--primary-color);
    text-transform: uppercase;
	 padding: 15px;
	height:auto;
}
form#wpforms-form-5371 input:focus, form#wpforms-form-5371 select:focus, form#wpforms-form-5371 textarea:focus {
    box-shadow: 0px 0px 0px 1px var(--primary-color);
}
/* School news page css start here */

.stp-icon-box:hover {
  background: var(--primary-color);
  color: white;
}


/* Site new Button Design*/
 /* Smooth animation path */
  @keyframes flyOutIn {
    0% {
      transform: rotate(-45deg) translate(0, 0);
    }
    40% {
      /* Slide out completely to the top-right */
      transform: rotate(-45deg) translate(250%, 0);
    }
    41%, 50% {
      /* Teleport instantly to the bottom-left while hidden outside the box */
      transform: rotate(-45deg) translate(-250%, 0);
    }
    100% {
      /* Slide smoothly back into the center */
      transform: rotate(-45deg) translate(0, 0);
    }
  }

  .btn-icon-box i {
    display: inline-block;
    transform: rotate(-45deg); /* Keep the default rotation */
  }

  /* Trigger keyframe animation on hover. Slightly faster (0.5s) for a snappier feel */
  .stp-btn-custom:hover .btn-icon-box i {
    animation: flyOutIn 0.5s ease-in-out forwards;
  }

.stp-btn-custom:hover .btn-icon-box{
	border-color:#fff;
}
/* Mobile media css start here */
@media only screen and (max-width:767px){
	#topbar{
		display:none !important;
	}
	header .stp-logo {
    width: 22%;
}
  .header-white .header-inner .stp-logo {
    width: 15%;
}
.site-location-stp.hidden {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--primary-color);
    color: #fff;
    padding: 1px 6px;
    border: 1px solid var( --secondary-color);
    border-radius: 50px;
    height: fit-content;
    font-size: 12px;
    transition: 0.3s;
    box-shadow: 0px 13px 17px -8px #000;
}
.hero-slide {
  height: 80vh;
}
.custom-arrow.next {
    right: 5px;
}
.custom-arrow.prev {
    left: 5px;
}
.stp-mobile-hero-text{
  max-width:90%!important;
}
	/* Calendar page css */
div#calendar div {
    width: auto;
    font-size: 15px;
    padding: 5px;
}
	.content-hero-bg {
    width: 100%!important;
		padding:20px!important;
}
}

/* Ipad media screen css start here */
@media only screen and (min-width:768px) and (max-width:1024px){
  .stp-mobile-hero-text{
  max-width:80%!important;
}
.hero-slide {
  height: 75vh;
}
	.site-location-stp.hidden {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--primary-color);
    color: #fff;
    padding: 1px 6px;
    border: 1px solid var( --secondary-color);
    border-radius: 50px;
    height: fit-content;
    font-size: 12px;
    transition: 0.3s;
    box-shadow: 0px 13px 17px -8px #000;
}
	.st-ipad-hide {
    display: none;
}
	.st-ipad-w {
    width: 90%!important;
    margin: auto;
}
	.content-hero-bg {
    width: 80%!important;
		padding:20px!important;
}
}


@media (min-width: 1024px) and (max-width: 1400px) {
  .stp-mobile-hero-text {
    max-width: 85vw!important;
}

}




/* global template */
.global-template .mc4wp-form-fields {
    border-radius: 5px;
    overflow: hidden;
}
.global-template input[type="submit"] {
    background-color: #8a1515;
    border-color: #8a1515;
}
.global-template input#email {
    background-color: #f3f4f6;
    font-weight: 400;
    font-size: 15px;
}


/* Mega Menu css  */
.mega-menu {
    width: 100%;
    transform: translate(0%, 0%)!important;
    border-top: 3px solid var(--primary-color);
}

header nav{
	position:relative;
	width:80%;
	justify-content:end;
}
.mega-menu ul li a {
    padding-left: 20px;
}
.mega-menu ul li:before {
    content: "\f061";
    position: absolute;
    font-family: 'FontAwesome';
    color: var(--secondary-color);
}

.header-white .school_site{
	    color: white !important;
}


.page-id-5406 .no_category{
	display:none;
}


/* Birthday Section css */
.font-display { font-family: 'Fredoka One', cursive; }
        .font-body { font-family: 'Nunito', sans-serif; }

        /* Chunky Sticker Text Effects */
        .sticker-text-white {
            color: #ffffff;
            -webkit-text-stroke: 2.5px #1b2945;
            text-shadow: 4px 4px 0px #1b2945;
        }
        
        .sticker-text-[#841414] {
            color: #841414;
            -webkit-text-stroke: 2.5px #1b2945;
            text-shadow: 4px 4px 0px #1b2945;
        }

        /* Brute-force border style */
        .brutal-border {
            border: 3px solid #1b2945;
            box-shadow: 3px 3px 0px #1b2945;
        }

        /* Smooth Fade Transition for Dynamic Content */
        .fade-transition {
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 1;
            transform: translateY(0);
        }
        .fade-out {
            opacity: 0;
            transform: translateY(10px);
        }

        /* Floating animation for balloons */
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(4deg); }
        }
        .animate-balloon {
            animation: float 4s ease-in-out infinite;
        }
        .animate-balloon-delayed {
            animation: float 5s ease-in-out infinite 1.5s;
        }
        .animate-balloon-slow {
            animation: float 6s ease-in-out infinite 0.8s;
        }

#topbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: transform .3s ease;
}

#topbar.hide-topbar{
    transform: translateY(-100%);
}

#header{
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9998;
    transition: top .3s ease, background .3s ease, box-shadow .3s ease;
}