@media only screen and (max-width: 1700px){
	/* .main-header .header-lower .outer-box .ui-btn-outer{
		border-right: 0;
		margin-right: 0;
		padding-right: 0;
	} */

	/* .header-style-five .info-btn,
	.header-style-two .info-btn,
	.header-style-one .info-btn{
		display: none;
	} */

	/* .header-style-one .header-lower .logo-box{
		margin-right: 30px;
	}
	
	.main-menu .navigation>li {
		margin-right: 50px;
	} */

	/* .project-section .carousel-outer{
		margin-left: -100px;
		margin-right: -100px;
	}

	.features-section-three .carousel-outer{
		max-width: 1200px;
		padding: 0;
		margin: 0 auto;
	}

	.header-style-four .header-lower,
	.header-style-two .header-lower,
	.header-style-two .header-top{
		padding: 0 30px;
	}

	.header-style-five .header-lower{
		padding-right: 30px;
	} */
}

@media only screen and (max-width: 1439px){
	/* .main-header .header-lower .logo-box {
		min-width: 260px;
		margin-right: 20px;
	} */

	/* .header-top {
		margin-left: 220px;
		padding-right: 30px;
	} */

/* 
	.main-menu .navigation>li {
		margin-right: 30px;
	} */

	
}


/* @media only screen and (max-width: 1199px){
	.main-header .main-box{
		align-items: center;
	}

	.main-header .header-lower .logo-box{
		margin-top: 0;
		min-height: auto;
	}

	

	
} */


@media only screen and (min-width: 768px){
	.main-menu .navigation > li > ul,
	.main-menu .navigation > li > ul > li > ul{
		display:block !important;
		visibility:hidden;
		opacity:0;
	}
}


/* =========================================================
   Rhyvi Media - site-specific overrides
   Template ka default hero "CREATIVE / DIGITAL AGENCY" ke liye
   bana tha (chhote words). Hamari headline lambi hai
   ("Amplifying / Your Brand. Digitally") isliye size aur
   pill ki width adjust ki hai.
   ========================================================= */
/* Template me hero title ke font-size fixed the (150px / 120px / 100px...)
   jo chhote words ("CREATIVE") ke liye theek the. Hamari headline lambi hai
   ("AMPLIFYING"), isliye chhoti screen par word beech se toot raha tha.
   Ab size viewport ke saath fluid hai - kabhi nahi tootega. */
.hero-1 .hero-content .hero-title{
	font-size: clamp(2.4rem, 9vw, 118px) !important;
	line-height: 1.04 !important;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.hero-1 .hero-content .hero-title-2{
	font-size: clamp(2rem, 7.4vw, 100px) !important;
	line-height: 1.1 !important;
}

/* Pill ki width fixed 293px thi (sirf chhote word "DIGITAL" ke liye).
   Ab text ke hisaab se apne aap badhti hai. */
@media only screen and (min-width: 992px){
	.hero-1 .hero-content .hero-title-2 .text-1{
		width: auto;
		padding: 0 clamp(24px, 3vw, 52px);
		font-size: clamp(1.6rem, 3.9vw, 52px);
		height: clamp(56px, 7.8vw, 104px);
		line-height: clamp(56px, 7.8vw, 104px);
	}
}
@media only screen and (max-width: 991.98px){
	.hero-1 .hero-content .hero-title-2 .text-1{
		font-size: inherit;
	}
}

/* "Why Choose Rhyvi Media" list - ab har point me poora vaakya hai,
   isliye text wrap hona chahiye (pehle chhote tags the) */
.feature-list-items .list-item{
	flex-wrap: wrap;
}
.feature-list-items .list-item .text{
	white-space: normal;
	line-height: 1.6;
}


/* ---------------------------------------------------------
   "Our Approach" section
   Yahan pehle left me design-tool logos (Figma/Photoshop) the.
   Wo hata diye, ab content column poori width leta hai - isliye
   do adjustments chahiye.
   --------------------------------------------------------- */
@media only screen and (min-width: 992px){
	/* Left column (design-tool logos) hata di thi, isliye content column
	   poori width le raha tha aur progress bars bahut lambi lagti thi.
	   Ise centre me rakha hai - section ka original indent bana rehta hai. */
	.skill-section1 .col-lg-12 .skill-content-1{
		max-width: 940px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
	}
}

/* Progress bars ke labels absolute-positioned hain, isliye container
   ki height unhe count nahi karti aur neeche wala button overlap ho
   jata tha. Utni jagah chhod do. */
.skill-content-1 .skill-feature-items{
	padding-bottom: 95px;
}


/* Font Awesome Pro (501 KB CSS + 300 KB fonts) hata di - ab free version
   use hoti hai. Pro ka "arrow-up-right" free me nahi hai, isliye normal
   arrow ko 45 degree ghuma kar wahi look banaya hai. */
i.icon-up-right{
	transform: rotate(-45deg);
	display: inline-block;
}


/* =========================================================
   PERFORMANCE
   ========================================================= */

/* Jo section abhi screen par nahi hai, browser uska layout/style
   calculate na kare. Scroll karte hi normal ho jata hai - dikhne me
   koi farak nahi, bas pehli baar page bahut tez load hota hai. */
/* NOTE: skill-section1 ko jaan bujh kar chhoda hai - uspar
   content-visibility lagane se progress bars ke rang theek se render
   nahi hote the aur contrast check fail ho raha tha. */
.testimonial-wrapper,
.news-wrapper,
.footer-section,
.footer-section-2,
.footer-section-3{
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;
}

/* Lagataar chalne wali animations ko apni GPU layer do - warna har
   frame par browser dobara style calculate karta hai. */
.marquee-group,
.tm-gsap-animate-circle,
.float-bob-x,
.float-bob-y{
	will-change: transform;
}

/* Jinke device par animations band hain unke liye sab band */
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* width/height attributes ke saath image ka aspect ratio bane rahe
   aur wo container se bahar na nikle */
img{
	max-width: 100%;
}


/* -------------------------------------------------------------
   Heading tags sirf accessibility ke liye badle the (h1 -> h2 -> h3
   ka sahi order banane ke liye). In do jagah component CSS me apna
   font-size nahi tha, isliye text bada ho gaya tha - original size
   wapas set kar diya. Dikhne me bilkul pehle jaisa.
   ------------------------------------------------------------- */
.news-block .content .title{
	font-size: var(--h4-font-size);
}
h3.name,
.name-info .name{
	font-size: var(--h5-font-size);
	font-weight: var(--h5-font-weight);
	line-height: var(--line-height-heading-small);
}


/* Slider ke dots dikhne me 10px hi rehte hain, par ungli se tap karne
   ke liye 24x24 ka area mil jata hai (accessibility requirement). */
.swiper-pagination-bullet,
.swiper-dot .dot span{
	position: relative;
	margin-left: 8px !important;
	margin-right: 8px !important;
}
.swiper-pagination-bullet::after,
.swiper-dot .dot span::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}


/* @media only screen and (max-width: 1199px){
	.main-header .main-menu {
		display: none;
	}

	.main-header .logo {
		min-width: auto;
	}

	.main-header .logo img,
	.sticky-header .logo img {
		width: auto;
		max-width: none;
		max-height: 45px;
	}

	.mobile-nav-toggler {
		display: block;
	}

	.main-header .main-box{
		justify-content: space-between;
	}


} */



/* 
@media only screen and (max-width: 767px){

	.main-slider .title{
		padding: 7px 20px;
	}

	.main-slider .title:before{
		display: none;
	}
	
	
}



@media only screen and (max-width: 599px){
	.main-header .header-lower .logo-box {
		padding-left: 0;
	}

	
	.main-header .header-lower .logo-box {
		min-width: auto;
		margin-right: 0px;
		max-width: 140px;
	}

	
	.main-header .header-lower .logo-box .logo img {
		max-width: 140px;
	}
} */


/* =========================================================
   SERVICE PAGES
   Har service page ka layout bilkul same hai (sirf content
   alag). Ye styles site ke dark + green theme se match
   karti hain aur template ke variables use karti hain.
   ========================================================= */

/* ---- Intro ka image ---- */
.svc-intro-image{
	border-radius: 18px;
	overflow: hidden;
	line-height: 0;
}
.svc-intro-image img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 18px;
}

/* ---- "Why it matters" ki tick-list ---- */
.svc-check-list{
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}
.svc-check-list li{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.10);
	color: var(--text-color);
	line-height: 1.6;
}
.svc-check-list li:last-child{ border-bottom: 0; }
.svc-check-list li i{
	color: var(--theme-color1);
	font-size: 18px;
	line-height: 1.5;
	flex: 0 0 auto;
}

/* ---- "What we do" ke cards ---- */
.svc-card{
	height: 100%;
	padding: 34px 30px;
	border-radius: 16px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.09);
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.svc-card:hover{
	border-color: var(--theme-color1);
	background: rgba(0,200,192,.05);
	transform: translateY(-6px);
}
.svc-card-icon{
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,200,192,.12);
	color: var(--theme-color1);
	font-size: 22px;
	margin-bottom: 22px;
}
.svc-card-title{
	font-size: 21px;
	line-height: 1.35;
	margin-bottom: 12px;
	color: var(--theme-color-white);
}
.svc-card-text{
	color: var(--text-color);
	line-height: 1.7;
	margin: 0;
}

/* ---- Platforms / content-types ke chips ---- */
.svc-extra-box{
	padding: 54px 40px;
	border-radius: 18px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.09);
}
.svc-chips{
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.svc-chips li{
	padding: 11px 24px;
	border-radius: 40px;
	background: rgba(0,200,192,.10);
	border: 1px solid rgba(0,200,192,.35);
	color: var(--theme-color-white);
	font-weight: 500;
	/* nowrap tha - "Custom Development (React & Beyond)" jaisa lamba chip
	   chhote phone par kat jata tha. Ab chip screen se badi nahi ho sakti
	   aur zaroorat pade to text wrap ho jata hai. Bade screens par dikhne
	   me koi farak nahi - wahan chips waise bhi ek line me aa jate hain. */
	max-width: 100%;
	overflow-wrap: break-word;
}

/* ---- Process ke steps ---- */
.svc-step{
	height: 100%;
	position: relative;
	padding: 34px 30px;
	border-radius: 16px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.09);
}
.svc-step-num{
	display: inline-block;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--theme-color1);
	margin-bottom: 16px;
}
.svc-step-title{
	font-size: 21px;
	margin-bottom: 10px;
	color: var(--theme-color-white);
}
.svc-step-text{
	color: var(--text-color);
	line-height: 1.7;
	margin: 0;
}

/* ---- Aakhir ka CTA ---- */
.svc-cta-box{
	padding: 70px 40px;
	border-radius: 20px;
	background: rgba(0,200,192,.06);
	border: 1px solid rgba(0,200,192,.30);
}
.svc-cta-box .title{ margin-bottom: 16px; }
.svc-cta-box .about-text{ max-width: 720px; margin: 0 auto; }
.svc-cta-box .theme-btn-main{ margin-top: 26px; }

@media only screen and (max-width: 767px){
	.svc-extra-box{ padding: 36px 22px; }
	.svc-cta-box{ padding: 46px 22px; }
	.svc-card, .svc-step{ padding: 28px 22px; }
	.svc-chips{ justify-content: flex-start; gap: 9px; }
	.svc-chips li{ padding: 9px 16px; font-size: 14px; }
}


/* ==========================================================
   FAQ SECTION
   ==========================================================
   Sawaal-jawab ka accordion. Markup includes/faq-section.php
   me hai, content includes/faqs.php me.

   Koi JavaScript nahi - <details>/<summary> HTML ke apne tags
   hain, khulna-band hona browser khud sambhalta hai. Isliye
   ek bhi extra JS file load nahi hoti.

   Design naya nahi hai: card ka background, border aur radius
   sab .svc-card jaise hi rakhe hain taaki service pages par
   ye section bilkul ghula-mila lage.
   ========================================================== */
.faq-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.faq-item{
	border-radius: 16px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.10);
	transition: border-color .3s ease, background .3s ease;
	overflow: hidden;
}
.faq-item:hover{ border-color: rgba(0,200,192,.30); }
.faq-item[open]{
	background: rgba(0,200,192,.05);
	border-color: rgba(0,200,192,.30);
}

/* summary = sawaal wali line (click karne par khulti hai) */
.faq-question{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 30px;
	cursor: pointer;
	list-style: none;          /* default triangle hata do */
	color: #fff;
	font-size: 19px;
	line-height: 1.5;
	font-weight: 500;
}
/* Safari/Chrome ka apna teer bhi hatao */
.faq-question::-webkit-details-marker{ display: none; }
.faq-question::marker{ content: ""; }
.faq-question:focus-visible{
	outline: 2px solid var(--theme-color1);
	outline-offset: -2px;
}
.faq-item[open] .faq-question{ color: var(--theme-color1); }

.faq-icon{
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0,200,192,.10);
	color: var(--theme-color1);
	font-size: 15px;
	transition: transform .3s ease, background .3s ease;
}
.faq-item[open] .faq-icon{
	transform: rotate(180deg);
	background: var(--theme-color1);
	color: #0D0D0D;
}

.faq-answer{
	padding: 0 30px 26px;
}
.faq-answer p{
	margin: 0;
	color: var(--text-color);
	line-height: 1.75;
}
/* Jawab ke upar ek patli lakeer - sawaal se alag dikhe */
.faq-answer::before{
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 20px;
	background: rgba(255,255,255,.08);
}

@media only screen and (max-width: 767px){
	.faq-question{ padding: 20px 20px; font-size: 17px; gap: 14px; }
	.faq-answer{ padding: 0 20px 22px; }
	.faq-icon{ width: 28px; height: 28px; font-size: 13px; }
}


/* ==========================================================
   HEADER - menu center me, aur dropdown items par caret
   ==========================================================
   Template me logo aur menu dono left me the (.header-left ka
   fixed gap:160px) aur buttons right me. Ab menu logo aur
   buttons ke beech centre me aata hai.

   Sirf >=1024px par - usse neeche desktop menu waise bhi
   chhup jata hai aur mobile drawer chalta hai. */
@media only screen and (min-width: 1024px){
	/* Teen column: logo | menu | buttons.
	   Dono kinare ko flex:1 1 0 diya hai - matlab dono ko bilkul barabar
	   jagah milti hai, isliye beech wala menu apne aap page ke theek
	   centre me aa jata hai. Menu normal flow me hi rehta hai, isliye
	   header ki height pehle jaisi hi rehti hai (~78px). */
	.header-1 .nav-outer{
		display: flex;
		align-items: center;
	}
	.header-1 .nav-outer > .header-left{
		flex: 1 1 0;
		min-width: 0;
		gap: 0;              /* fixed 160px gap ki ab zaroorat nahi */
	}
	.header-1 .nav-outer > .main-menu{
		flex: 0 0 auto;      /* apni natural width - beech me */
	}
	.header-style-one .main-box .outer-box{
		flex: 1 1 0;
		justify-content: flex-end;
	}
	/* "Let's Talk" ka text kabhi na kate */
	.header-1 .ui-btn-outer .header-btn{
		white-space: nowrap;
	}
	.header-1 .nav-outer > .main-menu .navigation{
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	/* Sticky header (scroll par upar chipakne wala) - wahi teen column
	   wala tarika. Menu FLOW me hi rehta hai, isliye sticky ki height
	   waisi ki waisi (70px) rehti hai.
	   Toggler ko .sticky-right wrapper me daala hai (markup me): wrapper
	   stretch hota hai, toggler apne 40x11px par rehta hai. Toggler ko
	   khud stretch karne par uske andar ke position:absolute bars bikhar
	   jate the - ek bar menu ke bagal me green line jaisa dikhta tha. */
	.sticky-header .inner-container > .logo{
		flex: 1 1 0;
		min-width: 0;
	}
	.sticky-header .inner-container > .nav-outer{
		flex: 0 0 auto;
	}
	.sticky-header .inner-container > .sticky-right{
		flex: 1 1 0;
		display: flex;
		justify-content: flex-end;
	}
	.sticky-header .main-menu .navigation{
		display: flex;
		align-items: center;
		white-space: nowrap;
	}
}

/* ---- Dropdown wale items par neeche ki taraf teer ----
   Template me ye caret sirf SUB-menu par tha (level 2), top level
   par nahi - isliye "Services" aur "Blog" dekh kar pata hi nahi
   chalta tha ki inke andar aur pages hain. */
/* Caret ko absolute rakha hai aur top:50% + translateY se link ke
   theek beech me. Pehle `vertical-align: middle` use kiya tha - wo
   link ke line-height (30px) aur caret ke line-height (12px) ke farak
   ki wajah se teer ko text se upar utha deta tha. top:50% me aisa
   koi anuman nahi hai, wo hamesha bilkul beech me rehta hai. */
.main-menu .navigation > li.dropdown > a{
	position: relative;
	padding-right: 18px;           /* teer ke liye jagah */
}
.main-menu .navigation > li.dropdown > a::after{
	font-family: "Font Awesome 6 Free";
	font-weight: 900;              /* solid - warna icon khali dikhega */
	content: "\f107";              /* angle-down */
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	line-height: 1;
	transition: transform .25s ease;
}
/* hover par teer palat jata hai - dikh jaye ki menu khul raha hai.
   translateY yahan bhi rakhna zaroori hai warna teer uchhal jayega. */
.main-menu .navigation > li.dropdown:hover > a::after{
	transform: translateY(-50%) rotate(180deg);
}


/* ==========================================================
   LEGAL PAGES (Privacy Policy + Terms & Conditions)
   Dono pages ek hi layout use karte hain: includes/legal-page.php
   ========================================================== */

.legal-lead{
	color: var(--theme-color-white);
	font-size: 19px;
	line-height: 1.75;
	margin: 0 0 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ---- Left ka "On this page" (bade screen par scroll ke saath chalta hai) ---- */
.legal-toc{
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 16px;
	padding: 32px 28px;
}
@media only screen and (min-width: 992px){
	.legal-toc{
		position: sticky;
		top: 110px;
	}
}
.legal-toc__title{
	color: var(--theme-color-white);
	font-size: 20px;
	margin: 0 0 22px;
}
.legal-toc__list{
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.legal-toc__list li + li{ margin-top: 4px; }
.legal-toc__list a{
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.5;
	transition: all .25s ease;
}
.legal-toc__list a:hover{
	background: rgba(0,200,192,.08);
	color: var(--theme-color-white);
}
.legal-toc__list .num{
	color: var(--theme-color1);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	flex-shrink: 0;
}
.legal-toc__meta{
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.10);
}
.legal-toc__meta p{
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}
.legal-toc__meta strong{ color: var(--theme-color-white); }

/* ---- Right ka content ---- */
.legal-block{
	padding-top: 8px;
	margin-bottom: 44px;
	/* header ke neeche na chhupe jab anchor par jump karo */
	scroll-margin-top: 110px;
}
.legal-block__title{
	display: flex;
	gap: 14px;
	align-items: baseline;
	color: var(--theme-color-white);
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 18px;
}
.legal-block__num{
	color: var(--theme-color1);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	flex-shrink: 0;
}
.legal-block__body p{
	color: var(--text-color);
	line-height: 1.8;
	margin: 0 0 16px;
}
.legal-block__body p:last-child{ margin-bottom: 0; }
.legal-block__body strong{ color: var(--theme-color-white); }
.legal-block__body a{ color: var(--theme-color1); }
.legal-block__body ul{
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
}
.legal-block__body ul li{
	position: relative;
	padding-left: 26px;
	color: var(--text-color);
	line-height: 1.8;
	margin-bottom: 10px;
}
.legal-block__body ul li::before{
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--theme-color1);
}

/* ---- Neeche ka contact box ---- */
.legal-contact{
	margin-top: 56px;
	padding: 44px 40px;
	border-radius: 18px;
	background: rgba(0,200,192,.06);
	border: 1px solid rgba(0,200,192,.28);
}
.legal-contact__title{
	color: var(--theme-color-white);
	font-size: 26px;
	margin: 0 0 12px;
}
.legal-contact > p{
	color: var(--text-color);
	margin: 0 0 24px;
}
.legal-contact__list{
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}
.legal-contact__list li{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	color: var(--text-color);
	line-height: 1.7;
	margin-bottom: 12px;
}
.legal-contact__list li i{
	color: var(--theme-color1);
	font-size: 15px;
	margin-top: 6px;
	flex-shrink: 0;
}
.legal-contact__list a{ color: var(--theme-color-white); }
.legal-contact__list a:hover{ color: var(--theme-color1); }

@media only screen and (max-width: 991px){
	.legal-toc{ padding: 26px 22px; }
	.legal-lead{ font-size: 17px; margin-bottom: 32px; }
}
@media only screen and (max-width: 767px){
	.legal-block__title{ font-size: 21px; gap: 10px; }
	.legal-block{ margin-bottom: 34px; }
	.legal-contact{ padding: 30px 22px; }
	.legal-contact__title{ font-size: 21px; }
}


/* ==========================================================
   BLOG (admin panel se aane wala dynamic content)
   Ye classes news-grid.php aur news-details.php me use hoti hain.
   Baaki site ke koi bhi class ko ye touch nahi karti.
   ========================================================== */

/* ---- Category filter (blog listing ke upar) ---- */
.blog-filter{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 50px;
}
.blog-filter a{
	display: inline-block;
	padding: 9px 22px;
	border-radius: 30px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.03);
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.5;
	transition: all .3s ease;
}
.blog-filter a span{ opacity: .55; font-size: 13px; }
.blog-filter a:hover,
.blog-filter a.active{
	background: var(--theme-color1);
	border-color: var(--theme-color1);
	color: #0d0f0e;
}
.blog-filter a.active span{ opacity: .7; }

/* ---- Card ka chhota summary ---- */
.news-block .content .blog-card-text{
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 18px;
}

/* ---- Pagination ---- */
.blog-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}
.blog-pagination a,
.blog-pagination .current{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border-radius: 50px;
	border: 1px solid rgba(255,255,255,.14);
	color: var(--text-color);
	font-size: 15px;
	transition: all .3s ease;
}
.blog-pagination a:hover,
.blog-pagination .current{
	background: var(--theme-color1);
	border-color: var(--theme-color1);
	color: #0d0f0e;
}

/* ---- Koi post na ho / 404 ---- */
.blog-empty{
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
	padding: 70px 20px;
}
.blog-empty h3{
	color: var(--theme-color-white);
	font-size: 30px;
	margin-bottom: 14px;
}
.blog-empty p{
	color: var(--text-color);
	margin-bottom: 30px;
}

/* ---- Post ke andar ka content ---- */
.blog-details__lead{
	color: var(--theme-color-white);
	font-size: 19px;
	line-height: 1.75;
	margin-bottom: 26px;
}
.blog-details__subtitle{
	color: var(--theme-color-white);
	font-size: 24px;
	line-height: 1.35;
	margin: 34px 0 16px;
}
.blog-details__list{
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
}
.blog-details__list li{
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--text-color);
	line-height: 1.7;
	margin-bottom: 12px;
}
.blog-details__list li i{
	color: var(--theme-color1);
	font-size: 13px;
	margin-top: 7px;
	flex-shrink: 0;
}
.blog-details__list--num{
	list-style: decimal;
	padding-left: 20px;
}
.blog-details__list--num li{ display: list-item; }
.blog-details__quote{
	position: relative;
	margin: 30px 0;
	padding: 28px 32px;
	border-left: 3px solid var(--theme-color1);
	border-radius: 0 12px 12px 0;
	background: rgba(0,200,192,.05);
}
.blog-details__quote p{
	color: var(--theme-color-white);
	font-size: 18px;
	line-height: 1.7;
	font-style: italic;
	margin: 0;
}
.blog-details__meta li i{ margin-right: 6px; }

/* ---- Comments ---- */
.comment-one__initial{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: rgba(0,200,192,.12);
	border: 1px solid rgba(0,200,192,.35);
	color: var(--theme-color1);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
}
.comment-one__date{
	display: block;
	color: var(--text-color);
	font-size: 14px;
	opacity: .75;
	margin-bottom: 10px;
}
.comment-one__empty{
	color: var(--text-color);
	margin-bottom: 34px;
}
.comment-form__note{
	color: var(--text-color);
	font-size: 14px;
	opacity: .7;
	margin: 14px 0 0;
}

/* ---- Draft preview ki patti ----
   Sirf tab dikhti hai jab admin apna un-published post dekh raha ho. */
.draft-preview-bar{
	position: relative;
	z-index: 999;
	padding: 12px 20px;
	background: var(--theme-color1);
	color: #0d0f0e;
	font-size: 15px;
	text-align: center;
}
.draft-preview-bar a{
	color: #0d0f0e;
	text-decoration: underline;
	margin-left: 10px;
	font-weight: 600;
}

/* ---- Sidebar ke "Latest Posts" thumbnails ----
   Template me ye images fixed 370x334 ki thin, isliye sirf width:80px
   set thi aur height apne aap sahi aa jati thi. Ab images admin se aati
   hain (koi bhi size ki), isliye 80x80 box me crop kar rahe hain -
   dikhne me wahi, par kabhi khinchti nahi. */
.sidebar__post .sidebar__post-list .sidebar__post-image{
	align-self: flex-start;
}
.sidebar__post .sidebar__post-list .sidebar__post-image > img{
	width: 80px;
	height: 80px;
	object-fit: cover;
	display: block;
}

/* ---- Sidebar ka CTA box ---- */
.sidebar__cta{
	background: rgba(0,200,192,.06);
	border: 1px solid rgba(0,200,192,.28);
}
.sidebar__cta p{
	color: var(--text-color);
	line-height: 1.7;
	margin-bottom: 22px;
}

@media only screen and (max-width: 767px){
	.blog-filter{ margin-bottom: 34px; }
	.blog-filter a{ padding: 7px 16px; font-size: 14px; }
	.blog-details__subtitle{ font-size: 21px; margin-top: 26px; }
	.blog-details__lead{ font-size: 17px; }
	.blog-details__quote{ padding: 22px 20px; }
	.blog-details__quote p{ font-size: 16px; }
	.comment-one__initial{ width: 56px; height: 56px; font-size: 21px; }
}

.feature-section1 .home-why-us-title{
	color: #00C8C0;
	font-weight: 700;
	-webkit-text-stroke: 0;
	-webkit-text-fill-color: #00C8C0;
}