/* Reset some default browser styles */
body, h1, h2, p, ul, li, button {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* Set a background image for the body */
body {
    background-repeat: no-repeat;
    background-size: cover; /* Adjust to your preference */
    background-attachment: fixed; /* This keeps the background fixed while scrolling */
    background-position: center; /* Center the background image */
    background-color: #000000; /* Fallback background color */
    font-family: Arial, sans-serif;
}

/* Sticky footer */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* Style the header */
header {
    background-color: #b76ff3;
    padding: 20px;
    text-align: center;
    opacity: 75%;
}

/* Style the header text (increase margin-bottom) */
h1 {
    color: rgb(202, 147, 216);
    font-size: 36px;
    margin-bottom: 20px; /* Increase the margin-bottom to create space */
}

/* Style the navigation menu */
nav ul {
    list-style-type: none;
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #666; /* Medium gray links */
    font-weight: bold;
}

main {
    /* Add padding to create space for the footer */
    padding-bottom: 60px; /* Adjust the value to your footer's height */
}

/* Style section headings */
h2 {
    color:  rgb(214, 193, 219);
    font-size: 24px;
}

/* Style paragraphs */
p {
    color: rgb(202, 147, 216);
    font-size: 16px;
    line-height: 1.5;
}

h3 {
    color: rgb(202, 147, 216);
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin-top: 20px; /* Add some space at the top */
  min-height: 540px; /* Set a minimum height to prevent overlap with the footer */
}

/* Slideshow images */
.slideshow img {
    max-width: 100%;
    max-height: 560px;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: opacity 1s ease; /* Add a transition for the opacity property */
    opacity: 0;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 
                0px 0px 12px rgba(0, 0, 0, 0.1); /* Two box shadows for the fade effect */
  }

/* Show the first image immediately */
.slideshow img:first-child {
    opacity: 1;
}

/* Hide inactive slides */
.slideshow a.slide-hidden {
    opacity: 0;
    pointer-events: none; /* Disable clicks on hidden links */
    transition: opacity 1s ease; /* Add transition for opacity */
}
  
/* Show active slide */
.slideshow a.slide-active {
    opacity: 1;
    pointer-events: auto; /* Enable clicks on active links */
    transition: opacity 1s ease; /* Add transition for opacity */
}

/* Arrow container */
.arrow-container {
    text-align: center;
    margin-top: 10px;
    position: relative; /* Ensure the arrow container is positioned relative to the slideshow container */
    z-index: 1; /* Ensure the arrow container is above the images */
}

/* Hide inactive slides */
.slideshow img.slide-hidden {
    opacity: 0;
  }
  
/* Show active slide */
.slideshow img.slide-active {
    opacity: 1;
  }

footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the height of your footer */
    background-color: #b76ff3;
    text-align: center;
    padding: 10px;
    color: #333;
    opacity: 75%;
}

/* Arrow buttons */
.prev, .next {
    cursor: pointer;
    margin: 0 10px;
    color: #f5f5dc; /* Set the arrow color to beige (#f5f5dc) */
    user-select: none; /* Prevent text selection on the buttons */
}

  
.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Center the "Examples of Work" section */
.work-section {
    text-align: center;
    padding: 20px; /* Add some padding for spacing */
}

/* Center the "Examples of Work" heading */
.work-section h2 {
    margin: 0 auto;
    width: max-content; /* Center horizontally */
}
/* Add a class for centered content */
.centered-content {
    max-width: 750px;
    margin: 0 auto; /* Set left and right margin to 'auto' for horizontal centering */
    text-align: center; /* Center text within the div */
}

.contact-card {
    text-align: center;
}

.contact-card img {
    width: 25%;
    max-width: 150px; /* Optional: Set a maximum width to prevent excessive scaling */
    height: auto; /* Maintain aspect ratio */
}

.contact-card p {
    color: #ffffff;
}

#particles-js {
    z-index: 10;
}

canvas.particles-js-canvas-el {
    position: absolute;
    top: 0;
    z-index: -1;
    background-color: #522577;
}

.socials img{
    height: 100px;
    padding: 5px;
}

.socials a {
    text-decoration: none;
}