/* Phones, tablets and small laptops: fixes layered over the original Ravet theme (loaded last).
   Full desktop (1200px and wider) is not touched by anything in this file. */

/* small laptops (992–1199px): the CBSE badge sat on top of the school name */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header-section .title-holder img {
		max-width: 440px;
	}
	img.header-logo3 {
		width: 90px !important;
		left: 150px !important;
	}
}

@media (max-width: 991.98px) {
	/* ---- side tabs (Prisms One / Important Links / Admissions) become a bottom bar ---- */
	.side-tabs {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		display: flex;
		box-shadow: 0 -3px 12px rgba(0, 0, 0, .18);
	}
	.side-tabs > div {
		position: static !important;
		flex: 1 1 0;
		width: auto !important;
		height: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
	}
	.side-tabs > div + div a {
		border-left: 1px solid rgba(255, 255, 255, .45);
	}
	.side-tabs a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 50px !important;
		padding: 4px 6px !important;
		border-radius: 0 !important;
		font-size: 13px !important;
		line-height: 1.15;
		text-align: center;
	}
	body {
		padding-bottom: 50px;
	}

	/* ---- main menu: a full-screen panel under the menu button, submenus open in place ---- */
	#main_navbar .web-cust-menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 50px;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 76px 18px 24px !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: linear-gradient(200deg, #c83106, #f5876b) !important;
		z-index: 998;
		text-align: left;
	}
	#main_navbar .web-cust-menu.collapsing {
		height: auto !important;
		transition: none;
	}
	#main_navbar .web-cust-menu::before {
		display: none !important;
	}
	#main_navbar .navbar-toggler {
		z-index: 999;
	}
	#main_navbar .web-cust-menu .navbar-nav {
		width: 100%;
		text-align: left !important;
	}
	#main_navbar .web-cust-menu .nav-item a {
		display: block;
		padding: 10px 6px !important;
		font-size: 16px !important;
		white-space: normal !important;
		border-bottom: 1px solid rgba(255, 255, 255, .3) !important;
	}
	#main_navbar .web-cust-menu .dropdown-menu,
	#main_navbar .web-cust-menu .nav-item ul li ul {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		float: none;
		width: auto !important;
		min-width: 0;
		margin: 0 0 4px 14px !important;
		padding: 0 !important;
		border: 0;
		border-left: 2px solid rgba(255, 255, 255, .5);
		border-radius: 0;
		background: transparent !important;
		box-shadow: none !important;
	}
	/* the header's blur would otherwise trap the panel inside the header strip */
	body:has(#navbarSupportedContent2.show) .header-section,
	body:has(#navbarSupportedContent2.collapsing) .header-section {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	/* submenu arrow: points down at the right-hand end of the row */
	#main_navbar .web-cust-menu .dropdown-toggle {
		position: relative;
		padding-right: 34px !important;
	}
	#main_navbar .web-cust-menu .dropdown-toggle::before {
		left: auto !important;
		right: 8px;
		top: 50%;
		margin-top: -10px;
		transform: rotate(-90deg);
	}
	body:has(#navbarSupportedContent2.show) .home-box,
	body:has(#navbarSupportedContent2.show) .botIcon,
	body:has(#navbarSupportedContent2.show) .back-to-top,
	body:has(#navbarSupportedContent2.show) .a11y-bar,
	body:has(#navbarSupportedContent2.show) .float-whatsapp {
		display: none !important;
	}
	#main_navbar .web-cust-menu .dropdown-menu a {
		color: #fff !important;
		background: transparent !important;
		font-size: 15px !important;
		padding-left: 12px !important;
	}

	/* ---- floating helpers sit above the bar and away from the text ---- */
	#ssi-absolute {
		display: none !important; /* shown in the footer instead */
	}
	.back-to-top {
		right: 12px !important;
		bottom: 62px !important;
		width: 42px !important;
		height: 42px !important;
		z-index: 1030 !important;
	}
	.botIcon {
		right: auto !important;
		left: 6px;
		bottom: 58px !important;
	}
	.botIcon .iconInner {
		right: 0 !important;
		width: 56px !important;
		height: auto !important;
		font-size: 1em;
	}
	.botIcon .iconInner img {
		width: 56px;
	}
	.a11y-bar {
		top: auto !important;
		bottom: 128px;
	}
	#a11yBar.a11y-bar button {
		width: 38px;
		height: 36px;
		font-size: 16px;
	}
	.float-whatsapp {
		left: auto !important;
		right: 12px;
		bottom: 114px !important;
		width: 46px !important;
		height: 46px !important;
		font-size: 24px !important;
	}

	/* ---- inner pages: no extra side margin, comfortable gutters ---- */
	.container.about-page {
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.about-info img,
	.page-insight img,
	.about-page img {
		max-width: 100%;
		height: auto;
	}
	.about-info iframe,
	.about-page iframe,
	.about-page video {
		max-width: 100%;
	}

	/* ---- tables typed into pages fill the width; wider ones scroll inside .table-scroll ---- */
	.about-page table {
		width: 100% !important;
		height: auto !important;
		font-size: 14px;
	}
	.about-page .table-scroll > table {
		margin-bottom: 0;
	}

	.account-form .front {
		overflow: hidden;
	}
	.account-form .front img {
		max-width: 100%;
	}

	/* ---- footer social icons (replace the floating ones) ---- */
	.footer-social {
		display: flex !important;
		flex-wrap: wrap;
		gap: 10px;
		list-style: none;
		padding: 0;
		margin: 14px 0 0;
	}
}

/* tablets (768–991px): the theme lifted the menu button off the top of the screen,
   and About / Vision / Mission were squeezed into narrow side-by-side columns */
@media (min-width: 768px) and (max-width: 991.98px) {
	#main_navbar .navbar-toggler {
		top: 4px !important;
		right: -9px !important;
	}
	.welcome-section .about-school,
	.welcome-section .about-school + div {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.welcome-section .about-school {
		padding-left: 24px !important;
		padding-right: 24px !important;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 767.98px) {
	/* ---- compact sticky header ---- */
	.header-section .header-row {
		padding-top: 6px !important;
		padding-bottom: 4px !important;
	}
	.header-section .header-logo {
		max-height: 44px;
		width: auto;
	}
	img.header-logo3 {
		width: 56px !important;
	}
	.header-section .title-holder img {
		width: 62% !important;
	}
	.header-section .head-line {
		font-size: 13px !important;
		margin-bottom: 2px !important;
	}

	/* ---- inner pages: use the width the stacked theme paddings were wasting ---- */
	.container.about-page .about-info,
	.container.about-page .page-insight {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.container.about-page .page-insight,
	.container.about-page .about-info .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* ---- homepage text blocks keep a gutter ---- */
	.about-school,
	.vision-mis {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.welcome-heading {
		font-size: 1.6rem;
		padding-left: 8px;
		padding-right: 8px;
	}

	.about-page td,
	.about-page th {
		padding: 6px 8px !important;
		height: auto !important;
		min-width: 6.4em;
		overflow-wrap: normal;
		word-break: normal;
	}
	.about-page p,
	.about-page li,
	.about-page a {
		overflow-wrap: anywhere;
	}
}

/* phones and tablets: events / news / achievements tickers use the full column width */
@media (max-width: 991.98px) {
	.news-band-3 .holder,
	.news-band-3 .myTicker li {
		width: 100% !important;
	}
	.news-band-3 .quick-inner {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	.news-band-3 .holder {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.news-band-3 .myTicker ul {
		left: 0;
		right: 0;
		width: auto !important;
		padding: 0 6px !important;
	}
	.news-band-3 .myTicker li > .row {
		margin-left: 0;
		margin-right: 0;
	}
	.news-band-3 .news-line {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* every screen size: a table wider than the page scrolls inside its own box */
.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* every screen size: picture rows typed into pages wrap instead of running off the side */
.about-page .image-gallery {
	flex-wrap: wrap;
}
.about-page .image-gallery img {
	max-width: 100%;
}

/* the footer social row exists only for phones and tablets */
.footer-social {
	display: none;
}
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff !important;
	font-size: 20px;
}
.footer-social a svg {
	width: 20px;
	height: 20px;
}