/* ----------------------------------------------------------------------------------------
* File : Site-specific styles and overrides
* Loaded after : css/rtl.css
* Scope : anything that is not about text direction - e.g. the eyebrow label class
* that replaces misused
tags, and background-image paths for the
* company's real photos (custom.css is never edited).
* Direction mirroring belongs in rtl.css, not here.
* New rules are written RTL-first with logical properties.
* ---------------------------------------------------------------------------------------- */
/************************************/
/*** Main Menu ***/
/************************************/
/* Hide the dropdown arrows next to submenu items in the desktop menu
(custom.css:631-638 and 680-683). The mobile menu arrows (.slicknav_arrow) stay,
because tapping them is how submenus open on mobile. */
.main-menu ul li.submenu > a:after,
.main-menu ul li.submenu ul li.submenu > a:after{
content: none;
}
/* No arrow circle next to the header button: drop the circle (custom.css:228-247)
and the side margin that made room for it (rtl.css) */
.header-btn .btn-default{
margin-inline: 0;
}
.header-btn .btn-default::before{
content: none;
}
/* Company logo (images/united-german-logo.webp, 323x128 = 2x). The template logo was 193x50;
this one is a bit taller so the Arabic line under "UNITED GERMAN" stays legible. */
.navbar-brand img{
height: 64px;
width: auto;
}
/* Footer columns (about 3 + company 2 + services 4 + contact 3): the about column got
narrower, so its side margin goes from 90px (rtl.css:417) to 30px. Desktop only - from
991px down rtl.css already removes it. */
@media only screen and (min-width: 992px){
.main-footer .about-footer{
margin-left: 30px;
}
}
/* Copyright: short main line, then "تم التطوير بواسطة شركة zasck" a little smaller */
.footer-copyright-text .footer-copyright-main{
font-size: 16px;
font-weight: 500;
color: var(--white-color);
}
.footer-copyright-text .footer-developer{
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
margin-top: 6px;
}
.footer-copyright-text .footer-developer a{
color: var(--accent-color);
font-weight: 700;
}
.footer-copyright-text .footer-developer a:hover{
color: var(--white-color);
}
/* Footer "خدماتنا": the 8 links in 2 columns, filled column by column (1-4 on the right,
5-8 on the left), each column as wide as its longest link so none wraps.
From 1200px (wide desktop); below that the column is too narrow, so one column. */
@media only screen and (min-width: 1200px){
.footer-services-links ul{
display: grid;
grid-template-rows: repeat(4, auto);
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: start;
column-gap: 44px;
}
.footer-services-links ul li{
white-space: nowrap;
}
}
/* Footer logo: the logo's dark parts (the Arabic line, the dot of the "i") disappear on the
navy footer, so it sits on a white panel with the cards' radius (24px) and an even padding.
Replaces the template sizing (custom.css:2404-2407, 5567-5569). */
.footer-logo-link{
display: inline-block;
background: var(--white-color);
border-radius: 24px;
padding: 12px;
line-height: 0;
}
.footer-logo img{
height: 56px;
width: auto;
max-width: none;
}
/* Preloader icon: the company's bug (images/united-icon.webp, 132x132 = 2x) instead of the
template's loader.svg. The bug is green like the preloader background (custom.css:333),
so it sits in a white circle inside the spinning ring (custom.css:339-369). */
#loading-icon{
max-width: none;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
}
#loading-icon img{
width: 58px;
height: auto;
}
/************************************/
/*** Section Eyebrow Label ***/
/************************************/
/* Replaces the template's ".section-title h3", which sat above the section heading and
broke the heading order. Restyled as a light pill with a thin border (instead of the
template's solid block, custom.css:408-432 and 464-471), with a variant per background:
white section = light accent tint, light section = white, dark section = translucent. */
.section-title .section-eyebrow{
position: relative;
display: inline-block;
font-size: 14px;
font-weight: 600;
line-height: 1.6em;
color: var(--accent-color);
background: rgba(41, 155, 70, 0.08);
border: 1px solid rgba(41, 155, 70, 0.22);
border-radius: 100px;
padding-block: 5px;
padding-inline: 32px 16px;
margin-bottom: 15px;
}
.section-title .section-eyebrow::before{
content: '';
position: absolute;
top: 50%;
inset-inline-start: 16px;
transform: translateY(-50%);
background: var(--accent-color);
border-radius: 50%;
width: 6px;
height: 6px;
box-shadow: 0 0 0 3px rgba(41, 155, 70, 0.18);
}
.light-bg-section .section-title .section-eyebrow{
background: var(--white-color);
border-color: rgba(41, 155, 70, 0.28);
box-shadow: 0 4px 14px rgba(0, 47, 71, 0.06);
}
.dark-section .section-title .section-eyebrow{
color: var(--white-color);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
}
/************************************/
/*** Hero ***/
/************************************/
/* One even navy overlay over the whole photo (replaces the side gradient in custom.css:845
and rtl.css), so the centered text reads clearly */
.hero::before{
background: rgba(0, 47, 71, 0.8);
}
/* Centered content with a max width so lines don't get too long */
.hero-content.hero-content-centered{
max-width: 900px;
margin-inline: auto;
text-align: center;
}
/* Hero type scale, set here because custom.css:435 now has 40px for ".section-title h1",
which made the desktop h1 smaller than the tablet one (44px at 991px) */
.hero-content-centered .section-title h1{
font-size: 58px;
line-height: 1.25em;
}
.hero-content-centered .section-title p{
font-size: 20px;
line-height: 1.7em;
}
/* Small badge above the h1: transparent with a thin border */
.hero-content .section-title .hero-badge{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 500;
line-height: 1.6em;
color: var(--white-color);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 100px;
padding: 6px 18px;
margin-bottom: 20px;
}
.hero-content .section-title .hero-badge i{
color: var(--accent-color);
}
/* White line under the h1 - clearly smaller than the h1 (58px), larger than the paragraph
(20px). Selector beats ".dark-section .section-title p" and ".hero-content .section-title p" */
.hero-content .section-title .hero-tagline{
font-size: 30px;
font-weight: 700;
line-height: 1.4em;
color: var(--white-color);
margin-top: 15px;
}
.hero-content-centered .hero-btn{
justify-content: center;
margin-top: 40px;
}
/* No arrow circle next to the hero booking button: drop the circle (custom.css:228-247)
and the side margin that made room for it (rtl.css). The header button keeps it. */
.hero-content-centered .hero-btn .btn-default{
margin-inline: 0;
font-size: 17px;
}
.hero-content-centered .hero-btn .btn-default::before{
content: none;
}
/* Outline WhatsApp button: same size as .btn-default (custom.css:211-226), transparent
with an accent border. 2px border + 15px padding = the same 50px height. */
.btn-outline-whatsapp{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 17px;
font-weight: 700;
line-height: 1em;
color: var(--white-color);
background: transparent;
border: 2px solid var(--accent-color);
border-radius: 100px;
padding: 15px 28px;
transition: all 0.4s ease-in-out;
}
.btn-outline-whatsapp i{
font-size: 20px;
}
.btn-outline-whatsapp:hover{
color: var(--white-color);
background: var(--accent-color);
}
/* Small light note under the buttons */
.hero-content .hero-note{
font-size: 16px;
line-height: 1.6em;
color: rgba(255, 255, 255, 0.85);
margin: 25px 0 0;
}
/************************************/
/*** Floating Contact Buttons ***/
/************************************/
/* Fixed to the bottom-left corner on every screen size (physical left on purpose).
Nothing else in the template is fixed there; the preloader (z-index 1000) still
covers them while the page loads. Must be added to every page converted to RTL. */
.floating-contact{
position: fixed;
left: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
}
.floating-contact-btn{
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white-color);
font-size: 24px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.floating-contact-btn:hover{
color: var(--white-color);
transform: scale(1.08);
}
.floating-whatsapp{
background: #25D366;
font-size: 28px;
}
.floating-phone{
background: var(--primary-color);
}
/************************************/
/*** Best Services Cards ***/
/************************************/
/* These cards list features, not services, so the title is a
, not a heading.
Same look as the global heading rule (custom.css:95-105) plus custom.css:1026-1030.
No bottom margin: the "read more" link it used to space from was removed. */
.best-service-item-content .best-service-title{
font-size: 20px;
font-weight: 700;
line-height: 1.2em;
color: var(--primary-color);
text-transform: capitalize;
margin: 0;
}
/* Short description under each card title. The icon is aligned to the top (instead of
centered, custom.css:974) so icons stay on one line when descriptions differ in length. */
.best-service-item{
align-items: flex-start;
}
.best-service-item-content .best-service-desc{
font-size: 15px;
line-height: 1.6em;
color: var(--text-color);
margin: 8px 0 0;
}
/* Font Awesome icons (sharp at any size) instead of the template's thin SVG lines:
rounded square with a light accent tint; on hover it fills with the accent color
(the template's ::before scale effect, custom.css:996-1013) and the icon turns white. */
.best-service-item .icon-box{
width: 64px;
height: 64px;
border-radius: 18px;
background: rgba(41, 155, 70, 0.12);
}
.best-service-item .icon-box::before{
background-color: var(--accent-color);
border-radius: 18px;
}
.best-service-item .icon-box i{
position: relative;
z-index: 1;
font-size: 26px;
color: var(--accent-color);
transition: color 0.4s ease-in-out;
}
.best-service-item:hover .icon-box i{
color: var(--white-color);
}
/* 64px icon + 20px side margin (rtl.css) */
.best-service-item-content{
width: calc(100% - 84px);
}
/* Template icons drawn in green (made for light backgrounds), shown on a green icon box */
.icon-box img.icon-to-white{
filter: brightness(0) invert(1);
}
/************************************/
/*** Section Background Order ***/
/************************************/
/* index.html alternates white / light sections. .our-features uses the "background"
shorthand for its mosquito image (custom.css:1386-1391), which resets the color set by
.light-bg-section, so the light color is restored here. */
.our-features.light-bg-section{
background-color: var(--secondary-color);
}
/************************************/
/*** Our Services Slider ***/
/************************************/
/* Equal-height cards with the "details" link pinned to the bottom, since the
descriptions have different lengths. Swiper slides default to height:100%,
which resolves to auto here, so each card was only as tall as its own text;
height:auto lets the flex wrapper stretch every slide to the tallest one. */
.services-slider .swiper-slide{
height: auto;
}
.services-slider .service-item{
display: flex;
flex-direction: column;
}
.services-slider .service-body{
flex: 1;
display: flex;
flex-direction: column;
}
.services-slider .service-content{
flex: 1;
}
/* Service icon: clean white circle with a soft shadow and an accent-colored icon,
overlapping the photo (instead of the solid green disc with a white border,
custom.css:1271-1305). On card hover the template's ::before scale effect fills it
with the accent color and the icon turns white. Works for Font Awesome and the
inline rodent