:root{
  --primary-color: white;
  --accent-color: rgb(213, 196, 5);
  --pastel-color: rgba(32, 31, 28, 0.799);
  --pastel-color2: rgb(255, 255, 255, 0.5);

  --XS-Fsize: 0.9rem;
  --small-Fsize: 1rem;
  --medium-Fsize: 1.1rem;
  --XL-Fsize: 1.7rem;
}

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

a{
  text-decoration: none;
}

img{
  width: 100%;
}

ul{
  list-style: none;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: "Poppins", sans-serif;
  background-color: rgb(8, 8, 8);;
  color: var(--primary-color);
  padding: 2.5rem 0;
}

.main-wrapper{
  --wrapper-max-width: 1250px;
  --wrapper-padding: 1.3rem;

  width: min(var(--wrapper-max-width), 100% - var(--wrapper-padding));
  margin-inline: auto;
  position: relative;
}

main{
  flex-direction: column;
  row-gap: 7rem;
  display: flex;

}

.show-more-detail-btn{
  height: fit-content;
  width: fit-content;
  padding: 1rem 2rem;
  margin-inline:  auto;
  border-radius: 10px;
  border: 1px solid var(--accent-color);
  background-color: black;
  color: var(--accent-color);
  margin-top: 10rem;
  z-index: 10;
  cursor: pointer;
  animation: float 3s linear infinite
}

.section-container{
  display: none;
  position: relative;
  background-color: rgb(14, 14, 13);
  border: 1px solid rgba(255, 255, 255, 0.079);
  border-radius: 10px;
  padding: 7rem 1.5rem 0rem 1.5rem;
  overflow: hidden;
  z-index: 5;
  opacity: 0;

  animation: show-more-details 0.7s linear forwards;
}

section{
  margin-bottom: 7rem;
}

section .heading{
  font-size: var(--XL-Fsize);
  margin-bottom: 0.6rem;
}

section .line{
  max-width: 1.5rem;
  height: 0.2rem;
  background-color: var(--accent-color);
  border: none;
  border-radius: 5px;
  margin-bottom: 0.8rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgb(74, 74, 74);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}


@media(width >= 900px){
  main{
    flex-direction: row;
    column-gap: 1rem;
  }

  .section-container{
    flex: 1;
   padding-top: 5rem;
   padding-right: 4rem;
  }

}