/* ==============================
   SYLVIA SHARP STUDIO
   MAIN STYLESHEET
   ============================== */


/* RESET */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: #FAF6F0;
    color: #333;
}


h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
    margin-top: 0;
}


p {
    font-size: 18px;
    line-height: 1.7;
}


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


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


nav {

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

    padding: 25px 8%;

    background: white;

    border-bottom: 1px solid #eee;

}


nav h2 {

    color: #8F3F5F;

    font-size: 28px;

}


nav ul {

    display: flex;

    gap: 30px;

    list-style: none;

    margin: 0;

    padding: 0;

}


nav a {

    text-decoration: none;

    color: #2F4A3C;

    font-weight: 600;

}


nav a:hover {

    color: #8F3F5F;

}


/* ==============================
   BUTTONS
   ============================== */


button {

    background: #8F3F5F;

    color: white;

    border: none;

    padding: 16px 40px;

    border-radius: 50px;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s;

}


button:hover {

    background: #2F4A3C;

    transform: translateY(-3px);

}


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


.hero,
.page-header {

    min-height: 70vh;

    width: 100%;

    background-image: url("images/hero/hero-image.jpg");

    background-size: cover;

    background-position: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 80px 10%;

    position: relative;

}


.hero::before,
.page-header::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(47,74,60,0.5);

}


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

    position: relative;

    z-index: 1;

    color: white;

}


.hero h1,
.page-header h1 {

    font-size: 60px;

}


.hero p,
.page-header p {

    max-width: 800px;

    font-size: 21px;

}


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


section {

    width: 100%;

    max-width: 1200px;

    margin: 80px auto;

    padding: 40px;

}


section h2 {

    color: #2F4A3C;

    font-size: 40px;

}


/* FULL WIDTH SECTIONS */


.portfolio-preview,
.contact-preview,
.about-values,
.one-off-services {

    max-width: none;

    width: 100%;

    margin: 80px 0;

    padding: 80px 10%;

}


/* ==============================
   HOMEPAGE
   ============================== */


.home-services {

    text-align: center;

}


.service-preview {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

    gap: 30px;

}


.service-preview div {

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.05);

}


.service-preview h3 {

    color:#8F3F5F;

}
/* ==============================
   ABOUT PAGE
   ============================== */


.about-intro {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}


.about-image img {

    width:100%;

    border-radius:25px;

    box-shadow:0 15px 40px rgba(0,0,0,0.1);

}


.about-text h2 {

    color:#2F4A3C;

}


.about-values {

    background:#F5E6EA;

    text-align:center;

}


.value-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:40px;

}


.value-grid div {

    background:white;

    padding:35px;

    border-radius:20px;

}


.value-grid h3 {

    color:#8F3F5F;

}




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


.services-intro {

    text-align:center;

}


.services-intro p {

    max-width:800px;

    margin:auto;

}


.services {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}


.service-card {

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}


.service-card h3 {

    color:#8F3F5F;

    font-size:26px;

}


.service-card ul {

    padding-left:20px;

}


.service-card li {

    margin-bottom:12px;

}


.one-off-services {

    background:#F5E6EA;

    text-align:center;

}


.one-off-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

}


.one-off-grid div {

    background:white;

    padding:30px;

    border-radius:15px;

    color:#8F3F5F;

    font-weight:bold;

}




/* ==============================
   PHOTOGRAPHY PAGE
   ============================== */


.photo-intro {

    text-align:center;

}


.photo-intro p {

    max-width:800px;

    margin:auto;

}


.gallery-section h2 {

    text-align:center;

}


.gallery-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


.gallery-grid img {

    width:100%;

    height:350px;

    object-fit:cover;

    border-radius:20px;

    transition:0.3s;

}


.gallery-grid img:hover {

    transform:scale(1.03);

}




/* ==============================
   VIDEOS PAGE
   ============================== */


.video-intro {

    text-align:center;

}


.video-intro p {

    max-width:800px;

    margin:auto;

}


.video-feature-card {

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}


.video-feature-card iframe {

    width:100%;

    height:650px;

    border:none;

    border-radius:20px;

}



.video-grid {

    display:grid;

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

    gap:40px;

}


.video-card {

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}


.video-card iframe {

    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    border-radius:15px;

}


.video-card h3 {

    color:#8F3F5F;

    font-size:26px;

    margin-top:20px;

}


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


.contact-form {

    max-width:750px;

    background:white;

    margin:80px auto;

    padding:45px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);

}


.contact-form form {

    display:flex;

    flex-direction:column;

}


.contact-form label {

    margin-top:20px;

    margin-bottom:8px;

    color:#2F4A3C;

    font-weight:bold;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    padding:14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

}


.contact-preview {

    background:#2F4A3C;

    text-align:center;

    color:white;

}


.contact-preview h2,
.contact-preview p {

    color:white;

}
/* ==============================
   FOOTER / FINAL DETAILS
   ============================== */


footer {

    background:#2F4A3C;

    color:white;

    text-align:center;

    padding:40px 10%;

}


footer p {

    margin:0;

}



/* ==============================
   ANIMATIONS
   ============================== */


.service-card,
.video-card,
.value-grid div,
.gallery-grid img {

    transition:0.3s ease;

}


.service-card:hover,
.video-card:hover,
.value-grid div:hover {

    transform:translateY(-5px);

}



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


@media (max-width:900px) {


    nav {

        flex-direction:column;

        gap:20px;

        padding:25px;

    }


    nav ul {

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }



    .hero h1,
    .page-header h1 {

        font-size:42px;

    }


    .hero p,
    .page-header p {

        font-size:18px;

    }



    section {

        padding:30px 20px;

        margin:50px auto;

    }



    .about-intro {

        grid-template-columns:1fr;

        gap:30px;

    }



    .video-grid {

        grid-template-columns:1fr;

    }



    .video-feature-card iframe {

        height:350px;

    }


}



/* ==============================
   SMALL PHONE SCREENS
   ============================== */


@media (max-width:600px) {


    nav h2 {

        font-size:24px;

    }


    nav ul {

        flex-direction:column;

        text-align:center;

    }


    .hero,
    .page-header {

        min-height:60vh;

        padding:60px 20px;

    }


    .hero h1,
    .page-header h1 {

        font-size:36px;

    }


    section h2 {

        font-size:30px;

    }


    .video-card h3 {

        font-size:22px;

    }


    .gallery-grid img {

        height:280px;

    }


}
/* FULL WIDTH HERO HEADERS */

.hero,
.page-header {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 100px 10% !important;

}
/* ==============================
   HOMEPAGE SPACING & POLISH
   ============================== */


/* INTRO SECTION */

.home-intro {

    text-align:center;

    max-width:900px !important;

    margin:100px auto !important;

}


.home-intro h2 {

    font-size:45px;

    margin-bottom:25px;

}



.home-intro p {

    font-size:20px;

}



/* SERVICES SECTION */

.home-services {

    background:#F5E6EA;

    max-width:none !important;

    width:100%;

    padding:90px 10% !important;

    margin:80px 0 !important;

}



.service-preview {

    margin-top:60px;

}



.service-preview div {

    padding:45px 30px;

    transition:0.3s;

}



.service-preview div:hover {

    transform:translateY(-8px);

}



/* PORTFOLIO SECTION */

.portfolio-preview {

    padding:100px 10% !important;

}



.portfolio-preview h2 {

    margin-bottom:25px;

}



/* WHY SECTION */

.why-us {

    padding:100px 10% !important;

}



.why-us h2 {

    margin-bottom:30px;

}



/* CONTACT SECTION */

.contact-preview {

    padding:100px 10% !important;

    margin-top:100px !important;

}
/* ==============================
   INDIVIDUAL PAGE HERO IMAGES
   ============================== */


.about-header {

    background-image:url("images/about/about-image.jpg");

}


.services-header {

    background-image:url("images/services/services-image.jpg");

}


.photography-header {

    background-image:url("images/photography/photography-image.jpg");

}


.videos-header {

    background-image:url("images/videos/videos-image.jpg");

}


.contact-header {

    background-image:url("images/contact/contact-image.jpg");

}
.videos-header {

    background-image: url("images/videos/videos-image.jpg") !important;
    background-size: cover;
    background-position: center;

}
/* HOMEPAGE BUTTON ALIGNMENT */

.home-services,
.portfolio-preview,
.why-us {
    text-align:center;
}


.home-services button {
    margin-top:50px;
}


.portfolio-buttons {
    margin-top:50px;
}