/* ==========================================================================
   Custom responsive styles for xotin-qizlar Django project
   Overrides/extends style.css for mobile and tablet.
   ========================================================================== */

/* ---------- Site logo (header + footer) ---------- */
.site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	float: left;
	max-width: 70%;
}

.site-logo:hover {
	text-decoration: none;
}

.site-logo__img {
	height: 78px;
	width: auto;
	flex-shrink: 0;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	line-height: 1.25;
	font-weight: 600;
	min-width: 0;
}

.site-logo__title {
	font-size: 22px;
	color: #303638;
	white-space: nowrap;
}

.site-logo__subtitle {
	font-size: 14px;
	color: #7a8185;
	font-weight: 400;
	white-space: nowrap;
}

/* Light variant when hero (home page dark header) is active */
.site-logo--light .site-logo__title { color: #fff; }
.site-logo--light .site-logo__subtitle { color: #bdbdbd; }

/* Footer variant */
.site-logo--footer {
	float: none;
	max-width: 100%;
	margin-bottom: 18px;
}
.site-logo--footer .site-logo__img { height: 70px; }
.site-logo--footer .site-logo__title { color: #fff; font-size: 20px; }
.site-logo--footer .site-logo__subtitle { color: #bdbdbd; }

/* ---------- Mobile hamburger menu styling (template-matched) ---------- */
@media only screen and (max-width: 767px) {
	.main-nav__btn { margin-top: 18px; }

	/* Make the open menu a clean vertical list for every page type */
	.main-nav__list {
		background-color: #fff !important;
		padding: 0 !important;
		margin-top: 20px !important;
	}

	.main-nav__list > li {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		border-bottom: 1px solid #ececec !important;
		text-align: left;
	}

	.main-nav__list > li:last-child { border-bottom: none !important; }

	.main-nav__list > li > a {
		display: block !important;
		padding: 16px 45px 16px 5px !important;
		color: #303638 !important;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.3;
		position: relative;
	}

	.main-nav__list > li.active > a,
	.main-nav__list > li:hover > a,
	.main-nav__list > li.sfHover > a { color: #a0ce4e !important; }

	/* Chevron arrow on the right for items with submenu */
	.main-nav__list > li > .sf-with-ul {
		padding: 16px 45px 16px 5px !important;
	}
	.main-nav__list > li > .sf-with-ul::before {
		font-family: 'FontAwesome';
		content: '\f107';
		font-size: 16px;
		position: absolute !important;
		top: 50% !important;
		right: 15px !important;
		left: auto !important;
		margin-top: -10px;
		color: #8a9196;
		transition: transform 0.3s ease;
	}
	.main-nav__list > li.sfHover > .sf-with-ul::before,
	.main-nav__list > li:hover > .sf-with-ul::before {
		transform: rotate(180deg);
		color: #a0ce4e;
	}

	/* Submenu (second level) */
	.main-nav__list li ul {
		background-color: #fafafa !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		box-shadow: none !important;
	}
	.main-nav__list li ul li {
		border-bottom: 1px solid #ececec !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.main-nav__list li ul li:last-child { border-bottom: none !important; }
	.main-nav__list li ul li a {
		display: block !important;
		padding: 12px 20px 12px 25px !important;
		color: #555 !important;
		font-size: 14px;
	}
	.main-nav__list li ul li a:hover { color: #a0ce4e !important; }

	/* When menu is open on home-01/02 (dark hero), override transparent nav to white */
	.home-01 .main-nav,
	.home-02 .main-nav {
		background-color: transparent;
	}

	.home-01 .main-nav__list > li > a,
	.home-02 .main-nav__list > li > a { color: #303638 !important; }
	.home-01 .main-nav__list > li.active > a,
	.home-02 .main-nav__list > li.active > a { color: #a0ce4e !important; }
}

/* ---------- Logo responsive scaling ---------- */
@media only screen and (max-width: 991px) {
	.site-logo__img { height: 66px; }
	.site-logo__title { font-size: 20px; }
	.site-logo__subtitle { font-size: 13px; }
}

@media only screen and (max-width: 767px) {
	.site-logo { gap: 10px; max-width: calc(100% - 70px); }
	.site-logo__img { height: 54px; }
	.site-logo__title { font-size: 18px; }
	.site-logo__subtitle { font-size: 12px; }
}

@media only screen and (max-width: 480px) {
	.site-logo { gap: 8px; }
	.site-logo__img { height: 46px; }
	.site-logo__title { font-size: 16px; }
	.site-logo__subtitle { font-size: 11px; }
}

@media only screen and (max-width: 360px) {
	.site-logo__text { display: none; }
	.site-logo { max-width: calc(100% - 60px); }
}

/* ---------- Info box (top contact bar) ---------- */
@media only screen and (max-width: 767px) {
	.info-box-01 { padding: 8px 0; }
	.info-box-01 .contact-block-01 { text-align: center; }
	.info-box-01 .contact-block-01__phone,
	.info-box-01 .contact-block-01__telegram {
		display: inline-block;
		margin: 2px 8px;
		font-size: 13px;
	}
}

/* ---------- Header padding on tablet/mobile ---------- */
@media only screen and (max-width: 991px) {
	.main-nav { padding: 15px 0; }
}

@media only screen and (max-width: 767px) {
	.main-nav { padding: 10px 0 15px; }
}

/* ---------- Homepage welcome section (table-01) ---------- */
@media only screen and (max-width: 991px) {
	.home-01 .table-01__row {
		display: block;
	}
	.home-01 .table-01__box-01,
	.home-01 .table-01__box-02 {
		display: block;
		width: 100%;
	}
	.home-01 .table-01__box-02 {
		min-height: 300px !important;
	}
	.home-01 .table-01__content {
		padding: 50px 20px !important;
	}
	.home-01 .search-bg {
		padding-top: 80px !important;
		margin-bottom: 90px !important;
	}
}

@media only screen and (max-width: 767px) {
	.home-01 .search-bg {
		padding-top: 60px !important;
		margin-bottom: 60px !important;
	}
	.search-bg__title { font-size: 26px !important; line-height: 1.2; }
	.search-bg__text { font-size: 14px; }
}

/* ---------- Services grid (home page 6 boxes) ---------- */
@media only screen and (max-width: 767px) {
	.servises-item {
		margin-bottom: 20px;
	}
}

/* ---------- Page title wrapper ---------- */
@media only screen and (max-width: 767px) {
	.page-title-wrapp { padding: 30px 0 20px; }
	.page-title-01 { font-size: 28px !important; line-height: 1.2 !important; margin: 25px 0 15px !important; }
	.breadcrumbs { font-size: 12px; }
}

/* ---------- About page: slider + text stack ---------- */
@media only screen and (max-width: 767px) {
	.about-slider,
	.nivoSlider.about-slider {
		margin-bottom: 30px;
		height: auto !important;
	}
	.servise-box-01 h2 {
		font-size: 22px;
		line-height: 1.3;
	}
	.servise-box-01 p {
		font-size: 14px;
		line-height: 1.6;
	}
	.about-img {
		margin-top: 30px !important;
		max-width: 100%;
		height: auto;
	}
	.counter-01 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	.counter-01 .shortcode_counter {
		flex: 1 1 30%;
		text-align: center;
	}
}

/* ---------- FAQ / tabs / accordion ---------- */
@media only screen and (max-width: 767px) {
	.accordion-01__title {
		font-size: 15px;
		line-height: 22px;
		padding-left: 45px;
		padding-right: 0;
		min-height: 31px;
		margin-bottom: 25px;
	}
	.accordion-01__text p {
		font-size: 14px;
		line-height: 1.6;
	}
	.tabs__caption li {
		font-size: 13px;
		padding: 8px 12px;
	}
	.tabs__content p,
	.ul-list-01 li {
		font-size: 14px;
	}
	.title-02 {
		font-size: 24px;
		line-height: 1.2;
	}
	.subtitle-02 {
		font-size: 14px;
		line-height: 1.5;
	}
}

/* ---------- Parallax sections ---------- */
@media only screen and (max-width: 991px) {
	.parallax { background-attachment: scroll !important; }
	.parallax-content-01 { padding: 60px 15px !important; }
	.parallax-title { font-size: 30px !important; line-height: 1.2 !important; }
}

@media only screen and (max-width: 767px) {
	.parallax-content-01 { padding: 40px 10px !important; }
	.parallax-title { font-size: 24px !important; }
	.parallax-text p { font-size: 14px; line-height: 1.6; }
	.parallax-btn { padding: 10px 22px; font-size: 13px; }
}

/* ---------- News & Events (homepage) ---------- */
@media only screen and (max-width: 767px) {
	.news-block { text-align: center; }
	.news-item {
		display: inline-block;
		vertical-align: top;
		width: 100% !important;
		max-width: 340px;
		margin: 0 auto 25px !important;
		float: none !important;
	}
	.news-item__img img { width: 100%; height: auto; }
	.news-info { margin-top: 20px; }
	.news-info__post { margin-bottom: 25px; }
	.news-info__date-block p { font-size: 28px; }
}

/* ---------- Contact page ---------- */
@media only screen and (max-width: 767px) {
	.contacts_map iframe { height: 280px !important; }
	.contact-box { margin-bottom: 30px; }
	.contact-box__list li { font-size: 14px; padding: 8px 0; }
	.reply-form__box-01 input,
	.reply-form__box-02 input,
	.reply-form__textarea textarea {
		width: 100% !important;
		box-sizing: border-box;
	}
	.reply-form__box-01,
	.reply-form__box-02 {
		display: block !important;
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 15px;
	}
}

/* ---------- Footer ---------- */
@media only screen and (max-width: 991px) {
	.footer-box-01 { padding-top: 50px; padding-bottom: 20px; }
	.footer-box-01 .col-sm-3 { margin-bottom: 30px; }
	.widget-title { font-size: 18px; margin-bottom: 15px; }
}

@media only screen and (max-width: 767px) {
	/* Override flex row so columns stack vertically instead of cramming side-by-side */
	.footer-box-01 .row {
		display: block !important;
	}
	.footer-box-01 .col-sm-3,
	.footer-box-01 .col-md-3,
	.footer-box-01 .col-lg-3 {
		width: 100% !important;
		float: none !important;
		display: block;
		margin-bottom: 30px;
	}
	.footer-box-01 .col-sm-3:last-child { margin-bottom: 10px; }

	.footer-box-01 { padding-top: 40px; }
	.footer-box-02 { padding: 20px 0; text-align: center; }
	.footer-box-02 .row { display: block; }
	.footer-box-02 .col-sm-8,
	.footer-box-02 .col-sm-4 {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
		margin-bottom: 10px;
	}
	.copy-info { font-size: 13px; }
	.footer-info { text-align: center; }
	.footer-info a { display: inline-block; margin: 0 8px; font-size: 13px; }
	.footer-desc { font-size: 13px; line-height: 1.6; margin-top: 10px; }
	.widget-link,
	.widget-contact { margin-top: 5px; }
	.widget-list li,
	.widget-contact li { padding: 4px 0; }
}

/* ---------- Offer-box / cards (carousel items) ---------- */
@media only screen and (max-width: 767px) {
	.offer-box { margin-bottom: 20px; }
	.offer-box__title { font-size: 18px; line-height: 1.3; }
	.offer-box__text p { font-size: 14px; line-height: 1.6; }
}

/* ---------- Blog post detail image height override ---------- */
/* style.css forces height: 620px which is way too tall below desktop */
@media only screen and (max-width: 1199px) {
	.blog-post__img img,
	.blog-post.single .blog-post__img img { height: 460px !important; }
}

@media only screen and (max-width: 991px) {
	.blog-post__img img,
	.blog-post.single .blog-post__img img { height: 380px !important; }
}

@media only screen and (max-width: 767px) {
	.blog-post__img img,
	.blog-post.single .blog-post__img img {
		height: auto !important;
		object-fit: initial !important;
		max-height: 320px;
	}
}

@media only screen and (max-width: 480px) {
	.blog-post__img img,
	.blog-post.single .blog-post__img img { max-height: 260px; }
}

/* ---------- Blog post (faoliyat / news / events detail) ---------- */
@media only screen and (max-width: 767px) {
	.blog-post.single { padding: 0 10px; }
	.blog-post__title { font-size: 22px; line-height: 1.3; }
	.blog-post__text p { font-size: 14px; line-height: 1.7; }
	.blog-post__text blockquote { padding: 15px; font-size: 14px; }
	.blog-post__text blockquote p { font-size: 15px; line-height: 1.5; }
	.dropcap { font-size: 36px !important; line-height: 36px !important; }
	.single-post-nav__prew,
	.single-post-nav__next { padding: 8px 16px; font-size: 13px; }
	.post-tag-list { margin-bottom: 15px; }
	.blog-post__meta-list li { display: inline-block; margin: 2px 8px 2px 0; font-size: 12px; }
}

/* ---------- General typography tightening on small screens ---------- */
@media only screen and (max-width: 767px) {
	.title-01 { font-size: 24px; line-height: 1.25; }
	.title-05 { font-size: 26px; line-height: 1.2; margin-bottom: 20px; }
	.content-box-01 { padding-left: 10px; padding-right: 10px; }
	.content-box-02 { padding-left: 10px; padding-right: 10px; }
	.padding-top-93 { padding-top: 50px !important; }
	.padding-bottom-70 { padding-bottom: 40px !important; }
	.padding-bottom-63 { padding-bottom: 40px !important; }
	.padding-top-100 { padding-top: 50px !important; }
	.padding-top-96 { padding-top: 50px !important; }
	.padding-bottom-93 { padding-bottom: 50px !important; }
	.padding-top-33 { padding-top: 20px !important; }
	.padding-bottom-78 { padding-bottom: 40px !important; }
	.padding-top-175 { padding-top: 50px !important; }
}

/* ---------- Tablet-specific tuning (768–991px) ---------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container { padding-left: 20px; padding-right: 20px; }
	.servises-item { padding: 25px 15px; margin-bottom: 20px; }
	.servises-item__title { font-size: 18px; line-height: 1.3; }
	.servises-item__text p { font-size: 13px; }

	.counter-01 .shortcode_counter { width: 32%; display: inline-block; vertical-align: top; }

	.contacts_map iframe { height: 320px !important; }

	.news-item { width: 46%; margin-right: 3%; }
	.news-item:nth-child(2n) { margin-right: 0; }
}

/* ---------- Ensure images never overflow ---------- */
img { max-width: 100%; height: auto; }

/* ---------- Kengash / Talabalar cards grid fallback ---------- */
@media only screen and (max-width: 767px) {
	.team-box,
	.team-box-01,
	.teachers-box {
		margin-bottom: 25px;
	}
}