:root{--brand:#cc0000;--brand-600:#b30000;--text:#121316;--muted:#5f6673;--bg:#ffffff;--bg-alt:#f5f7fb;--border:#e5e8ef;--shadow:0 10px 30px rgba(0,0,0,.08)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* Splash */
#splash-screen{position:fixed;inset:0;background:radial-gradient(1200px 600px at 20% 10%,#ffefef 0%,#fff 40%);display:flex;align-items:center;justify-content:center;z-index:10000;transition:opacity .6s ease .1s,visibility 0s linear .7s}
#splash-screen.hidden{opacity:0;visibility:hidden}
#splash-screen .splash-inner{text-align:center;animation:float 2.4s ease-in-out infinite}
.logo-mark{width:72px;height:72px;border-radius:16px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:36px;box-shadow:var(--shadow)}
#splash-screen .brand{margin-top:14px;font-weight:700;letter-spacing:.2px}
#splash-screen .progress{width:220px;height:6px;background:#f1f3f7;border-radius:999px;margin:18px auto 0;overflow:hidden}
#splash-screen .progress .bar{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--brand),#ff5252);border-radius:inherit;animation:load 1.2s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-110%)}50%{transform:translateX(10%)}100%{transform:translateX(110%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Top bar */
.top-bar{background:#0f1115;color:#cfd6e6;font-size:14px}
.top-bar .top-bar-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:10px 0}
.top-bar .top-item i{color:var(--brand);margin-right:8px}
.top-bar a{color:#cfd6e6;text-decoration:none}
@media (max-width:900px){.top-bar .top-bar-grid{grid-template-columns:1fr}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.5) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--text)}
.logo .logo-mark{width:36px; height:36px;border-radius:8px;font-size:18px;margin-right:10px}
.logo .logo-text{font-weight:800;letter-spacing:.3px}
.nav-menu{display:flex;gap:18px;align-items:center}
.nav-menu a,.drop-trigger{color:#1b1f2a;text-decoration:none;font-weight:600;font-size:15px;line-height:1}
.nav-menu a:hover,.drop-trigger:hover{color:var(--brand)}
.dropdown{position:relative}
.drop-trigger{background:transparent;border:0;cursor:pointer}
.drop-menu{position:absolute;top:120%;left:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:8px 6px;display:none;min-width:180px}
.dropdown:hover .drop-menu{display:block}
.dropdown.open .drop-menu{display:block}
.drop-menu a{display:block;padding:10px 12px;border-radius:8px}
.drop-menu a:hover{background:#f7f8fc}
.disabled{opacity:.5;pointer-events:none}
/* Mobile Navigation */
.nav-toggle{display:none;flex-direction:column;gap:4px;width:44px;height:44px;border-radius:8px;border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}
.nav-toggle:hover{background:#f8f9fa}
.nav-toggle span{display:block;width:22px;height:3px;background:#1b1f2a;border-radius:2px;transition:all .3s ease;transform-origin:center}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px, 7px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}

/* Mobile overlay */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49;opacity:0;visibility:hidden;transition:all .3s ease}
.nav-overlay.show{opacity:1;visibility:visible}

@media (max-width:980px){
  .nav-toggle{display:flex}
  .nav-menu{
    position:fixed;
    top:68px;
    left:0;
    width:100%;
    height:calc(100vh - 68px);
    background:#fff;
    display:flex;
    flex-direction:column;
    padding:20px;
    gap:0;
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:60;
    overflow-y:auto;
    box-shadow:2px 0 10px rgba(0,0,0,.1)
  }
  .nav-menu.open{transform:translateX(0)}
  
  /* Reset desktop styles for mobile */
  .nav-menu a:not(.drop-menu a){
    padding:16px 0;
    border-bottom:1px solid var(--border);
    font-size:18px;
    font-weight:600;
    color:var(--text);
    text-decoration:none;
    display:block;
    width:100%;
  }
  .nav-menu a:hover:not(.drop-menu a){
    color:var(--brand);
    background:transparent;
  }
  
  /* Mobile dropdowns */
  .dropdown{
    width:100%;
    border-bottom:1px solid var(--border);
  }
  .dropdown:hover .drop-menu{display:none}
  .drop-trigger{
    width:100%;
    justify-content:space-between;
    padding:16px 0;
    border:none;
    border-bottom:none;
    font-size:18px;
    font-weight:600;
    text-align:left;
    display:flex;
    align-items:center;
    color:var(--text);
    background:transparent;
  }
  .drop-trigger:hover{
    color:var(--brand);
  }
  .drop-trigger i{
    transition:transform .3s ease;
    font-size:14px;
  }
  .dropdown.open .drop-trigger i{transform:rotate(180deg)}
  .dropdown:last-child{border-bottom:none}
  
  .drop-menu{
    position:static;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0 0 0 20px;
    margin:0;
    display:none;
    width:100%;
  }
  .dropdown.open .drop-menu{display:block}
  .drop-menu a{
    padding:12px 0;
    font-size:16px;
    color:var(--muted);
    border-bottom:1px solid #f0f0f0;
    display:block;
    text-decoration:none;
    font-weight:500;
  }
  .drop-menu a:hover{
    background:transparent;
    color:var(--brand)
  }
  .drop-menu a:last-child{border-bottom:none}
}

/* Hero */
.hero{position:relative}
.hero .swiper{width:100%;height:84vh;min-height:520px}
.hero-slide{position:relative;background:var(--bg) center/cover no-repeat}
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35) 40%,rgba(0,0,0,.25))}
.hero-slide{background-image:var(--bg)}
.hero-slide .overlay{position:absolute;inset:0;background:radial-gradient(700px 300px at 10% 10%,rgba(255,255,255,.15),transparent 60%)}
.hero .container{position:relative;height:100%}
.hero-content{position:absolute;bottom:12vh;max-width:760px;color:#fff}
.hero-content h1{margin:0 0 10px;font-size:48px;line-height:1.1}
.hero-content p{margin:0 0 18px;font-size:18px;color:#e9edf7}
.hero-actions{display:flex;gap:12px}
.btn{appearance:none;border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(204,0,0,.35)}
.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.hero .swiper-pagination-bullet{background:#fff;opacity:.7}
.hero .swiper-button-prev,.hero .swiper-button-next{color:#fff}

/* Sections */
.section{padding:72px 0}
.section.gray{background:var(--bg-alt)}
.section-head{text-align:center;margin-bottom:28px}
.section-head h2{margin:0 0 6px;font-size:32px}
.section-head p{margin:0;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}
.text p{font-size:16px;line-height:1.9}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.checks li{position:relative;padding-left:28px}
.checks li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--brand);position:absolute;left:0;top:0}
.image-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.image-frame img{display:block;width:100%;height:auto}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-media{background:var(--bg) center/cover no-repeat;background-image:var(--img);padding-top:58%}
.card-body{padding:16px}
.card-body h3{margin:0 0 8px}
.card-body p{margin:0 0 12px;color:var(--muted)}
.card-link{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;text-decoration:none}
.card-link:hover{color:var(--brand-600)}

/* Clients */
.logo-group{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:980px){.logo-group{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.logo-group{grid-template-columns:repeat(2,1fr)}}
.logo-pill{display:flex;align-items:center;justify-content:center;height:70px;border:1px dashed var(--border);border-radius:12px;background:#fff;font-weight:700;color:#6b7280}

/* Footer */
.footer{background:#0f1115;color:#cfd6e6;position:relative}
.footer .footer-grid{display:grid;grid-template-columns:1.1fr .6fr 1fr;gap:26px;padding:48px 0}
@media (max-width:980px){.footer .footer-grid{grid-template-columns:1fr}}
.footer h3{margin:0 0 12px;color:#fff}
.footer a{color:#cfd6e6;text-decoration:none}
.footer a:hover{color:#fff}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer .socials{display:flex;gap:10px;margin-top:10px}
.footer .socials a{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;background:#171a21;border:1px solid #1e2230}
.footer .socials a:hover{background:#1d222c}
.footer .copyright{border-top:1px solid #1e2230;padding:16px 0;text-align:center}
#back-to-top{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border-radius:999px;border:0;background:var(--brand);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(204,0,0,.35);cursor:pointer}
#back-to-top.show{display:flex}

/* Utilities */
.hidden{display:none}

/* AOS override for better performance */
[data-aos]{will-change:transform,opacity} 




    /* Additional styles for clickable cards */
    .card-link {
      display: block;
      text-decoration: none;
      color: inherit;
      height: 100%;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .card-link:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .card {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .card-media {
      position: relative;
      overflow: hidden;
    }
    
    .card-media::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0);
      transition: background 0.3s ease;
    }
    
    .card-link:hover .card-media::after {
      background: rgba(0,0,0,0.1);
    }
    
    .card-body {
      flex-grow: 1;
      padding: 20px;
      background: white;
    }
    
    /* Add overlay with "View Details" text */
    .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
    
    .card-overlay span {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }
    
    .card-link:hover .card-overlay {
      opacity: 1;
    }

/*The style affect only the contact.html*/
.form{display:grid;gap:10px}.form input,.form textarea{padding:12px;border:1px solid var(--border);border-radius:10px;font:inherit}.form button{justify-self:start}


/*this style is for the gallery*/
    .project-header {
      background: #f8f9fa;
      padding: 40px 0;
      margin-bottom: 40px;
    }
    
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #2c5aa0;
      text-decoration: none;
      margin-bottom: 20px;
      font-weight: 500;
    }
    
    .project-content {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .project-main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    
    .project-image {
      width: 100%;
      height: 400px;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    
    .project-details {
      background: #f8f9fa;
      padding: 25px;
      border-radius: 8px;
      height: fit-content;
    }
    
    .detail-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ddd;
    }
    
    .detail-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    
    .detail-label {
      font-weight: 600;
      color: #333;
      display: block;
    }
    
    .detail-value {
      color: #666;
    }
    
    /* Gallery Styles */
    .project-gallery {
      margin: 60px 0;
    }
    
    .gallery-title {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    
    .gallery-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .gallery-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }
    
    .gallery-image {
      width: 100%;
      height: 250px;
      background-size: cover;
      background-position: center;
    }
    
    .gallery-caption {
      padding: 15px;
      text-align: center;
      background: white;
    }
    
    .gallery-caption h4 {
      margin: 0 0 5px 0;
      color: #2c5aa0;
    }
    
    .gallery-caption p {
      margin: 0;
      color: #666;
      font-size: 14px;
    }
    
    /* Progress Bar */
    .project-progress {
      margin: 40px 0;
    }
    
    .progress-bar {
      height: 8px;
      background: #e9ecef;
      border-radius: 4px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    
    .progress-fill {
      height: 100%;
      background: #2c5aa0;
      width: 100%;
      border-radius: 4px;
    }
    
    .progress-labels {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }
    
    @media (max-width: 768px) {
      .project-main {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      
      .gallery-grid {
        grid-template-columns: 1fr;
      }
    }