/* General styles for the navigation bar */
    html {
      overflow-x: hidden;  
    }


body {
    margin: 0;
    font-family: 'EB Garamond', serif; /* Set EB Garamond as the font */
    align-items: center;
    width: 100%;
  
    background-image: url('https://cdn.glitch.global/75a07b7f-9dcb-496c-9dd4-2ed2f260501b/360_F_425705256_95LeCzBcsSgmqVuQR2oxWyb11HvG6L36.jpg?v=1742044207344');
  
    /*box-sizing: border-box; /* Include padding and borders in the total width */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

footer {
    margin-top: 30px; /* Adjust this value to control the amount of space */
    padding: 20px;    /* Optional: add padding to the footer */
    background-color: #333;  /* You can customize the background color */
    color: white;     /* Footer text color */
    text-align: center;  /* Center the text inside the footer */
/*    width: 100%; /* Make the navbar take the full width */

}

/* Target all <section> elements */
section {
    opacity: 0.7;               /* Set opacity to 80% (values range from 0 to 1) */
    width: auto;                /* Set a width as percentage, e.g., 90% of the parent container */
    margin: 3%;         /* Center horizontally and add vertical margin (space above and below) */
    padding: 20px;             /* Optional: Add padding for spacing inside sections */
    background-color: #f9f9f9; /* Optional: Add background color */
    border: 2px solid black;    /* Optional: Add a border around the sections */
    box-sizing: border-box;    /* Include padding and border in the element's total width */
    border-radius: 5%; /* Rounds the corners with 5% radius */
    border-width: 1px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */

}


#top-img {
    width: 170px;              /* Set width of the image */
    height: 170px;             /* Set height of the image */
    border: 2px solid white;   /* Adds a border around the image */
    border-radius: 5%;        /* Makes the border round (circular logo) */
    border-width: 1px;
    margin: 30px;         /* Adds space from the top */
    display: block;           /* Ensures it's a block-level element */
    margin-left: auto;        /* Centers the image horizontally */
    margin-right: auto;       /* Centers the image horizontally */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
}

#phone-img {
    width: 50px;              /* Set width of the image */
    height: 50px;             /* Set height of the image */
    margin-top: 30px;         /* Adds space from the top */
    display: block;           /* Ensures it's a block-level element */
    margin-left: auto;        /* Centers the image horizontally */
    margin-right: auto;       /* Centers the image horizontally */
}





.navbar {
    background-color: #333;
    text-align: center; /* Centers the text horizontally */
    color: white; /* Makes the text white */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto; /* Make the navbar take the full width */
    /*box-sizing: border-box; /* Include padding and border in the width calculation */

  
}

/* Style for the image inside the navbar */
.navbar .logo {
    width: 70px;              /* Set width of the image */
    height: 70px;             /* Set height of the image */
    vertical-align: middle;   /* Align the image with the text vertically */
    margin-left: 10px;        /* Adds a small space between the text and the image */
    border: 2px solid white;  /* Adds a small white border around the image */
    border-radius: 50%;       /* Optional: Makes the border round (circular logo) */
    border-width: 1px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
}

.nav-list {
    opacity: 0;             /* Start with zero opacity */
    visibility: hidden;     /* Initially hide the nav list */
    transition: opacity 1.5s ease-in-out, visibility 0s 1.5s; /* Add transition for opacity and delay visibility change */
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
}

.nav-list a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* Hamburger icon styles */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .nav-list {
        visibility: hidden;   /* Initially hide the nav list */
        opacity: 0;           /* Start with zero opacity */
        top: 100px;           /* Increase the top value to add space from the top */
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        left: 0;
        /*padding: 20px;*/
        transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Add transition for fade effect */
    }

    .nav-list.active {
        visibility: visible;   /* Make the nav list visible */
        opacity: 1;             /* Make it fully visible */
        transition: opacity 1.5s ease-in-out, visibility 0s 0s; /* Adjust timing of visibility */
    }

    .nav-list li {
        margin: 20px 0;
        text-align: center;
    }

    .hamburger {
        display: block;
    }
}

/* For large screens (e.g., laptops) */
@media (min-width: 769px) {
    .hamburger {
        display: none; /* Hide the hamburger icon on larger screens */
    }
    .nav-list {
        visibility: visible; /* Ensure the nav list is visible on larger screens */
        opacity: 1; /* Make the nav list fully visible */
        display: flex; /* Display the menu as a horizontal list */
    }
}


/* Basic Slider Styling */
.gallery-container {
  background: rgba(255, 255, 255, 0.1); /* White background with 60% opacity */
  padding-top: 3%;
  padding-left: 10%;
  width: 100%; /* Full width of the container */
  overflow: hidden; /* Hide overflow to keep slides within bounds */
  position: relative; /* For positioning the descriptions on top of images */
  margin: 10px, auto;
}

.slider {
  display: flex; /* Arrange slides in a row */
  transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
}

.slide {
  min-width: 100%; /* Ensure each slide takes up 100% of the container */
  position: relative; /* Required for absolute positioning of descriptions */
}

.slide img {
  width: 80%; /* Make sure each image spans the full width of the slide */
  padding: 10px;
  height: auto; /* Maintain the aspect ratio of the images */
  object-fit: cover; /* Ensure the image covers the entire slide space */
  opacity: 0.8; /* Adjust the opacity (0.0 = fully transparent, 1.0 = fully opaque) */
  transform: scale(0.95); /* Shrinks the image to 80% of its original size */
  border: 5px solid rgba(128, 128, 128, 0.85); /* 45% transparent gray border */
  border-radius: 5%; /* Rounds the corners with 5% radius */
  border-width: 1px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
}

.description {
  position: absolute;
  width: 80%;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 30% transparency */
  color: white;
  padding: 10px;
  display: none; /* Initially hide descriptions */
  z-index: 1; /* Ensure descriptions appear above images */
  border: 5px solid rgba(128, 128, 128, 0.85); /* 45% transparent gray border */
  border-radius: 3%; /* Rounds the corners with 5% radius */
  border-width: 1px;  
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
}

iframe {
  align-items: center;
  margin:30px;
  border: 1px solid black; /* 1px thin black border */
  border-radius: 5%; /* 5% rounded corners */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
}

    .floating-button {
      position: fixed; /* Keeps the button fixed in position */
      bottom: 15%; /* Position it from the bottom of the page */
      right: 15%; /* Position it from the right side of the page */
      background-color: white; /* Button background color */
      color: white; /* Button text color */
      border: none; /* Remove button border */
      border-radius: 50%; /* Make the button round */
      width: 60px; /* Button width */
      height: 60px; /* Button height */
      font-size: 30px; /* Font size for the text or icon */
      display: flex;
      justify-content: center;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7); /* Shadow effect */
      align-items: center;
      cursor: pointer; /* Pointer cursor on hover */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
      z-index: 1000; /* Ensure the button is above other elements */
      transition: transform 0.3s ease; /* Smooth animation for hover */
      border: 5px solid rgba(128, 128, 128, 0.85); /* 45% transparent gray border */
      border-width: 1px;  

}

    /* Optional: Hover effect */
    .floating-button:hover {
      transform: scale(1.1); /* Slightly increase the size when hovered */
    }

    .floating-button img {
      width: 50px; /* Smaller image width */
      height: 50px; /* Smaller image height */
      object-fit: cover; /* Make the image fit well inside the button */
    }