/* =======================================================
 *
 *  Николай Захариев – Експрес
 *  Стъкларски услуги и огледала, София
 *
 *  Тема върху базовия шаблон (css/style.css).
 *  Тук се променят цветовете и се добавят новите секции.
 *
 * ======================================================= */

:root {
	--glass: #0f7d9e;
	--glass-dark: #0a5c76;
	--glass-deep: #12303c;
	--glass-ink: #16323d;
	--glass-tint: #eef7fa;
	--glass-line: #dbe8ee;
}

/* -------------------------------------------------------
   1. Пребоядисване на базовия шаблон (беше #d321b8)
   ------------------------------------------------------- */

body {
	color: #5b6b73;
}

a,
a:hover,
a:active,
a:focus,
.heading-colored {
	color: var(--glass);
}

/* Меню върху тъмния начален екран */
.gtco-nav ul li a {
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	font-weight: 600 !important;
	letter-spacing: .04em;
}

.gtco-nav ul li a:hover,
.gtco-nav ul li.active > a {
	color: #fff !important;
}

/* Меню след скролване – бяла лента */
.gtco-nav.scrolled ul li a {
	color: #16323d !important;
}

.gtco-nav.scrolled ul li a:hover,
.gtco-nav.scrolled ul li.active > a {
	color: var(--glass) !important;
}

.gtco-nav.scrolled ul li.btn-cta a,
.gtco-nav ul li.btn-cta a {
	color: #fff !important;
}

.gtco-nav ul li.btn-cta a:hover span,
.gtco-nav.scrolled ul li.btn-cta a span {
	background: var(--glass);
}

.gtco-nav ul li.btn-cta a span {
	background: rgba(255, 255, 255, .18);
	font-weight: 600;
	letter-spacing: .02em;
}

.gtco-nav.scrolled ul li.btn-cta a:hover span {
	background: var(--glass-dark);
}

.heading .sub:after {
	background: var(--glass);
}

h1, h2, h3, h4, h5 {
	color: var(--glass-ink);
}

/* Заглавията на секциите са <h2> (само героят носи <h1>),
   затова пренасяме вида на .heading h1 върху .heading h2. */
.heading h2 {
	font-size: 36px;
	font-weight: 400;
	margin: 0 0 10px;
	line-height: 1.25;
}

@media screen and (max-width: 768px) {
	.heading h2 {
		font-size: 26px;
	}
}

/* Гигантският воден знак зад заглавията е твърде голям за
   кирилица – смаляваме го, за да не излиза от екрана. */
#gtco-about .heading .subtle-text,
#gtco-practice-areas .heading .subtle-text,
#gtco-our-team .heading .subtle-text,
#gtco-contact .heading .subtle-text {
	font-size: 110px;
	letter-spacing: -.02em;
	width: 100%;
	text-align: center;
	left: 0;
}

@media screen and (max-width: 768px) {
	#gtco-about .heading .subtle-text,
	#gtco-practice-areas .heading .subtle-text,
	#gtco-our-team .heading .subtle-text,
	#gtco-contact .heading .subtle-text {
		display: none;
	}
}

/* -------------------------------------------------------
   2. Бутони
   ------------------------------------------------------- */

.btn-glass,
.btn-glass-ghost {
	display: inline-block;
	padding: 16px 34px;
	border-radius: 40px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-decoration: none !important;
	transition: .3s;
	border: 2px solid transparent;
}

.btn-glass {
	background: var(--glass);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(15, 125, 158, .28);
}

.btn-glass:hover,
.btn-glass:focus {
	background: var(--glass-dark);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(15, 125, 158, .34);
}

.btn-glass-ghost {
	border-color: rgba(255, 255, 255, .65);
	color: #fff !important;
	background: rgba(255, 255, 255, .06);
}

.btn-glass-ghost:hover,
.btn-glass-ghost:focus {
	background: #fff;
	color: var(--glass-ink) !important;
	border-color: #fff;
}

.btn-glass i,
.btn-glass-ghost i {
	position: relative;
	top: 2px;
	margin-right: 10px;
}

/* -------------------------------------------------------
   3. Начален екран
   ------------------------------------------------------- */

#gtco-hero.glass-hero {
	height: auto;
	min-height: 640px;
	position: relative;
	overflow: hidden;
	background-color: var(--glass-deep);
	background-image: url("../images/hero-glass.svg");
	background-size: cover;
	background-position: center;
	padding: 150px 0 70px;
	display: block;
	float: none;
}

/* --- Въртящи се снимки зад заглавието --- */

.hero-slides,
.hero-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

.hero-slides {
	z-index: 0;
}

.hero-slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	will-change: opacity, transform;
	animation: heroSlides 24s infinite;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 8s; }
.hero-slide:nth-child(3) { animation-delay: 16s; }

@keyframes heroSlides {
	0%   { opacity: 0; transform: scale(1.02); }
	4%   { opacity: 1; }
	29%  { opacity: 1; }
	33%  { opacity: 0; transform: scale(1.09); }
	100% { opacity: 0; transform: scale(1.02); }
}

/* Синият слой на сайта върху снимките */
.hero-overlay {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(12, 34, 43, .55) 0%, rgba(12, 34, 43, 0) 22%),
		linear-gradient(115deg, rgba(18, 48, 60, .93) 0%, rgba(10, 92, 118, .88) 55%, rgba(15, 125, 158, .82) 100%);
}

/* Без анимация, ако потребителят е изключил движенията */
@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		animation: none;
	}

	.hero-slide:nth-child(1) {
		opacity: 1;
	}
}

@media screen and (max-width: 768px) {
	#gtco-hero.glass-hero {
		min-height: 0;
		padding: 120px 0 50px;
	}
}

.glass-hero .display-t,
.glass-hero .display-tc {
	height: auto;
	display: block;
}

.glass-hero .hero-copy {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.glass-hero .hero-eyebrow {
	display: inline-block;
	padding: 7px 20px;
	margin-bottom: 26px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 40px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cfeaf3;
	background: rgba(255, 255, 255, .07);
}

.glass-hero h1 {
	color: #fff;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.16;
	margin: 0 0 22px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

@media screen and (max-width: 768px) {
	.glass-hero h1 {
		font-size: 31px;
	}
}

.glass-hero .hero-sub {
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
	margin-bottom: 38px;
}

@media screen and (max-width: 768px) {
	.glass-hero .hero-sub {
		font-size: 16px;
	}
}

.hero-actions a {
	margin: 0 8px 14px;
}

.hero-facts {
	margin: 54px auto 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
}

.hero-facts li {
	color: rgba(255, 255, 255, .9);
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-facts li svg {
	flex: none;
	opacity: .85;
}

/* -------------------------------------------------------
   4. Секция „Услуги“
   ------------------------------------------------------- */

#gtco-services {
	padding: 7em 0;
	clear: both;
	background: var(--glass-tint);
}

#gtco-services .heading {
	position: relative;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 20px;
}

@media screen and (max-width: 992px) {
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.service-grid {
		grid-template-columns: 1fr;
	}
}

.service-card {
	background: #fff;
	border: 1px solid var(--glass-line);
	border-radius: 6px;
	padding: 34px 30px;
	transition: .3s;
	height: 100%;
}

.service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(18, 48, 60, .12);
	border-color: #bcdbe6;
}

.service-card .service-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--glass-tint);
	color: var(--glass);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}

.service-card h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px;
}

.service-card p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
}

/* -------------------------------------------------------
   5. „Защо нас“ – списък с отметки
   ------------------------------------------------------- */

.check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
}

.check-list li {
	position: relative;
	padding: 0 0 0 40px;
	margin-bottom: 18px;
	font-size: 16.5px;
	line-height: 1.65;
}

.check-list li strong {
	display: block;
	color: var(--glass-ink);
	font-weight: 700;
}

.check-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 11'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.glass-panel {
	background: linear-gradient(150deg, var(--glass-deep) 0%, var(--glass-dark) 100%);
	border-radius: 6px;
	padding: 46px 42px;
	color: rgba(255, 255, 255, .86);
	position: relative;
	overflow: hidden;
}

.glass-panel:after {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 70%;
	height: 180%;
	background: linear-gradient(100deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%);
	transform: rotate(12deg);
	pointer-events: none;
}

.glass-panel h2,
.glass-panel h3 {
	color: #fff;
}

.glass-panel p:last-child {
	margin-bottom: 0;
}

.glass-panel .check-list li,
.check-list-light li {
	color: rgba(255, 255, 255, .8);
}

.glass-panel .check-list li strong,
.check-list-light li strong {
	color: #fff;
}

.area-list {
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .72);
}

/* -------------------------------------------------------
   5б. „Услуги по домовете“ и „Често задавани въпроси“
   ------------------------------------------------------- */

#gtco-home-service {
	padding: 7em 0;
	clear: both;
}

#gtco-faq {
	padding: 7em 0;
	clear: both;
	background: var(--glass-tint);
}

#gtco-home-service .heading,
#gtco-faq .heading {
	position: relative;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 40px;
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

.faq-item {
	background: #fff;
	border: 1px solid var(--glass-line);
	border-radius: 6px;
	padding: 26px 28px;
}

.faq-item h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 10px;
}

.faq-item p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
}

/* -------------------------------------------------------
   6. „Как работим“ – стъпки
   ------------------------------------------------------- */

#gtco-process {
	padding: 7em 0;
	clear: both;
}

#gtco-process .heading {
	position: relative;
}

.step-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-top: 20px;
}

@media screen and (max-width: 992px) {
	.step-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 520px) {
	.step-grid {
		grid-template-columns: 1fr;
	}
}

.step-item {
	text-align: center;
	padding: 0 8px;
}

.step-num {
	width: 62px;
	height: 62px;
	line-height: 58px;
	margin: 0 auto 20px;
	border: 2px solid var(--glass);
	border-radius: 50%;
	color: var(--glass);
	font-size: 22px;
	font-weight: 800;
}

.step-item h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 10px;
}

.step-item p {
	margin: 0;
	font-size: 15.5px;
}

/* -------------------------------------------------------
   7. Лента с призив за обаждане
   ------------------------------------------------------- */

.call-band {
	background: linear-gradient(120deg, var(--glass-deep) 0%, var(--glass-dark) 70%, var(--glass) 130%);
	padding: 62px 0;
	clear: both;
	text-align: center;
	color: #fff;
}

.call-band h2 {
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	margin: 0 0 12px;
}

@media screen and (max-width: 768px) {
	.call-band h2 {
		font-size: 25px;
	}
}

.call-band p {
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	max-width: 620px;
	margin: 0 auto 30px;
}

.call-band .phone-big {
	display: inline-block;
	color: #fff !important;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: .01em;
	margin-bottom: 22px;
	text-decoration: none !important;
}

@media screen and (max-width: 768px) {
	.call-band .phone-big {
		font-size: 30px;
	}
}

.call-band .phone-big:hover {
	color: #cfeaf3 !important;
}

/* -------------------------------------------------------
   8. Контакти
   ------------------------------------------------------- */

.gtco-contact-info ul li:before {
	color: var(--glass);
}

.contact-block {
	background: #fff;
	border: 1px solid var(--glass-line);
	border-radius: 6px;
	padding: 34px 32px;
}

/* style.css задава #gtco-contact h3 { color:#fff } – презаписваме го. */
#gtco-contact .contact-block h3 {
	color: var(--glass-ink);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 22px;
}

.hours-table {
	width: 100%;
	margin: 0;
	font-size: 15.5px;
}

.hours-table th,
.hours-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--glass-line);
	text-align: left;
	font-weight: 400;
}

.hours-table th {
	color: var(--glass-ink);
	font-weight: 600;
}

.hours-table td {
	text-align: right;
	white-space: nowrap;
}

.hours-table tr:last-child th,
.hours-table tr:last-child td {
	border-bottom: 0;
}

.hours-table .is-closed td {
	color: #78888f;
}

.map-embed {
	border: 1px solid var(--glass-line);
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
	height: 100%;
	min-height: 380px;
}

.map-embed iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

/* -------------------------------------------------------
   9. Навигация и долен колонтитул
   ------------------------------------------------------- */

.nav-logo {
	height: 42px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
}

#gtco-logo a {
	display: inline-flex;
	align-items: center;
	font-size: 22px;
	line-height: 1.15;
}

#gtco-logo .logo-text {
	display: inline-block;
	font-weight: 800;
	letter-spacing: .01em;
}

#gtco-logo .logo-text small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .7;
}

@media screen and (max-width: 768px) {
	#gtco-logo a {
		font-size: 18px;
	}

	.nav-logo {
		height: 34px;
	}
}

/* Мобилно меню (offcanvas) */
#gtco-offcanvas {
	background: var(--glass-ink);
}

#gtco-offcanvas a {
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
}

#gtco-offcanvas a:hover,
#gtco-offcanvas li.active > a {
	color: #fff;
}

#gtco-offcanvas li.btn-cta a span {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 22px;
	border-radius: 30px;
	background: var(--glass);
	color: #fff;
	font-weight: 700;
}

#gtco-footer {
	background: var(--glass-ink);
	color: rgba(255, 255, 255, .6);
	padding: 56px 0 34px;
}

#gtco-footer a {
	color: rgba(255, 255, 255, .8);
}

#gtco-footer a:hover {
	color: #fff;
}

#gtco-footer h4 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
}

#gtco-footer .footer-links p {
	font-size: 14.5px;
	line-height: 1.7;
	margin-bottom: 14px;
}

#gtco-footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#gtco-footer .footer-links ul li {
	margin-bottom: 8px;
	font-size: 14.5px;
}

#gtco-footer .copyright {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

#gtco-footer .copyright p {
	margin: 0;
}

#gtco-footer .copyright small {
	color: rgba(255, 255, 255, .5);
}

@media screen and (max-width: 768px) {
	#gtco-footer .footer-links > div {
		margin-bottom: 30px;
	}
}

/* Менюто има 6 точки + бутон – стягаме го на таблет,
   за да остане на един ред. */
@media screen and (min-width: 769px) and (max-width: 1199px) {
	.gtco-nav ul li a {
		padding: 30px 5px;
		font-size: 11px;
		letter-spacing: 0;
	}

	.gtco-nav ul li.btn-cta a span {
		padding: 4px 12px;
	}

	#gtco-logo a {
		font-size: 17px;
	}

	#gtco-logo .logo-text small {
		font-size: 9px;
		letter-spacing: .1em;
	}

	.nav-logo {
		height: 34px;
		margin-right: 8px;
	}
}

/* -------------------------------------------------------
   10. Плаващ бутон за обаждане
   ------------------------------------------------------- */

.call-float {
	position: fixed;
	left: 20px;
	bottom: 24px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px 14px 18px;
	border-radius: 40px;
	background: var(--glass);
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none !important;
	box-shadow: 0 8px 22px rgba(15, 125, 158, .4);
	transition: .3s;
}

.call-float:hover {
	background: var(--glass-dark);
	color: #fff !important;
	transform: translateY(-2px);
}

.call-float svg {
	flex: none;
}

@media screen and (max-width: 768px) {
	.call-float {
		left: 16px;
		right: 16px;
		bottom: 16px;
		justify-content: center;
		padding: 15px 20px;
	}

	.gototop {
		bottom: 80px !important;
	}

	/* Плаващият бутон покрива долния колонтитул – правим му място. */
	#gtco-footer {
		padding-bottom: 90px;
	}
}

.gototop a {
	background: var(--glass) !important;
}

/* -------------------------------------------------------
   11. Отзивчивост – накрая, за да надделее над
       правилата за секциите по-горе (еднаква тежест).
   ------------------------------------------------------- */

@media screen and (max-width: 768px) {
	#gtco-about,
	#gtco-services,
	#gtco-home-service,
	#gtco-process,
	#gtco-faq,
	#gtco-contact {
		padding: 3.5em 0;
	}

	.call-band {
		padding: 44px 0;
	}
}