/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : Mar 2, 2025, 9:31:13 AM
    Author     : etoile
*/

 body {
  overflow-x: hidden;
}
  @import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
/* font-family: 'Noto Sans Kufi Arabic', sans-serif; */
/* font-family: 'Noto Kufi Arabic', sans-serif; */




@font-face {
    font-family: "STC Forward ExtraBold";
    src: url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.eot");
    src: url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/54c992b8b8dcf71d1ba214729fcd9737.svg#STC Forward ExtraBold")format("svg");
}

@font-face {
    font-family: "STC Forward Medium";
    src: url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.eot");
    src: url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/d06eae021aa146ad3fa1e080ee0ed199.svg#STC Forward Medium")format("svg");
}

@font-face {
    font-family: "STC Forward Regular";
    src: url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.eot");
    src: url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/157bc09a1cd0a9c9a52fe4287c0e1d31.svg#STC Forward Regular")format("svg");
}


.kufia {
  font-family: 'Droid Arabic Kufi', serif;
  
  direction: rtl;
  padding: 3px;
  text-align: justify;
  word-spacing: 1px;
}
.STC-bold{
    font-family: 'alfont_com_AlFont_com_STC-Bold'; 
}
  
.STC-light{
    font-family: 'alfont_com_AlFont_com_STC-Light'; 
}

.STC-regular{
    font-family: 'alfont_com_AlFont_com_STC-Regular'; 
}
input[type="checkbox"]{
    appearance:auto !important;
}

/* Desktop */
body{
padding-top:100px;
}

/* =========================
   NAVBAR
========================= */

.gtel-nav{
position:fixed;
top:0;
width:100%;
background:#f2f2f2;
z-index:1000;
font-family:Arial;
}

.gtel-container{
max-width:1300px;
margin:auto;
height:100px;
display:flex;
align-items:center;
gap:40px;
padding:0 60px;
}

/* =========================
   LOGO
========================= */

.gtel-logo img{
height:80px;
}

/* Arabic */
body[dir="rtl"] .gtel-mega-links{
text-align: right;
direction: rtl;
}

/* English */
body[dir="ltr"] .gtel-mega-links{
text-align: left;
direction: ltr;
}
/* =========================
   MENU
========================= */

.gtel-menu-wrapper{
margin-inline:auto;
}

.gtel-menu{
display:flex;
gap:25px;
list-style:none;
margin:0;
padding:0;
}

.gtel-menu a{
text-decoration:none;
color:#0e3764;
font-size:20px;
padding:10px 14px;
border-radius:6px;
display:block;
transition:.3s;
etter-spacing: .02em;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8em
}

.gtel-menu a:hover{
background:#dce9f7;
}


/* =========================
   CONTROLS
========================= */

.gtel-controls{
display:flex;
align-items:center;
gap:15px;
}

.gtel-lang{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:black;
}

.gtel-lang img{
width:23px;
}

.gtel-dark-btn{
background:none;
border:none;
font-size:20px;
cursor:pointer;
}

.gtel-hamburger{
display:none;
font-size:28px;
background:none;
border:none;
cursor:pointer;
}

/* =========================
   MEGA MENU
========================= */

.gtel-mega-menu{
display:none;
position:absolute;
top:90px;
left:0;
width:100%;
background:#1f466f;
padding:40px 0;
z-index:999;
}

.gtel-mega-menu.open{
display:block;
opacity:1;
visibility:visible;
}

.gtel-mega-menu{
opacity:0;
visibility:hidden;
transition:opacity .25s ease;
}

/* =========================
   INNER CONTAINER
========================= */

.gtel-mega-inner{
max-width:1000px; /* 🔥 smaller container */
margin:auto;
display:flex;
align-items:flex-start;
gap:20px;
padding:0 20px;
color:white;
justify-content:space-between; /* 🔥 important */
}
/* =========================
   IMAGE SECTION
========================= */

.gtel-mega-image h3{
color:white;
margin-bottom:20px;
font-size:22px;
}

.gtel-mega-image img{
width:320px;
margin-top:-10px;
}

/* =========================
   LINKS GRID (🔥 FIXED)
========================= */

.gtel-mega-links{
display:grid;
grid-template-columns:repeat(2, 1fr); /* 🔥 3 columns */

width:100%;
}
.gtel-mega-links{
max-width:600px; /* 🔥 prevents stretching */
}
.gtel-mega-links{
gap:8px 10px;
}
/* links */

.gtel-mega-links a{
display:block;
width:100%;
padding:4px 0;
line-height:1.4;
color:white;
text-decoration:none;
}

/* hover */

.gtel-mega-links a:hover{
opacity:0.85;
}

/* =========================
   LANGUAGE ALIGNMENT ONLY
   (NO COLUMN OVERRIDE ❌)
========================= */

body.ar .gtel-mega-links{
direction:rtl;
text-align:right;
}

body.en .gtel-mega-links{
direction:ltr;
text-align:left;
}

/* =========================
   DARK MODE
========================= */

body.dark .gtel-nav{
background:#1a1a1a;
}

body.dark .gtel-menu a{
color:white;
}
/* =========================
   DARK MODE
========================= */

body.dark .gtel-nav{
background:#1a1a1a;
}

body.dark .gtel-menu a{
color:white;
}
body.dark .gtel-hamburger{
color:#fff; /* 🔥 make it visible */
}
/* =========================
   MEGA MENU FIX (FINAL)
========================= */
/* fallback only */
body.dark #logoImg{
filter:brightness(0) invert(1);
}
/* container layout */
.gtel-mega-inner{
display:flex;
justify-content:space-between; /* 🔥 push image to edge */
align-items:flex-start;
gap:40px;
}
body.dark .gtel-nav{
background:#1a1a1a;
}
/* =========================
   IMAGE CONTAINER
========================= */

.gtel-mega-image{
flex:0 0 320px; /* 🔥 fixed width */
display:flex;
flex-direction:column;
gap:12px;
}

/* title */
.gtel-mega-image h3{
margin:0;
font-size:18px;
letter-spacing:1px;
color:#fff;
line-height:1.6;
}

/* image */
.gtel-mega-image img{
width:100%;
height:auto;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.25);
border:1px solid rgba(255,255,255,0.1);
display:block;
transition:.3s;
}

/* hover effect */
.gtel-mega-image img:hover{
transform:scale(1.04);
box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

/* =========================
   LINKS (keep your style)
========================= */

body.en .gtel-mega-links a{
font-size:16px;
}

body.ar .gtel-mega-links a{
font-size:20px;
}

/* =========================
   LANGUAGE ALIGNMENT
========================= */

/* Arabic */
body.ar .gtel-mega-image h3{
align-items:flex-end;
text-align:right;
}

/* English */
body.en .gtel-mega-image h3{
align-items:flex-start;
text-align:left;
}

/* =========================
   SMALL POLISH
========================= */

.gtel-mega-links a{
transition:0.2s;
}

.gtel-mega-links a:hover{
opacity:0.85;
}
/* DARK MODE */

body.dark .gtel-nav{
background:#1a1a1a;
}

body.dark .gtel-menu a{
color:white;
}
.gtel-mega-menu{
opacity:0;
visibility:hidden;
transition:opacity .25s ease;
}

.gtel-mega-menu.open{
opacity:1;
visibility:visible;
}

.gtel-mega-menu{
opacity:0;
transform:translateY(15px);
visibility:hidden;
transition:all 0.25s ease;
}

.gtel-mega-menu.open{
opacity:1;
transform:translateY(0);
visibility:visible;
}

.gtel-mega-links a{
position:relative;
padding:6px 0;
}

.gtel-mega-links a::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:0%;
height:2px;
background:#ffffff;
transition:0.3s;
}

.gtel-mega-links a:hover::after{
width:100%;
}
.gtel-mega-menu{
backdrop-filter:blur(8px);
background:rgba(31, 70, 111, 0.95);
}
.gtel-mega-image img{
cursor:pointer;
}

.gtel-mega-image img:hover{
transform:scale(1.05);
}
.gtel-mega-links{
gap:15px 40px;
}

.gtel-mega-links{
gap:15px 40px;
}
.gtel-mega-menu{
background:rgba(31, 70, 111, 0.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

.gtel-mega-links a{
opacity:0;
transform:translateY(10px);
animation:fadeUp 0.4s ease forwards;
}

.gtel-mega-links a:nth-child(1){animation-delay:.05s;}
.gtel-mega-links a:nth-child(2){animation-delay:.1s;}
.gtel-mega-links a:nth-child(3){animation-delay:.15s;}
.gtel-mega-links a:nth-child(4){animation-delay:.2s;}
.gtel-mega-links a:nth-child(5){animation-delay:.25s;}
.gtel-mega-links a:nth-child(6){animation-delay:.3s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}
.gtel-mega-image img{
transition:0.3s ease;
}

.gtel-mega-image img:hover{
transform:scale(1.05);
}

.gtel-mega-links{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:30px;
}

.gtel-col h4{
font-size:14px;
opacity:0.7;
margin-bottom:10px;
letter-spacing:1px;
}
.gtel-mega-links a{
display:block;
padding:6px 0;
font-size:16px;
transition:0.2s;
}

.gtel-mega-links a:hover{
transform:translateX(5px); /* 🔥 subtle move */
}
/* =========================
   MOBILE MENU FIX (CLEAN)
========================= */


@media (max-width: 767px) {

/* =========================
   HEADER / NAV
========================= */

.gtel-nav{
width:100%;
left:0;
right:0;
}

.gtel-container{
max-width:100%;
width:100%;
margin:0;
padding:0 15px;
min-height:80px;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.gtel-logo img{
height:55px;
}

.gtel-logo,
.gtel-controls{
flex-shrink:0;
}

.gtel-controls{
gap:8px;
}

.gtel-lang img{
width:25px;
height:auto;
border-radius:3px;
box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

.gtel-hamburger{
display:block;
font-size:26px;
cursor:pointer;
padding:6px;
}

/* =========================
   MENU
========================= */

.gtel-menu-wrapper{
position:fixed;
top:90px;
right:0;
width:100%;
height:calc(100vh - 90px);
background:#f2f2f2;
transform:translateX(100%);
transition:0.35s ease;
padding:20px;
overflow-y:auto;
z-index:1000;
}

.gtel-menu-wrapper.open{
transform:translateX(0);
}

body.menu-open{
overflow:hidden;
}

.gtel-menu{
display:flex;
flex-direction:column;
gap:15px;
padding:0;
}

.gtel-menu a{
color:#333;
font-size:18px;
text-decoration:none;
padding:12px;
border-bottom:1px solid #ddd;
}

/* =========================
   MEGA MENU
========================= */

.gtel-mega-menu{
display:block !important;
position:static !important;
background:#27496d;
border-radius:8px;
overflow:hidden;
max-height:0;
padding:0 !important;
margin:0 !important;
transition:max-height 0.35s ease, padding 0.3s ease;
}

.gtel-mega-menu.open{
max-height:1000px;
padding:15px 0 !important;
margin-top:10px !important;
}

/* layout */
.gtel-mega-inner{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:15px;
padding:15px;
}

/* image */
.gtel-mega-image{
order:1;
margin-bottom:10px;
flex:0 0 220px;
display:flex;
}

.gtel-mega-image h3{
margin-bottom:5px;
font-size:16px;
}

.gtel-mega-image img{
width:180px;
max-width:100%;
height:auto;
margin:15px auto;
display:block;
border-radius:6px;
}

/* links */
.gtel-mega-links{
order:2;
width:100%;
display:flex;
flex-direction:column;
gap:10px;
padding:10px;
}

.gtel-mega-links a{
display:block;
padding:12px 0;
font-size:17px;
line-height:1.6;
color:white;
border-bottom:1px solid rgba(255,255,255,0.15);
opacity:0;
transform:translateY(10px);
animation:fadeUp 0.3s ease forwards;
}

.gtel-mega-links a:last-child{
border-bottom:none;
}

.gtel-mega-links a::before{
content:"•";
margin-right:8px;
opacity:0.7;
}

.gtel-mega-links a:hover{
opacity:0.8;
transform:translateX(5px);
transition:0.2s;
}



/* =========================
   HEADER ANIMATION
========================= */

.gtel-nav{
transition:all 0.3s ease;
}

.gtel-container{
transition:all 0.3s ease;
}

.gtel-logo img{
transition:all 0.3s ease;
}

/* SCROLLED STATE */
.gtel-nav.scrolled{
background:rgba(242,242,242,0.95); /* slight transparency */
backdrop-filter:blur(8px);
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* shrink height */
.gtel-nav.scrolled .gtel-container{
min-height:65px;
}

/* shrink logo */
.gtel-nav.scrolled .gtel-logo img{
height:45px;
}

/* optional: tighten spacing */
.gtel-nav.scrolled .gtel-controls{
gap:6px;
}

.gtel-hamburger{
transition:transform 0.3s ease;
}

body.menu-open .gtel-hamburger{
transform:rotate(90deg);
}

.gtel-nav{
will-change:transform;
}



/* =========================
   SMART STICKY HEADER
========================= */

.gtel-nav{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
transition:transform 0.35s ease, background 0.3s ease;
}

/* hide header */
.gtel-nav.hide{
transform:translateY(-100%);
}

/* show header */
.gtel-nav.show{
transform:translateY(0);
}




}


/* Mobile */
@media(max-width:970px){
body{
padding-top:120px; /* your mobile header height */
}
}


.footers {
  background: linear-gradient(135deg, #0d3e6a, #072d4d);
  color: #fff;
  padding: 70px 20px 30px;
  font-family: 'STC Forward Regular', sans-serif;
  text-align: start;
}

.containers {
  max-width: 1350px;
  margin-inline: auto;
}

/* GRID */

.footers-contents {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
}

/* HEADINGS */

.footers-sections h3,
.footers-sections h4 {
  font-weight: 600;
  margin-bottom: 22px;
}

.footers-sections h3 {
  font-size: 22px;
  color: #fff;
}

.footers-sections h4 {
  font-size: 18px;
  opacity: 0.9;
  color: #fff;
}

/* TEXT */

.footers-sections.companys p {
  line-height: 1.8;
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 20px;
}

/* LINKS */

.footers-sections ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footers-sections ul li {
  margin-bottom: 12px;
}

.footers-sections ul li a {
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  transition: 0.3s ease;
  display: inline-block;
}

.footers-sections ul li a:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* CONTACT */

.contacts-infos {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contacts-infos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

.contacts-infos i {
  font-size: 14px;
  min-width: 18px;
}

/* BOTTOM */

.footers-bottoms {
  margin-top: 60px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

.footers-bottoms p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 15px;
}

/* SOCIAL */

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  margin-inline: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  transition: 0.3s ease;
}

.social-icons a:hover {
  background: #fff;
  color: #0d3e6a;
  transform: translateY(-4px);
}

/* RESPONSIVE */

@media (max-width: 1100px) {

  .footers-contents {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

}

@media (max-width: 768px) {

  .footers-contents {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footers {
    padding: 55px 20px;
  }

  .footers-bottoms {
    margin-top: 40px;
  }

}

/* LIGHTBOX FIX */

.w-lightbox-frame,
.w-lightbox-embed {
  width: 100vw;
  height: 100vh;
}

.w-lightbox-content {
  height: 100vh;
  margin: 0;
}
.w-lightbox-frame, .w-lightbox-embed {
    width: 100vw;
    height: 100vh;
}
.w-lightbox-content{
	height: 100vh;
	margin:0px;
        
}