/*
 * DailyTel theme styles.
 * Replaces the Bootstrap 4 + 5 mix and custom-dt.css used by the Angular build with only the rules the
 * public site needs. Metrics (container widths, gutters, form heights) follow what the live site renders.
 */

/* ---------- 1. Tokens ---------- */
:root {
	--dt-blue: #0089d6;
	--dt-blue-hover: #059bf1;
	--dt-dark: #2a2a2a;
	--dt-ink: #171422;
	--dt-text: #212529;
	--dt-muted: #565656;
	--dt-nav: #363636;
	--dt-red: #d6101d;
	--dt-pink: #ff1a6c;
	--dt-grey: #eee;
	--dt-footer: #cde7f4;
	--dt-danger: #dc3545;
	--dt-font: "Roboto", sans-serif;
	--dt-font-head: "Ubuntu", sans-serif;
}

/* ---------- 2. Reboot ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--dt-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7rem;
	color: var(--dt-text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0 0 .5rem;
	font-family: var(--dt-font-head);
	font-weight: 700;
	line-height: 1.2;
}
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2.7rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
p { margin: 0 0 1rem; color: var(--dt-muted); }
ul, ol { margin: 0 0 1rem; padding-left: 2rem; }
ul ul, ol ol { margin-bottom: 0; }
b, strong { font-weight: bolder; }
a { color: var(--dt-blue); text-decoration: none; }
a:hover { color: #0056b3; }
img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); }
table { border-collapse: collapse; }
th { text-align: inherit; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { float: none; width: auto; padding: 0; margin: 0; font-size: inherit; line-height: inherit; }
iframe { border: 0; max-width: 100%; }
h5 span, h3 span, h2 span { color: var(--dt-blue); }
.dubHadline h6 { color: var(--dt-blue); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: .5rem 1rem;
	background: #fff;
	color: var(--dt-ink);
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--dt-blue); outline-offset: 2px; }

/* ---------- 3. Grid (Bootstrap 4 metrics, as rendered by the live site) ---------- */
.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.row > * {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}
.col { flex: 1 0 0%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
	.col-sm { flex: 1 0 0%; }
	.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}
@media (min-width: 768px) {
	.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
	.justify-content-md-center { justify-content: center !important; }
}
/* Vertical gutters (g-3 / gy-3); horizontal gutters stay at 15px like the live site. */
.g-3, .gy-3 { margin-top: -1rem; }
.g-3 > *, .gy-3 > * { margin-top: 1rem; }
.g-3 > .mt-0, .gy-3 > .mt-0 { margin-top: 0; }

/* ---------- 4. Utilities ---------- */
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.text-center { text-align: center !important; }
.text-white { color: #fff !important; }
.bg-dark { background-color: #343a40 !important; }
.border-0 { border: 0 !important; }
.rounded { border-radius: .25rem !important; }
.img-fluid { max-width: 100%; height: auto; }
.list-unstyled { padding-left: 0; list-style: none; }
.ms-auto { margin-left: auto !important; }
.ms-5 { margin-left: 3rem !important; }
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.p-5 { padding: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
@media (min-width: 576px) {
	.px-sm-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
	.mx-sm-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
}
@media (min-width: 768px) {
	.text-md-left { text-align: left !important; }
	.text-md-right { text-align: right !important; }
	.py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}
@media (min-width: 992px) {
	.mb-lg-0 { margin-bottom: 0 !important; }
}

/* ---------- 5. Buttons ---------- */
a.btnM, .btnM {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-top: 1rem;
	padding: 12px 45px;
	overflow: hidden;
	border: none;
	color: #fff;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: 0 2px 5px 0 rgb(0 40 62 / 59%);
	transition: all .2s;
	background: transparent;
}
.btnM::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 0%;
	height: 100%;
	background-color: var(--dt-blue-hover);
	transition: all .2s;
}
.btnM::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	background: var(--dt-blue);
}
.btnM:hover, .btnM:focus { color: #fff; }
.btnM:hover::before { width: 100%; }
.btnM[disabled] { opacity: .7; cursor: wait; }
span.btnM { cursor: default; }

/* ---------- 6. Header ---------- */
.topHeader { background: var(--dt-blue); color: #fff; }
.topHeader a { color: #fff; text-decoration: none; font-size: 15px; }
.topHeader .far, .topHeader .fas { color: #fff; }

.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
	background: #fff;
}
.navbar.sticky-top { position: sticky; top: 0; z-index: 1020; }
.admin-bar .navbar.sticky-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar.sticky-top { top: 0; } }
.navbar > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.navbar-brand {
	display: inline-block;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
}
.navbar-brand img { width: 226px; height: auto; max-height: 50px; object-fit: contain; }
.navbar-toggler {
	padding: .25rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	color: rgba(0, 0, 0, .55);
	background: transparent;
	border: 1px solid transparent;
	border-radius: .25rem;
}
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.collapse:not(.show) { display: none; }
.navbar-nav {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-top: 0;
	list-style: none;
}
.nav-link { display: block; padding: .5rem 0; }
.navbar a { color: var(--dt-nav); white-space: nowrap; font-size: 16px; font-weight: 600; }
.navbar a:hover, .nav-link:focus, .nav-link:hover { color: #000; }
.navbar-nav a { position: relative; }
.navbar-nav a::before, .navbar-nav a::after { position: absolute; transition: all .35s ease; }
.navbar-nav a::before {
	content: "";
	bottom: 0;
	display: block;
	width: 0%;
	height: 3px;
	background-color: var(--dt-nav);
}
.navbar-nav a::after {
	content: attr(data-hover);
	left: 0;
	top: 0;
	max-width: 0%;
	padding: .5em 0;
	overflow: hidden;
	color: #000;
	white-space: nowrap;
}
.navbar-nav a:hover::before, .navbar-nav .current > a::before { opacity: 1; width: 100%; }
.navbar-nav a:hover::after, .navbar-nav .current > a::after { max-width: 100%; }

.dropdown { position: relative; }
.dropdown-menu {
	position: static;
	z-index: 1000;
	display: none;
	min-width: 10rem;
	padding: .5rem 0;
	margin: .125rem 0 0;
	color: var(--dt-text);
	text-align: left;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.is-open > .dropdown-menu { display: block; }
.dropdown-item {
	display: block;
	width: 100%;
	padding: .25rem 1.5rem;
	clear: both;
	white-space: nowrap;
	background: transparent;
}
.dropdown-item:hover { overflow: hidden; background: none; }
.dropdown-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; }

a.navbtn { font-weight: 400; padding: 5px 24px; color: #fff; }
a.navbtn:hover { color: #fff; }
.navbtn::after { background: var(--dt-dark); }

@media (min-width: 992px) {
	.navbar > .container { flex-wrap: nowrap; }
	.navbar-toggler { display: none; }
	.navbar-collapse { display: flex !important; flex-basis: auto; }
	.navbar-nav { flex-direction: row; }
	.navbar-nav .nav-link { padding-right: 0; padding-left: 0; }
	.navbar-nav > li { padding-right: .7rem; padding-left: .7rem; }
	.navbar-nav > li.dropdown { padding-right: 1rem; }
	.navbar-nav .dropdown-menu { position: absolute; top: 100%; left: 0; }
}
@media (max-width: 991.98px) {
	.navbar-nav { border-top: 1px solid #0088d5; margin-top: 20px; }
	li.nav-item { border-bottom: 1px solid #eee; padding: 0 10px; }
	.navbtn-wrap { margin: 0 0 .5rem !important; }
	.dropdown-menu { border: 0; padding-top: 0; }
}

/* ---------- 7. Home ---------- */
.bannerSec {
	height: 500px;
	background: url(../images/bannerBg.jpg) 0 0 / cover no-repeat;
	color: #fff;
}
.bannerSec h1 { font-size: 3rem; }
.bannerSec p { color: #fff; }
.bannerButtom { margin-top: -48px; background: #f4f2e9; color: var(--dt-ink); }
.bannerButtom .col { border-right: 1px solid #c9c7bf; }
.bannerButtom .col:last-child { border: none; margin-right: 20px; }
.bannerButtom .bb-title { padding-top: 15px; text-align: center; font-size: 1.75rem; }
.bbIcon, .bbText { display: table-cell; vertical-align: middle; }
.bbIcon { padding: 60px 20px; font-size: 3.75rem; color: var(--dt-dark); }
.bbText { padding: 18px 20px 18px 0; }

.aboutSec h2 { font-size: 2.9rem; margin-bottom: 20px; }
.aboutSec h2 span { color: var(--dt-blue); }
.about-logo { width: 153px; position: relative; top: -9px; left: 2px; }
.aboubott span { padding-right: 10px; font-size: 2rem; color: var(--dt-blue); }

.mailSubs { padding: 4rem 0 5rem; background: var(--dt-blue); color: #fff; text-align: center; }
.mailSubs a { color: #fff; }
.mailSubs h3 { font-weight: 400; }
.mailSubs h2 a { color: #fff; }

/* ---------- 8. Inner pages ---------- */
.banner-inner {
	position: relative;
	height: 45vh;
	background: url(../images/inner-banner.jpg) center bottom / cover no-repeat;
	color: #fff;
}
.banner-inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100% !important;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient(45deg, rgba(0, 70, 204, .98) 0%, rgba(59, 53, 213, 0) 25%, rgba(116, 37, 222, .1) 50%, rgba(132, 3, 238, .99) 100%);
	opacity: .5;
}
.banner-inner .banner-title { font-size: 2.7rem; }

.Lgray { padding: 50px; background: rgb(250, 250, 250); box-shadow: inset 0 0 20px 3px #ddd; }
.pralexbg { padding: 60px 0; background: url(../images/ff-opti-scaled.jpg) 0 0 no-repeat; background-attachment: fixed; }
.pralexbg p { color: #fff; }
.pralexbg hr { border-top-color: rgba(255, 255, 255, .25); }
.pralex-divider { border-right: 1px solid #c5c5c5; }
.text-white h3, .text-white h5 { color: #fff; }

.servic-rightPan {
	display: block;
	height: 100%;
	padding: 40px;
	background: #fff;
	box-shadow: -29px 0 20px 1px rgb(235 235 235 / 52%);
}
.dt-feature-line { color: var(--dt-text); }

.messText { color: #000; }
.map { display: block; filter: grayscale(100%); }

/* Plans */
.tariff-item {
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 30px;
	color: var(--dt-ink);
	text-align: center;
	background: #fff;
	box-shadow: 0 0 9px 1px #d9d9d9;
	transition: all .3s ease;
}
.tariff-item:hover { transform: translateY(-10px); }
.ti-header-wrapper { position: relative; margin-bottom: 42px; padding: 30px 0; background: #c8e5f3; }
.ti-header { margin-bottom: 24px; }
.ti-subheader { color: var(--dt-blue); }
.tariff-icons {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 26px;
	color: #303030;
	background: #fff;
	border: 4px solid rgb(175 214 233 / 15%);
	border-radius: 50%;
	box-shadow: 0 0 18px rgb(0 0 0 / 8%);
	transform: translate(-50%, -50%);
}
.tariff-list { margin: 40px 0 5px; list-style: none; text-align: left; }
.tariff-list li { padding-bottom: 10px; }
.tariff-list li::before {
	content: "\f00c";
	margin-right: 8px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--dt-red);
}
.ti-price { font-weight: 800; color: var(--dt-red); }
.ti-price span { color: var(--dt-dark); }
.dt-plans-unavailable p { color: var(--dt-muted); }

/* Accordion (replaces mat-accordion) */
.dt-accordion { margin-bottom: 1rem; }
.dt-panel {
	background: #fff;
	color: rgba(0, 0, 0, .87);
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
	transition: margin .225s cubic-bezier(.4, 0, .2, 1);
}
.dt-panel:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.dt-panel:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.dt-panel[open] { margin: 16px 0; border-radius: 4px; }
.dt-panel[open]:first-child { margin-top: 0; }
.dt-panel summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 56px 12px 24px;
	font-family: var(--dt-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}
.dt-panel[open] summary { min-height: 64px; }
.dt-panel summary::-webkit-details-marker { display: none; }
.dt-panel summary::after {
	content: "";
	position: absolute;
	right: 26px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(0, 0, 0, .54);
	border-bottom: 2px solid rgba(0, 0, 0, .54);
	transform: translateY(-75%) rotate(45deg);
	transition: transform .225s;
}
.dt-panel[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.dt-panel summary:hover { background: rgba(0, 0, 0, .04); }
.dt-panel-body { padding: 0 24px 16px; font-size: 14px; }
.dt-panel-body p, .dt-panel-body li { color: rgba(0, 0, 0, .87); }
.dt-panel-body table { margin-top: .5rem; }
.dt-panel-body th, .dt-panel-body td { padding: .25rem 1.5rem .25rem 0; border-bottom: 1px solid #eee; }

/* ---------- 9. ACP page ---------- */
.bbbanner {
	background: url(../images/bbbanner.jpg) 0 0 / cover no-repeat;
	color: #fff;
}
.bbbanner .bb-heading { font-size: 2.7rem; }
.bbbanner p { color: #fff; }
.bannerForm {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 20px 23px;
	background: rgb(0 0 0 / 70%);
	color: #fff;
}
.bannerForm p { color: #fff; }
.hp span { color: var(--dt-pink); }
.sfont { font-size: 14px; line-height: 19px; }
.videsec .col-md-5 { padding: 3.5rem 3rem 1rem 0; }
@media (max-width: 767.98px) {
	.bannerForm { position: relative; }
	.videsec .col-md-5 { padding: 0; }
}

/* ---------- 10. Footer ---------- */
.footersec { background: var(--dt-footer); }
.footersec, .footersec a { color: var(--dt-dark); font-size: 14px; text-decoration: none; }
.footersec a:hover { color: #000; }
.footersec ul { padding: 2px; margin-bottom: 1rem; list-style: none; }
.footersec h5 { color: var(--dt-dark); }
.footersec i.fab {
	display: inline-block;
	width: 35px;
	height: 36px;
	margin: 0 2px;
	padding: 8px;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: var(--dt-blue);
	transition: all .6s ease;
}
.footersec i.fab:hover { box-shadow: inset 0 0 8px 5px #035178; transform: scale(1.07); }
.footersec hr { border-top-color: rgba(0, 0, 0, .25); }

/* ---------- 11. Content from the editor ---------- */
.entry-content > :last-child { margin-bottom: 0; }
.entry-content--full > :first-child { margin-top: 0; }
.entry-content table { width: auto; }
.entry-content .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.entry-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.entry-content .aligncenter { display: block; margin-right: auto; margin-left: auto; }
.wp-block-image figcaption, .wp-caption-text { font-size: .875rem; color: var(--dt-muted); }
.nav-links { display: flex; gap: 1rem; }

/* ---------- 12. Responsive ---------- */
@media (max-width: 991.98px) {
	.aboubott span { font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
	.footersec, .footersec a { text-align: center; }
	.footersec .col-sm-3 { padding-bottom: 10px; }
	h2, .h2 { font-size: 2.2rem; }
	.bannerSec h1 { font-size: 2.4rem; }
	.Lgray { padding: 40px 0; }
	.p-5.dt-acp-faq { padding: 3rem 0 !important; }
	.dt-contact .messText.p-5 { padding: 2rem 1.25rem !important; }
	.pralex-divider { border-right: 0; }
}
@media (max-width: 575.98px) {
	.bannerButtom .col { flex: 0 0 100%; max-width: 100%; border-right: 0; border-bottom: 1px solid #c9c7bf; }
	.bannerButtom .col:last-child { margin-right: 0; border-bottom: 0; }
	.bbIcon { padding: 20px; }
	.servic-rightPan { margin-top: 2rem; padding: 30px 20px; }
}