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

*{
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

:root{
    --bg-1: #071020;
    --card: #0f1724;
    --accent: #0b6fb5; /* logo blue */
    --accent-2: #d5392a; /* logo red */
    --muted: #9aa4b2;
    --glass: rgba(255,255,255,0.04);
}

html,body{
    height: 100%;
    margin: 0;
    background: linear-gradient(180deg, #071020 0%, #0d1430 100%);
    color: #fff;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.site-header{
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
    z-index: 1; /* keep header under hero-card shadows */
    box-shadow: none; /* ensure header doesn't add extra shadow */
}
.header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}
.header-centered .logo.center{ text-align:center; width:100%; }

.nav-row{ padding-bottom: 8px; }
.nav-row .main-nav{ display:flex; justify-content:center; }
.logo a{
    color: white;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}
.logo-img{
    width: 48px;
    height: 48px;
    vertical-align: middle;
    border-radius: 50%;
    margin-left: 10px; /* RTL layout: space to the left of image */
    box-shadow: 0 6px 18px rgba(11,111,181,0.12);
}
.logo-text{ display:inline-block; vertical-align:middle; }

.main-nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.main-nav a{
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all .18s ease;
}
.main-nav a:hover{ color: white; background: linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow: 0 6px 18px rgba(11,111,181,0.12); transform: translateY(-2px); }

/* Banner */
.header-banner{
    background: linear-gradient(90deg, rgba(11,111,181,0.08), rgba(213,57,42,0.06));
    padding: 28px 0;
    border-radius: 8px;
    margin: 18px 0 40px 0; /* extra bottom space to avoid overlap */
}
.banner-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.header-banner h2{ margin: 0; font-size: 20px; font-weight: 600; text-align: center; display: block; width: 100%; }
.header-banner p{ margin: 6px 0 0 0; color: var(--muted); }

/* Hero */
.hero{
    display: flex;
    justify-content: center;
}
.hero-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 32px;
    border-radius: 14px;
    max-width: 760px;
    width: 100%;
    box-shadow: 0 14px 40px rgba(2,6,23,0.45); /* add visible card shadow */
    overflow: visible; /* allow child shadows to show */
    position: relative;
    z-index: 6; /* keep card above following sections */
}
.hero-card h1{ margin: 0 0 8px 0; font-size: 26px; text-align: center; }
.hero-card .lead{ color: var(--muted); margin-bottom: 18px; text-align:center; }

.cta-row{ display:flex; flex-direction: column; gap:12px; margin-bottom: 18px; align-items: center; }
.btn{
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    min-width: 220px; /* reasonable width on desktop */
    text-align: center;
}
.btn.primary{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: white; box-shadow: 0 10px 30px rgba(11,111,181,0.12); }
.btn.outline{ border: 1px solid rgba(255,255,255,0.08); color: white; background: transparent; }

.links-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 14px;
    align-items: center;
    justify-items: center;
}
.links-grid a{
    background: var(--glass);
    border-radius: 10px;
    color: #e6eef7;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.03);
    transition: all .15s ease;
    width: 260px; /* previous rectangular width */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.2);
    position: relative;
    z-index: 20;
}
.links-grid a:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(2,6,23,0.38); }

/* YouTube embed responsive */
.youtube-embed{
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    max-width: 760px; /* match hero-card max width */
    margin: 0 auto; /* center */
}
.youtube-embed iframe{ position: absolute; top:0; left:0; width:100%; height:100%; border-radius:10px; border:1px solid rgba(255,255,255,0.04); }

.section{ padding: 26px 0; color: #dfe8f6; }
.section h3{ margin-top: 0; }

/* Center the about section content */
#about{ text-align: center; }
#about p{ max-width: 720px; margin: 8px auto 0 auto; color: var(--muted); }

/* Center YouTube section */
#youtube{ text-align: center; }
#youtube h3{ margin-bottom: 12px; }

.site-footer{ border-top: 1px solid rgba(255,255,255,0.04); padding: 18px 0; margin-top: 30px; }

/* Responsive */
@media (max-width: 720px){
    .main-nav ul{ gap: 10px; }
    .header-banner{ padding: 18px 0; }
    .hero-card{ padding: 20px; padding-bottom: 48px; }
    .cta-row{ flex-direction: column; }
    .btn{ width: 100%; min-width: 0; }
    .logo-img{ width:40px; height:40px; margin-left:8px; }
    .links-grid{ grid-template-columns: 1fr; gap: 12px; }
    .links-grid a{ width: 100%; height: auto; border-radius: 10px; }

    /* Reduce hover shadow on narrow screens to avoid clipping and heavy visuals */
    .links-grid a:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(2,6,23,0.38); }
}