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

body, html {
    margin: 0;
    padding: 0;
}

/* Mobile-First (Default Styles for screens 600px and below) */

/* Header */
/* Header - Default State */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.header a,
.studio-name,
.photography {
    color: black; /* Default text color before scrolling */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Header - When Scrolled */
.header.scrolled {
    background-color: rgba(0, 0, 0, 0.7); /* Background color when scrolled */
}

.header.scrolled a,
.header.scrolled .studio-name,
.header.scrolled .photography {
    color: white; /* Change text color to white when scrolled */
}

/* Logo and Text Container */
.logo-container {
    display: flex; /* Align the logo and text side by side */
    align-items: center; /* Vertically align the logo and text */
}

.logo-container a {
    display: flex; /* Flexbox for the anchor tag to align content horizontally */
    align-items: center; /* Align logo and text vertically within the link */
    text-decoration: none; /* Remove underline from the link */
}

/* Logo Styles */
.logo-container img {
    height: 60px; /* Smaller logo for mobile-first */
    margin-right: 15px; /* Space between logo and text */
	filter: grayscale(100%);
    transition: filter 0.5s ease; /* Smooth transition from grayscale to color */
}


/* When scrolled, logo becomes colored */
.scrolled .logo-container img {
    filter: grayscale(0%);
}



/* Text Container for BLISS STUDIOS and PHOTOGRAPHY */
.text-container {
    display: flex;
    flex-direction: column; /* Stack BLISS STUDIOS and PHOTOGRAPHY vertically */
    justify-content: center; /* Center the text vertically */
}

/* Styling for BLISS STUDIOS and PHOTOGRAPHY */
.studio-name {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em; /* Smaller font for mobile-first */
    color: #333;
}

.photography {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1em; /* Smaller font for mobile-first */
    color: #333;
    margin-top: -5px; /* Fine-tune the space between BLISS STUDIOS and PHOTOGRAPHY */
}

/* Hero Section */
.hero-section {
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Ensure no extra space or scroll bars */
}

.hero-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: 30% 30%; /* Adjust based on the part you want to show */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    filter: grayscale(100%);
    transition: filter 1.9s ease, object-position 0.5s ease;
}

.page-hero {
        height: auto; /* Set height to 100px for mobile */
        width: 100%; /* Keep width proportional to the height */
    }

/* Hover effect: remove grayscale */
.hero-section:hover .hero-image {
    filter: grayscale(0%);
}

/* Hero Text */
.hero-text-index {
    position: absolute;
    top: 45%; /* Adjusted for mobile-first */
    left: 50%;
    width: 220px;
    transform: translate(-50%, -50%);
    color: black;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.3); /* Low-opacity white background */
    border: 2px solid black;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    z-index: 5;
    text-align: center;
	 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); 
}

.hero-text-index h1 {
    font-size: 1.7em;
    margin-bottom: 10px;
}

.hero-text-index p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Quote Text Styling */
.quote-text {
    font-family: 'Great Vibes', cursive; /* Ensure the correct font is applied */
    font-size: 1.3em; /* Adjust the font size */
    color: black; /* White text */
    text-align: center; /* Center the quote horizontally */
    position: relative; /* Use relative positioning */
    top: 100px; /* Adjust the space below the nav */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Ensure the text is above the hero image */
    width: 80%; /* Limit the width of the text */
    padding: 0 10px; /* Add padding to the sides */
}

/* Call-to-Action Button */
.cta-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: black;
    color: white;
    border: 2px solid black;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-size:  .75em;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    position: absolute;
    top: 60%; /* Adjusted for mobile-first */
    left: 50%;
    transform: translateX(-50%);
	 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); 
}

/* Menu Button for Mobile */
nav a {
    font-size: 0.9em; /* Smaller text size for mobile */
    color: white;
    padding: 10px;
    text-decoration: none;
    font-family: 'Arial', sans-serif;
}

/* Menu Button (Mobile Only) */
.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em; /* Smaller font for mobile-first */
    color: #333;
    padding: 15px;
    border: none;
    background: none;
    z-index: 1100;
    right: 20px;
    position: absolute;
    top: 7px;
}

.menu-button .menu-icon {
    width: 35px;
    height: 35px;
    margin-right: -9px;
}

/* Menu (Initially Hidden) */
.menu {
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 200px;
    left: -40px;
    width: 100%;
    height: calc(100vh - 120px);
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 900;
    overflow-y: auto;
    padding-top: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Active menu */
.menu.active {
    display: flex;
}

.menu li {
    list-style: none;
    margin: 10px 0;
}

.menu li a {
    color: white;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em; /* Smaller font for mobile-first */
    color: #333;
}

.menu li a:hover {
    text-decoration: underline;
}

/* Main Menu (UL) Styling */
.menu {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    z-index: 900;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.menu.active {
    display: flex;
}

.menu li {
    list-style: none;
    margin: 10px 0;
}

.menu li a {
    color: white;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em; /* Smaller font for mobile-first */
    color: white;
}

/* Subpage Links */
.menu .dropdown-content {
    display: none;
    padding-left: 20px;
}

.menu li:hover .dropdown-content {
    display: block;
}

.menu .dropdown-content li a {
    font-size: 1.2em;
    color: #ddd;
}

/* Exit Button */
.exit-button img {
    width: 40px;
    cursor: pointer;
}

/* Desktop Navigation - Hidden by Default */
.desktop-nav {
    display: none; /* Hide on mobile */
}

/* Desktop Menu */
.menu-desktop {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-desktop li {
    margin: 0 5px;
}

.menu-desktop li a {
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
}

/* Add separator between desktop nav links */
.menu-desktop li a:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    color: white;
}


/* Social Media Icons in Mobile Dropdown */
.menu .socials {
    display: flex;
    justify-content: center; /* Center the icons */
    margin-bottom: 20px; /* Add space between the icons and the rest of the menu */
}

.menu .socials a {
    margin: 0 10px; /* Space between the icons */
    display: inline-block;
}

.menu .socials img {
    width: 50px; /* Icon size */
    height: 50px;
    transition: transform 0.3s ease; /* Smooth hover effect */
	 
}

.menu .socials a:hover img {
    transform: scale(1.1); /* Slight hover enlarge */
}














/* About Page Styling */
    .about-content {
        padding: 40px 20px; /* Padding around the content */
        max-width: 1000px; /* Maximum width for the content area */
        margin: 0 auto; /* Center the content */
        color: #333; /* Text color */
        text-align: left; /* Align text to the left */
        font-family: Arial, sans-serif; /* General font style */
        background-color: #f9f9f9; /* Light background for contrast */
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft drop shadow */
    }

    .about-content h2 {
        font-family: 'Dancing Script', cursive; /* Font for headings */
        font-size: 2em; /* Font size for headings */
        margin-bottom: 20px; /* Space below heading */
        color: #e28f92; /* Text color for headings */
        text-decoration: underline; /* Underline the headings */
        text-decoration-thickness: 2px; /* Thickness of the underline */
        text-underline-offset: 8px; /* Distance of underline from text */
    }

    .about-content p {
        font-size: 1.2em; /* Font size for paragraphs */
        margin-bottom: 20px; /* Space below paragraphs */
        line-height: 1.6; /* Line height for readability */
        padding: 0 20px; /* Padding around paragraphs */
        color: #555; /* Text color for body */
    }

    
   /* More Menu Styles */
    .more-menu-container {
        text-align: center;
        margin: 20px 0;
    }

    .more-menu-button {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
        color: #e28f92;
    }

    .more-menu-button .menu-icon {
        width: 24px;
        margin-right: 10px;
    }

    .more-menu {
        display: none;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 10px;
        text-align: center;
        margin-top: 10px;
    }

    .more-menu.active {
        display: flex;
    }

    .more-menu li {
        list-style-type: none;
        padding: 10px 0;
    }

    .more-menu li a {
        color: white;
        text-decoration: none;
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
    }

    .more-menu li a:hover {
        text-decoration: underline;
    }











/* Portfolio Page (Mobile-First) */
.portfolio-section {
    padding-top: 120px;
    text-align: center;
    background-color: #f9f9f9;
}

.portfolio-title {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em; /* Mobile-first size */
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.photography-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.portfolio-btn {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1em; /* Mobile-first button size */
    background-color: #e28f92;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
}

.portfolio-btn:hover {
    background-color: #d16b7e;
    transform: scale(1.05);
}

/* Gallery Container (Mobile-First) */
.portfolio-gallery {
    padding: 20px 0;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.placeholder-text {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.3em; /* Mobile-first text size */
    color: #888;
    margin-top: 15px;
}

/* Styling for the images (Mobile-First) */
/* Ensure images retain their aspect ratio and correct orientation */
.portfolio-img {
    width: 100%; /* Set width to 100% of container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image covers its container while maintaining aspect ratio */
    object-position: center; /* Center the image in its container */
    max-width: 150px; /* Adjust this to fit your gallery size needs */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-img:hover {
    transform: scale(1.05);
}


/* Flexbox for Images (Mobile-First) */
.portfolio-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Lightbox Close Button */
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px; /* Adjust size as necessary */
    height: 30px;
    cursor: pointer;
}










/* Contact Page Mobile */
/* Contact Section */
.contact-section {
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Underline for Contact Us heading and push it down */
.contact-section h2.underline {
    text-decoration: underline;
    text-align: center;
    margin-top: 60px; /* Adjust margin to push it down */
    margin-bottom: 30px; /* Add space below heading */
    font-family: 'Cinzel', serif; /* Your font family */
    font-size: 2em; /* Adjust the font size if needed */

}


.contact-info-text {
    font-family: 'Dancing Script', cursive; /* Or any other font to match your theme */
    font-size: 1.4em; /* Adjust size as needed */
    text-align: center; /* Center the text */
    color: #333; /* Dark color for contrast */
    margin-bottom: 20px; /* Space below the paragraph */
    padding: 10px 20px; /* Adds padding around the text */
    background-color: #f9f9f9; /* Light background color */
    border: 2px solid #e28f92; /* Border matching your theme's color */
    border-radius: 8px; /* Rounded corners */
    max-width: 400px; /* Limit the width */
    margin-left: auto; /* Center align */
    margin-right: auto; /* Center align */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6); /* Soft shadow for a subtle effect */
}

/* Social Media Icons Grid */
.social-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

.social-contact img {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-contact:hover img {
    transform: scale(1.1);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6);
}

/* Divider with "or" */
.divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.divider-line {
    border-top: 1px solid #ccc;
    flex-grow: 1;
    margin: 0 10px;
}

.divider-text {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #666;
}

/* Form Container */
.form-container {
    padding: 40px 2%;
    background-color: #ffffff; /* White background for the form container */
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); /* Drop shadow effect */
    max-width: 700px; /* Limit the width for larger screens */
    margin: 40px auto; /* Center the container on the page */
}

.form-container h3 {
    font-family: 'Cinzel', serif;
    font-weight: 300;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Form Group */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    color: #333;
    display: block;
    margin-bottom: 5px;
    font-size: 1.2em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 90%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.2em;
    background-color: #f9f9f9;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #e28f92; /* Highlight color on focus */
    outline: none;
}

/* Placeholder Text */
.form-group input::placeholder,
.form-group textarea::placeholder {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #aaa; /* Light grey color for the placeholder */
}

/* Submit Button */
.submit-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #e28f92;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.submit-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.submit-btn:hover {
    background-color: #d0707e; /* Darker on hover */
}




/* Confirmation Container */
.confirmation-container {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
    padding: 40px;
    max-width: 600px;
    width: 90%;
    margin: 150px auto;
    text-align: center;
}

/* Portfolio Button */
.portfolio-button-container {
    text-align: center;
    margin-top: 20px;
}

.portfolio-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #e28f92;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

.portfolio-btn:hover {
    background-color: #d0707e;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.4);
}










/* Hide Desktop Icons on Mobile */
@media (max-width: 980px) {
    .social-icons-desktop {
        display: none; /* Hide icons on mobile */
    }
}


/* Larger phones and tablets (650px - 980px) */
@media only screen and (min-width: 650px) and (max-width: 980px) {
    body {
        /* Styles for larger phones and small tablets */
    }
    .quote-text {
        /* Adjust hero text positioning for larger phones and tablets */
        top: 15%; /* Example adjustment */
        width: 350px;
        left: 75%;
    }
    .social-icons-desktop {
        display: none; /* Hide icons on mobile */
    }

    /* Call-to-Action Button */
.cta-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: black;
    color: white;
    border: 2px solid black;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-size:  .65em;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    position: absolute;
    top: 60%; /* Adjusted for mobile-first */
    left: 75%;
    transform: translateX(-50%);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); 
}
}













/* Styles for Tablets and Larger Screens */
@media only screen and (min-width: 981px) {
    .logo-container img {
        height: 100px; /* Larger logo for bigger screens */
    }

	    .desktop-nav {
        display: flex;
    }

    .mobile-nav {
        display: none;
    }

    /* Adjust logo size for desktop */
    .logo-container img {
        height: 80px;
    }


    .studio-name {
        font-size: 1.5em; /* Larger font size for BLISS STUDIOS */
    }

    .photography {
        font-size:  1.15em; /* Larger font size for PHOTOGRAPHY */
    }

    .hero-section {
        background-position: 20% 30%; /* Adjust background position */
    }

    .hero-text-index {
        top: 53%; /* Adjust position for larger screens */
		  left: 80%;
        font-size: 1em; /* Larger font size */
        padding: 2px 10px; /* Adjust padding */
		     
    }

    .quote-text {
        font-size: 2em; /* Adjust font size for larger screens */
        top: 85px; /* Adjust position below nav */
        width: 90%; /* Adjust width if needed */
    }

    .cta-button {
        top: 45%; /* Adjust button position for larger screens */
		   left: 80%;
        font-size: 1em; /* Increase font size */
        padding: 15px 20px; /* Increase padding */
			width: 220px;
    }
	nav a {
        font-size: 1em; /* Larger text size for desktop */
        color: white;
        padding: 10px;
        text-decoration: none;
        font-family: 'Cinzel', serif;
    }

    nav a:hover {
    color: #e28f92; /* Change to your desired hover color */
    text-decoration: underline; /* Add underline on hover */
    transform: scale(1.3); /* Slightly increase size on hover */
}



    /* Hide the mobile menu button on desktop */
        .desktop-nav {
        display: flex;
    }

    .more-menu-container {
        display: none;
    }

	.hero-image {
        object-position: 50% 50%; /* Center the image on larger screens */
    }

/* Social Media Icons */
.social-icons-desktop {
    display: flex;
    justify-content: center;
    margin-top: 5px; /* Adds space between the nav links and the social icons */
    gap: 20px; /* Adds space between the icons */
}

.social-icons-desktop a img {
    width: 30px; /* Adjust size of icons */
    height: auto;
    transition: transform 0.3s ease;
}

.social-icons-desktop a img:hover {
    transform: scale(1.1); /* Enlarge slightly on hover */
}





    .page-hero {
    width: 100%; /* Set the width to 100% of its container */
    height: 450px; /* Set the desired height */
    object-fit: cover; /* Ensures the image fills the container without stretching */
    object-position: center; /* Centers the image within the container */
    display: block; /* Ensures no space around the image */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    border: none; /* Ensure no borders are applied */
    overflow: hidden; /* Prevent overflow causing the repeat border issue */
    }





    /* About Page Desktop */

    .about-content {
        padding: 50px 20px; /* Padding around the content */
        max-width: 50%; /* Maximum width for the content area */
        margin: 20px auto; /* Center the content */
        color: #333; /* Text color */
        text-align: left; /* Align text to the left */
        font-family: Arial, sans-serif; /* General font style */
        background-color: #f9f9f9; /* Light background for contrast */
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Soft drop shadow */
    }




    /* Portfolio Desktop */

    .portfolio-section {
        padding: 150px 20px;
    }

    .portfolio-title {
        font-size: 2.2em; /* Larger size for bigger screens */
        margin-bottom: 30px;
    }

    .photography-types {
        gap: 20px; /* Increase the gap between buttons */
    }

    .portfolio-btn {
        font-size: 1.2em; /* Larger buttons */
        padding: 15px 30px;
    }

    .portfolio-gallery {
        padding: 30px 0;
        border-radius: 15px;
    }

    .portfolio-img {
        max-width: 250px; /* Larger image size for bigger screens */
    }

    .placeholder-text {
        font-size: 1.5em; /* Larger text size */
        margin-top: 20px;
    }

}







/* Original CSS */

/* About Page Styling */
    .about-content {
        padding: 40px 20px; /* Padding around the content */
        max-width: 1000px; /* Maximum width for the content area */
        margin: 0 auto; /* Center the content */
        color: #333; /* Text color */
        text-align: left; /* Align text to the left */
        font-family: Arial, sans-serif; /* General font style */
        background-color: #f9f9f9; /* Light background for contrast */
        border-radius: 15px; /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft drop shadow */
    }

    .about-content h2 {
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
        color: #333;
        margin-bottom: 20px; /* Space below heading */
        color: #e28f92; /* Text color for headings */
        text-decoration: underline; /* Underline the headings */
        text-decoration-thickness: 2px; /* Thickness of the underline */
        text-underline-offset: 8px; /* Distance of underline from text */
    }

    .about-content p {
        font-size: 1.2em; /* Font size for paragraphs */
        margin-bottom: 20px; /* Space below paragraphs */
        line-height: 1.6; /* Line height for readability */
        padding: 0 20px; /* Padding around paragraphs */
        color: #555; /* Text color for body */
    }

    


    /* Blog Page Specific Styles */
    .blog-content {
        padding: 40px 20px;
        max-width: 1000px;
        margin: 0 auto;
        color: #333;
        text-align: center;
    }

    .blog-content h2 {
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
        color: #333;
        margin-bottom: 20px;
        color: #e28f92;
        display: inline-block;
        border-bottom: 2px solid #e28f92;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .blog-post {
        margin-bottom: 40px;
        text-align: left;
    }

    .blog-post h3 {
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
        color: #333;
        margin-bottom: 10px;
    }

    .blog-post p {
        font-size: 1.1em;
        line-height: 1.8;
        margin-bottom: 10px;
    }

    .blog-post a {
        color: #e28f92;
        text-decoration: none;
        font-size: 1.1em;
    }

    .blog-post a:hover {
        text-decoration: underline;
    }

    /* Footer */
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px 0;
        position: relative;
    }
    /* Client Privacy Page Styles */

    /* General Styling for the Content Section */
    .privacy-content {
        padding: 40px 20px;
        max-width: 1000px;
        margin: 0 auto;
        color: #333;
        text-align: left; /* Aligns text to the left */
    }

    .privacy-content h2 {
        font-family: 'Cinzel', serif;
        font-weight: 300;
        font-size: 1.8em; /* Smaller font for mobile-first */
        color: #333;
        margin-bottom: 20px;
        color: #e28f92;
        display: inline-block;
        border-bottom: 2px solid #e28f92;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .privacy-content p {
        font-size: 1.1em;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    /* Additional styles for the PDF modal */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; 
        z-index: 1000; /* On top of other content */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: hidden; /* Prevent scrolling outside the modal */
        background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
    }

    .modal-content {
        margin: 5% auto; /* Centered in the screen */
        width: 77%; /* Increased width */
        max-width: 990px; /* Maximum width */
        height: 80%; /* Adjusted height */
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        padding: 0;
        overflow: hidden; /* Prevents scrollbars on modal content */
    }

    .modal-content object {
        width: 100%;
        height: calc(100% - 40px); /* Height adjusted to account for padding */
        border: none;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-right: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
    }

    /* Disable scrolling on the body when the modal is open */
    body.modal-open {
        overflow: hidden;
    }

    /* Ensure the menu has a higher z-index when open */
    .menu.active {
        z-index: 1100; /* Higher than modal */
    }




    /* FAQs Page Styles */

    /* General Styling for the FAQs Section */
    .faqs-content {
        padding: 40px 20px;
        max-width: 1000px;
        margin: 0 auto;
        color: #333;
        text-align: center;
    }

    .faq-item {
        margin-bottom: 20px;
    }

    /* FAQ Headings */
    .faqs-content h3 {
        font-family: 'Dancing Script', cursive;
        font-size: 1.8em;
        margin-bottom: 15px;
        color: #e28f92;
        display: inline-block;
        border-bottom: 2px solid #e28f92; /* Custom underline */
        padding-bottom: 5px; /* Space between text and underline */
        margin-bottom: 10px; /* Additional space below the underline */
    }

    /* FAQ Paragraphs */
    .faqs-content p {
        font-size: 1.1em;
        margin-bottom: 20px;
        line-height: 1.8;
        text-align: left;
    }

    /* Additional styles for the PDF modal */
    .modal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index: 1000; /* On top of other content */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: hidden; /* Prevent scrolling outside the modal */
        background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
    }

    .modal-content {
        margin: 5% auto; /* Centered in the screen */
        width: 77%; /* Increased width */
        max-width: 990px; /* Maximum width */
        height: 80%; /* Adjusted height */
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        padding: 0;
        overflow: hidden; /* Prevents scrollbars on modal content */
    }

    .modal-content object {
        width: 100%;
        height: calc(100% - 40px); /* Height adjusted to account for padding */
        border: none;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-right: 10px;
        margin-top: 10px;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
    }

    /* Disable scrolling on the body when the modal is open */
    body.modal-open {
        overflow: hidden;
    }

    /* Footer */
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px 0;
    }

    /* Family Portraits Page Specific Styles */





    .hero-text {
        position: absolute;
        top: 150px;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.8);
        color: #e28f92;
        padding: 6px 20px;
        border-radius: 10px;
        font-family: 'Dancing Script', cursive;
        z-index: 5;
    }



    /* Book Now Button */
    .book-now-btn-container {
        display: flex;
        justify-content: center;
        margin: 20px -50px; /* Space above and below the button */
    }

    .book-now-btn {
        display: inline-block;
        padding: 15px;
        background-color: #e28f92;
        color: white;
        text-decoration: none;
        border-radius: 10px;
        font-family: 'Dancing Script', cursive;
        font-size: 1.5em;
        transition: background-color 0.3s ease;
    }

    .book-now-btn:hover {
        background-color: #d0707e;
    }

    /* Terms & Conditions Page Specific Styles */

    /* Terms & Conditions Content */
    .terms-content {
        padding: 40px 20px;
        max-width: 1000px;
        margin: 0 auto;
        color: #333;
        text-align: center;
    }

    .terms-content h2 {
        font-family: 'Dancing Script', cursive;
        font-size: 2em;
        margin-bottom: 20px;
        color: #e28f92;
        display: inline-block;
        border-bottom: 2px solid #e28f92; /* Custom underline */
        padding-bottom: 5px; /* Space between text and underline */
        margin-bottom: 10px; /* Additional space below the underline */
    }

    .terms-content p {
        font-size: 1.1em;
        margin-bottom: 20px;
        line-height: 1.8;
        text-align: left;
    }

    .terms-content ul {
        text-align: left;
        margin-bottom: 20px;
        list-style-type: disc;
        padding-left: 40px;
    }

    .terms-content li {
        margin-bottom: 10px;
    }



    /* Adjusted Gallery Container */
    .hero-gallery {
        width: 100%;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: background-image 0.5s ease-in-out;
    }


    .packages {
        padding: 40px 20px;
        max-width: 1000px;
        margin: 0 auto;

    }

    .packages h2 {
        font-size: 1.9em;
        font-family:'Dancing Script', cursive;
        text-align: center;
    }

    .package {
        background-color: #f0f0f0;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        transition: transform 0.3s ease;
    }

    .package:hover {
        transform: translateY(-5px);
    }

    .package h3 {
        font-family: 'Dancing Script', cursive;
        font-size: 1.8em;
        margin-bottom: 10px;
        color: #e28f92;
    }

    .package p {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .package ul li {
        text-align: left;
    }

    .btn-book {
        background-color: #e28f92;
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
        font-family: 'Dancing Script', cursive;
        font-size: 1.2em;
        display: inline-block;
        margin-bottom: 20px;
    }

    .btn-book:hover {
        background-color: #d16b7e;
    }

    /* Event Styling */

    /* Note Section Styling */
    .note-section {
        display: flex;
        justify-content: center;
        padding: 20px 0;
    }

    .note-content {
        max-width: 800px;
        background-color: #fff;
        color: #333;
        font-size: 1.1em;
        font-style: italic;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        line-height: 1.6;
        text-align: center;
    }

    .note-content p {
        margin: 0;
    }

    /* Portfolio Gallery Section */
    .portfolio-gallery {
        padding: 40px 20px;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px; /* Spacing between gallery items */
        justify-content: center;
    }




    /* Lightbox Effect */
    .lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .lightbox-content {
        position: relative;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .lightbox img {
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 10px;
    }

    .lightbox .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 2em;
        color: #333;
        cursor: pointer;
    }












    /* Form Styles */

  


    .service-selection-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Service Card Styling */
    .services-container {
        display: flex;
        flex-wrap: wrap; /* Allows the cards to wrap to the next line */
        justify-content: space-between; /* Evenly distribute the cards */
        gap: 5px; /* Smaller gap between each card */
        padding: 10px; /* Smaller padding around the container */
    }

    /* Ensure the last card is centered when the number of items is odd */
    .services-container .service-card {
        width: 45%;
        height: 120px;
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
        background-color: #ffffff;
        margin: 5px;
        border: 2px solid transparent;
    }

    .services-container .service-card:nth-child(odd):last-child {
        margin-left: auto;
        margin-right: auto;
        width:45%; /* Make it span the full width to center it */
        display: flex;
        justify-content: center; /* Center the content inside the last card */
    }


    /* Hover effect */
    .service-card:hover {
        transform: scale(1.05);
    }

    /* Selected state with red outline */
    .service-card.selected {
        border: 3px solid #e28f92;
        transform: scale(1.05);
    }



    /* Image Styling for Service Cards */
    .service-card img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Scale the image, cropping it to fill the container */
        object-position: center; /* Center the image within the container */
        border-radius: 10px; /* Match rounded corners of the card */
    }

    /* Adjust the text size and alignment inside the service card */
    .service-card h3 {
        font-size: 1em; /* Change this value to increase or decrease the size */
        font-weight: bolder; /* Adjust the font weight */
        color: #fff; /* Text color */
        text-align: center; /* Center the text */
        margin: 0; /* Remove any margin */
        padding: 10px 0; /* Add padding if needed */
        font-family: 'Dancing Script', cursive; /* Use a custom font */
    }

    /* Service Overlay Styling */
    .service-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 15px;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
        color: #fff;
        text-align: center;
        font-family: 'Dancing Script', cursive;
        font-size: 1.5em;
        border-radius: 0 0 10px 10px; /* Match rounded corners of the card content */
    }


    /* Form Steps */
    .form-step {
        display: none;
    }

    /* Center and style the h2 in the form */
    .form-step h2 {
        font-family: 'Dancing Script', cursive; /* Your preferred font */
        text-align: center; /* Center the heading */
        font-size: 1.8em; /* Adjust the font size if needed */
        color: #e28f92; /* Custom color for the text */
        border-bottom: 2px solid #e28f92; /* Underline with your desired color */
        padding-bottom: 10px; /* Add spacing between text and underline */
        margin-bottom: 30px; /* Space below the heading */
    }


    .form-step.active {
        display: block;
    }



    /* Form Group */
    .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .form-group label {
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 5px;
        font-family: 'Dancing Script', cursive;
        font-size: 1.2em;
        color: #e28f92; /* Pink color */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 90%;
        height: 40px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1em;
        background-color: #f9f9f9;
        color: ;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #e28f92; /* Highlight color on focus */
    }

    /* Placeholder Styling */
    .form-group input::placeholder,
    .form-group select::placeholder,
    .form-group textarea::placeholder {
        font-family: 'Dancing Script', cursive; /* Change this to your preferred font */
        font-size: 1.2em; /* Adjust the size if needed */
        color: #aaa; /* Light grey color for the placeholder */
    }




    /* Calendar Input Field Styles */
    .form-group {
        position: relative; /* Make the container relative for positioning the icon */
        margin-bottom: 30px; /* Space below each form group */
    }

    /* Calendar Input Field */
    #session-date {
        width: 100%;
        padding: 15px 20px; /* Add padding inside the input */
        border: 1px solid #ddd; /* Border around the input */
        border-radius: 10px; /* Rounded corners */
        font-size: 16px; /* Font size */
        font-family: 'Dancing Script', cursive; /* Font style for the placeholder */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
        transition: border-color 0.3s ease; /* Smooth transition for border color */
        cursor: pointer; /* Make cursor pointer to indicate clickable field */
        text-align: center; /* Center text inside the input */
    }

    .calendar-label {
        font-family: 'Dancing Script', cursive;
    }

    /* Placeholder Text */
    #session-date::placeholder {
        color: #aaa; /* Light grey color for placeholder */
        font-family: 'Dancing Script', cursive; /* Placeholder font */
        font-size: 16px; /* Placeholder font size */
    }

    /* Calendar Icon */
    .calendar-icon {
        position: absolute;
        top: 50%; /* Center vertically */
        right: 10px; /* Position from the right */
        transform: translateY(-50%); /* Center icon vertically */
        cursor: pointer; /* Indicate the icon is clickable */
        font-size: 20px; /* Adjust icon size */
        color: #e28f92; /* Icon color */
    }
    #session_date {
        z-index: 1000; /* Ensure input is above other elements */
    }



    /* Active and Hover State for Input */
    #session-date:focus {
        border-color: #e28f92; /* Change border color when focused */
        outline: none; /* Remove default outline */
    }

    /* Styling for Disabled Dates (Unavailable Dates) */
    .flatpickr-day.disabled, .flatpickr-day.disabled:hover {
        background-color: #f7d1d1 !important; /* Light red background for unavailable dates */
        color: #aaa !important; /* Grey out text */
        pointer-events: none; /* Make it unclickable */
        opacity: 0.6; /* Slightly faded appearance */
    }

    /* Styling for Available Dates (Optional) */
    .flatpickr-day.available {
        background-color: #e0f7e0 !important; /* Light green background for available dates */
        color: #333; /* Darker text for readability */
    }

    /* Styling for Selected Date */
    .flatpickr-day.selected, .flatpickr-day.selected:hover {
        background-color: #e28f92 !important; /* Your custom pink color for selected dates */
        color: #fff !important; /* White text for contrast */
    }

    /* Flatpickr Calendar Styles */
    .flatpickr-calendar {
        border-radius: 10px; /* Rounded corners for the calendar */
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
    }

    .flatpickr-months {
        font-family: 'Dancing Script', cursive; /* Custom font for the month header */
    }

    .flatpickr-month {
        background-color: #e28f92; /* Custom color for the month header */
        color: #fff; /* White text for contrast */
    }

    .flatpickr-weekdays {
        font-family: 'Dancing Script', cursive; /* Custom font for the weekdays */
    }


    /* Form Navigation */
    .form-navigation {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .next-btn, .prev-btn {
        padding: 15px 30px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-family: 'Dancing Script', cursive;
        font-size: 1.2em;
        background-color: #e28f92;
        color: #ffffff;
        transition: background-color 0.3s ease;
    }

    .next-btn:hover, .prev-btn:hover {
        background-color: #d16b7e;
    }

    .prev-btn {
        margin-right: auto;
    }

    .next-btn {
        margin-left: auto;
    }

    .submit-btn {
        padding: 15px 30px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-family: 'Dancing Script', cursive;
        font-size: 1.2em;
        background-color: #e28f92;
        color: #ffffff;
        transition: background-color 0.3s ease;
        margin-left: auto; /* Align submit button to the right */
        display: inline-block;
    }

    .submit-btn:hover {
        background-color: #d16b7e;
    }



    /* CSS for Slide Animation */
    .form-step {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        transform: translateX(100%);
    }

    .form-step.active {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }



    .step-bar-container {
        width: 90%;
        max-width: 770px;
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
        padding: 10px;
        margin: 20px auto;
        display: flex;
        justify-content: center;
    }

    .step-bar {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .step {
        width: 15%; /* Decreased width to fit steps side by side */
        background-color: #e28f92;
        color: white;
        border-radius: 10px;
        text-align: center;
        padding: 5px 0;
        margin: 0 2px; /* Added margin to create space between steps */
    }

    .step.completed {
        background-color: #d16b7e;
    }



    /* Hide radio buttons */
    .hidden-radio {
        display: none;
    }

    input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none; /* Ensures the radio button doesn't interfere with clicking */
    }

    /* Package Container Styling */
    .package-container {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        background-color: #f9f9f9;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .package-container:hover {
        background-color: #e8f1f9;
    }

    .package-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .package-header h4 {
        margin: 0;
        font-size: 1.2em;
    }

    .package-details {
        display: none; /* Initially hide package details */
        padding: 10px;
        background-color: #fff;
        border-top: 1px solid #ddd;
        margin-top: 10px;
        border-radius: 0 0 10px 10px;
    }

    .package-details ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    .package-details img {
        width: 20px;
        cursor: pointer;
        margin-top: 10px;
        display: block;
    }

    .toggle-arrow {
        width: 20px;
        cursor: pointer;
    }

    .package-container.active .package-details {
        display: block; /* Show details when active */
    }

    .package-container.active .package-header img {
        display: none; /* Hide down arrow when active */
    }

    .package-details img {
        width: 20px;
        cursor: pointer;
    }

    /* Package Container Styling */
    .custom-package {
        width: 100%; /* You can adjust this to make them smaller if needed */
        border: 2px solid transparent;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        background-color: #f9f9f9;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .custom-package:hover {
        transform: scale(1.05); /* Slight zoom on hover */
        background-color: #fce8ec; /* Light pink background on hover */
    }

    /* Hidden radio button */
    .hidden-radio {
        display: none; /* Hide radio button */
    }

    /* Selected Package Style */
    .custom-package.selected {
        border-color: #e28f92; /* Pink outline for selected package */
        transform: scale(1.05); /* Slight zoom when selected */
    }

    /* Package Content Styling */
    .custom-package-content h3 {
        margin: 0;
        font-size: 1.4em;
        font-family: 'Dancing Script', cursive;
        color: #e28f92; /* Custom pink for package name */
    }

    .custom-package-content p {
        margin: 5px 0 0 0;
        color: #555;
        font-size: 1em;
    }


    /* Selected Package Styling */
    .package-container.selected {
        border: 2px solid #e28f92; /* Add red border when selected */
    }
    @media (max-width: 600px) {
        .form-container {
            padding: 20px;
        }

        .button-group button {
            width: 100%;
            margin-bottom: 10px;
        }

        .  .step {
            width: 18%; /* Set smaller width to fit steps on small screens */
            margin: 5px; /* Add margin between steps */
        }
    }

        .step {
            width: 100%;
            margin-bottom: 10px;
        }
    }


    /* Verification Section Styling */
    .verification-section {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

    .verification-item {
        margin-bottom: 15px; /* Space between each verification item */
    }

    /* Category (Label) Styling */
    .verification-item label {
        font-family: 'Dancing Script', cursive; /* Your custom font for labels */
        font-size: 1.6em; /* Make the category text larger */
        font-weight: bold;
        color: #e28f92; /* Pink color for labels */
        display: block;
        margin-bottom: 5px; /* Space between label and input value */
    }

    /* Customer's Input Information Styling */
    .verification-item p {
        font-family: Arial, sans-serif; /* Arial for customer's input */
        font-size: 1.2em; /* Adjust the size if needed */
        color: #333; /* Dark color for the input */
        margin: 0; /* Remove extra margin */
    }


  /* Contact Icons Styling */
    .icon-container {
        flex-direction: row; /* Spread icons horizontally on larger screens */
    }

    .contact-icon {
        width: 60px; /* Larger icon size for desktop */
        height: 60px;
    }

    /* Contact Form Adjustments */
    .contact-form-container {
        padding: 50px;
        margin: 100px auto;
    }

}