@import url("/button.css");
@import url("card.css");
@import url("profile.css");
@import url("docs.css");
@import url("login.css");
@import url('alert.css');
@import url('form.css');
@import url('loader.css');
@import url('snackbar.css');

*::after,
::before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;

}


:root {
   --primary-color: #18a7dbdf;
   ;
   --secondary-color: rgb(255, 255, 255);
}

.showcase {
   margin-top: 20px;
   max-width: 100vw;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   font-family: 'Merienda', cursive;
   font-size: .7rem;

}

.showcase .slogan {
   font-size: 1rem;
}

.showcase .left-showcase {
   max-width: 40vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}

.showcase .left-showcase .logo img {
   max-width: 100%;

}

.right-showcase {
   max-width: 40vw;
   min-height: 50vh;
}

.right-showcase img {
   width: 100%;
   border-left: .01px solid rgb(6, 79, 135);

}



.footer {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #e1eaf5;
}

.footer .social {
   display: flex;
   justify-content: center;
   align-items: center;
}

.accordion {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   max-width: 100vw;
   margin: 20px 0;
   gap: 20px;
}

.accordion-item {
   position: relative;
}

.accordion-header {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(31, 182, 241, 0.586);
   color: black;
   cursor: pointer;
   gap: 10px;
   padding: 18px 20px;
   font-family: 'Merienda', cursive;
   border-radius: 10px;
   font-size: .6rem;
}

.accordion-header:hover {
   background-color: #48dbeebe;
   color: black;
}

.accordion-header::after {
   content: '\002B';
   color: #777;
   font-weight: bold;
   position: absolute;
   right: 20px;
   top: 90%;
   transform: translateY(-90%);
}

.accordion-header.active::after {
   content: "\2212";
}

.accordion-content {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   max-height: 0;
   color: black;
   font-size: .7rem;
   max-width: 100%;
   overflow: hidden;
   padding: 0px 30px;
   transition: max-height 0.2s ease-out;
   font-family: 'Merienda', cursive;
   ;
}

.accordion-content.active {
   max-height: 10px;
   /* Adjust as needed */
   transition: max-height 0.4s ease-in;
}


/* next  */
.faq-accordion {
   max-width: 800px;
   margin: 0 auto;
}

.accordion-item {
   /* border: 1px solid #ccc; */
   margin-bottom: 10px;
}

.accordion-header {
   background-color: #51d5edd9;
   padding: 10px;
   font-weight: bold;
   cursor: pointer;
}

.accordion-header:hover {
   background-color: rgb(83, 183, 91);
}

.accordion-content {
   padding: 10px;
   display: none;
}

.accordion-item.active .accordion-content {
   display: block;
}

@media screen and (max-width:768px) and (min-width:300px) {

   .showcase {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
   }

   .showcase .left-showcase {
      max-width: 100vw;
   }

   .showcase .right-showcase {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px;
   }

   .showcase .right-showcase img {
      width: 100vw;

   }

   .footer {
      font-size: .5rem;
   }

   .footer .social img {
      width: 100px;
   }


   .small {
      display: flex;
   }

   .small {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0px 10px;
   }

   .small .menu img {
      height: 20px;
      cursor: pointer;
   }

   .small .logo img {
      height: 50px;
      cursor: pointer;
   }

   .small .dots img {
      height: 23px;
      cursor: pointer;
   }

   nav .left-nav {
      display: none;
   }

   .right-nav {
      display: none;
   }



}

@media screen and (max-width:1280px) and (min-width:768px) {




   .showcase {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      padding: 0px;
   }

   .showcase .left-showcase {
      max-width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: none;
      margin-top: -200px;
   }

   .showcase .left-showcase img {
      width: 400px;
   }


   .showcase .right-showcase {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      max-height: 10px;
      max-width: 70vw;
      margin-top: -20px;
   }

   .showcase .right-showcase img {
      width: 100%;
      border-left: none;

   }

   .showcase .slogan {
      width: 100vw;
      font-size: 1.5rem;
   }



   .footer {
      font-size: .5rem;
   }

   .footer .social img {
      width: 100px;
   }

   .docs .left-docs {
      display: block;
      min-width: 30vw;
      font-weight: bolder;
      border: .5px solid black;
      max-height: 90vh;
      background-color: whitesmoke;
      margin-top: 20px;
      margin-left: -5px;
      border-radius: 10px;
   }


   .small {
      display: none;
   }

   nav .left-nav {
      display: flex;
   }

   .right-nav {
      display: flex;
   }



}

@media screen and (max-width:800px) and (min-width:600px) {

   .footer {
      font-size: .9rem;
   }

   .footer .social img {
      width: 150px;
   }


}