/* =========================
   GLOBAL
========================= */
/* =========================
   TAJAWAL FONT
========================= */

/* =========================
   FORCE TAJAWAL
========================= */

html,
body,
.custom-home-page,
.hero-custom,
.hero-custom *{

font-family:
'Tajawal',
sans-serif !important;

}

body{
margin:0;
font-family:'Tajawal',sans-serif;
background:#fff;
overflow-x:hidden;
}

/* =========================
   HERO
========================= */

.hero-custom{

display:flex;
direction:ltr;

height:540px;

padding-top:120px;

background:#fff;
overflow:hidden;
}

/* CONTENT */

.hero-custom-content{

width:38%;
flex-shrink:0;

padding:
0 52px 0 60px;

display:flex;
flex-direction:column;
justify-content:center;

gap:14px;

direction:rtl;
}

/* IMAGE */

.hero-custom-image{
flex:1;
position:relative;
overflow:hidden;
}

.hero-custom-image:before{

content:'';

position:absolute;

left:0;
top:0;
bottom:0;

width:220px;

background:
linear-gradient(
to right,
#fff 0%,
rgba(255,255,255,.6) 40%,
transparent 100%
);

z-index:2;
}

.hero-custom-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* TITLE */

.hero-title{

font-size:
clamp(2.6rem,3.8vw,3.8rem);

font-weight:900;

line-height:1.12;

color:#0B2341;

margin:0;
letter-spacing:-1px;
}

/* LINE */

.hero-line-wrap{
display:flex;
align-items:center;
gap:6px;
}

.hero-line{
width:40px;
height:2.5px;

border-radius:999px;

background:
linear-gradient(
90deg,
#C0172C,
transparent
);
}

.hero-dot{
width:5px;
height:5px;
border-radius:50%;
background:#C0172C;
}

/* SUBTITLE */

.hero-subtitle{
margin:0;
color:rgba(11,35,65,.55);
font-size:.93rem;
line-height:1.75;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:12px;
margin-top:10px;
}

.hero-btn{

display:inline-flex;
align-items:center;
justify-content:center;

gap:8px;

padding:12px 22px;

border-radius:14px;

font-size:.9rem;
font-weight:700;

text-decoration:none;
color:#fff !important;

line-height:1;

transition:.25s ease;
}

.hero-btn:hover{
transform:translateY(-2px);
}

/* BUTTON SVG */

/* DEFAULT BUTTON SVG */


.hero-btn > svg{

width:14px;
height:14px;

display:block;

flex-shrink:0;

}


.hero-whatsapp-icon{

width:20px;
height:20px;

min-width:20px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;



color:#ffffff;

}


.hero-whatsapp-icon svg{

width:20px !important;
height:20px !important;

display:block;

fill:#25D366 !important;
stroke:none !important;

}
.hero-whatsapp-icon svg path{

fill:#ffffff !important;
stroke:none !important;

}
.hero-btn-branches svg{
stroke:#fff !important;
}

.hero-btn-whatsapp{

background:
linear-gradient(
135deg,
#25D366,
#128C7E
);

box-shadow:
0 5px 16px rgba(37,211,102,.22);
}

.hero-btn-branches{

background:
linear-gradient(
135deg,
#0B2341,
#1C4587
);

box-shadow:
0 6px 20px rgba(11,35,65,.3);
}

.hero-pin{
font-size:.9rem;
vertical-align:middle;
}

/* FEATURES */
/* FEATURES CONTAINER */
.hero-features{

display:flex;
align-items:center;

gap:18px;

padding-top:18px;

border-top:
1px solid rgba(11,35,65,.09);
}

.hero-feature{
display:flex;
align-items:center;
gap:8px;
}
/* FEATURE ICON */

.hero-feature-icon{

width:22px;
height:22px;

min-width:22px;
min-height:22px;

display:flex !important;
align-items:center !important;
justify-content:center !important;

position:relative;

flex-shrink:0;

border-radius:6px;

background:rgba(192,23,44,.08);

border:1px solid rgba(192,23,44,.14);

}

/* SVG */

.hero-feature-icon svg{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:11px !important;
height:11px !important;

stroke:#C0172C !important;
fill:none !important;

stroke-width:2 !important;

display:block;

}
/* =========================================
   MOBILE HERO
========================================= */

@media (max-width: 1024px){

.hero-custom{

flex-direction:column;

height:auto;
min-height:auto;

padding-top:90px;

direction:rtl;
}

/* IMAGE */

.hero-custom-image{

order:1;

width:100%;
height:180px;

flex:none;
}

.hero-custom-image:before{

display:none;
}

.hero-custom-image img{

object-position:center top;
}

/* CONTENT */

.hero-custom-content{

order:2;

width:100%;

padding:
16px 20px 28px;

gap:14px;
}

/* TITLE */

.hero-title{

font-size:
clamp(2.2rem,9vw,2.8rem);

line-height:1.12;

text-align:center;
}

/* LINE */

.hero-line-wrap{

justify-content:center;
}

/* SUBTITLE */

.hero-subtitle{

text-align:center;

font-size:.92rem;
}

/* BUTTONS */

.hero-buttons{

display:flex;

flex-direction:row;

gap:10px;

margin-top:6px;
}

.hero-btn{

flex:1;

padding:14px 12px;

font-size:.9rem;

border-radius:14px;
}

/* FEATURES */

.hero-features{

display:grid !important;

grid-template-columns:
repeat(3,1fr);

gap:8px;

padding-top:14px;

border-top:
1px solid rgba(11,35,65,.08);
}

/* FEATURE ITEM */

.hero-feature{

flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

gap:8px;

padding:12px 8px;

border-radius:14px;

background:
rgba(11,35,65,.03);

border:
1px solid rgba(11,35,65,.07);

min-height:92px;
}

/* FEATURE TEXT */

.hero-feature-text{

font-size:.68rem;

line-height:1.3;

font-weight:700;
}

/* FEATURE ICON */

.hero-feature-icon{

width:32px;
height:32px;

min-width:32px;
min-height:32px;

border-radius:10px;
}

/* SVG */

.hero-feature-icon svg{

width:14px !important;
height:14px !important;
}

/* MOBILE IMAGE FADE */

.hero-custom-image:after{

content:'';

position:absolute;

left:0;
right:0;
bottom:0;

height:70px;

background:
linear-gradient(
to top,
#fff,
transparent
);

z-index:2;
}

}