/*!
Theme Name: dev_theme
Author: dev_theme.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: dev_theme
*/


:root {
	--theme-color: #2F6E40;
	--secondary-color: #1E1E1E;
	--white-color: #FFFFFF;
	--white-color-rgb: 255,255,255;
	--theme-color-rgb: 47, 110, 64;
	--secondary-color-rgb: 30,30,30;
}

/******* Common Element CSS Start ******/

html { font-family: "Inter Tight", sans-serif; }

body { font-family: "Inter Tight", sans-serif; font-size: 16px; line-height: 1.4; font-weight: 400; background: #FDFAF8; }
ul,ol 					{ padding: 0; list-style: none; }
a 						{ color: inherit; text-decoration: none; outline: none; cursor: pointer; transition: all 0.3s ease; }
a:focus, a:active, a:visited, a:hover	{ text-decoration: none; outline: none; }
a:hover					{ color: var(--theme-color-light); }
button                  { transition: all 0.3s ease; }

.h1,
h1 { font-size: 64px; line-height: 1; font-family: "Newsreader", serif; font-weight: 400; }
.h2,
h2 { font-size: 40px; line-height: 1.2; font-family: "Newsreader", serif; font-weight: 400; }
.h3-big { font-size: 32px; line-height: 1.4; font-family: "Newsreader", serif; font-weight: 400; }
.h3,
h3 { font-size: 20px; line-height: 1.2; font-weight: 400; }
.h4,
h4 { font-size: 18px; line-height: 1.4; font-weight: 400; }
.h5,
h5 { font-size: 16px; line-height: 1.4; font-weight: 400; }
.h6,
h6 { font-size: 14px; line-height: 1.2; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;}
p { }

.big-text { font-size: 18px; line-height: 1.4; font-weight: 400; }
.title-font { font-family: "Newsreader", serif; }
img { max-width: 100%; }
.aspect-square { aspect-ratio: 1; }

/******* Common Element CSS End ******/

.white-text 		{ color: var(--white-color); }
.theme-text 		{ color: var(--theme-color); }
.theme-bg 			{ background: var(--theme-color); }
.common-section { padding: 80px 0; }
.common-top-section { padding-top: 160px; }
.title-block 		{ margin-bottom: 96px; }

/* Button Text */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; background: transparent; color: var(--white-color); font-size: 14px; line-height: 17px; font-weight: 600; text-transform: uppercase; border-radius: 0; border: 2px solid rgba(var(--white-color-rgb, 0.3)); }
.theme-btn:hover { background: var(--white-color); color: var(--theme-color); }
.theme-btn.primary-btn { background: var(--theme-color); color: var(--white-color); border: transparent; }
.theme-btn.primary-btn:hover { background: var(--secondary-color); color: var(--white-color); }

.common-img { aspect-ratio: 558/ 418;}
.common-desc p:last-child { margin-bottom: 0; }
.common-desc ol { list-style: decimal; padding-left: 20px; }
.common-desc ul { list-style: disc; padding-left: 20px; }
.common-desc li { margin-bottom: 16px; }

/******* Header Start ******/
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; transition: all 0.3s ease; }
.site-header .navbar { padding: 16px 0; background: transparent; }
.site-header .navbar-brand { width: 208px; flex-shrink: 0;}
.site-header .custom-logo-link { display: block; width: 100%;}
.site-header .navbar .navbar-nav .nav-link { font-size: 14px; font-weight: 500; color: var(--white-color); opacity: 0.5; transition: all 0.24s ease-in-out; }
.site-header .navbar .navbar-nav .nav-link:hover,
.site-header .navbar .navbar-nav .current-menu-item .nav-link { opacity: 1; }
.site-header.sticky { background: rgba(var(--theme-color-rgb), 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(12px);}
.site-header.light-header .navbar .navbar-nav .nav-link { color: var(--secondary-color); }
.site-header.sticky.light-header .navbar .navbar-nav .nav-link { color: var(--white-color); } 
/******* Header End ******/

/******* Home Page CSS Start ******/
.banner-section { padding: 48px 0; height: 100dvh; position: relative; overflow: hidden; }
.banner-section .banner-image { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.banner-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); z-index: 2; }
.banner-section::after { content: ""; position: absolute; height: 80px; top: 0; left: 0; width: 100%; background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); z-index: 3; }

.banner-section .banner-content { position: relative; z-index: 4; }

.about-section { background: var(--theme-color); }
.about-section .about-logo { width: 98px; height: 96px; object-fit: contain; }

.who-we-are-section { padding: 48px 0; height: 100dvh; position: relative; overflow: hidden; }
.who-we-are-section .banner-image { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.who-we-are-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; }
.who-we-are-section .banner-content { position: relative; z-index: 3; }

.service-section .list-block { row-gap: 80px; }
.common-slider .slick-list { overflow: visible; }
.common-slider .item { width: 392px; padding: 0 15px; }

.recent-news-section { background: var(--theme-color); color: var(--white-color); }
.recent-news-section .featured-news .content { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%); }
.recent-news-section .featured-news img { aspect-ratio: 558/636; }
.news-items .news-item { gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid rgba(var(--white-color-rgb), 0.2); }
.news-items .news-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.news-items .news-item img { width: 166px; aspect-ratio: 166/124; object-fit: cover; }

.quote-section { display: flex; flex-direction: column; gap: 80px; overflow: hidden; white-space: nowrap; }
.quote-section h3 { margin: 0; white-space: nowrap; font-weight: 400; }
.quote-section .quote-list { display: flex; }
.quote-section .quotes { display: flex; gap: 80px; animation: scroll-left 46s linear infinite; }
.quote-section .quote-list:nth-child(2) .quotes { animation: scroll-right 46s linear infinite; }
.quote-section h3 { opacity: 30%; transition: all 0.3s ease-in-out;}
.quote-section h3:hover { opacity: 100%;}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(calc(-100% + 100vw));
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes scroll-right {
    0% {
        transform: translateX(calc(-100% + 100vw));
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% + 100vw));
    }
}

.cta-section { color: var(--white-color); }
.cta-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--secondary-color-rgb), 0.5); z-index: 1; }
.cta-section .container { position: relative; z-index: 2; }

/******* Home Page CSS End ******/

/******* DPS Family Page CSS Start ******/
.family-list { flex-wrap: nowrap; overflow: auto;}
.family-list img 	{ aspect-ratio: 264/352; }
.family-list h6 { font-weight: 600; color: var(--theme-color); }
.chairman-section .singuture { width: 164px; aspect-ratio: 164/100; filter: invert(1) brightness(1); }

/******* Campus Page CSS Start ******/
.campus-section-list .service-about-section:nth-child(odd) .row { align-items: end; }
.campus-section-list .service-about-section:nth-child(odd) h2 { color: var(--theme-color); }
.campus-section-list .service-about-section:nth-child(even) { background: var(--theme-color); color: var(--white-color); }
.campus-section-list .service-about-section:nth-child(even) .row { flex-direction: row-reverse; }

/******* Contact Us Page CSS Start ******/
.contact-info .contact-item h4 { font-weight: 600; text-transform: uppercase; }
.contact-info .contact-item a { text-decoration: underline; }
.contact-info .contact-item a:hover { color: var(--theme-color); }
.wpcf7-form-control-wrap { margin-bottom: 24px; display: block; }
.wpcf7-form-control-wrap .wpcf7-form-control { padding: 8px 0; font-size: 16px; color: var(--white-color); display: block; width: 100%; background: transparent; border: none; box-shadow: none !important; border-bottom: 2px solid rgba(var(--secondary-color-rgb), 0.5); outline: none !important; border-radius: 0;}
.wpcf7-form-control-wrap .wpcf7-form-control:focus { border-color: var(--white-color); }
.wpcf7-not-valid-tip { margin-top: 4px; }
::-webkit-input-placeholder { color: rgba(var(--white-color-rgb), 0.9); }
::-moz-placeholder { color: rgba(var(--white-color-rgb), 0.9); }
:-ms-input-placeholder { color: rgba(var(--white-color-rgb), 0.9); }
:-moz-placeholder { color: rgba(var(--white-color-rgb), 0.9); }
.contact-map { width: 100%; aspect-ratio: 558/362; }

/******* Academics Page CSS Start ******/
.learning-system-section .item img { width: 362px; max-width: 100%; }
.learning-system-section .item-list { row-gap: 30px; }
.curriculum-section .image-wrapper { position: relative; aspect-ratio: 558/418; }
.faq-image              { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease-in-out; }
.faq-image.active       { opacity: 1; }
.accordion-item         { padding: 24px 0; border: none !important; border-bottom: 2px solid rgba(var(--theme-color-rgb), 0.1) !important; background: transparent; border-radius: 0 !important;}
.accordion-item.active { border-bottom-color: var(--theme-color) !important; }
.accordion-button       { padding: 0; color: var(--secondary-color) !important; font-size: 14px; font-weight: 600; font-family: "Inter Tight", sans-serif; text-transform: uppercase; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; }
.accordion-button:not(.collapsed) { background-color: #f8f9fa; }
.accordion-button:focus { box-shadow: none; border-color: rgba(0, 0, 0, .125); }
.accordion-button::after{ display: none;}
.accordion-body         { padding: 8px 0 0; }
.accordion-body .common-desc :last-child { margin-bottom: 0; }
.accordion-body .common-desc strong { font-weight: 500; }
.curriculum-section .accordion-item    { color: var(--white-color); border-color: rgba(var(--white-color-rgb), 0.1) !important; }
.curriculum-section .accordion-item.active    { border-color: var(--white-color) !important; }
.curriculum-section .accordion-button { color: var(--white-color) !important; }
.teachers-section .img-block { aspect-ratio: 1146/644; }
.dics-list { list-style: disc; padding-left: 20px; }
.dics-list li { margin-bottom: 16px; }

/******* Co Curricular Page CSS Start ******/
.sports-section {  display: flex; flex-direction: column; gap: 48px; overflow: hidden; white-space: nowrap; }
.sports-section .sports-list { display: flex; }
.sports-section .sports { display: flex; gap: 30px; animation: scroll-left 25s linear infinite; }
.sports-section .sports-list:nth-child(2) .sports { animation: scroll-right 25s linear infinite; }
.sports-section .item { width: 264px; flex-shrink: 0;}

.news-section .item h3,
.news-section .item p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.post-content-section ol { list-style: decimal; padding-left: 20px; }
.post-content-section ul { list-style: disc; padding-left: 20px; }
.post-content-section li { margin-bottom: 8px; }
.post-content-section h2,
.post-content-section h3,
.post-content-section h4,
.post-content-section h5,
.post-content-section h6 { margin-top: 24px; }
.post-content-section h2:first-child { margin-top: 0px; }
.post-content-section h2:first-child { margin-bottom: 24px; }

/******* Footer CSS Start ******/
.site-footer .footer-logo-block .widget_media_image img { width: 362px; max-width: 100%; }
.site-footer .footer-logo-block p { margin: 16px 0 0;}
.site-footer .copyright-section { margin-top: 32px; padding-top: 32px; border-top: 2px solid rgba(var(--white-color-rgb), 0.1);}
.site-footer .copyright-section p { margin: 0; display: flex; gap: 24px; }
.site-footer .widget_nav_menu .menu { display: grid;  gap: 24px; grid-template-columns: 1fr 1fr; text-align: right; }
/******* Footer CSS End ******/


/***** Responsive CSS Start ******/
@media (min-width: 1200px) {
    .mb-xl-4-5 {
        margin-bottom: 40px !important;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1146px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .h1,
    h1 { font-size: 52px; line-height: 1.1; }
    .h2,
    h2 { font-size: 38px;  }
    .h3-big { font-size: 28px; }
    .h3,
    h3 { font-size: 19px; }

/******* Common Element CSS End ******/
    .common-section { padding: 70px 0; }
    .common-top-section { padding-top: 140px; }
    .title-block { margin-bottom: 80px; }
    .common-slider .item { width: 360px; }

/******* Home Page CSS Start ******/
    .service-section .list-block { row-gap: 60px; }
    .news-items .news-item img { width: 120px; }
    .quote-section .quotes,
    .quote-section { gap: 60px; }

/******* DPS Family Page CSS Start ******/
    .chairman-section .singuture { width: 140px;}

}

@media (max-width: 991px) {
    .navbar-collapse { padding: 16px 0; background: rgba(var(--theme-color-rgb), 0.9); backdrop-filter: blur(4px); }
    .site-header .navbar .navbar-nav .nav-link { padding: 6px 20px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    body { font-size: 15px; }
    .h1,
    h1 { font-size: 44px; line-height: 1.1; }
    .h2,
    h2 { font-size: 32px;  }
    .h3-big { font-size: 26px; }
    .h3,
    h3 { font-size: 18px; }
    .h4,
    h4 { font-size: 17px; }
    .h5,
    h5 { font-size: 15px; }
    .h6,
    h6 { font-size: 14px; }
    .big-text { font-size: 17px; }

/******* Common Element CSS End ******/
    .common-section { padding: 60px 0; }
    .common-top-section { padding-top: 120px; }
    .title-block { margin-bottom: 60px; }
    .common-slider .item { width: 340px; padding: 0px 12px; }

/******* Home Page CSS Start ******/
    .service-section .list-block { row-gap: 50px; }
    .news-items .news-item img { width: 120px; }
    .quote-section .quotes,
    .quote-section { gap: 50px; }
    .recent-news-section .featured-news img { aspect-ratio: 4/3;}

/******* DPS Family Page CSS Start ******/
    .chairman-section .singuture { width: 120px;}

/******* Academics Page CSS Start ******/
    .accordion-item { padding: 20px 0;}

/******* Co-curricular Page CSS Start ******/
    .sports-section .item { width: 240px;}

}

@media (max-width: 767px) {
    body { font-size: 14px; }
    .h1,
    h1 { font-size: 32px; line-height: 1.2; }
    .h2,
    h2 { font-size: 28px;  }
    .h3-big { font-size: 24px; }
    .h3,
    h3 { font-size: 17px; }
    .h4,
    h4 { font-size: 16px; }
    .h5,
    h5 { font-size: 14px; }
    .h6,
    h6 { font-size: 13px; }
    .big-text { font-size: 16px; }


/******* Common Element CSS End ******/
    .common-section { padding: 40px 0; }
    .common-top-section { padding-top: 100px; }
    .title-block { margin-bottom: 50px; }
    .common-slider .item { width: 300px; padding: 0px 10px; }

/******* Home Page CSS Start ******/
    .service-section .list-block { row-gap: 30px; }
    .news-items .news-item img { width: 100px; }
    .quote-section .quotes,
    .quote-section { gap: 20px; }
    .recent-news-section .featured-news img { aspect-ratio: 4/3;}

/******* DPS Family Page CSS Start ******/
    .chairman-section .singuture { width: 100px;}

/******* Academics Page CSS Start ******/
    .accordion-item { padding: 18px 0;}

/******* Co-curricular Page CSS Start ******/
    .sports-section .item { width: 220px;}

/******* News Page CSS Start ******/
    .post-content-section h2,
    .post-content-section h3,
    .post-content-section h4,
    .post-content-section h5,
    .post-content-section h6 { margin-top: 20px; }
    .post-content-section h2:first-child { margin-bottom: 20px; }

/******* Footer CSS Start ******/
    .site-footer .footer-logo-block .widget_media_image img { width: 280px; margin-bottom: 8px; }
    .site-footer .footer-logo-block p { margin: 10px 0 0; }
    .site-footer .widget_nav_menu .menu { gap: 12px; text-align: left;}
    .site-footer .copyright-section { margin-top: 16px; padding-top: 16px;}
    .site-footer .copyright-section p { gap: 6px; flex-direction: column-reverse; align-items: center; text-align: center;}

}