/* =====================================================
HESHAM TV
FILE: css/layout.css
===================================================== */

/* =====================================================
RESET
===================================================== */

*,
*::before,
*::after {


margin: 0;
padding: 0;

box-sizing: border-box;


}

html {


scroll-behavior: smooth;


}

body {


font-family: var(--font-family);

background: var(--bg-body);

color: var(--text-primary);

line-height: 1.7;

overflow-x: hidden;

transition:
    background var(--transition-normal),
    color var(--transition-normal);


}

/* =====================================================
TYPOGRAPHY
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {


font-weight: var(--fw-bold);

line-height: 1.2;


}

h1 {


font-size: var(--font-size-4xl);


}

h2 {


font-size: var(--font-size-3xl);


}

h3 {


font-size: var(--font-size-2xl);


}

p {


color: var(--text-secondary);


}

a {


text-decoration: none;

color: inherit;


}

img {


display: block;

max-width: 100%;


}

ul {


list-style: none;


}

/* =====================================================
CONTAINER
===================================================== */

.container {


width: 100%;

max-width: var(--container-width);

margin-inline: auto;

padding-inline: 24px;


}

/* =====================================================
SECTION
===================================================== */

section {


padding-block: 100px;


}

.section-title {


text-align: center;

margin-bottom: 60px;


}

.section-title::after {


content: "";

display: block;

width: 80px;

height: 4px;

margin: 18px auto 0;

border-radius: 999px;

background: var(--gradient-primary);


}

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

.header {


position: sticky;

top: 0;

z-index: var(--z-sticky);

backdrop-filter: blur(20px);

background:
    rgba(11,16,32,.85);

border-bottom:
    1px solid var(--border-color);


}

/* =====================================================
NAVBAR
===================================================== */

.navbar {


min-height: 80px;

display: flex;

align-items: center;

justify-content: space-between;


}

/* =====================================================
LOGO
===================================================== */

.logo {


display: flex;

align-items: center;


}

.logo img {


height: 50px;

width: auto;


}

/* =====================================================
NAV MENU
===================================================== */

.nav-menu {


display: flex;

align-items: center;

gap: 35px;


}

.nav-menu a {


font-size: 15px;

font-weight: var(--fw-medium);

color: var(--text-secondary);

transition:
    color var(--transition-normal);


}

.nav-menu a:hover {


color: var(--primary);


}

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

.header-actions {


display: flex;

align-items: center;

gap: 12px;


}

/* =====================================================
HERO
===================================================== */

.hero {


min-height: 90vh;

display: flex;

align-items: center;


}

/* =====================================================
HERO GRID
===================================================== */

.hero-grid {


display: grid;

grid-template-columns:
    repeat(2, 1fr);

align-items: center;

gap: 80px;


}

/* =====================================================
HERO CONTENT
===================================================== */

.hero-content h1 {


margin-block:
    20px 25px;

max-width: 700px;


}

.hero-content p {


max-width: 650px;

font-size: var(--font-size-lg);

margin-bottom: 35px;


}

/* =====================================================
HERO IMAGE
===================================================== */

.hero-image {


display: flex;

justify-content: center;


}

.hero-image img {


 width: 100%;

    max-width: 640px;

    height: auto;

    object-fit: contain;


}

/* =====================================================
STATS
===================================================== */

.stats-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 25px;


}

/* =====================================================
FEATURES
===================================================== */

.features-grid {


display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 25px;


}

/* =====================================================
SCREENSHOTS
===================================================== */

.gallery-grid {


display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 20px;


}

/* =====================================================
REVIEWS
===================================================== */

.reviews-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 25px;


}

/* =====================================================
DOWNLOAD
===================================================== */

.download {


text-align: center;


}

.download h2 {


margin-bottom: 25px;


}

/* =====================================================
FOOTER
===================================================== */

footer {


border-top:
    1px solid var(--border-color);

padding-block: 40px;


}

.footer-links {


display: flex;

justify-content: center;

gap: 30px;

flex-wrap: wrap;

margin-bottom: 20px;


}

.footer-links a {


color: var(--text-secondary);

transition:
    color var(--transition-normal);


}

.footer-links a:hover {


color: var(--primary);


}

footer p {


text-align: center;


}

/* =====================================================
RESPONSIVE
===================================================== */

/* =========================
TABLET
========================= */

@media (max-width: 1024px) {


.hero-grid {

    grid-template-columns: 1fr;

    text-align: center;
}

.hero-content h1,
.hero-content p {

    margin-inline: auto;
}

.hero-image {

    order: -1;
}

.features-grid {

    grid-template-columns:
        repeat(2, 1fr);
}

.gallery-grid {

    grid-template-columns:
        repeat(2, 1fr);
}

.reviews-grid {

    grid-template-columns: 1fr;
}


}

/* =====================================
MOBILE NAVIGATION
===================================== */

@media (max-width:768px) {


.menu-toggle {

    display: flex;
}

.nav-menu {

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    background:
        var(--bg-surface);

    border-top:
        1px solid var(--border-color);

    flex-direction: column;

    gap: 0;

    padding: 20px;

    transform:
        translateY(-150%);

    opacity: 0;

    visibility: hidden;

    transition: .3s;
}

.nav-menu.active {

    transform:
        translateY(0);

    opacity: 1;

    visibility: visible;
}

.nav-menu li {

    width: 100%;
}

.nav-menu a {

    display: block;

    padding: 16px 0;
}


}


/* =========================
MOBILE
========================= */

@media (max-width: 768px) {


section {

    padding-block: 70px;
}

.nav-menu {

    display: none;
}

.stats-grid {

    grid-template-columns: 1fr;
}

.features-grid {

    grid-template-columns: 1fr;
}

.gallery-grid {

    grid-template-columns: 1fr;
}

h1 {

    font-size: 42px;
}

h2 {

    font-size: 32px;
}


}

/* =========================
SMALL MOBILE
========================= */

@media (max-width: 480px) {


.container {

    padding-inline: 18px;
}

h1 {

    font-size: 36px;
}

h2 {

    font-size: 28px;
}


}