/* ========== Base Reset & Globals ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  margin: 0; /* safe to keep */
  font-family: Arial, Helvetica, sans-serif;
  background: url("../assets/images/Aarmax-World.webp") no-repeat calc(100% + 150px) -50px;
  background-size: 150vh;
  background-color: #0C0A1E;
  color: #FFFFFF;
  line-height: 1.5;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background-color: #5C44FC; border-radius: 4px; }
::-webkit-scrollbar-track { background-color: #0C0A1E; }
html { scrollbar-color: #5C44FC #0C0A1E; }

a { text-decoration: none; color: inherit; }

/* ========== Header & Nav ========== */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 5%; background: #0C0A1E;
}

.logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo img {
  width: 60px; height: auto; display: block;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.logo img:hover { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(92, 68, 252, 0.6)); }

.company-name {
  font-size: clamp(1rem, 2vw, 1.5rem); font-weight: bold; color: #FFF;
  text-transform: uppercase; position: relative; white-space: nowrap;
  text-shadow: 0 0 3px rgba(255,255,255,.2), 0 0 6px rgba(255,255,255,.15);
}
.company-name::before{
  content:""; position:absolute; top:50%; left:50%; width:140%; height:140%;
  background: radial-gradient(circle, rgba(255,255,255,.15) 10%, rgba(0,0,0,0) 70%);
  transform: translate(-50%, -50%); z-index:-1; pointer-events:none;
}

nav a{
  margin-left:30px; font-weight:500; word-spacing:5px; position:relative;
  padding-bottom:5px; transition: color .3s ease-in-out;
}
nav a:hover{ color:#5C44FC; }
nav a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:#5C44FC;
  transition: width .3s ease-in-out, left .3s ease-in-out;
}
nav a:hover::after{ width:100%; left:0; }

/* Contact Button */
.contact-btn{
  background:#5C44FC; color:#FFF !important; padding:10px 18px; border-radius:30px;
  transition: background-color .3s ease, color .3s ease;
  display:inline-block; font-size:1rem; font-weight:600; white-space:nowrap;
}
.contact-btn:hover{ background:#9380FA; color:#FFF !important; }
.contact-btn::after{ display:none !important; }

/* Logo text block */
.logo-text{ display:flex; flex-direction:column; align-items:flex-start; gap:0; line-height:1.1; }
.company-slogan{
  font-size:.72rem; font-weight:400; color:#CCC; text-transform:none; letter-spacing:.2px;
  margin-top:1px; white-space:nowrap;
}

/* ========== Hero ========== */
.hero{
  text-align:center; padding:100px 5% 0;
  background-size:contain; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; max-width:1150px; margin:0 auto;
}
.hero h1{
  font-size:3.5rem; margin-bottom:20px; line-height:1.2;
  text-shadow: 0 0 5px rgba(128,128,128,.6), 0 0 10px rgba(128,128,128,.4);
}
.hero p{ font-size:1rem; color:#CCC; margin-bottom:30px; max-width:650px; }
.hero p:first-of-type{ margin-bottom:10px; }

/* ========== Partners ========== */
.partners h2{
  font-size:1.8rem; margin-bottom:20px;
  text-shadow: 0 0 5px rgba(128,128,128,.6), 0 0 10px rgba(128,128,128,.4);
}
.partner-logos{
  display:flex; overflow:hidden; position:relative; width:100%;
  padding:20px 0; background:transparent; white-space:nowrap; justify-content:center;
}
.partner-logos img{
  max-height:40px; width:auto; object-fit:contain;
  filter: grayscale(100%) brightness(70%); transition: filter .3s, transform .3s; opacity:.8;
}
.partner-logos img[alt="Apple Logo"],
.partner-logos img[alt="TikTok Logo"],
.partner-logos img[alt="Twitter Logo"],
.partner-logos img[alt="YouTube Logo"]{
  filter: invert(100%) brightness(200%) contrast(90%);
}
.partner-logos img:hover{ filter:grayscale(0%) brightness(120%); opacity:1; transform:scale(1.15); }
.partner-logos img[alt="Apple Logo"]:hover,
.partner-logos img[alt="TikTok Logo"]:hover,
.partner-logos img[alt="Twitter Logo"]:hover,
.partner-logos img[alt="YouTube Logo"]:hover{
  filter: invert(100%) brightness(250%) contrast(100%);
}
.partner-logos img[alt="Google Logo"],
.partner-logos img[alt="Bing Logo"]{ filter: grayscale(100%) brightness(100%); }
.partner-logos .logos-wrapper{
  display:flex; align-items:center; gap:50px; animation:scroll 45s linear infinite;
  justify-content:space-evenly; flex-wrap:nowrap; padding-left:50px;
}
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-100%)} }
.partner-logos:hover .logos-wrapper{ animation-play-state: paused; }

/* ========== About / Skills / Stats ========== */
.about-us{ padding:60px 5%; background-color:#141225; }
.about-us .container{
  display:flex; flex-wrap:wrap; align-items:center; gap:50px; max-width:1200px; margin:auto;
}
.about-image{ flex:1; }
.about-image img{
  width:100%; max-width:500px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.about-description{ flex:1; }
.about-description h2{ font-size:1.6rem; margin-bottom:15px; color:#fff; }
.about-description p, .about-description li{
  font-size:1rem; line-height:1.7; color:#CCC; margin-bottom:15px; text-align:justify;
}
.about-description ul{ padding-left:20px; }
.about-description li{ list-style:disc; }

.skills-stats .container{ display:flex; flex-wrap:wrap; gap:50px; padding:50px 5%; }
.skills{ flex:1; }
.skills h2{ font-size:1.6rem; margin-bottom:15px; }
.skills p{ margin-bottom:20px; color:#CCC; }
.skill{ margin-bottom:20px; }
.skill p{ display:flex; justify-content:space-between; margin-bottom:8px; font-weight:bold; font-size:.95rem; }
.progress{ background:#292742; border-radius:30px; overflow:hidden; height:12px; }
.bar{ height:100%; background:linear-gradient(90deg,#5C44FC,#9380FA); width:0%; animation:growBar 1s forwards; border-radius:30px; }
@keyframes growBar{ to{ width:100%; } }
.stats{ flex:1; display:flex; flex-wrap:wrap; gap:30px; }
.stat-box{
  background:#1a1830; padding:20px; border-radius:12px; flex:1 1 45%; text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.stat-box h3{ font-size:2rem; font-weight:bold; }
.stat-box p{ color:#CCC; font-size:.95rem; margin-top:8px; }

/* ========== CTA ========== */
.cta{
  background:linear-gradient(135deg,#5C44FC,#1C1A2E);
  text-align:center; padding:75px 5%; border-radius:10px; color:#fff; margin:50px auto;
}
.cta h3{ font-size:1rem; letter-spacing:1px; color:#E0E0E0; margin-bottom:50px; }
.cta h2{ font-size:1.8rem; margin-bottom:15px; font-weight:bold; }
.cta p{ font-size:.95rem; color:#DDD; margin-bottom:25px; }
.cta .btn{
  padding:12px 28px; font-size:1rem; font-weight:600; border-radius:30px; background:#FFF; color:#5C44FC;
  transition:all .3s; margin-top:15px;
}
.cta .btn:hover{ background:#9380FA; color:#fff; }

/* ========== Footer ========== */
footer{ padding:50px 5%; color:#CCC; }
.footer-container{ max-width:1200px; margin:auto; }
.footer-grid{ display:grid; grid-template-columns:2fr .8fr 1fr 1.2fr; gap:20px; }
.footer-brand h2{
  font-size:1.5rem; margin-bottom:10px; color:#fff;
  text-shadow: 0 0 5px rgba(128,128,128,.6), 0 0 10px rgba(128,128,128,.4);
}
.footer-brand p{ font-size:.9rem; margin-bottom:10px; }
.footer-social{ display:flex; gap:15px; margin-top:10px; }
.footer-social img{ width:30px; height:30px; transition:opacity .3s; }
.footer-social img:hover{ opacity:.7; }
.footer-links h3, .footer-contact h3{
  font-size:1.2rem; margin-bottom:15px; color:#fff;
  text-shadow: 0 0 5px rgba(128,128,128,.6), 0 0 10px rgba(128,128,128,.4);
}
.footer-links ul{ list-style:none; padding:0; }
.footer-links li{ margin-bottom:8px; }
.footer-links a, .footer-contact a{
  color:#CCC; text-decoration:none; position:relative; padding-bottom:5px; transition: color .3s;
}
.footer-links a:hover, .footer-contact a:hover{ color:#5C44FC; }
.footer-links a::after, .footer-contact a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:#5C44FC;
  transition: width .3s, left .3s;
}
.footer-links a:hover::after, .footer-contact a:hover::after{ width:100%; left:0; }
.footer-contact p{ font-size:.9rem; margin-bottom:5px; }
.footer-bottom{
  text-align:center; font-size:.8rem; color:#666; margin-top:40px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
}
.footer-description{
  font-size:.95rem; color:#CCC; text-align:justify; line-height:1.6; margin-bottom:20px;
}

/* ========== WhatsApp Floating Button ========== */
.whatsapp-chat{ position:fixed; bottom:20px; right:20px; z-index:1000; }
.whatsapp-chat img{
  width:60px; height:60px; border-radius:50%;
  box-shadow:0 4px 8px rgba(0,0,0,.2); transition: transform .3s ease-in-out;
}
.whatsapp-chat img:hover{ transform: scale(1.1); }

/* ========== Apple Badge (below header) ========== */
.apple-below-header{
  display:flex; align-items:center; gap:7px;
  background: linear-gradient(90deg,#191c23 60%, #323859 100%);
  border-radius:20px; padding:2.5px 10px 2.5px 3px;
  box-shadow:0 2px 7px 0 rgba(0,0,0,.14), 0 0 0 1px #a2aaad35 inset;
  width:fit-content; margin:-9px auto 10px 55px;
  font-size:.95rem; position:relative; z-index:3; min-height:36px;
  transition: box-shadow .3s, margin .3s, font-size .3s;
}
.apple-badge-logo{ width:22px; height:22px; background:#fff; border-radius:50%; padding:1.5px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.badge-text{ font-size:.95rem; font-weight:600; color:#fff; letter-spacing:.1px; text-shadow:0 1px 2px #2226, 0 0 2px #fff1; line-height:1.2; white-space:nowrap; }
.invert-logo{ filter: invert(1) brightness(2) grayscale(1) contrast(1.3); }

/* ========== Media Queries ========== */

/* Tablet (768–1024) */
@media (max-width: 1024px) and (min-width: 768px){
  nav{ display:flex; flex-wrap:nowrap; align-items:center; }
  nav a{ margin-left:18px; font-size:.95rem; }

  .contact-btn{ padding:8px 14px; font-size:.9rem; }

  .company-name{ font-size:1rem; }

  header{ flex-wrap:wrap; row-gap:8px; }
  .logo img{ width:48px; }   /* Effective smaller logo */
  .logo-text{ max-width:110px; }
  .company-slogan{ font-size:.65rem; }
}

/* Mobile ≤768 */
@media (max-width: 768px){
  .footer-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2rem; }
  .about-us .container, .skills-stats .container{ flex-direction:column; }
  .partner-logos img{ height:30px; }
  .partners { padding-top:20px; }
  .logos-wrapper{ gap:30px; animation-duration:20s; }

  .logo img{ width:50px; }
  .company-name{ font-size:1rem; }

  .menu-container {
    position: relative;
  }
  
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 30px;
    cursor: pointer;
    z-index: 10001;
    background: transparent;
    border: none;
    padding: 5px;
  }
  
  .menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  
  .mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    border-radius: 32px;
    top: 70px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    background: rgba(13, 11, 31, 0.95); /* ✅ Added transparency */
    backdrop-filter: blur(10px); /* ✅ Added blur */
    -webkit-backdrop-filter: blur(10px); /* ✅ Safari support */
    z-index: 999999;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  }
  
  .mobile-nav.active {
    display: flex;
  }
  
  .mobile-nav a {
  color: #fff;
  display: block;                 /* ensure full-width centering */
  padding: 15px 0;
  margin: 0 !important;           /* cancel nav a { margin-left: 30px } */
  text-align: center;
  text-decoration: none;
  font-size: 0.95rem;
  word-spacing: normal !important;/* cancel nav a { word-spacing: 5px } */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.25s ease, transform 0.2s ease;
}

 
  .mobile-nav a:last-child {
    border-bottom: none;
    margin: 10px;
  }
  
  .mobile-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
  }
  
}

/* Small Mobile ≤480 */
@media (max-width: 480px){
  .contact-btn{ padding:7px 12px; font-size:.85rem; }
  .logo img{ width:50px; }
  .company-name{ font-size:1rem; }
  .mobile-nav a:last-child{ border-bottom:none; margin:10px 10px 0 auto; }
}

/* Apple badge responsiveness */
@media (max-width: 900px){
  .apple-below-header{ margin:6px auto 8px 40px; font-size:.92rem; min-height:30px; padding:2px 8px 2px 3px; }
  .apple-badge-logo{ width:19px; height:19px; padding:1px; }
  .badge-text{ font-size:.90rem; }
}
@media (max-width: 600px){
  .apple-below-header{ margin:-10px auto 7px 18px; font-size:.88rem; min-height:26px; padding:1.5px 6px 1.5px 2px; }
  .apple-badge-logo{ width:16px; height:16px; padding:.5px; }
  .badge-text{ font-size:.82rem; }
}

/* Lock page scroll while the mobile menu is open (no visual change) */
html:has(.mobile-nav.active),
body:has(.mobile-nav.active) {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}