/* Basic resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  
  body,p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300; /* Light */
    font-size: 1vw;
    z-index: 1000;
    
  }
  
  
  /* Apply Open Sans Bold for all titles */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bold */
    margin-bottom: 10%;
    font-size: 1.5vw;
    z-index: 1000;
    
    
  }
  
  .navbar {
    z-index: 10;
    
    background-color: transparent !important; /* Make the navbar background transparent */
    box-shadow: none; /* Optional: Remove any shadow if present */
    
  }
  
  /* Parallax container styling */
  .parallax-container {
      /* Remove any margin */
    padding: 0; /* Remove any padding */
    position: relative;
    /* height: 100vh; */
    /*min-width:100vh;*/
    width: 100%;
    /* min-height: 75vh; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: left;
    z-index: 8;
    opacity: 1;
    
    
    
  }
  .containertop{
    margin-bottom: -25%;
  }
  .containerbot{
    margin-top: 30%;
  }
  
  
  
  
  /* Parallax layers with background images */
  .parallax-layer {
    pointer-events: none;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    
    width: 100%;
    height: 100%;
    
    background-position: center bottom;
    background-attachment: fixed;
  }
  
  /* Different layers with unique background images */
  .layerhome1 {
    background-image: url('static/Home_1.png');
    z-index: 6;
    background-attachment: fixed;
    background-size: 100%;
    margin-top: 1%;
    background-position: center bottom;
    opacity: 1;
  }
  
  .layerhome2 {
    background-image: url('static/Home_2.png');
   
    z-index: 5;
    opacity: 1;
    background-attachment: fixed;
  }
  
  .layerhome3 {
    background-image: url('static/Home_3.png');
    z-index: 4;
    opacity: 1;
    background-attachment: fixed;
  }
  .layerhome4 {
    background-image: url('static/Home_4.png');
    z-index: 3;
    opacity: 1;
    background-attachment: fixed;
  }
  .layerhome5 {
    background-image: url('static/Home_5.png');
    z-index: 2;
    opacity: 1;
    background-attachment: fixed;
  }
  .layerhome6 {
    background-image: url('static/Home_6.png');
    z-index: 1;
    opacity: 1;
    background-attachment: fixed;
  }

  .layer4 {
    background-image: url('static/Background.jpg');
    z-index: 2;
    background-attachment: fixed;
    
  }
  .layer5 {
    /* Multiple background layers */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%,rgba(0, 0, 0, 0) 100%);
    /* Background positions for each layer */
    background-position: center;
    
    /* Background sizes for each layer */
    background-size: 100%;
    
    /* Background repeat for each layer */
    background-repeat: no-repeat;
    
    /* Background attachment properties */
    background-attachment: scroll;
    z-index: 30;
    opacity: 1;
}



.layer6 {
  /* Multiple background layers */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 80%,rgba(0, 0, 0, 1) 100%);
  /* Background positions for each layer */
  background-position: center;
  
  /* Background sizes for each layer */
  background-size: 100%;
  
  /* Background repeat for each layer */
  background-repeat: no-repeat;
  
  /* Background attachment properties */
  background-attachment: scroll;
  z-index: 30;
  opacity: 1;
}
.layer7 {
  background-image: url('static/Background_TO.jpg');
  z-index: 2;
  background-attachment: fixed;
  
}
.layer8 {
  background-image: url('static/Background_GA.jpg');
  z-index: 3;
  background-attachment: fixed;
  
}
  
  
  /* Content styling for parallax section */
  .parallax-container .content {
    position: relative;
    z-index: 10;
    padding: 20vh 1vw;
  }
  
  
  
  .content-section h2 {
    margin-bottom: 20px;
  }
   /* .carousel-inner img video{
    min-width: 50%; 
    height: auto; 
} */



.carousel-item img {
  margin: 0 auto; /* this will align the image to center. */
  width: auto; /* for those images which don't have a width specified, but has a max-height will be auto adjusted */
  background-position: center;
  height: 30%;
  width: auto;
}

.navbar {
  background-color: rgba(0, 0, 0, 0.5); /* Slight transparency */
}


/*
.navbar-nav .nav-item:hover .dropdown-menu {
  visibility: visible;
  background-color: transparent;
  outline: none;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}
.dropdown-item:hover {
  background-color: transparent; 
  color: #ddd !important;        
.dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px); 
  transition: visibility 0s, opacity 0.3s ease, transform 0.3s ease;

}
.dropdown-menu .dropdown-item:hover,sssss
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: transparent !important; 
    color: white !important; 
    outline: none !important; 
    box-shadow: none !important; 
}
*/

/* General navbar styling */
.navbar .dropdown-menu {
  background: transparent; /* Remove background */
  border: none; /* Remove borders */
  padding-top: 0;
  padding-bottom: 0;
  transform: scaleY(0); /* Initially hidden for animation */
  transform-origin: top; /* Animates from top down */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for scaling and opacity */
  opacity: 0; /* Initially transparent */
  display: block; /* Ensure it can animate */
}
@media (max-width: 992px) { /* Target small screens */
  .navbar-nav .dropdown-menu {
    background: transparent; /* Remove background */
  border: none; /* Remove borders */
  padding-top: 0;
  padding-bottom: 0;
  
   /* Initially transparent */
  display: none; /* Ensure it can animate */
  }
  .navbar-nav .dropdown.show .dropdown-menu,
  .navbar-nav .dropdown:hover .dropdown-menu {
    display:block;
    opacity: 0;
    transform: scaleY(0); /* Initially hidden for animation */
    transform-origin: top; /* Animates from top down */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for scaling and opacity */
  }
  .content {
    padding: 8vh 5vw;
    font-size: 2vw;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bold */
    margin-bottom: 3%;
    font-size: 3vw;
  }
  .software-image {
    width: 10vw;
    max-width: 100%;
    min-width: 30%;
    height: auto;
    margin-bottom: 5%;
  }
  .eglantine-logo {
    width: 70vw;
    max-width: 100%;
    min-width: 60%;
    height: auto;
    margin-bottom: 5%;
  }
}

/* Show animation when dropdown is open on hover */
.navbar .dropdown:hover .dropdown-menu {
  transform: scaleY(1); /* Open the dropdown */
  opacity: 1; /* Make it fully visible */
}

/* Styling for the dropdown items */
.navbar .dropdown-item {
  color: #888; /* Text color */
  /* padding: 10px 15px; */
}

/* Remove background and focus styles */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:active {
  background: none !important;
  color: #fff !important; /* Keeps text color on hover */
  outline: none;
}

/* Prevents the default selected blue background on active items in the dropdown */
.navbar .dropdown-item.active {
  background: none !important; /* Remove background when active */
  color: white;
}

/* Remove background highlight for dropdown items when they are active (via scrollspy) */
.navbar .nav-link.active {
  color: white; /* Change navbar item color on scrollspy */
}

.navbar .dropdown-item.active {
  background: none !important; /* Ensure active dropdown item has no background */
}
.content {
 
  /* margin: auto; */
  text-align: center;
  color: #fff;
  margin-bottom: 30%;
}
.text-left {
  text-align: left;
}

/* Three-column layout */



.software-image {
  width: 15vw;
  max-width: 100%;
  min-width: 30%;
  height: auto;
  margin-bottom: 30%;
}
.eglantine-logo {
  margin-top: -15%;
  width: 30vw;
  max-width: 100%;
  min-width: 30%;
  height: auto;
  margin-bottom: 1%;
  z-index: 1000;
}
.TO-logo {
  width: 30vw;
  max-width: 100%;
  min-width: 30%;
  height: auto;
  margin-bottom: 2%;
}
.eglantine-gif{
    
    /* width: 50%; */
    margin-top: -7%;
    width: 70%;
    height: auto;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1), 40% rgba(0, 0, 0, 0) 60% rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 1;
    
}
.col-md-12 {
  position: relative; /* If stacking is necessary, set this */
  z-index: auto; /* Ensure no stacking context issues */
}
/* 
.carousel-control.left, .carousel-control.right {
  left: 0;
  z-index: 999999;
} */



li {
  /* Adjust font size if needed */
  margin-bottom: 10%; /* Increase space between list items */
}


.img-hover-wrap {
  overflow: hidden;
}
.gallery-thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);  /* subtle shadow */
}
.gallery-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.5); 
}

/* Fullscreen dark background */
#imageOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* The 0.8×screen “frame” */
.overlay-box {
  width: 100vw;
  height: 500vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image keeps aspect ratio, never stretches */
#overlayImg {
  width: auto;
  height: 80vh;
  max-width: 80%;
  max-height: 80%;
  object-fit: cover;
  z-index: 9999;         /* fits inside 80vw x 80vh without distortion */
}
body.no-scroll {
  overflow: hidden;   /* disables scrolling */
  /* no position fixed or top here */
}