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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, sans-serif;
    background: #17120d;
    color: #f5ead7;
    line-height: 1.6;
}


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

header {
    background: #0d0a07;
    padding: 20px 6%;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


nav h1 {
    color: #d4af37;
    font-size: 28px;
}


nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
}


nav a {
    color: #f5ead7;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s;
}


nav a:hover {
    color: #d4af37;
}


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

section {
    padding: 90px 6%;
}


h2 {
    color: #d4af37;
    font-size: 40px;
    margin-bottom: 20px;
}


p {
    margin-bottom: 15px;
}


/* =========================
   HOME
========================= */

#home {
    min-height: 85vh;

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

    text-align: center;

    background:
        linear-gradient(rgba(13, 10, 7, 0.75),
            rgba(23, 18, 13, 0.95)),
        url("image4.png") center/cover no-repeat;
}


#home>div {
    width: 100%;
    max-width: 850px;
}


#home p:first-child {
    color: #d4af37;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


#home h2 {
    color: #f5ead7;
    font-size: 60px;
    margin: 15px 0;
}


#home p {
    color: #e0d2bd;
    font-size: 18px;
}


#home a {
    display: inline-block;

    margin-top: 20px;
    padding: 14px 30px;

    background: #d4af37;
    color: #17120d;

    text-decoration: none;
    font-weight: bold;

    border-radius: 6px;

    transition: 0.3s;
}


#home a:hover {
    background: #f0d36a;
    transform: translateY(-3px);
}


/* =========================
   ABOUT
========================= */

#about {
    background: #211a13;
}


#about>div {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}


#about p:first-child {
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}


#about h2 {
    font-size: 42px;
    margin-bottom: 25px;
}


#about p {
    max-width: 850px;
    color: #d8cbb8;
    font-size: 17px;
}


#about>div::after {
    content: "Quality Stitching • Perfect Fitting • Custom Style";

    display: block;

    margin-top: 35px;
    padding: 25px;

    background: #0d0a07;

    border-left: 4px solid #d4af37;

    color: #f5ead7;

    font-size: 18px;
    font-weight: bold;
}


/* =========================
   SERVICES
========================= */

#services {
    background: #17120d;
    text-align: center;
}


#services>div {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}


#services>div>p:first-child {
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}


#services h2 {
    margin-bottom: 45px;
}


.services-grid {
    width: 100%;

    display: grid;

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

    gap: 25px;
}


.service-card {
    background: #211a13;

    padding: 30px 25px;

    border: 1px solid #3a2e20;
    border-radius: 10px;

    transition: 0.3s;
}


.service-card h3 {
    color: #d4af37;
    font-size: 22px;
    margin-bottom: 15px;
}


.service-card p {
    color: #d8cbb8;
    font-size: 15px;
}


.service-card:hover {
    transform: translateY(-8px);

    border-color: #d4af37;

    box-shadow:
        0 10px 25px rgba(212, 175, 55, 0.15);
}


/* =========================
   GALLERY
========================= */

#gallery {
    background: #211a13;
    text-align: center;
}


.gallery-container {
    width: 100%;
    max-width: 1250px;
    margin: auto;
}


#gallery>div>p:first-child {
    color: #d4af37;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: bold;
}


#gallery h2 {
    margin-bottom: 15px;
}


#gallery>div>p:nth-child(3) {
    color: #d8cbb8;
    margin-bottom: 40px;
}


/* Gallery Grid */

.gallery-grid {
    width: 100%;

    display: grid;

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

    gap: 30px;
}


/* Gallery Card */

.gallery-item {
    width: 100%;

    background: #17120d;

    border: 1px solid #3a2e20;

    border-radius: 12px;

    overflow: hidden;

    transition: 0.3s;
}


.gallery-item img {
    width: 100%;

    height: 380px;

    object-fit: cover;

    display: block;
}


.gallery-item h3 {
    padding: 22px;

    color: #d4af37;

    font-size: 22px;
}


.gallery-item:hover {
    transform: translateY(-8px);

    border-color: #d4af37;

    box-shadow:
        0 10px 25px rgba(212, 175, 55, 0.15);
}


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

#contact {
    background: #17120d;
}


#contact>div {
    width: 100%;
    max-width: 850px;
    margin: auto;
}


#contact>div>p:first-child {
    color: #d4af37;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: bold;
}


#contact h2 {
    margin-bottom: 15px;
}


#contact>div>p {
    color: #d8cbb8;
}


#contact form {
    margin-top: 35px;

    display: grid;

    gap: 12px;
}


#contact label {
    color: #f5ead7;

    font-weight: bold;

    margin-top: 10px;
}


#contact input,
#contact select,
#contact textarea {
    width: 100%;

    padding: 14px;

    background: #211a13;

    color: #f5ead7;

    border: 1px solid #3a2e20;

    border-radius: 6px;

    font-size: 16px;

    outline: none;
}


#contact input:focus,
#contact select:focus,
#contact textarea:focus {
    border-color: #d4af37;
}


#contact textarea {
    min-height: 140px;

    resize: vertical;
}


#contact button {
    margin-top: 15px;

    padding: 14px 25px;

    background: #d4af37;

    color: #17120d;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}


#contact button:hover {
    background: #f0d36a;

    transform: translateY(-3px);
}


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

#shop-contact {
    background: #211a13;

    text-align: center;
}


#shop-contact>div {
    width: 100%;
    max-width: 850px;
    margin: auto;
}


#shop-contact h2 {
    font-size: 36px;

    margin-bottom: 25px;
}


#shop-contact p {
    color: #d8cbb8;

    font-size: 17px;

    margin-bottom: 18px;
}


#shop-contact a {
    display: inline-block;

    margin-top: 15px;

    padding: 13px 30px;

    background: #d4af37;

    color: #17120d;

    text-decoration: none;

    font-weight: bold;

    border-radius: 5px;

    transition: 0.3s;
}


#shop-contact a:hover {
    background: #f0d36a;

    transform: translateY(-3px);
}


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

footer {
    background: #0d0a07;

    padding: 40px 6%;

    text-align: center;

    border-top: 1px solid #3a2e20;
}


footer h2 {
    color: #d4af37;

    font-size: 25px;

    margin-bottom: 10px;
}


footer p {
    color: #d8cbb8;

    font-size: 14px;

    margin-bottom: 8px;
}


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

@media (max-width: 768px) {

    header {
        padding: 18px 5%;
    }


    nav {
        flex-direction: column;

        gap: 20px;
    }


    nav h1 {
        font-size: 24px;

        text-align: center;
    }


    nav ul {
        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;
    }


    section {
        padding: 65px 5%;
    }


    #home {
        min-height: 75vh;
    }


    #home h2 {
        font-size: 40px;
    }


    #home p {
        font-size: 16px;
    }


    #about h2,
    #services h2,
    #gallery h2,
    #contact h2 {
        font-size: 32px;
    }


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


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


    .gallery-item img {
        height: 320px;
    }


    footer {
        padding: 30px 5%;
    }

}
/* =========================
   SCROLL ANIMATION
========================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}


.reveal.show {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   THEME BUTTON
========================= */

#themeBtn {
    background: none;

    border: 1px solid #d4af37;

    color: #d4af37;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-size: 20px;

    cursor: pointer;

    transition: 0.3s;
}


#themeBtn:hover {
    background: #d4af37;

    color: #17120d;

    transform: rotate(15deg);
}


/* =========================
   LIGHT THEME
========================= */

body.light-theme {
    background: #f4ead8;

    color: #2b2118;
}


body.light-theme header {
    background: #fff8ec;
}


body.light-theme nav a {
    color: #2b2118;
}


body.light-theme nav a:hover {
    color: #a67c00;
}


body.light-theme #home {
    background:
        linear-gradient(
            rgba(244, 234, 216, 0.78),
            rgba(244, 234, 216, 0.92)
        ),
        url("images/shop.jpg") center/cover no-repeat;
}


body.light-theme #home h2 {
    color: #2b2118;
}


body.light-theme #home p {
    color: #4b4034;
}


body.light-theme #about,
body.light-theme #gallery,
body.light-theme #shop-contact {
    background: #fff4e2;
}


body.light-theme #services,
body.light-theme #contact {
    background: #f4ead8;
}


body.light-theme .service-card,
body.light-theme .gallery-item {
    background: #fff8ec;

    border-color: #d8c49d;
}


body.light-theme .service-card p,
body.light-theme #gallery > div > p:nth-child(3),
body.light-theme #contact > div > p,
body.light-theme #shop-contact p {
    color: #5b5043;
}


body.light-theme #contact input,
body.light-theme #contact select,
body.light-theme #contact textarea {
    background: #fff8ec;

    color: #2b2118;

    border-color: #d8c49d;
}


body.light-theme footer {
    background: #2b2118;
}