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

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body {
    width:100%;
    overflow-x:hidden;
    font-family: Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#333;
}

img {
    max-width:100%;
    height:auto;
    display:block;
}

a {
    text-decoration:none;
}

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

.wrap {
    max-width:1200px;
    width:92%;
    margin-left:auto;
    margin-right:auto;
}

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

.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(0,0,0,0.85);
    z-index:1000;
}

.header-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo img {
    height:50px;
}

.top-nav ul {
    display:flex;
    gap:25px;
    list-style:none;
}

.top-nav ul li a {
    color:white;
    font-weight:bold;
}

.top-nav ul li a:hover {
    color:#FAC81B;
}

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

.hero {

    margin-top:80px;

    height:85vh;

    background-image:url("../images/w1.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    color:white;
}

.hero div {

    max-width:700px;

    background:rgba(0,0,0,0.45);

    padding:30px;

    border-radius:8px;
}

.hero h1 {
    font-size:42px;
    margin-bottom:15px;
}

.hero p {
    font-size:18px;
    margin-bottom:25px;
}

.btn {

    display:inline-block;

    background:white;

    color:black;

    padding:14px 28px;

    font-weight:bold;

    border-radius:4px;
}

.btn:hover {
    background:#FAC81B;
}

/* =========================
SECTIONS
========================= */

.section {
    padding:80px 0;
    text-align:center;
}

.section h2 {
    font-size:32px;
    margin-bottom:40px;
}

/* =========================
SERVICES (CENTERED)
========================= */

.service-grid {

    display:grid;

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

    gap:30px;

    max-width:700px;

    margin-left:auto;
    margin-right:auto;

}

.service {

    padding:30px;

    border:1px solid #ddd;

    border-radius:6px;

    background:white;

    text-align:center;
}

.service h3 {
    font-size:22px;
    margin-bottom:12px;
}

/* =========================
GALLERY (GRID FIXED)
========================= */

.gallery {

    display:grid;

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

    gap:20px;

    max-width:1100px;

    margin-left:auto;
    margin-right:auto;

}

.gallery img {

    width:100%;

    height:auto;

    border-radius:6px;

}

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

.feature-grid {

    display:grid;

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

    gap:30px;

    max-width:900px;

    margin-left:auto;
    margin-right:auto;

}

.feature {

    padding:25px;

    background:#f7f7f7;

    border-radius:6px;
}

/* =========================
CONTACT
========================= */

.contact {

    background:#111;

    color:white;

    padding:80px 0;

    text-align:center;
}

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

footer {

    background:#000;

    color:#aaa;

    padding:30px;

    text-align:center;
}

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

/* Tablet */

@media (max-width:900px) {

.service-grid {
    grid-template-columns:1fr;
}

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

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

.hero h1 {
    font-size:34px;
}

}

/* Phone */

@media (max-width:600px) {

.header-inner {
    flex-direction:column;
}

.top-nav ul {
    flex-direction:column;
    gap:10px;
    margin-top:10px;
}

.gallery {
    grid-template-columns:1fr;
}

.feature-grid {
    grid-template-columns:1fr;
}

.hero {
    height:70vh;
}

.hero h1 {
    font-size:26px;
}

.hero div {

    max-width:90%;

    padding:20px;
}

.section {
    padding:50px 0;
}

}