/* Basic reset */



titles: 

regular text:rgb(48, 48, 48)

lighter:  #E5E1D8

darker: #F3F1E9













/* Apply Flexbox to the wrapper */

html, body {

    height: 100%; /* Ensure full height for body and html */

    margin: 0; /* Remove default margin */

    overflow-x: hidden; /* Prevent horizontal scrolling */

}



.wrapper {

    display: flex;

    flex-direction: column; /* Arrange children in a column */

    min-height: 100vh; /* Set minimum height to full viewport height */

    overflow-x: hidden;

    margin-bottom: 50px;

  

}



/* Main content should grow to fill available space */

main {

    flex: 1; /* Allow main content to grow and fill space */

    padding: 20px; /* Add some padding for main content */

    overflow-x: hidden;

    margin-bottom: 200px;



}









body{

    

    padding-bottom: 100px;

    overflow-x: hidden;

    background-color: #ffffff;



}







h1 {

    font-size: 40px; /* Title size */

    text-align: center;

    font-weight: normal; /* Corrected from 'font-weight;' */

    margin-bottom: 10px; /* Updated margin */

    margin-top: 30px; /* Added semicolon */

    font-family: 'Mina', sans-serif; /* Assuming 'Mina Regular' is a custom font; updated syntax */

    color: rgb(171, 103, 47); /* Text color */

}



h2{

    font-size: 40px; /* title 1*/   

    text-align: center;

    font-weight: bold;

    margin-bottom: 20px;

    margin-top: 30px

    font-weight: normal;

    text-align: center;

    font-family: Joly Headline Black;

    color:rgb(48, 48, 48)

    margin-bottom: 10px;

    

}



h3{

    font-size: 20px; /* title 1*/   

    text-align: center;

    font-weight: bold;

    margin-bottom: 20px;

    margin-top: 30px

    font-weight: normal;

    text-align: center;

    font-family: Joly Headline Black;

    margin-bottom: 10px;

    color:rgb(48, 48, 48)

    

}





p{/* normal text*/  

    font-size: 20px;

    color:rgb(48, 48, 48);

    font-family: Joly Headline Regular Italic;

    

}

a{/* normal text*/  

    font-size: 20px;

    rgb(48, 48, 48)

    font-family: Joly Headline Regular Italic;

    

}



n{/* normal text*/  

    font-size: 15px;

    rgb(48, 48, 48)

    font-family: Joly Headline Regular Italic;

    color:rgb(48, 48, 48)

    

}



n:hover {

    transform: scale(1.1); /* Adds scaling effect on hover */

    transition: transform 0.6s ease-in; /* Smooth transition for scaling */



}









/* Remove extra space from body and html */

html, body {

    margin: 0;

    padding: 0;

    height: 100%; /* Make sure body takes full height of the page */

}











/* Carousel container styling */



.index-carousel {

    position: relative;

    width: 100vw; /* Full viewport width */

    height: 100vh; /* Full viewport height */

}



.index-carousel-slides {

    display: flex; /* Flexbox layout to display slides in a row */

    transition: transform 0.5s ease; /* Smooth transition for sliding */

    width: 100%; /* Adjust this to match the number of slides */

    height: 100%;

    will-change: transform; /* Optimize for the transform property */

}



.index-carousel-item {

    min-width: 100vw; /* Ensure each item takes full width of the viewport */

    height: 100vh; /* Full viewport height */

    display: flex; /* Flexbox to center the image */

    align-items: center; /* Vertically center the image */

    justify-content: center; /* Horizontally center the image */



}



.index-carousel-item img {

    width: 100%; /* Image fills the width of the container */

    height: auto; /* Maintain aspect ratio */

    max-height: 100%; /* Ensure image does not exceed container height */

    object-fit: cover; /* Cover the container while maintaining aspect ratio */

    object-position: center; /* Center the image */

}



.index-carousel-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.5);

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    cursor: pointer;

    z-index: 10;

}



.index-carousel-arrow.left-arrow {

    left: 20px;

}



.index-carousel-arrow.right-arrow {

    right: 20px;

}







/* Hamburger Icon */

#menu-icon {

    font-size: 30px;

    cursor: pointer;

    position: fixed;

    top: 20px;

    left: 20px;

    z-index: 1000;

    color: rgb(48, 48, 48);

    transition: opacity 0.5s ease; /* Smooth transition for opacity */

}



#menu-icon:hover + #side-nav,

#side-nav:hover {

    left: 0; /* Slide in from the left */

}



/* Default styles for the side navigation */

#side-nav {

    position: fixed; /* Ensure it's fixed to the side */

    top: 0;

    left: -250px; /* Start hidden off the left edge */

    width: 200px; /* Set the desired width */

    height: 100%; /* Full height of the viewport */

    background-color:  #F3F1E9; /* Background color for the sidebar */

    color: rgb(255, 255, 255); /* Text color */

    overflow-x: hidden; /* Prevent horizontal scroll */

    transition: 0.7s; /* Smooth transition for opening/closing */

    align-items: center; /* Center items horizontally */

    justify-content: center; /* Center items vertically */

    text-align: center; /* Center text within the items */

    z-index: 1000; /* Ensure sidebar is on top of other content */

}



/* Initially hide the sidebar */

#side-nav.hidden {

    left: -250px; /* Hide off the left edge */

}



/* Show the sidebar when the hamburger icon is hovered */

#menu-icon:hover + #side-nav {

    left: 0; /* Slide in from the left */

}



/* Styles for the menu icon */

#menu-icon {

    position: fixed;

    top: 20px;

    left: 20px;

    cursor: pointer;

    z-index: 1001; /* Ensure icon is on top of the sidebar */

}



/* Ensure no default styling on ul and li */

#side-nav ul {

    list-style-type: none; /* Remove bullet points */

    padding: 0; /* Remove default padding */

    margin: 0; /* Remove default margin */

    width: 100%; /* Make the ul take full width */

}



#side-nav ul li {

    margin: 10px 0; /* Space between menu items */

    

}



#side-nav ul li a {

    color:rgb(48, 48, 48); /* Text color */

    text-decoration: none; /* Remove underline */

    display: block; /* Make links block-level for easier vertical centering */

    padding: 10px; /* Add padding for clickable area */

    

}



#side-nav ul li a:hover{

    transform: scale(1.1);

    transition: transform 0.3s;

    

}







.profile-container {

    opacity: 0; /* Initially invisible */

    transform: translateY(20px); /* Start slightly below its final position */

    display: flex; /* Use Flexbox to align items side by side */

    align-items: center; /* Align items to the start (top) */

    text-align: center;

    gap: 70px; /* Space between the image and text */ /* Adjust if needed */

    background-color:#F3F1E9    ; /* Background color for the container */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

    padding: 70px; /* Padding around the content */

    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition for animation */

    overflow: hidden;

    box-sizing: border-box; /* Ensure padding and border are included in the total width */

    

}



/* Apply the fade-in and slide-up animation when the class 'animate' is added */

.profile-container.animate {

    opacity: 1;

    transform: translateY(0); /* Reset transform to final position */

}





/* Style for the profile picture */

.profile-pic {

    width: 400px; /* Set a fixed width for the image */

    height: auto; /* Maintain aspect ratio */

}



/* Style for the text block next to the profile picture */

.profile-text {

    flex: 1; /* Allows text block to take up remaining space */

    text-align: center; /* Align text to the left */

   

}



/* Style for headings */

.profile-text h3 {

    font-size: 24px; /* Adjust font size */

}



/* Style for paragraphs */

.profile-text p {

    font-size: 16px; /* Adjust font size */

    line-height: 1.5; /* Increase line height for readability */

}





.gallery-button {

    position: absolute;

    top: 50%; /* Center vertically */

    left: 50%; /* Center horizontally */

    transform: translate(-50%, -50%);

    background-color: rgba(0, 0, 0, 0); /* Initial background color */

    color: white; /* Initial text color */

    font-size: 18px; /* Font size */

    text-decoration: none; /* Remove underline */

    border-radius: 5px; /* Rounded corners */

    border: 2px solid white; /* Border styling */

    z-index: 10; /* Ensure button is on top of other elements */

    text-align: center; /* Center text inside the button */

    overflow: hidden; /* Hide overflow content to maintain shape */

    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition for color and background */

    padding: 20px 30px

}



/* Button hover effect */

.gallery-button:hover {

    color: rgb(0, 0, 0); /* Text color on hover */

    background-color: white; /* Background color on hover */

}



/* Fill animation using pseudo-element */

.gallery-button::before {

    content: ''; /* Empty content */

    position: absolute; /* Absolute positioning */

    top: 0; /* Align to top */

    left: 0; /* Align to left */

    width: 100%; /* Full width of the button */

    height: 100%; /* Full height of the button */

    background-color: rgba(0, 0, 0, 0); /* Fill color (matches original button color) */

    z-index: -1; /* Place behind the text */

    transform: scaleX(0); /* Start with zero width */

    transform-origin: center; /* Animate from the left */

    transition: transform 0.3s ease; /* Smooth transition for the fill effect */

}



/* Show the fill animation on hover */

.gallery-button:hover::before {

    transform: scaleX(1); /* Scale to full width */

}





/* Default styles for the hamburger icon */

#menu-icon {

    font-size: 30px;

    cursor: pointer;

    position: fixed;

    top: 20px;

    left: 20px;

    z-index: 1001; /* Ensure icon is on top of the sidebar */

    color: rgb(48, 48, 48);

    transition: opacity 0.5s ease; /* Smooth transition for opacity */

}



/* Sidebar styles */

#side-nav {

    position: fixed;

    top: 0;

    left: -250px; /* Start hidden off the left edge */

    width: 200px; /* Set the desired width */

    height: 100%; /* Full height of the viewport */

    background-color: #F3F1E9; /* Background color for the sidebar */

    color: rgb(255, 255, 255); /* Text color */

    overflow-x: hidden; /* Prevent horizontal scroll */

    transition: 0.7s; /* Smooth transition for opening/closing */

    align-items: center; /* Center items horizontally */

    justify-content: center; /* Center items vertically */

    text-align: center; /* Center text within the items */

    z-index: 1000; /* Ensure sidebar is on top of other content */

}



/* Show the sidebar when the hamburger icon is hovered */

#menu-icon:hover + #side-nav,

#side-nav:hover {

    left: 0; /* Slide in from the left */

}



/* Hide the hamburger icon when either it or the sidebar is hovered */

#menu-icon:hover,

#side-nav:hover ~ #menu-icon {

    opacity: 0; /* Hide the icon */

}



/* Ensure no default styling on ul and li */

#side-nav ul {

    list-style-type: none; /* Remove bullet points */

    padding: 0; /* Remove default padding */

    margin: 0; /* Remove default margin */

    width: 100%; /* Make the ul take full width */

}



#side-nav ul li {

    margin: 10px 0; /* Space between menu items */

}



#side-nav ul li a {

    color: rgb(48, 48, 48); /* Text color */

    text-decoration: none; /* Remove underline */

    display: block; /* Make links block-level for easier vertical centering */

    padding: 10px; /* Add padding for clickable area */

}



#side-nav ul li a:hover {

    transform: scale(1.1);

    transition: transform 0.3s;

}







.profile-container {

    opacity: 0; /* Initially invisible */

    transform: translateY(20px); /* Start slightly below its final position */

    display: flex; /* Use Flexbox to align items side by side */

    align-items: center; /* Align items to the start (top) */

    text-align: center;

    gap: 70px; /* Space between the image and text */ /* Adjust if needed */

    background-color:#F3F1E9    ; /* Background color for the container */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

    padding: 70px; /* Padding around the content */

    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition for animation */

    overflow: hidden;

    box-sizing: border-box; /* Ensure padding and border are included in the total width */

    

}



/* Apply the fade-in and slide-up animation when the class 'animate' is added */

.profile-container.animate {

    opacity: 1;

    transform: translateY(0); /* Reset transform to final position */

}





/* Style for the profile picture */

.profile-pic {

    width: 400px; /* Set a fixed width for the image */

    height: auto; /* Maintain aspect ratio */

}



/* Style for the text block next to the profile picture */

.profile-text {

    flex: 1; /* Allows text block to take up remaining space */

    text-align: center; /* Align text to the left */

   

}



/* Style for headings */

.profile-text h3 {

    font-size: 24px; /* Adjust font size */

}



/* Style for paragraphs */

.profile-text p {

    font-size: 16px; /* Adjust font size */

    line-height: 1.5; /* Increase line height for readability */

}







/* General Footer Styles */

footer {

    color: rgb(48, 48, 48); /* Text color */

    font-size: 20px; /* Font size for the footer text */

}



.footer-content {

    display: flex; /* Use Flexbox */

    justify-content: space-between; /* Distribute space between items */

    align-items: center; /* Center items vertically */

    max-width: 90%; /* Max width of the footer content */

    margin: 0 auto; /* Center the footer content horizontally */

    padding: 0 20px; /* Padding on the sides */

    flex-wrap: wrap; /* Allow wrapping on smaller screens */

}



.footer-content > div {

    flex: 1; /* Allow each section to grow equally */

    min-width: 200px; /* Minimum width for each section */

}



/* Left Section (About) */

.about {

    text-align: left; /* Align text to the left */

    

}



/* About Section Styles */

.about p {

    font-size: 20px;

    text-align: left;

}



/* Center Section (Quick Links) */

.quick-links {

    text-align: center; /* Center text */

}



/* Right Section (Mailing List) */

.mailing-list {

    text-align: center; /* Align text to the right */

}



/* Additional Styles for Specific Elements */

.mailing-list form {

    display: flex;

    flex-direction: column; /* Stack input and button vertically */

}



.mailing-list input[type="email"] {

    padding: 10px;

    border: none;

    border-radius: 5px;

    font-size: 20px;

}



.mailing-list button {

    padding: 10px;

    border: none;

    border-radius: 5px;

    background-color: #F3F1E9; /* Button background color */

    color: rgb(48, 48, 48);

    cursor: pointer;

}



.mailing-list button:hover {

    background-color: #E0D9C0; /* Darker button background on hover */

}



.quick-links ul {

    list-style: none;

    padding: 0;

}



.quick-links a {

    color: rgb(48, 48, 48);

    text-decoration: none;

}



.quick-links a:hover {

    text-decoration: underline; /* Underline on hover */

}







/* Footer Bottom Styles */

.footer-bottom {

    text-align: center; /* Center text */

    font-size: 12px; /* Smaller font size */

    margin-bottom: 0; /* Remove any margin at the bottom */

    margin-top: 60px;

}



.footer-line {

    border: 0;

    height: 1px; /* Line thickness */

    background: #c9c9c9; /* Line color, change as needed */

    margin: 20px 0; /* Space above and below the line */

    z-index: 1001;

}





/* Spacer to add space after the wrapper */

.spacer {

    height: 200px; /* Adjust the height to control the amount of space */

}











.gallery-item {

    position: relative; /* Relative position for absolute positioning of the carousel */

    display: inline-block;

    margin: 20px;

    text-align: center; /* Center align the title */

    overflow: hidden; /* Prevent overflow for carousel */

}



/* Gallery item container styling */

.gallery-item {

    position: relative; /* Relative position for absolute positioning of the carousel */

    display: inline-block;

    margin: 20px;

    text-align: center; /* Center align the title */

    overflow: hidden; /* Prevent overflow for carousel */

}



/* Main artwork image styling */

.gallery-item > img {

    width: 100%; /* Maintain full width */

    height: auto; /* Preserve aspect ratio */

    transition: none; /* Remove any transform on hover */

    z-index: 1; /* Ensure image is on top initially */

    position: relative; /* Relative positioning */

}



/* Prevent image from zooming or transitioning on hover */

.gallery-item:hover > img {

    transform: none; /* No transform to prevent scaling */

    transition: none; /* No transition to prevent automatic animation */

}



/* Carousel container styling */

.gallery-carousel-container {

    position: absolute; /* Absolute position over the main artwork image */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 2; /* Ensure the carousel is above the image */

    display: none; /* Hide the carousel initially */

    overflow: hidden; /* Hide overflow to keep carousel within the artwork bounds */

    transition: none; /* No transition to prevent unwanted animation */

}



/* Show carousel only when hovering over the gallery item */

.gallery-item:hover .gallery-carousel-container {

    display: block; /* Show carousel on hover */

}



/* Carousel slides styling */

.gallery-carousel-slides {

    display: flex; /* Flexbox for horizontal slide positioning */

    transition: transform 0.5s ease; /* Smooth transition for sliding */

    width: 100%; /* Full width to align with the artwork container */

    height: 100%; /* Full height to align with the artwork container */

    transform: translateX(0); /* Start at the first slide */

}



/* Each slide should take up the full width of the container */

.gallery-carousel-item {

    min-width: 100%; /* Full width for each item */

    height: 100%; /* Full height for each item */

    box-sizing: border-box; /* Include padding/border in width */

}



/* Styling for carousel arrows */

.gallery-carousel-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(255, 255, 255, 0.352); /* Semi-transparent background */

    color: rgb(255, 255, 255);

    border: none;

    cursor: pointer;

    z-index: 3; /* Ensure arrows are on top of other elements */

    

    /* Circular Button Settings */

    border-radius: 50%; /* Make the button circular */

    width: 20px; /* Width of the circular button */

    height: 20px; /* Height of the circular button */

    display: flex; /* Flexbox to center the arrow */

    align-items: center; /* Vertically center the arrow */

    justify-content: center; /* Horizontally center the arrow */

    font-size: 13px; /* Font size for the arrow symbol */

    padding: 0; /* No extra padding */

    

   

}



/* Left arrow position */

.left-arrow {

    left: 10px; /* Position it on the left */

}



/* Right arrow position */

.right-arrow {

    right: 10px; /* Position it on the right */

}



/* Show arrows on hover */

.gallery-item:hover .gallery-carousel-arrow {

    display: block; /* Show arrows on hover */

}





/* Styles for gallery title */

.gallery-title {

    position: absolute;

    bottom: 0px; /* Adjust this value to change distance from the bottom */

    left: 20px; /* Adjust this value to change distance from the left */

    transform: none; /* Remove transform if you want to position using exact left value */

    color: white;

    font-size: 24px;

    opacity: 0; /* Initially invisible */

    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */

    border-radius: 8px;

    pointer-events: none; /* Prevent title from blocking mouse events */

    transition: opacity 0.6s ease, bottom 0.6s ease; /* Smooth opacity and position transition */

    z-index: 1001; /* Ensure it is above other elements */

}



/* Apply the animation on hover */

.gallery-item:hover .gallery-title {

    opacity: 1; /* Show the title */

    bottom: 0px; /* Adjust this to the final position distance from the bottom */

    left: 2px; /* Adjust this value to change distance from the left */

}



/* Keyframes for sliding in from the bottom */

@keyframes slideInBottom {

    from {

        transform: translateY(100%); /* Start off-screen below */

        opacity: 0;

    }

    to {

        transform: translateY(0); /* Slide up to its final position */

        opacity: 1;

    }

}











.gallery{

    text-align: center;

    font-size: 20px

    

}



/* Styles for the portfolio items container */

.gallery-items {

    width: 100%; /* Make sure images fill the width of the container */

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Create a responsive grid layout */

    gap: 100px; /* Space between the items */

    justify-items: center; /* Center the grid items horizontally */

    max-width: 1200px; /* Optional: limit the maximum width for better control */

    margin: 0 auto;

    margin-top: 100px;

}





/* artworks */

.gallery-item {

    position: relative;

    overflow: hidden; /* Ensures any overflow content is hidden */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

    border-radius: 8px; /* Optional: rounded corners */

    display: flex; /* Make container flexible */

    align-items: center; /* Center the image vertically */

    justify-content: center; /* Center the image horizontally */

}







/* Make images fill the container and add a smooth transition */

.gallery-item img {

    width: 100%;

    height: auto; /* Maintain aspect ratio */

    display: block;

    }





       /* Define the slide in from bottom animation */

@keyframes slideInBottom {

    0% {

        opacity: 0; /* Start with invisible text */

        transform: translateY(20px); /* Start 20px below the center */

    }

    100% {

        opacity: 1; /* End with fully visible text */

        transform: translateY(10px); /* End at centered position */

    }

}













/* Styles for gallery title */

.gallery-title {

    position: absolute;

    font-family: Adobe Song Std;

    bottom: 0;

    left: 0;

    transform: translate(); /* Center the text initially */

    color: white;

    font-size: 24px;

    opacity: 0; /* Initially invisible */

    background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */

    padding: 10px;

    border-radius: 8px;

    pointer-events: none; /* Prevent title from blocking mouse events */

    transition: opacity 0.6s ease;

    z-index: 1001;

}



/* Apply the animation on hover */

.gallery-item:hover .gallery-title {

    opacity: 1; /* Show the title */

    animation: slideInBottom 0.6s ease forwards; /* Apply the slide-in-bottom animation */

}









.contact-profile-container {

    opacity: 0; /* Initially invisible */

    transform: translateY(20px); /* Start slightly below its final position */

    display: flex; /* Use Flexbox to align items side by side */

    align-items: center; /* Align items to the start (top) */

    justify-content: center;

    text-align: center;

    gap: 70px; /* Space between the image and text */ /* Adjust if needed */

    background-color:#ffffff    ; /* Background color for the container */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */

    padding: 50px; /* Padding around the content */

    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition for animation */

    overflow: hidden;

    box-sizing: border-box; /* Ensure padding and border are included in the total width */

    width: 60%; /* Set width to 80% of the parent container or viewport */

    max-width: 1200px; /* Optional: set a maximum width */

    margin: 0 auto; /* Center the container horizontally */

    margin-top: 40px; /* Center the container horizontally */

}



/* Apply the fade-in and slide-up animation when the class 'animate' is added */

.contact-profile-container.animate {

    opacity: 1;

    transform: translateY(0); /* Reset transform to final position */

}









/* Style for the profile picture */

.contact-profile-pic {

    width: 200px; /* Set a fixed width for the image */

    height: auto; /* Maintain aspect ratio */

}



/* Style for the text block next to the profile picture */

.contact-profile-text {

    flex: 1; /* Allows text block to take up remaining space */

    text-align: center; /* Align text to the left */

   

}



/* Style for headings */

.contact-profile-text h3 {

    font-size: 24px; /* Adjust font size */

}



/* Style for paragraphs */

.contact-profile-text p {

    font-size: 16px; /* Adjust font size */

    line-height: 1.5; /* Increase line height for readability */

}

















/* contacts icons */



a img {

    width: 30px; /* Adjust the size as needed */

    height: 30px; /* Keep proportions correct */

    transition: transform 0.3s;

}

a img {

    margin-top: 20px;

    font-size: 20px; /* Adjust the size as needed */

}



a img:hover {

    transform: scale(1.1); /* Slight zoom effect on hover */

}



a {

    text-decoration: none;

}







#floatingGif {

    position: fixed;

    width: 100px; /* Adjust the size of the GIF */

    height: auto;

    top: 100px; /* Initial vertical position */

    left: 50%; /* Center horizontally */

    transform: translateX(-50%);

    pointer-events: none; /* Prevent the GIF from blocking interactions */

    z-index: 1000; /* Ensure it stays on top of other elements */

}