/* body {
    margin: 0px;
    background-attachment: fixed; /* Makes the background sticky 
    background-size: cover; /* Cover the whole area 
    background-position: center;
  }*/

  body {
    
    background-image: url('images/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: 100% 100%;
    padding:20px;
    background-color: #f1f1f1;
    font-family: Arial;
    padding-top: 6%;
  }

.banners{
  display: flex;
  align-items: center;
  justify-content: center;
}
  
  
.textContent
{
  font-size: 20px;
    display: flex;
    text-align: justify;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}
    

.navdivlogo{
  height: 50%;
  width: 20%;
  background-color:#bbb; 
}
 
 
  
  
  
  


/*limit TITLE*/
.limit-lines {
            max-height: 7em; /* Limit height to two lines */
            overflow: hidden; /* Hide overflow text */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* Limit to 3 lines */
        }

/*limit CONTENT*/
.limit-text {
            max-height: 7em; /* Limit height to two lines */
            overflow: hidden; /* Hide overflow text */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6; /* Limit to 3 lines */
        }

/* makes image one size */
.image-container {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/9;
  overflow:hidden;
  position: relative;
  border-radius: 8px;
  margin-bottom: 5px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0;
  left:0;
  }


/*portfolio gallery*/

  *{
      box-sizing: border-box;
    }

    /*center website*/
    .main{
      max-width: 1000px;
      margin:auto;
    }

    h1{
      font-size: 50px;
      word-break: break-all;
    }

    .row{
      margin:8px -16px;
    }
    .columnAn{
      float:left;
      width: 25%;
      background-color: #f1f1f1;
    }

    /*clear floats after rows*/
    .row:after{
      content:"";
      display: table;
      clear:both;
    }

    /*Content of News and Event*/
    .content{
      padding: 10px;
      height:40%; 
      border-radius: 10px;
    }

    p.a {
      text-align-last: right;
    }
    p.b{
      font-style: italic;
    }  




/*tables*/
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse:collapse;
  width: 100%;
  background-color: #ddd;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: grey;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: black;
  color: white;
}
    /*padding- each column*/
    .row,
    .row > .column{
      padding:10px;
    }

    /*four equal columns that floats next each other*/
    .column{
      float:left;
      width: 25%;
    }

    /*responsive layout- makes a two colum-layout instead of four columns*/
    @media screen and (max-width: 900px){
      .column{
        width: 50%;
      }
    }

    /*responsive layout- makes a two columns stack on top each other instead of next to each other*/
    @media screen and (max-width:600px){
      .column{
        width: 100%;
      }
    }

/* Dropdown Styles */
/* Dropdown Styles */


/* Submenu for nested dropdown */
.dropdown-submenu {
  position: relative; /* Positioning the submenu relative to its parent */
}

/* The submenu content (hidden by default) */
.dropdown-subcontent {
  display: none; /* Hidden by default */
  position: absolute; /* Absolute positioning for the submenu */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  left: 100%; /* Position to the right of the parent */
  top: 0;
}

/* Show the submenu when hovering over the parent item */
.dropdown-submenu:hover .dropdown-subcontent {
  display: block;
}



/*Overflow text*/
div.b {
  white-space: nowrap; 
  width: 220px; 
  height: 80px;
  overflow: hidden;
  text-overflow:initial; 
  border: 1px solid #000000;
}


/*Content Announcement*/
.section{
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 2px;
  padding: 10px;
}
/*Events Section*/
.Eventsection{
  display: flex;
  justify-content: space-between;
  background-color: 5f6266;
  border-top-left-radius: 80px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-left: 145px;
  padding-right: 145px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-left: 0px;
}
/*News Section*/
.Newssection{
  display: flex;
  justify-content: space-between;
  background-color: 5f6266;
  border-bottom-right-radius: 80px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-left: 145px;
  padding-right: 145px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-left: 0px;
}

.section img{
  width:100%;
  margin-bottom: 10px;
}
/*INDEX Container*/
   .section b{
      border-radius: 10px;
      padding: 10px;
      width:23%;
      text-align:left;
      overflow: hidden;
      color: white;
      text-decoration:none;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .section b:hover{
      background-color:636363;
      box-shadow:#000000;
      opacity: 90%;
  
    }
    /*responsive layout- makes a two colum-layout instead of four columns*/
    @media screen and (max-width: 900px){
      .section b item{
        width: 50%;
      }
    }

    /*responsive layout- makes a two columns stack on top each other instead of next to each other*/
    @media screen and (max-width:600px){
      .section b item{
        width: 100%;
      }

/*INDEX see more*/
.see_more a{
  text-align: center; /* Aligns text to the left */
  margin-top: 5px; /* Adds some space above the link */
  margin-bottom:px;
  background-color: gray;
  padding: 10px; /* Some padding for better appearance */
  border-radius: 5px; /* Rounded corners */
  width:100%;
  text-decoration: none;            /* Remove underline for links */
  justify-content: flex-end; /* Aligns content to the right */
  margin-left: auto; /* This helps in pushing it to the right */
  /* margin-bottom: 3%; */
}

.see_more a {
    color: black; /* Change link text color to white for contrast */
  font-weight: bold; /* Make link bold for emphasis */
}
.see_more a:hover{
  background-color: gray; /* Red background */
  opacity: 90%;
}

    }
  .mySlides{
    display:none;
    }
    *{box-sizing:border-box}
  
    /* FROM HEADER*/
    .logout-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 3px;
    }

    button {
      padding: 10px 20px;
      background-color:transparent;
      border: none;
      cursor: pointer;
      font-style: Arial;
      text-decoration: none;            /* Remove underline for links */

    }

    button:hover {
      color: #d4af37;
      border-bottom: 3px solid goldenrod;
    }
    .logout-container{
      position: relative;
      }
/*SHORT Button*/
.short button {
  background-color: #fff;
  padding: 0.5rem 1rem;
  color: #000;
  font-size: 12px;
  cursor: pointer;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: .4s ease-in-out;
}

@keyframes fadeout {
  0%{
    opacity:0%;
  }
  50%{
    opacity:100%;
  }
  100%{
    opacity:20%;
  }
}

/*COVERslide*/
/* Slider container */
.newslider {
  background-color: transparent;
  overflow: hidden;
  width: 100%; /* Adjust this to fit your design */
  height: 500px;
  position: relative;
}

/* Common styles for all images */
.newslider img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; /* Initially hide all images */
  animation-duration: 12s;  /* Total duration of the animation cycle */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  z-index: 1; /* Ensure the images are stacked in the correct order */
}

/* Keyframe for fade in/out */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0; /* Image hidden at start and end */
  }
  33% {
    opacity: 1; /* Image fully visible at the middle of the animation */
  }
  66% {
    opacity: 0; /* Image fading out towards the end */
  }
}

/* Apply the fade animation to each image */
.photo1 {
  animation-name: fadeInOut;
  animation-delay: 1s; /* First image starts immediately */
  z-index: 4; /* Layer it on top */
}

.photo2 {
  animation-name: fadeInOut;
  animation-delay: 4s; /* Second image starts after 4 seconds */
  z-index: 3; /* Layer it below the first image */
}

.photo3 {
  animation-name: fadeInOut;
  animation-delay: 8s; /* Third image starts after 8 seconds */
  z-index: 1; /* Layer it below the second image */
}



/*Banner for research and extention*/
.cover {
  background-color: white;
  padding: 10px;
  height: 50%;
}
/*Cover for VMGO----------------------------------------------------------------*/
.container {
  position: relative;
  width:70%;
  align-items: center;
}
/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 10px;
  background-color: black;
  color: white;
  width: 100%;
  height: 30%;
  padding-left: 20px;
  padding-right: 20px;
  opacity: 80%;
  text-align: center;
}
/*Agenda in extension*/
.agenda{
  background-color: white;
  padding: 10px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .agend {
padding: 8px;
}

/* Create four equal columns that floats next to each other */
.agend {
float: left;
width: 100%;
}
 /*RESEARCH_container*/
 .section a{
  background-color: transparent;
  border-radius: 10px;
  padding: 10px;
  width:23%;
  text-align:left;
  overflow: hidden;
  color: black;
  text-decoration:none;
  margin-bottom: 10px;
  box-shadow: 5px 5px 8px #888888;
}
.section a:hover{
  background-color:gray;
  box-shadow:#000000;
  opacity: 90%;

}
/*responsive layout- makes a two colum-layout instead of four columns*/
@media screen and (max-width: 900px){
  .section a{
    width: 50%;
  }
}

/*responsive layout- makes a two columns stack on top each other instead of next to each other*/
@media screen and (max-width:600px){
  .section a{
    width: 100%;
  }
}

/*Content Announcement*/
.section g img{
  width:100%;
  margin-bottom: 10px;
  object-fit: contain;
  background-color: #d4af37;
}
/*INDEX Container*/
   .section g{
      background-color: gray;
      border-radius: 10px;
      padding: 10px;
      width:23%;
      text-align:left;
      overflow: hidden;
      color: black;
      text-decoration:none;
      margin-bottom: 10px;

    }
    .section g:hover{
      background-color:white;
      box-shadow:#000000;
      opacity: 90%;
  
    }
    /*responsive layout- makes a two colum-layout instead of four columns*/
    @media screen and (max-width: 900px){
      .section g item{
        width: 50%;
      }
    }

    /*responsive layout- makes a two columns stack on top each other instead of next to each other*/
    @media screen and (max-width:600px){
      .section g item{
        width: 100%;
      }}

/* FOOTER */

/*MODAL on Announcements*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* #modalImage {
  width: 100%;
  height: auto;
  object-fit: cover;
} */

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}


div.desc {
  text-align: center;
  margin-top: 3px; /* Optional: Add space between image and date */
  margin-bottom: 1px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 5px;
}

h2 {
  text-align: center; /* Center the heading */
  margin-bottom: 10px; /* Optional: Add some space below the heading */
}
/*LIST*/
.custom-list {
  list-style-type:disc ; /* Default bullet */
  padding-left: 20px;    /* Indent the list */
  position:block;
}

.custom-list li {
  margin: 3px 0; /* Spacing between items */
}

/* Custom bullet example */
.custom-list li::marker {
  color: darkslategray;    /* Change bullet color */
  font-size: 1.2em; /* Change bullet size */
}

/*GALLERY*/
/* Style for the gallery container */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between images */
  margin-top: 20px;
}

/* Style for each gallery image */
.gallery-item {
  width: calc(33.33% - 10px); /* Adjust for 3 images per row */
  height: auto;
}

.gallery-item img {
  width: 100%;  /* Make sure the image fits its container */
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
}


/*ANNOUNCMENT style*--------------------------------------------------------------------------------------------------/
/* Wrapper for the cards */
.wrapper {
  display: flex;
  flex-wrap: wrap; /* Allow the items to wrap to the next line */
  justify-content: space-between; /* Space between the cards */
  gap: 30px; /* Add spacing between cards */
  width: 90%;
  margin: 0 auto;  /* Center the wrapper */
  margin-bottom: 5%;  /*delete later*/
}

/* Card container */
.card {
  height: 350px;
  width: 22%; /* 4 cards per row - 22% to fit in the row with gap */
  background: white;
  display: flex;
  align-items: flex-end;
  padding: 2rem 1rem;
  position: relative;
  transition: 0.5s all ease-in-out;
  overflow: hidden; /* Prevent image from overflowing card boundaries */
  border-radius: 1rem;
  z-index: 1;
  box-sizing: border-box; /* Ensure padding and borders don't affect width */
}

/* Dark overlay on hover (this will be behind the content) */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(107, 107, 107, 0.3), rgba(107, 107, 107, 1));
  z-index: 1; /* This ensures it's behind the content */
  opacity: 0;
  transition: 0.5s all;
}

/* Card hover effects (for the overlay) */
.card:hover::before {
  opacity: 1; /* On hover, show the overlay */
}

/* Image inside card */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire card without distortion */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Keep the image behind the content */
}

/* Info section inside card */
.card .info {
  position: relative;
  color: #fff;
  z-index: 2; /* Ensure the info section is above the overlay and image */
  opacity: 0;
  transform: translateY(30px);
  transition: 0.5s all;
}

/* Hover effect on the info section */
.card:hover .info {
  opacity: 1;
  transform: translateY(0);
}

.card .info h1 {
  line-height: 40%;
  margin-bottom: 10px;
}

.card .info p {
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* .card .info .btn {
  background-color: #fff;
  padding: 0.5rem 1rem;
  color: #000;
  font-size: 12px;
  cursor: pointer;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: .4s ease-in-out;
}

.card .info .btn:hover {
  background: #399918;
  color: #fff;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
} */

/*------------------------------------------NEWS style------------------------------------------------------*/
img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* .container {
  display: grid;
  place-items: center;
  margin: 0;
  padding-block: 3rem;
  background-color: black;
  padding-left:2rem;
  padding-right:2rem;
} */
.card__container {
  display: flex;           /* Change from grid to flex */
  justify-content: space-between; /* Space items evenly across the row */
  gap: 2rem;               /* Add some gap between cards */
  flex-wrap: wrap;         /* Ensure items wrap on smaller screens */
  margin-bottom: 8%;
}

.card__article {
  position: relative;
  width: 20%;             /* Make sure the article takes up the full available width */
  max-width: 328px;        /* Restrict the max width */
  /* flex-grow: 1;            Allow items to grow but limit their size */
  height: 90%;
}
.card__img{
  width: 320px;
  height:180px;
  border-radius: 1rem;
  position: relative;
}
.card__data{
  width:230px;
  height: 90%;
  background-color: white;
  padding: 1rem 1rem;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position:absolute;
  bottom: -7rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  margin-bottom: 5%;
  transition: opacity 1s 1s;
}
.card__description{
  display:block;
  font-size: var (--h2-font-size);
  margin-bottom: .10rem;   
}
/* .card__button{
  text-decoration: none;
  font-size: var(--h2-font-size);
  font-weight: 500;
}
.card__button:hover{
  text-decoration: underline;
} */
.backbutton{
  position: fixed; /* Fixed position, so it stays at the top of the screen */
  top: 12%;
  left: 95%; /* Optional: Center it horizontally */
  transform: translateX(-50%); /* Optional: Center it perfectly */
  background-color: white;
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 25px;             /* Rounded corners with a 25px radius */
  z-index: 1000; /* Ensures it's on top of other content */
}
.backbutton:hover {
  background-color:5f6266;
  color:white;
  transition:cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
.shortbutton {
  display: inline-block;           /* Make the button an inline-block element */
  padding: 10px 20px;              /* Add padding inside the button */
  background: white;
  color: black;                    /* Text color */
  font-size: 1rem;                  /* Set font size */
  text-align: center;               /* Align text to the center */
  border: none;                    /* Remove default border */
  border-radius: 25px;             /* Rounded corners with a 25px radius */
  text-decoration: none;            /* Remove underline for links */
  cursor: pointer;                 /* Change cursor to pointer */
  transition: 0.3s ease-in-out;
  position: relative;               /* Position relative for floating */
}

.shortbutton:hover {
  background-color: green;       /* Darker background color on hover */
  color: white;
}

/* Floating the button to the left */
.float-left {
  float: left;                     /* Float the button to the left */
  margin-right: 10px;               /* Add some space to the right of the button */
}

/* Large screens (above 1120px) */
@media (min-width: 1120px) {
  .card__article {
      width: 22%; /* 4 items per row */
  }
}

/* Medium screens (between 768px and 1120px) */
@media (max-width: 1120px) and (min-width: 768px) {
  .card__container {
      justify-content: space-evenly; /* Center the cards */
  }

  .card__article {
      width: 48%;  /* 2 items per row */
  }
}

/* Small screens (below 768px) */
@media (max-width: 768px) {
  .card__container {
      justify-content: center;  /* Center the cards */
  }

  .card__article {
      width: 100%;  /* 1 item per row */
      max-width: 100%;  /* Full width */
  }

  .card__img {
      height: 250px; /* Reduce the height for smaller screens */
  }
}