:root{
    --primary-color: #8F2F92;
    --light-color: #fff;
    --dark-color: #000;
}


/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
   .slide {
    width: 150px;
  }
  .slide-track {
    width: calc(150px * 12);
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {
    .m-git-btn i{
        font-size: 1.3rem;
        color: var(--light-color);
    }

    #scrollTopBtn {
    bottom: 20px;
    right: 20px;
    }

    .modal {
      display: block;
      overflow-y: auto;
    }

    .modal.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-contents {
      padding: 10px 0;
      width: 100%;
      margin: auto;
      /* margin-top: 10px;
      margin-bottom: 10px; */
    }

    .modal-contents h1{
      font-size: 2rem;
      text-align: center;
    }

    .modal-contents p{
      text-align: center;
      font-size: 1rem;
  }

  .modal-contents label, .modal-contents .btn{
    font-size: 1rem;
  }

  .menu-btn svg{
    width: 35px;
    height: 35px;
  }

  .overlay {
    height: 100%;
    width: 100%;
    z-index: 2;
    right: -100%;
  }

  .overlay a {
    font-size: 1.5rem;
  }

  .nav-toggle {
    right: -0%;
  }

  .hero .content{
    width: 350px;
    padding: 0.5rem;
}

.hero .content h1{
   font-size: 2rem;
}

.hero .content p{
    font-size: 1.5rem;
    margin-bottom: 0;
 }


.section-1{
  padding: 3rem 0;
}

.section-1 h1{
  font-size: 2rem;
  margin-bottom: 3rem;
}

.section-1 img{
  width: 23%;
}

.section-1 h2{
  font-size: 1.8rem;
  margin: 0.5rem 0;
}

.section-1 .box2{
  border-right: none;
  border-left: none;
}

.section-1 p{
  font-size: 1.2rem;
}

.section-2{
  padding: 3rem 0;
}

.section-2 .box1 h1{
  margin-bottom: 0;
  font-size: 2rem;
}

.section-2 .box1 h4{
  font-size: 1.3rem;
  margin: 0.5rem 0;
}

.section-2 .box1 p{
  font-size: 1rem;
  margin-bottom: 1rem;
}

.section-2 .box2{
  text-align: center;
}

.section-2 .box2 img{
  width: 35%;
}

.section-2 h6{
  font-weight: 400;
  font-size: 1.1rem;
  margin: 1rem 0 0 0;
}

.section-2 p{
  font-size: 14px;
}

.section-3{
  padding: 3rem 0;
  background-color: var(--dark-color);
}

.section-3 p{
  font-size: 1.1rem;
  margin: 0;
  margin-bottom: 1rem;
}

.section-4{
  padding: 3rem 0;
}

.section-4 h1{
  font-size: 2rem;
  font-weight: 400;
}

.section-4 p{
  font-size: 1rem;
  margin-bottom: 1rem;
}

.grid-container {
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: 100%;
  place-content: center;
}

.flip-card-inner {
  height: 275px;
}

.flip-card-front img{
  width: 22%;
}

.flip-card-front p{
  font-size: 1rem;
  -webkit-line-clamp: 4;
  margin-bottom: 8px;
}

.flip-card-back p{
  font-size: 1.1rem;
  margin: 0;
}

.section-5{
  padding: 2.5rem 0;
}

.section-5 h1{
  margin-bottom: 1rem;
  font-size: 2rem;
}

.slide {
  width: 200px;
}
.slide-track {
  width: calc(200px * 12);
}

.section-6{
  padding: 3rem 0;
}

.section-6 h1{
  font-size: 2rem;
}

.section-6 p{
  font-size: 1rem;
  margin-bottom: 1rem;
}

.section-6 label, .section-6 .btn{
  font-size: 1rem;
}

   footer{
  padding: 3rem 0;
}

footer .box1{
  text-align: center;
}

footer .box1 img{
  width: 55%;
}

footer  h5{
  font-size: 1.1rem;
}

#footer-bar{
  background-color: var(--primary-color);
  padding: 10px 0;
  position: static;
  bottom: 0;
  width: 100%;
  transition: none;
}

#footer-bar a{
  font-size: 0.9rem;
}

#footer-bar p{
  font-size: 0.9rem;
  color: var(--light-color);
  margin: 0;
} 

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Your CSS here */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Your CSS here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Your CSS here */
}