:root 
{
  --primary-color: #003366; /* Deep Blue from screenshot */
  --accent-color: #ffc107;  
  --text-dark: #2c3e50;
  --bg-light: #f9fbfd;
}
::placeholder {
  color: #999 !important;   /* jo color chahiye */
  opacity: 1;    /* Firefox me light na ho isliye */
}

body {
    font-family: "Poppins", sans-serif !important;
    color: var(--text-dark);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif !important;
    font-weight: 800;
}

/* --- 1. Top Bar (Black) --- */
.top-header {
    background-color: #000;
    color: white;
    font-size: 0.85rem;
    padding: 8px 0;
	background-image: url(../images/5.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.top-header a {
            color: white;
            text-decoration: none;
}
.tp-cnts ul {
    margin: 0px;
	padding-left: 0;
}
.tp-cnts ul li {
    display: inline-block;
    font-size: 15px;
}
.tp-cnts a {
    color: #ffffff;
}
.tp-cnts ul li:not(:last-child):after {
    content: "|";
    color: #fff;
    margin: 0px 10px;
}
.sticky-socialmedia {
    position: fixed;
    right: 0;
    z-index: 9999999;
        bottom: 34%;
    list-style: none;
}
.stickybtn {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 9999;
    height: 39px;
    width: auto;
    margin-right: -213px;
    background: #ffc207;
    border: 2px solid #ffc207;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    -webkit-appearance: none;
    font-size: 16px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    outline: none !important;
    transition: .3s;
    padding: 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    padding: 15px;
        border-radius: 8px 8px 0px 0px;
}
/* --- 2. Brand Header (White with Logos) --- */
.brand-header {
    background-color: white;
    padding: 10px 0;
}
.logo-main {
    height: 80px; 
    width: auto;
}
.logo-foundation {
    height: 50px; 
    width: auto;
 }
 .age-criteria{
        height: 270px;
    overflow-y: scroll;
 }
.enquiry-section{
            background: url(../images/core-value.png);
    background-size: cover;
    background-color: #faf5f2;
    margin-top: 30px;
}
.enquire-form{
    padding: 30px !important;
}
.enquire-form h5{
    background: #003366;
    padding: 16px;
    color: white;
    margin-bottom: 18px;
    border-radius: 5px;
        font-weight: 600;
        position: relative;
}
.enquire-form h5:after {
    content: "";
    padding: 62px 0;
    position: absolute;
    right: 0em;
    background: url(../images/send-mail.png) !important;
    width: 70px;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    bottom: -56px;
}
/* --- 3. Navigation Bar (Dark Blue) --- */
.navbar {
            background-color: var(--primary-color);
            padding: 0; 
            z-index: 1030;
        }
        .navbar-nav .nav-link {
            font-weight: 500;
            color: white !important;
            padding: 15px 15px !important; 
            text-transform: capitalize;
            font-size: 0.95rem; 
            transition: background 0.3s;
            white-space: nowrap;
        }
        .navbar-nav .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
        }
        /* Mobile Toggle Icon Color */
        .navbar-toggler {
            border-color: rgba(255,255,255,0.5);
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Dropdown Styles */
        .dropdown-menu {
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-radius: 0 0 5px 5px;
            padding: 0;
            margin: 0;
        }
        .dropdown-item {
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        .dropdown-item:last-child {
            border-bottom: none;
        }
        .dropdown-item:hover {
            background-color: var(--bg-light);
            color: var(--primary-color);
        }

        /* Desktop Hover for Dropdowns */
        @media (min-width: 992px) {
            .dropdown:hover .dropdown-menu {
                display: block;
                margin-top: 0;
                animation: fadeInUp 0.3s ease forwards;
            }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Mobile Menu Styles (Offcanvas adjustments) */
        .offcanvas {
            max-width: 100%;
        }
        .offcanvas-header {
            background-color: var(--primary-color);
            color: white;
        }
        .offcanvas-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
        }
        .btn-close {
            filter: invert(1);
        }
        @media (max-width: 991px) {
            .navbar-nav .nav-link {
                color: #333 !important; /* Dark text inside mobile white menu */
                padding: 10px 15px !important;
            }
            .navbar-nav .nav-link:hover {
                background-color: transparent;
                color: var(--primary-color) !important;
            }
        }

        /* --- Hero Carousel --- */
        .carousel-item {
            height: 600px; 
            position: relative;
        }
        .carousel-item img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            filter: brightness(0.8);
        }
        .carousel-caption {
            bottom: 30%;
			left: 6%;
            text-align: left;
        }
        .hero-title {
            font-size: 3.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            margin-bottom: 20px;
        }
		.carousel-control-next, .carousel-control-prev{
			width: 6%;
		}
        
/* --- About us --- */
.about-three-image-main {
    position: relative;
    z-index: 2;
    margin-top: 19px;
    padding-bottom: 37px;
}
.about-three-image {
    position: relative;
    display: inline-block;
    border-radius: 50%;
}
.about-three-image img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}
.about-three-image-one-left{
	position: absolute;
  left: 38px;
  top: -18px;
  width: 126px;
  height: 157px;
  background-color: #75c137;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 157"><path d="M114.749 91.2042C133.011 65.1449 126.698 29.201 100.639 10.9295C74.5942 -7.32896 38.6827 -1.01273 20.4211 25.0466C6.89733 44.36 12.4162 64.7933 15.3188 86.3727C18.6118 110.778 10.9844 134.233 0.246094 156.906C14.0041 138.543 32.9946 123.098 55.5776 117.758C78.8765 112.263 99.3508 113.2 114.749 91.2042Z"/></svg>');
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126 157"><path d="M114.749 91.2042C133.011 65.1449 126.698 29.201 100.639 10.9295C74.5942 -7.32896 38.6827 -1.01273 20.4211 25.0466C6.89733 44.36 12.4162 64.7933 15.3188 86.3727C18.6118 110.778 10.9844 134.233 0.246094 156.906C14.0041 138.543 32.9946 123.098 55.5776 117.758C78.8765 112.263 99.3508 113.2 114.749 91.2042Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  animation: zoomBig2 3s linear infinite;
}
.about-three-image-one-right{
	position: absolute;
  right: 38px;
  top: 5px;
  background-color: #f25334;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 129"><path d="M151.441 65.588C136.592 31.9742 104.34 5.88003 67.5198 0.836438C40.7276 -2.83163 16.0019 8.7024 5.14329 35.0004C-14.1227 81.7071 25.4323 125.805 70.9941 124.736C82.1668 124.471 91.9315 122.005 101.453 116.105C110.164 110.715 121.347 100.689 132.104 100.221C140.127 99.864 142.041 103.838 146.407 110.012C148.879 113.517 154.338 122.83 157.468 128.098C162.594 106.67 159.859 84.6619 151.441 65.588Z"/></svg>');
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 129"><path d="M151.441 65.588C136.592 31.9742 104.34 5.88003 67.5198 0.836438C40.7276 -2.83163 16.0019 8.7024 5.14329 35.0004C-14.1227 81.7071 25.4323 125.805 70.9941 124.736C82.1668 124.471 91.9315 122.005 101.453 116.105C110.164 110.715 121.347 100.689 132.104 100.221C140.127 99.864 142.041 103.838 146.407 110.012C148.879 113.517 154.338 122.83 157.468 128.098C162.594 106.67 159.859 84.6619 151.441 65.588Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  width: 161px;
  height: 129px;
  animation: zoomBig2 4s linear infinite;
  mix-blend-mode: multiply;
}
.about-three-image-one-bottom{
	position: absolute;
  right: 50px;
  bottom: 8px;
  width: 147px;
  height: 116px;
  background-color: #2390FF;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147 116"><path d="M145.525 60.87C148.858 45.4897 143.963 27.9996 134.956 17.0731C105.774 -18.3108 54.8811 6.45925 43.9606 44.8255C39.0145 62.1984 45.1061 80.8475 31.6604 95.3944C23.6295 104.068 15.2211 105.969 0.90332 111.83C46.4597 117.859 102.234 119.787 135.008 81.668C139.017 76.9927 144.172 67.1472 145.525 60.87Z"/></svg>');
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147 116"><path d="M145.525 60.87C148.858 45.4897 143.963 27.9996 134.956 17.0731C105.774 -18.3108 54.8811 6.45925 43.9606 44.8255C39.0145 62.1984 45.1061 80.8475 31.6604 95.3944C23.6295 104.068 15.2211 105.969 0.90332 111.83C46.4597 117.859 102.234 119.787 135.008 81.668C139.017 76.9927 144.172 67.1472 145.525 60.87Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  animation: zoomBig2 3s linear infinite;
}
@keyframes zoomBig2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
.about-three-image-bg-shape {
    position: absolute;
    left: -30px;
    right: 10px;
    bottom: 0;
    z-index: -1;
}
#about p {
    text-align: justify;
}
.btn.main-btn {
    padding: 0 24px;
    height: 44px;
    line-height: 41px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #ffc207;
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
}
.brandhype-link{
    display: inline-block;
}	
.brandhype-link:hover{
     padding-left: 0px;
}
   
/* --- Cards & Sections --- */
.section-padding {
    padding: 80px 0;
}
.card-custom {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	background: white;
	position: relative;
	text-align: center;
	max-width: 300px;
	padding: 69px 20px 51px;
	border-radius: 58px 70px 70px 58px;
	z-index: 2;
	margin: auto;
	overflow: hidden;
	border: 1px solid #faf5f2;
	background-color: #fff;
	transition: all 0.4s linear;
}
.principle-msg{
    border-radius: 12px !important;
}
.message-section .card-custom {
    max-width: 100%;
}
.service-three-item-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 120px;
    z-index: -1;
    background-color: #ffeade;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 120"><path d="M0.000755116 119.473C-0.000249663 119.296 -0.000253746 119.119 0.000755116 118.94V-0.0268555H286.501V113.973C283.167 103.806 248.801 78.2731 138.001 57.4731C27.8687 36.7985 0.16709 89.4978 0.000755116 118.94V119.473Z"/></svg>');
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 120"><path d="M0.000755116 119.473C-0.000249663 119.296 -0.000253746 119.119 0.000755116 118.94V-0.0268555H286.501V113.973C283.167 103.806 248.801 78.2731 138.001 57.4731C27.8687 36.7985 0.16709 89.4978 0.000755116 118.94V119.473Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover;
}
.card-custom:hover {
    transform: translateY(-10px);
    border-color: #F25334;
    box-shadow: 12px 21px 40px 0px rgb(0 0 0 / 6%);
}
.message-section .card-custom h6 {
    color: #000;
    font-weight: 500;
}

/* Core Values Icons */
.value-icon {
    width: 80px;
    height: 80px;
    /* background: rgba(0, 51, 102, 0.1); */
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 50px auto 10px;
    transition: all 0.3s;
}
.value-icon img {
    width: 60px;
}
.core-value {
    background: url(../images/core-value.png);
    background-size: cover;
}
/* .faq-section{
       background: url(../images/core-value.png);
    background-size: cover;
    background-color: #faf5f2;
} */
#about h2 {
    color: #083461;
    font-size: 35px;
    font-weight: 700;
}
        .card-custom:hover .value-icon {
            color: white;
            transform: rotateY(360deg);
        }

        /* --- Buttons --- */
        .btn-brand {
            background-color: var(--accent-color);
            color: #000;
            font-weight: 700;
            padding: 12px 30px;
            border-radius: 30px;
            border: none;
            transition: all 0.3s;
        }
        .btn-brand:hover {
            background-color: #e0a800;
            transform: scale(1.05);
        }

/* --- Parallax CTA --- */
.contact-cta-section {
    padding-top: 0;
}
.contact-cta-section .subscribe-wrap {
    padding: 40px 100px;
    background: linear-gradient(rgb(0 0 0 / 81%), rgb(0 0 0 / 17%)), url(../images/contact-bg.jpg);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    z-index: 1;
}
.contact-cta-section .subscribe-wrap .subscribe-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0px;
}
.contact-cta-section .subscribe-wrap .subscribe-text h3 {
    font-size: 40px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 700;
}
/* --- Parallax CTA --- */
.cta-section {
    background: linear-gradient(rgb(0 0 0 / 90%), rgb(0 0 0 / 65%)), url(../images/admission-bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    color: white;
    text-align: center;
	padding: 5rem 0 !important;
}

/* --- Gallery Section --- */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            height: 300px;
			border: 3px dashed #ffc207;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
			padding: 5px;
			border-radius: 15px;
        }
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 51, 102, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-overlay i {
            font-size: 3rem;
            color: white;
            transform: scale(0);
            transition: transform 0.3s ease;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        .gallery-item:hover .gallery-overlay i {
            transform: scale(1);
        }
.gallery {
	background-image: url(../images/gallery-bg.png);
    background-size: cover;
    background-color: #faf5f2;
}

 /* --- Shri Footprints --- */
 .why-choose i {
    color: #ffc207;
}
 .shri-way {
    background: url(../images/shri-bg.png);
    padding: 150px 0 170px 0;
    margin: -30px 0 -65px;
    background-repeat: no-repeat;
}
.shri-outer{
    border: 3px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    padding: 2px;
}
.shri-inner{
    border-radius: 50%;
    background: #fff;
    padding: 30px;
}
.shri-inner h3{
    color: #000;
    padding-top: 8px;
}
 
/* --- why choose --- */
.contact-three-thumb {
    position: relative;
    z-index: 2;
    margin-top: 6px;
}
.contact-three-thumb-main {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    z-index: 2;
}
.contact-three-thumb-main img {
    height: auto;
    width: 100%;
    border-radius: 50%;
}
.contact-three-thumb-main:after {
    position: absolute;
    width: calc(100% + 21px);
    height: calc(100% + 21px);
    left: -11px;
    top: 57px;
    content: "";
    background-color: #faf5f2;
    border-radius: 50%;
    z-index: -1;
}
.contact-three-thumb-shape1 {
    position: absolute;
    left: -15px;
    top: 0px;
    z-index: -1;
}
.contact-three-thumb-shape1 img {
    max-width: 100%;
    height: auto;
    animation: zoomBig2 3s linear infinite;
}
.contact-three-thumb-shape2 {
    position: absolute;
    left: -12px;
    bottom: 0;
    z-index: 2;
}
.contact-three-thumb-shape2 img {
    max-width: 100%;
    height: auto;
    animation: rotated 6s infinite linear;
}
.contact-three-thumb-shape3 {
    position: absolute;
    right: 62px;
    bottom: -32px;
    z-index: 2;
}
.contact-three-thumb-shape3 img {
    max-width: 100%;
    height: auto;
    animation: float-bob-x 4s linear 0s infinite;
}
@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes rotated {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes zoomBig2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
@media (min-width: 1360px) {
    .contact-three-thumb-shape1 {
        left: -40px;
    }
}

.why-choose p {
    text-align: justify;
}

/* --- Breadcrumbs css --- */
.page-banner-bg {
    background-size: cover;
    background-position: top;
}
.banner-content.text-center {
    padding-top: 120px;
    padding-bottom: 120px;
}
.banner-content .title {
    color: #ffffff;
    font-weight: 600;
    font-size: 50px;
}

.inner-hd {
    color: #083461;
    font-size: 35px;
    font-weight: 700;
}

/* --- core value --- */
.timeline-section {
    position: relative;
}















.edu-section{
  padding:60px 0;
}
.quote{
  font-size:28px;
  font-weight:600;
  color:#1f3c88;
}
.quote span{
  font-size:22px;
}
.edu-text{
  font-size:15px;
  color:#444;
  line-height:1.7;
}
.feature-box{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:25px;
}
.feature-icon{
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
}
.bg1{background:#00bcd4;}
.bg2{background:#9e9e9e;}
.bg3{background:#e91e63;}
.bg4{background:#ff9800;}
.bg5{background:#2196f3;}
.bg6{background:#9c27b0;}

.education-title{
  font-size:26px;
  font-weight:700;
  color:#1f3c88;
}
.education-list li{
  margin-bottom:12px;
  font-size:15px;
}









/* -------------------------------------------------------------------------- contact page css start ----------------------------------------------------------------------------------- */

.contact-section {
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            background: #fff;
                border: 1px solid #ffc207;
        }

        .contact-left {
            background: linear-gradient(rgba(31,41,55,0.85), rgba(31,41,55,0.85)),
                        url("../images/contace-left.webp");
            background-size: cover;
            background-position: center;
            color: #fff;
            padding: 50px 40px;
        }

        .contact-left h4 {
            margin-bottom: 20px;
        }

        .contact-info {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            align-items: start;
        }

        .contact-info i {
      font-size: 20px;
    background: #ffc207;
    padding: 8px 14px;
    border-radius: 5px;
    outline: 1px dashed #ffff;
    outline-offset: 2px;
        margin-top: 5px;
        }

        .contact-right {
            padding: 50px 40px;
        }

        .contact-right h2 {
            font-weight: 700;
            color: #000;
        }

        .underline {
            width: 60px;
            height: 3px;
            background: #003366;
            margin: 10px 0 30px;
        }

        .form-control {
              border-radius: 5px;
    padding: 14px;
        }
        .form-control:focus {
    border-color: #000000;
    outline: 0;
    box-shadow: inherit;
}

        .btn-custom {
            background: #003366;
            color: #fff;
            padding: 15px 50px;
            border-radius: 4px;
            border: none;
        }

        .btn-custom:hover {
            background: #ffc207;
            color: #fff;
        }

/* -------------------------------------------------------------------------- contact page css end ----------------------------------------------------------------------------------- */

.age-criteria .school-info-table{
    background: #ffc20778;
}
.age-criteria .school-info-table th{
        background: #003366;
    color: white;
}
.age-criteria .school-info-table tbody tr:nth-child(even) td{
    background: #f7f7f7;
}
.Admission-Criteria{
    background: url(../images/core-value.png);
    background-size: cover;
    background-color: #faf5f2;
}
.schedule-visit{
        background: #003366;
    color: #fff;
    padding: 16px;
    text-align: center;
    border-radius: 6px;
}
.icon-box .iconbg{
     width: 80px;
    height: 80px;
    line-height: 80px;
    background: #ffc207;
    display: inline-block;
    margin-bottom: 45px;
    border: 3px solid #fff;
    border-radius: 8px;
    transform: rotate(50deg);
}
 .icon-box i::before{
    transform: rotate(-50deg);
 }  
.icon-box i {
      font-size: 40px;
      color: #fff;
    }
    .criculam{
            font-size: 25px;
    color: #fff !important;
    background: #003366;
    padding: 10px 21px;
    display: inline-block;
    border-radius: 5px;
    }
    .cariculam-box .card-body{
           padding: 30px;
    background: #f7f7f763;
    border-radius: 8px 8px 8px 8px;
    }
    .cariculam-box{
    border: 2px solid #f5f5f5;
        transition: .5s;
           border-radius: 8px 8px 8px 8px;
    background-color: #fff;
    border-color: #ffc207;
    }
    .cariculam-box:hover{
        border-radius: 8px 60px 8px 8px;
    background-color: #fff;
    border-color: #003366;
    }
    .teaching-methodology{
        background: url('../images/teacher-methedlogy.webp');
        background-size: cover;
        background-position: center;
    }
    .teaching-methodology h2, .teaching-methodology h6{
        color: #fff;
    }
/* -------------------------------------------------------------------------- Application form page css start ----------------------------------------------------------------------------------- */
.parent-application-form-wrapper {
            background: #ffffff;
            padding: 35px;
            border-radius: 10px;
            box-shadow: 0 3px 13px rgb(0 51 102 / 16%);
        }

        .parent-application-form-title {
            font-weight: 700;
            color: #0d6efd;
        }

        .parent-application-form-section-title {
              font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #fff;
    border-left: 4px solid #ffc207;
    padding: 15px 0px 15px 10px;
    background: #003366;
        }
.parent-application-form-section-title:nth-child(1){
    margin-top: 0px;
}
        .parent-application-form-submit-btn {
               background: #003366;
    color: #fff;
    padding: 15px 50px;
    border-radius: 4px;
    border: none;
        }
        .parent-application-form-submit-btn:hover {
    background: #ffc207;
    color: #fff;
}

    .privacy-section-title {
            font-weight: 600;
            margin-top: 30px;
        }
        .privacy-text {
            color: #555;
            line-height: 1.7;
        }
         .terms-section-title {
            font-weight: 600;
            margin-top: 30px;
        }
        .terms-text {
            color: #555;
            line-height: 1.7;
        }
.mandatory-disclosure-section button.accordion-button.collapsed {
    background: #ffc207;
    color: #fff;
    padding: 20px 20px;
    font-weight: 600;
}
.mandatory-disclosure-section .accordion-button:not(.collapsed){
    padding: 20px 20px;
    font-weight: 600;
    background: #003366;
    color: #fff;
}
.mandatory-disclosure-section .accordion-button::after{
    filter: brightness(0) invert(1);
}
.mandatory-disclosure-section .accordion-button:focus{
    box-shadow: none;
    border: none;
}



/* -------------------------------------------------------------------------- contact page css start ----------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- Mandatory Disclosure page css start ----------------------------------------------------------------------------------- */
 .school-info-table {
        background: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e5e5e5;
    }

    .school-info-table thead {
        background: linear-gradient(90deg, #0d6efd, #0b5ed7);
        color: #fff;
    }

    .school-info-table th {
        padding: 14px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        border: none;
    }

    .school-info-table td {
        padding: 14px;
        vertical-align: middle;
        font-size: 15px;
        border-top: 1px solid #f0f0f0;
    }

    .school-info-table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .school-info-table tbody tr:hover {
        background-color: #eef4ff;
        transition: 0.3s ease;
    }

    .school-info-label {
        font-weight: 600;
        color: #333;
        width: 35%;
    }

    .school-info-value {
        color: #555;
    }

    .vendors-details{
        background: url('../images/Vendors-Details-bg.webp');
        background-size: cover;
        background-position: center;
    }
    .vendors-details .school-info-table th{
            background: #003366;
    color: white;
    padding: 20px 20px;
    }
    .shri-content p{
        margin-bottom: 8px;
    }
    .arrow-list {
    list-style: none;
    padding-left: 0;
}

.arrow-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 4px;
}

.arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: url('../images/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------- Mandatory Disclosure page css start ----------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- Shri Differentiators page css start ----------------------------------------------------------------------------------- */
.event-wrapper{
        max-width: 100%;
        /* margin: 60px auto;
        padding: 20px; */
    }

    .event-box{
     background: linear-gradient(45deg, #efefef, #ffffff0a);
    border-radius: 8px;
    padding: 22px 30px 22px 22px;
    display: flex;
    align-items: center;
    gap: 28px;
    border: 1px solid #ffc20761;
    }
    .event-wrapper:nth-child(even) .event-box {
     background: linear-gradient(45deg, #ffffffba, #efefef);
}
    .event-img{
        width: 240px;
        height: 170px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .event-img img{
        width:100%;
        height:100%;
        object-fit: cover;
    }

    .event-content{
        flex:1;
    }

    .event-location{
        font-size:15px;
        color:#333;
        display:flex;
        align-items:center;
        gap:8px;
        margin-bottom:14px;
    }

    .event-location i{
        font-size:16px;
        color:#000;
    }

    .event-title{
        font-size:22px !important;
        line-height:1.25;
        font-weight:500;
        color:#000 !important;
        margin:0;
    }
/* -------------------------------------------------------------------------- Shri Differentiators page css end ----------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- career page css end ----------------------------------------------------------------------------------- */
/* HERO */
  

        /* JOB CARD */
        .job-card {
            background: #fff;
    border-radius: 8px;
    padding: 45px;
    box-shadow: 0 3px 13px rgb(0 51 102 / 16%);
    transition: 0.3s;
        }

        .job-card:hover {
            transform: translateY(-5px);
        }

        .job-badge {
            background: #e7f1ff;
            color: #0d6efd;
            font-size: 13px;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .apply-btn {
              background: #003366;
    color: #fff;
    padding: 15px 50px;
    border-radius: 4px;
    border: none;
        }

        .apply-btn:hover {
            background: #ffc207;
            color: #fff;
        }

        .why-join-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #ffc207;
}
        /* WHY JOIN */
        .why-join i {
            font-size: 25px;
    color: #fff;
    background: #003366;
    padding: 10px 21px;
    display: inline-block;
    border-radius: 5px;

        }
        .form-select{
                border-radius: 5px;
    padding: 14px;
        }
              .form-select:focus {
    border-color: #000000;
    outline: 0;
    box-shadow: inherit;
}
#apply-form{
        background: #f7f7f7;
}
/* -------------------------------------------------------------------------- career page css end ----------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- Time line css start ----------------------------------------------------------------------------------- */
.timeline-legacy {
  position: relative;
  max-width: 1200px;
  margin: auto;
}

.timeline-legacy::after {
  content: '';
  position: absolute;
  width: 6px;
  background: #003366;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.tl-item {
  position: relative;
  width: 50%;
  padding: 10px 40px;
}

.tl-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  border: 4px solid #003366;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.tl-left { left: 0; }
.tl-right { left: 50%; }

.tl-left::after { right: -13px; }
.tl-right::after { left: -12px; }

.tl-left::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 30px;
  border: solid #B99A35;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #003366;
}

.tl-right::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 30px;
  border: solid #B99A35;
  border-width: 10px 10px 10px 0;
  border-color: transparent #003366 transparent transparent;
}

.tl-content {
  background: #003366;
  padding: 20px 30px;
  border-radius: 6px;
      color: white;
}
.tl-content h4{
        font-weight: 600;
            font-size: 22px;
}


/* -------------------------------------------------------------------------- Time line css end ----------------------------------------------------------------------------------- */



@media (min-width: 768px) {
    
.timeline-section::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px; 
        background-color: #dee2e6; 
        transform: translateX(-50%); 
        z-index: 0;
    }
    .timeline-content-block {
        position: relative;
    }
	.principle-height{
        height: 200px;
        overflow-y: scroll;
    }
    .principle-height::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.principle-height::-webkit-scrollbar
{
	width: 4px;
	background-color: #F5F5F5;
}

.principle-height::-webkit-scrollbar-thumb
{
	background-color: #000000;
}
	.timeline-content-block p {
		text-align: justify;
	}
	
	.timeline-content-block h3 {
		color: #000;
	}


    .text-md-end .timeline-content-block::after {
                content: '';
                position: absolute;
                top: 1.5rem; 
                right: -3rem; /* Extend out of the padding area */
                width: 3rem;  /* Length to reach the center line */
                height: 1px;
                background-color: #dee2e6;
    }

            /* Connector for Right-side items */
            /* Looks for blocks that are text-start aligned (the right blocks) */
            .text-md-start .timeline-content-block::after {
                content: '';
                position: absolute;
                top: 1.5rem;
                left: -3rem; /* Extend out of the padding area */
                width: 3rem;
                height: 1px;
                background-color: #dee2e6;
            }
        }

        /* --- Mobile Optimizations (<768px) --- */
        @media (max-width: 767.98px) {
            /* On mobile, center text and add spacing between text and image */
            .timeline-row {
                text-align: center;
            }
            .timeline-content-block {
                margin-bottom: 1.5rem;
            }
            /* Ensure images always appear below text on mobile */
            .flex-md-row-reverse {
                flex-direction: column;
            }
        }

        /* Utility for consistent image styling */
        .mission-img {
            object-fit: cover;
            height: 100%;
            max-height: 300px; /* Ensures images don't get too tall */
            width: 100%;
        }


/* --- vision mission --- */
.bg-custom-blue {
    background-color: #003366;
    color: white;
}

.btn-custom-white {
    background-color: white;
    color: var(--custom-pink);
    border: none;
    font-weight: 600;
}

.btn-custom-white:hover {
    background-color: #f8f9fa;
    color: var(--custom-pink);
}

.btn-custom-pink {
    background-color: var(--custom-pink);
    color: white;
    border: none;
    font-weight: 600;
}
.btn-custom-pink:hover {
            background-color: #e62e5c;
            color: white;
}
        
        /* Common styles for the image columns */
        .img-col {
            min-height: 400px; /* Ensures the image has height even with no content */
            background-size: cover;
            background-position: center;
        }
        
        /* Common styles for the text columns to center content vertically */
        .text-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }



/* --- Footer --- */
footer {
    background-color: #003467;
    color: #aaa;
    padding-top: 60px;
    position: relative;
    z-index: 1;
}
footer:before {
    content: "";
    position: absolute;
    background-image: url(../images/footer-shape.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    left: 0;
    opacity: .5;
}
footer h5 {
    color: #f6bb0b;
    margin-bottom: 20px;
}
footer a {
    color: #aaa;
    text-decoration: none;
    transition: 0.3s;
    display: block;
    margin-bottom: 10px;
}
footer a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}
footer#contact p, footer#contact a {
    color: #fff;
	margin-bottom: 0;
}
.footer-bottom {
    background: #000;
}

li.nav-item.btn-yel {
    background: #ffc207;
}
li.nav-item.btn-yel a {
    color: #000 !important;
}
.navbar-toggler {
    border: 0;
}

@media (max-width: 767px) {

    .timeline-legacy::after { left: 31px; }

.tl-content h4 {
    font-weight: 600;
    font-size: 18px;
}

.footer-logo{
    margin:auto;
    display: block;
}
.tl-item {
width: 100%;
padding-left: 60px;
padding-right: 25px;
}


.tl-item::before {
left: 50px !important;
border-width: 10px 10px 10px 0;
border-color: transparent #003366 transparent transparent;
}


.tl-left::after, .tl-right::after { left: 7px; }
.tl-right { left: 0; }
.tl-left::before{
    left: 50px !important;
    right: inherit;
}
    .sticky-socialmedia {
        display: none;
    }
    .job-card{
        padding: 15px;
    }
    .event-box{
            flex-direction:column;
            border-radius:26px;
        }
        .enquire-form {
    padding: 12px !important;
}

.enquire-form h5:after{
    width: 55px;
}
.arrow-list li{
    text-align: left;
}
.schedule-visit-main .form-label{
    text-align: left;
    display: block;
}
.parent-application-form-wrapper{
        padding: 15px;
}
.banner-content .title{
        font-size: 32px;
}
.banner-content.text-center {
    padding-top: 80px;
    padding-bottom: 80px;
}
        .event-img{
            width:100%;
            height:220px;
        }

        .event-title{
            font-size:24px;
        }
        .event-content{
            order: 1;
        }
        .event-content p{
            text-align: center !important;
        }
	.hero-title{
		font-size: 1.5rem;
	}
    .enquiry-section{
            margin-top: 100px !important;
    }
	.lead {
		font-size: 0.8rem;
	}
	.btn-brand{
		font-size: 14px;
		padding: 10px 17px;
	}
	.carousel-item{
		height: 280px;
	}
        .carousel-caption {
        bottom: 15%;
    }
	.section-padding {
		padding: 20px 0;
	}
	#about h2 {
		font-size: 22px;
		margin-bottom: 10px !important;
		margin-top: 10px;
	}
	.contact-cta-section .subscribe-wrap {
		padding: 40px 50px;
	}
	.contact-cta-section .subscribe-wrap .subscribe-text h3 {
		font-size: 20px;
	}
	.card-custom{
		max-width: 100%;
	}
	.shri-inner{
		padding: 18px !important;
	}
	.shri-inner h3{
		font-size: 16px;
	}
	.shri-way{
		padding: 80px 0 40px;
		background: #cd8518;
		margin:0;
	}
	.cpy-p.text-start, .cpy-p.text-end {
		text-align: center !important;
	}
	.tp-cnts {
		text-align: center;
	}
	.tp-cnts ul li:not(:last-child):after{
		display: none;
	}
	.about-three-image-one-right, .about-three-image-one-bottom{
		width: 100px;
        height: 80px;
	}
	.about-three-image-one-left{
		width: 80px;
		height: 100px;
	}
	.button-main {
		text-align: center;
	}
	.top-header{
		text-align: center;
	}
	.top-header .d-flex {
		display: block !important;
	}
}