/* ============================
Swim Pioneers Academy – Base UI
=========================== */

/* ---------- Google Fonts ---------- */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800&display=swap');

/* ---------- Theme Variables (Light) ---------- */
:root{
    --bg:#f7f8ff;
    --brand:#000034;
    --textMain:#000034;
    --textDark:#0A0F1B;
    
}

*,* :before , *:after {
    padding:0px;
    margin:0px;
    box-sizeing:border-box;
}
/* ---------- Base ---------- */

html{ 
    padding:0px; 
    margin:0px; 
    height:100%;
    width:100%;
    background:var(--bg);
    color:var(--brand);
    font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

body{
    padding:0px; 
    margin:0px;
    width:100%; 
    min-height:100vh; 
    display:flex; 
    flex-direction:column;
}

.navbar{
    margin:0px;
    padding:0px 50px;
    height:70px;
    position: sticky; z-index:50; top: 0;
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    gap:16px; 
    padding-block:12px;        
    background-color: var(--brand);
    color: var(--bg);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size:.95rem;
    //font-weight:800;  
}

.nave-logo{
    height:70px;

    animation-name: logomove;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-fill-mode: both;
}

@keyframes logomove {
  from {height:0px;}
  to {height:70px;}
}

.button{
  position:relative;
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:.46em;
  padding: .46rem .78rem; 
  min-block-size:2rem;
  border-radius:12px;
  width: content;
  //border:1px solid var(--bdc);
  font-weight:700; 
  font-size:.84rem; 
  letter-spacing:.2px; 
  line-height:1; 
  text-align:center;
  cursor:pointer; 
  user-select:none;
  background:var(--bg); 
  color:var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 4px 10px rgba(0,0,0,.05);
  transition:transform .06s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .25s ease;
  text-decoration-line: none;
}

a {text-decoration: :none;}



@media (max-width:480px){
    .navbar{
        height:50px;
        padding:10px 20px;
    }
    .nave-logo{
        height:50px;
        
    }
    .button{
        font-weight:400; 
        font-size:.64rem;
        padding: .16rem .78rem;
    }

    @keyframes logomove {
        from {height:0px;}
        to {height:50px;}
    }
}