*, *::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 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}

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

.main-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:18px 0;
}

.navbar{
    padding:0;
}

.navbar-brand img{
    height:52px;
}

.navbar-nav .nav-link{
    color:#fff !important;
    font-size:16px;
    font-weight:600;
    margin:0 12px;
    position:relative;
}

.navbar-nav .nav-link.active{
    color:#7ed957 !important;
}

.navbar-nav .nav-link:hover{
    color:#6FBE41 !important;
}


.navbar .dropdown-menu{
    background:#f44336; /* RED DROPDOWN BG */
    border:none;
    border-radius:0;
    padding:12px 0;
    min-width:280px;
    margin-top:0;
}

/* Dropdown Items */
.navbar .dropdown-menu .dropdown-item{
    color:#fff;
    font-size:18px;
    font-weight:600;
    padding:14px 28px;
    line-height:1.5;
    transition:0.3s ease;
    white-space:normal;
}

/* Hover Effect */
.navbar .dropdown-menu .dropdown-item:hover{
    background:#ffffff;
    color:#f44336;
    padding-left:36px;
}

/* SHOW DROPDOWN ON HOVER DESKTOP */
@media (min-width:992px){

.navbar .dropdown:hover .dropdown-menu{
    display:block;
    margin-top:0;
    animation:fadeDropdown .3s ease;
}

}

/* Animation */
@keyframes fadeDropdown{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}
.quote-btn{
    background:#6fbe41;
    color:#fff;
    padding:9px 28px;
    font-size:15px;
    font-weight:700;
    border-radius:0;
    text-transform:uppercase;
    transition:0.3s;
}

.quote-btn:hover,.quote-btn:focus,.quote-btn:active{
    background:#2caedd !important;
    color:#fff;
}

.lang-btn{
    color:#fff;
    font-weight:700;
    margin-left:18px;
    text-decoration:none;
}





.about-hero {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: url('../images/banner-about.jpg') 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:hover {



  }

  .inner-banner{

  padding: 100px 0px 30px 0px;

  min-height: 450px;

  position: relative;

}




/* FOOTER */

.main-footer{
    position: relative;
    background: #2f2f2f;
    padding: 90px 0 35px;
    overflow: hidden;
}

.footer-logo{
    display: inline-block;
    margin-bottom: 35px;
}

.footer-logo img{
    max-width: 220px;
}

/* Contact */

.footer-contact-item{
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 32px;
}

.footer-icon{
    min-width: 22px;
    font-size: 20px;
    color: #ffffff;
    margin-top: 4px;
}

.footer-contact-text{
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 280px;
}

.footer-contact-text a{
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer-contact-text a:hover{
    color: #42b8ff;
}

/* Widget */

.footer-widget h4{
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
    padding-bottom: 12px;
}

.footer-widget h4::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 1px;
    background: rgba(255,255,255,0.4);
}

.footer-widget ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-widget ul li{
    margin-bottom: 16px;
}

.footer-widget ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: 0.3s;
}

.footer-widget ul li a:hover{
    color: #42b8ff;
}

.footer-widget ul li a.active-link{
    color: #42b8ff;
}

/* Social */

.footer-social{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-social a{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    border-radius: 4px;
}

.footer-social a:nth-child(1){
    background: #3b5998;
}

.footer-social a:nth-child(2){
    background: #e1306c;
}

.footer-social a:nth-child(3){
    background: #e60023;
}

.footer-social a:nth-child(4){
    background: #000;
}

.footer-social a:nth-child(5){
    background: #ff0000;
}

.footer-social a:hover{
    transform: translateY(-4px);
}

/* Bottom */

.footer-bottom{
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #444343;
    margin-top: 30px;
}

.footer-bottom p{
    color: #fff;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 5px;
    font-weight: 400;
}

.footer-bottom a{
    color: #42b8ff;
    text-decoration: none;
    font-weight: 700;
}