/*CAROUSEL OF THIS SECTION ALSO APPLIES TO THE PROJECTS SECTION*/
/* Resets margin and padding for all elements */
* {
  margin:0px;
  padding:0px;
}

#top-page-exp{
  font-size: 65px;
  color:#F5F5F7;
  text-align: center;
  padding: 20px 0 5px 0;
}

/* Styling for the Experience section */
.experience {
  position: relative;
  background-color: #101010;
  padding: 10px 0;
}

.experience-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%; /*this line is used to make the container full width*/
  max-width: 1000px; /*TODO: check later to make it always full and centered*/
  margin: auto;
  text-align: center;

  display: flex;
  overflow-x: auto; /* Allows horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enables snapping */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
  scroll-padding-left: 14vw; /*adjusted to show a little of the prev and next card.*/

  /*styling for the bar itself*/
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #555 #333; /* thumb and track color */
}

.experience-details {
  background-color: #2d3142;
  border-radius: 15px;
  color: #d8d5db;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns children to the start */
  align-items: center; /* Center aligns children horizontally */
  height: 100%; /* Ensure this is set to allow space distribution */
}

.experience-details ul {

}

.experience-details li {
  text-align: center; /* Aligns text to the left */
}

.company-img {
  width: 100%;
  height: auto;
  align-self: center; /* Center logo in the grid area */
  justify-self: center; /* Center logo in the grid area */
}

.experience-brand {
  font-weight: 900;
  /*make margin top -5, bottom 0, left and right auto, so it centers it*/
  margin: -2px auto 6px auto;
  text-align: left;
}

/*STYLING FOR THE CAROUSEL-----------=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.experience{
  position: relative;
  overflow: hidden;
} 
.experience-container {
  padding:10px;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  overflow-y: hidden; /* Prevent vertical scrolling */
}


.experience-card {
  position:relative;
  
  flex: 0 0 auto; /* first two numbers are for flex-grow and flex-shrink, the last one is for flex-basis which helps to set the width of the card */
  width: 250px;
  height: 500px;
  margin-right: 5px;
  padding: 20px; /* Add padding */
  padding-bottom:500;
  background-color: #333335; /*CHANGE LATER Add background color */
  border-radius: 8px; /* Round the corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add a shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */

  scroll-snap-align: start; /* Snaps the start of the element to the scroll container's snapport */

}

.experience-image {
  position: relative; /*this line is used to position the discount tag and the button*/
  width: 100%;
  height: 150px;
  overflow: hidden; /*this line is used to hide the overflowing content*/
  object-fit: contain; /*this line is used to make the image fit the container*/
  margin-bottom: 10px;
  border-radius: 20px;
}

.experience-thumb {
width: 100%;
height: 100%;
object-fit: contain; /*this line is used to make the image fit the container*/
}

#projects-container .experience-image {
  width: 174px;
  height: 174px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
}

#projects-container .experience-thumb {
  object-fit: cover;
}

#projects-container .experience-brand {
  text-align: center;
}

#projects-section-inner {
  overflow-x: clip;
  overflow-y: visible;
}

#projects-container {
  max-width: none;
  justify-content: center;
  overflow-x: clip;
  overflow-y: visible;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

#projects-container .experience-image {
  width: 174px;
  height: 174px;
}

#experience-container .experience-image {
  width: 174px;
  height: 174px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
}

#experience-container .experience-thumb {
  object-fit: cover;
}

#experience-container .experience-brand {
  text-align: center;
}

#experience-section-inner {
  overflow-x: clip;
  overflow-y: visible;
}

#experience-container {
  max-width: none;
  justify-content: center;
  overflow-x: clip;
  overflow-y: visible;
  flex-wrap: nowrap;
  scrollbar-width: none;
}



.umd-logo {
  padding: 15px; /* Add white padding around UMD logo */
  box-sizing: border-box; /* Include padding in width/height calculation */
  border-radius: 35px;
}

.experience-info{
  color: #F5F5F7;
  display: flex;
  flex-direction: column; /*this helps us align everything vertically in a flex*/
  align-items: center; /*center all items inside*/

  font-size: 1.1em;
}

.experience-date {
  display: block; /* Ensure these are on new lines */
  width: 100%;
  height: 20px;
  line-height: 13px;
  overflow: hidden;
  opacity: 0.5;
  margin-bottom: 3px;
  font-size: 0.8em;
}

.experience-description{
  display: block; /* Ensure these are on new lines */
  margin-bottom: 10px; /* Add a bit of margin below each */
  font-weight: 900;
  font-size: 0.9em;
  font-weight:normal;
  margin-top: 7px;
}

.card-btn {
  /*this section is used to style the button*/
  position: absolute;
  bottom: 0;
  left:50%;
  transform: translateX(-50%);
  margin-bottom:10px;

  font-size:1em;

  border: none;
  width: 90%;
  border-radius: 20px;
  height: 40px;
  background: #1c1c1c;
  color: #F5F5F7;

  transition: box-shadow 0.3s ease-in-out; /* Add transition to the box-shadow property */
}
.card-btn:hover {
  background: #525252;
}

.header-container{
  margin: 0 auto; /*top and bottom margin 0... left and right are auto, so centers it.*/
  max-width: 1000px;
  display: flex;
  justify-content: center;
}

.title-container {
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.btns {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-left: 2vw; /* Default for smaller screens */
}

.pre-btn, .nxt-btn {
  margin:5px;/*margin left is 0 and margin right is 5px*/
  padding:10px;
  background-color: #333336;
  border-radius: 20%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle drop shadow, adjust as needed */
}

.pre-btn{
  transform: rotate(180deg);
}

.pre-btn img, .nxt-btn img {
  opacity: 0.2; /*this line is used to make the previous and next buttons less visible*/
  transition: opacity 0.3s ease-in-out; /* Add a transition to the opacity property */
}

.pre-btn:hover img, .nxt-btn:hover img {
    opacity: 1;
}

/* Small screens (phones)*/
@media (max-width: 600px) { /* Adjust the max-width as needed for targeting phone screens */
  .title-container {
    align-items: center;
    justify-content: center;
  }
  #top-page-exp{
    margin-bottom: 0px;
  }
  .btns {
    display:none; /*no need for the buttons when on the phone*/
  }
  #top-page-projects{
    margin: 0 auto; /*top bottom margin is 0. left and right auto, to center it*/
  }
  /*make experience card smaller*/
  .experience-card {
    width: 200px;
    height: 450px;
    padding-bottom:450px;
  }
  /*make experience text*/
  .experience-date{
    font-size: 0.95em;
  }
  .experience-info{
    font-size: 0.94em;
  }
  /*make experience button smaller*/
  .card-btn {
    height: 30px;
    font-size: 0.86em;
  }

  /* make both carousels swipeable on mobile */
  #projects-section-inner,
  #experience-section-inner {
    overflow-x: auto;
    overflow-y: visible;
  }
  #projects-container,
  #experience-container {
    overflow-x: auto;
    overflow-y: visible;
    justify-content: flex-start;
  }
}