*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

  --navy:  #152238;

  --navy2: #1b2d4f;

  --blue:  #1e90d4;

  --white: #ffffff;

  --text:  #333333;

  --muted: #666666;

  --border:#e0e0e0;

}

body { font-family: "Montserrat", sans-serif; background: var(--white); color: var(--text); }





/* Language switcher pill */

.lang-switch {

  display: flex; align-items: center;

  background: rgba(255,255,255,0.1);

  border-radius: 20px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.2);

}

.lang-switch a {

  padding: 5px 14px;

  font-size: 0.72rem;

  font-weight: 700;

  color: rgba(255,255,255,0.55);

  text-decoration: none;

  transition: all 0.15s;

}

.lang-switch a.active {

  background: var(--blue);

  color: white;

}



/* HERO */

.hero {

  background-color: var(--navy2);

  background-image:

    linear-gradient(180deg, rgba(15,25,50,0.72) 0%, rgba(15,25,50,0.88) 100%),

    url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1600&q=70&auto=format');

  background-size: cover; background-position: center 40%;

  min-height: 210px;

  display: flex; flex-direction: column;

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

  text-align: center; padding: 40px 20px 20px;

}

.hero h1 { color: white; font-size: 2.5rem; font-weight: 300; letter-spacing: 0.06em; margin-bottom: 18px; }

.hero-arrow { color: rgba(255,255,255,0.55); font-size: 1.6rem; animation: bounce 1.8s ease-in-out infinite; }

@keyframes bounce { 0%,100%{transform:translateY(0)} 60%{transform:translateY(7px)} }



/* DIVIDER */

.divider-wrap { display: flex; justify-content: center; position: relative; }

.divider-wrap::before {

  content: ''; display: block; position: absolute;

  left: 0; right: 0; top: 24px; height: 1px; background: var(--border);

}

.divider-line { width: 2px; height: 56px; background: var(--blue); position: relative; z-index: 1; }



/* BLOG SECTION */

.blog-wrap {margin: 0 auto; padding: 84px 40px 70px; }



/* Category filter */

.cat-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }

.cat-label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-<?= $isAr ? 'left' : 'right' ?>: 4px; }

.cat-tag {

  padding: 4px 15px; border: 1.5px solid var(--border);

  font-size: 0.76rem; font-weight: 600;

  text-transform: uppercase; letter-spacing: 0.05em;

  color: var(--muted); text-decoration: none; background: white; transition: all 0.15s;

}

.cat-tag:hover, .cat-tag.active { background: var(--blue); border-color: var(--blue); color: white; }



/* GRID */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

@media (max-width: 880px) { .grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .blog-wrap { padding: 28px 18px 50px; } }



/* CARD */

.card { border: 1px solid var(--border); background: white; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }

.card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,0.11); }



/* Card image */

.card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--navy2); flex-shrink: 0; }

.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

.card:hover .card-img img { transform: scale(1.05); }

.card-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1b2d4f 0%, #1e3d6e 100%); }



/* Overlay on image */

.card-overlay {

  position: absolute; inset: 0;

  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.72) 100%);

  display: flex; flex-direction: column; justify-content: space-between;

  padding: 10px 12px 12px;

}

.card-logo {

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

  background: white; padding: 4px 8px 4px 4px; gap: 6px; width: fit-content;

}

.card-logo-circle {

  width: 30px; height: 30px; background: var(--navy);

  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;

}

.card-logo-circle svg { width: 18px; height: 18px; }

.card-logo-words { font-size: 0.56rem; font-weight: 700; color: var(--navy); line-height: 1.3; text-transform: uppercase; }

.card-img-title { color: white;  line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,0.6); 

position: absolute;

    bottom: 20px;

        font-size: 20px;

    font-weight: 500;

}



/*.card-img-title { direction: rtl; text-align: right; font-family: 'Segoe UI', Tahoma, sans-serif; }*/





/* Card body */

.card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }



/*.card-body { direction: rtl; text-align: right; }*/



.card-excerpt { font-size: 18px; color: #7d7d7d; line-height: 24px; flex: 1; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.card-readmore { font-size: 14px; font-weight: 700; color: #00adef; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.15s; }

.card-readmore:hover { gap: 8px; }



/* Empty */

.empty { padding: 60px; text-align: center; color: var(--muted); font-size: 0.95rem; }

.empty a { color: var(--blue); text-decoration: none; font-weight: 600; }



.logo-white, .logo-black{max-width: 260px}

/* NAVBAR */

  #mainNav{transition:background .35s,box-shadow .35s;background:transparent;padding:14px 0;}

.fixed-top .logo-black{display: none;}

 #mainNav.scrolled .logo-black{display: inline;}

  #mainNav.scrolled .logo-white{display: none;}





  #mainNav.scrolled{background:#fff!important;box-shadow:0 2px 16px rgba(0,0,0,.09); padding: 0}

  #mainNav.scrolled .nav-link{color:#1a1a1a!important;}

  #mainNav.scrolled .navbar-brand img{filter:none;}

  #mainNav .navbar-brand{display:flex;align-items:center;gap:10px;}

  #mainNav .navbar-brand .brand-text{line-height:1.2;}

  #mainNav .navbar-brand .brand-title{font-size:11px;font-weight:700;color:#fff;letter-spacing:.5px;display:block;}

  #mainNav.scrolled .navbar-brand .brand-title,

  #mainNav.scrolled .navbar-brand .brand-sub{color:#1a1a1a!important;}

  #mainNav .navbar-brand .brand-sub{font-size:9px;color:rgba(255,255,255,.8);display:block;}

  #mainNav .nav-link{color:rgba(255,255,255,.9)!important;font-size:14px;font-weight:500;letter-spacing:.8px;padding:6px 10px!important;transition:color .2s;}

  #mainNav .nav-link:hover{color:#2196f3!important;}

  #mainNav.scrolled .nav-link:hover{color:#1565c0!important;}

.fixed-top{transition: all 0.5s ease;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

}





.about-hero {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: url('../images/banner-about.webp') center/cover no-repeat;

  }



  /* Dark navy overlay */

  .about-hero::before {

    content: '';

    position: absolute;

    inset: 0;

  }



  .inner-hero-title {

    position: relative;

    z-index: 2;

    color: #fff;

    font-size: 48px;

    font-weight: 400;

    letter-spacing: 1px;

    margin-bottom: 20px;

  }



  /* Scroll-down circle button */

  .inner-hero-scroll {

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1.1rem;

    text-decoration: none;

    transition: border-color .3s, background .3s;

    width: 82px;

    height: 82px;

    background: url(../images/btn-polygon2.webp) center center no-repeat;

    position: relative;



  }

  .inner-hero-scroll:hover {



  }

  .inner-banner{

  padding: 100px 0px 30px 0px;

  min-height: 450px;

  position: relative;

}

.inner-banner:after{

  content: '';

  width: 1px;

  height: 156px;

  background: #00adef;

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

  bottom: -44px;

  z-index: 999;

}



/* FOOTER */

.footer-main{background:#fff;padding:50px 0 30px;border-top:1px solid #eee;}

.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;}

.footer-brand .ft{font-size:11px;font-weight:700;color:#1a1a1a;display:block;letter-spacing:.3px;}

.footer-brand .fs{font-size:9px;color:#666;display:block;}

.footer-address{font-size:17px;color: #2e4c79;text-align: center;line-height:1.8;}

.footer-contact{font-size:17px;color:#2e4c79;text-align:center;}

.footer-social{display:flex;gap:10px;justify-content:center;margin:20px 0;}

.footer-social a{width:48px;height:48px;border:1px solid #2e4c79;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2e4c79;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s;}

.footer-social a:hover{border-color:#2196f3;color:#2196f3;}

.footer-bottom-links{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #eee;}

.footer-bottom-links a{font-size:14px;font-weight:500;color:#2e4c79;text-decoration:none;letter-spacing:.8px;text-transform:uppercase;transition:color .2s;}

.footer-bottom-links a:hover{color:#2196f3;}

.footer-copy{text-align:center;font-size:12px;color:#abb4c3;margin-top:16px;}
.footer-copy a{text-decoration: none;color: #2e4c79}


/* Logo circle */

.logo-circle{width:44px;height:44px;border-radius:50%;background:#1565c0;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.logo-circle svg{width:26px;height:26px;}