/* PERFECTRA brand skin: overrides the Industry skin variables (loaded after skin-1.css) */
:root {
	--color-primary: #1071B5;
	--color-secondry: #143C54;
	--color-hover: #00A4DC;
	--rgba-primary-1: rgba(16,113,181,0.1);
	--rgba-primary-2: rgba(16,113,181,0.2);
	--rgba-primary-3: rgba(16,113,181,0.3);
	--rgba-primary-4: rgba(16,113,181,0.4);
	--rgba-primary-5: rgba(16,113,181,0.5);
	--rgba-primary-6: rgba(16,113,181,0.6);
	--rgba-primary-7: rgba(16,113,181,0.7);
	--rgba-primary-8: rgba(16,113,181,0.8);
	--rgba-primary-9: rgba(16,113,181,0.9);
	--text-sec: #414141;
	--pf-navy-deep: #081933;
	--pf-gold: #CCAC47;
	--pf-red: #C8132F;
}
body, p, li, a, input, textarea, select, button { font-family: 'Montserrat', 'Cairo', sans-serif; }
h1, h2, h3, h4, h5, h6, .title { font-family: 'Montserrat', 'Cairo', sans-serif; font-weight: 800; }
html[lang=ar] body, html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3, html[lang=ar] h4, html[lang=ar] h5, html[lang=ar] h6, html[lang=ar] p, html[lang=ar] a, html[lang=ar] li { font-family: 'Cairo', 'Montserrat', sans-serif; }
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-dark, .footer-top, .site-footer .footer-bottom { background-color: var(--pf-navy-deep); }
/* blue-to-gold accent line under section headings (brief 3.1) */
.section-head .title::after, .section-head.style2 .title::after { background: linear-gradient(90deg, var(--color-primary), var(--pf-gold)) !important; }

/* branded preloader (replaces the template spinner) */
#loading-area {
	background-color: var(--pf-navy-deep) !important;
	background-image: url(/images/brand/logo-icon-white.svg) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 48px auto !important;
	animation: pf-pulse 1.2s ease-in-out infinite;
}
@keyframes pf-pulse { 0%, 100% { background-size: 40px auto; opacity: .75; } 50% { background-size: 56px auto; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #loading-area { animation: none; } }
/* Revolution slider's own loader */
.tp-loader.spinner0, .tp-loader.spinner1, .tp-loader.spinner2, .tp-loader.spinner3 { background-color: var(--color-primary) !important; }

/* equal-height cards: fixed image ratio, content stretches so rows line up */
.service-box-5 { height: 100%; display: flex; flex-direction: column; }
.service-box-5 .dlab-media { aspect-ratio: 3 / 2; overflow: hidden; flex: none; }
.service-box-5 .dlab-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-box-5 .dlab-info { flex: 1; }
.blog-grid, .blog-post.post-style-2 { height: 100%; }
.blog-grid .dlab-post-media, .blog-post.post-style-2 .dlab-post-media { aspect-ratio: 3 / 2; overflow: hidden; }
.blog-grid .dlab-post-media img, .blog-post.post-style-2 .dlab-post-media img { width: 100%; height: 100%; object-fit: cover; }
.row > [class*="col-"] > .dlab-box:only-child { height: 100%; }
.pf-cover { width: 100%; object-fit: cover; }
.latest-project-info + div .img-cover, .overlay-gallery-bx1 img { object-fit: cover; width: 100%; height: 100%; }
.overlay-gallery-bx1 .dlab-thum { position: relative; }
/* brand pattern over photo blocks */
.overlay-gallery-bx1 .dlab-thum::after, .const-about .radius-sm.m-b30::after {
	content: ""; position: absolute; inset: 0; background: url(/images/brand/brand-pattern.svg); opacity: .35; pointer-events: none; mix-blend-mode: screen;
}
.const-about .radius-sm.m-b30 { position: relative; overflow: hidden; }
/* client logos */
.pf-logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 38px; }
.pf-logo-item { display: inline-flex; align-items: center; justify-content: center; height: 46px; }
.pf-logo-item img { height: 36px; max-width: 150px; width: auto; object-fit: contain; flex: none; filter: grayscale(1); opacity: .75; transition: .25s; }
.pf-logo-item:hover img { filter: none; opacity: 1; }
.pf-logo-text { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #414141; }
/* make the card's column a flex container so every card fills the row height */
[class*="col-"]:has(> .service-box-5:only-child), [class*="col-"]:has(> .dlab-box:only-child), [class*="col-"]:has(> .blog-grid:only-child), [class*="col-"]:has(> .blog-post:only-child) { display: flex; }
[class*="col-"] > .service-box-5, [class*="col-"] > .dlab-box, [class*="col-"] > .blog-grid, [class*="col-"] > .blog-post { width: 100%; }

/* language switch in the header */
.pf-lang-switch { color: #9fb6c8; font-weight: 700; }
.pf-lang-switch a { color: #cfe0ec; font-weight: 700; margin: 0 4px; }
.pf-lang-switch a.on { color: #fff; text-decoration: underline; }
.pf-lang-switch span { opacity: .5; }

/* header: keep the 9-item menu and the language switch on one row */
@media (min-width: 992px) {
  .header-nav .nav > li > a { white-space: nowrap; padding-left: 10px !important; padding-right: 10px !important; font-size: 13px; }
  .header-nav .nav { flex-wrap: nowrap; }
  .pf-lang-switch { white-space: nowrap; display: inline-flex; gap: 2px; align-items: center; }
  .pf-lang-switch a { margin: 0 3px; font-size: 12px; }
  .extra-nav .extra-cell .list-inline { white-space: nowrap; }
}

/* home: the slider wrapper leaves a stray 24px white strip under the header */
.page-content:has(> .forcefullwidth_wrapper_tp_banner) { margin-top: -24px; }

/* Arabic: the header's angled shapes and floats are built left-to-right, so the bar keeps its layout
   and only the text inside flows right-to-left */
body[dir="rtl"] .site-header { direction: ltr; }
body[dir="rtl"] .site-header .header-nav .nav { direction: rtl; }
body[dir="rtl"] .site-header .sub-menu,
body[dir="rtl"] .site-header .service-list ul li,
body[dir="rtl"] .site-header .pf-lang-switch { direction: rtl; text-align: right; }
body[dir="rtl"] .site-header .service-list ul li .title,
body[dir="rtl"] .site-header .service-list ul li span { direction: ltr; unicode-bidi: plaintext; }

/* Brand logo: stacked lockup needs more height than the theme's horizontal logo */
.site-footer.style1 .footer-bottom-in .footer-bottom-logo a { background: transparent; padding: 14px 0; }
@media (max-width: 767px) {
    .site-footer.style1 .footer-bottom-in .footer-bottom-logo a img { height: 56px !important; }
}