/*Imports*/
/*fonts*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


/* General Classes */
body {
  margin: 0;
  padding: 0;
  font-family: poppins;
  zoom: 80%;
}
.hidden{
  display: none;
}

/* Opacity */
.opacity-low{
  filter: opacity(0.5) !important;
}

.opacity-high{
  filter: opacity(1) !important;
}
/* Borders */
.border-rounded-10{
  border-radius: 10px;
}
.border-rounded-15{
  border-radius: 15px;
}
.border-rounded-20{
  border-radius: 20px !important;
}
.border-rounded-30{
  border-radius: 30px;
}
.border-rounded-50{
  border-radius: 50px;
}
.border-rounded-80{
  border-radius: 80px;
}


/* Buttons */
.user-button{
  background-color:rgb(109, 210, 177);
  color: white;
 
}

/*Button effects */
.btn-effect{

}

.btn-effect:hover{
  transform: scale(1.1);
}
.transition-effect{
  transition: width 1.5s, height 1.5s, transform 0.5s !important;
}

.transition-effect-2s{
  transition: width 2s, height 2s, transform 2s;
}
.user-button:hover{
  background-color:#6fd0a6;
  color: white;
}

/*cursor effects*/
.cursor-pointer{
  cursor: pointer;
}



/* Sizes */

/*width in %*/
.width-fit-content{
  width: fit-content !important;
}

.width-10{
  width: 10%;
}
.width-20{
  width: 20% !important;
}
.width-30{
  width: 30%;
}
.width-40{
  width: 40%;
}
.width-50{
  width: 50%;
}
.width-60{
  width: 60%;
}
.width-70{
  width: 70%;
}

.width-80{
  width: 80%;
}
.width-90{
  width: 90%;
}
.width-100{
  width: 100%;
}

/* swal */
.swal-height-100{
  height: 100vh !important;
}
.swal-width-100{
  width: 100vw !important;
}

#swal2-title{
  display: none !important;
}

/* width in px */
.width-px-10{
  width: 10px;
}
.width-px-20{
  width: 20px;
}
.width-px-30{
  width: 30px;
}
.width-px-40{
  width: 40px;
}
.width-px-50{
  width: 50px;
}
.width-px-60{
  width: 60px;
}
.width-px-70{
  width: 70px;
}
.width-px-80{
  width: 80px;
}
.width-px-90{
  width: 90px;
}
.width-px-100{
  width: 100px;
}
.width-px-150{
  width: 150px;
}
.width-px-200{
  width: 200px;
}
.width-px-300{
  width: 300px;
}
.width-px-400{
  width: 400px;
}
.width-px-500{
  width: 500px;
}
.width-px-600{
  width: 600px;
}
.width-px-700{
  width: 700px;
}
.width-px-800{
  width: 800px;
}

/*height in px*/
.height-px-10{
  height: 10px;
}
.height-px-20{
  height: 20px;
}
.height-px-30{
  height: 30px;
}
.height-px-40{
  height: 40px;
}
.height-px-50{
  height: 50px;
}
.height-px-60{
  height: 60px !important;
}
.height-px-70{
  height: 70px;
}
.height-px-80{
  height: 80px;
}
.height-px-90{
  height: 90px;
}
.height-px-100{
  height: 100px;
}
.height-px-150{
  height: 150px;
}

.height-px-180{
  height: 180px !important;
}
.height-px-200{
  height: 200px;
}
.height-px-250{
  height: 250px !important;
}
.height-px-280{
  height: 280px;
}


.height-px-300{
  height: 300px;
}
.height-px-400{
  height: 400px;
}
.height-px-500{
  height: 500px;
}
.height-px-600{
  height: 600px;
}
.height-px-700{
  height: 700px;
}
.height-px-800{
  height: 800px;
}

.scale-1-effect:hover{
  transform: scale(1.1);
}

.scale-2{
  transform: scale(1.5);
}
.scale-2-effect:hover{
  transform: scale(1.5);
}

.scale-3{
  transform: scale(2);
}

.scale-3-effect:hover{
  transform: scale(1.4);
}

.scale-4-effect:hover{
  transform: scale(1.8);
}

/* Backgrounds */
.bg-darkblue{
  background-color: #114c8f;
}
.bg-lightgray{
  background-color: #f2f2f2;
}
.bg-darkgray{
  background-color: #d9d9d9;
}
.bg-cyan{
  background-color: #6fd0a6;
}

.bg-lightdark{
  background-color: #2E2E2E;
}

.bg-paleblue{
  background-color: rgba(137, 187, 246, 0.36) !important;
}

/*text colors */
.text-cyan{
  color: #6fd0a6;
}

/*text weight*/
.text-light{
  font-weight:lighter;
}

.text-thin{
  font-weight:light;
}

.text-normal{
  font-weight:normal;
}

.text-thick{
  font-weight: 600;
}
.text-bold{
  font-weight: bold;
}

.text-bolder{
  font-weight: bolder;
}

.text-bold-800{
  font-weight: 800;
}

/*font sizes*/
.font-xsmall{
  font-size: x-small;
}

.font-small{
  font-size: small;
}
.font-medium{
  font-size: medium;
}
.font-large{
  font-size: large;
}
.font-xlarge{
  font-size: x-large;
}
.font-xxlarge{
  font-size: xx-large;
}
.font-40{
  font-size: 40px;
}

.font-50{
  font-size: 50px;
}
.font-60{
  font-size: 60px !important;
}
.font-70{
  font-size: 70px !important;
}
.font-80{
  font-size: 80px !important;
}
.font-100{
  font-size: 100px !important;
}
.font-200{
  font-size: 200px !important;
}


/*font types */

.font-Nunito{
  font-family: nunito;
}

.font-arista{
  font-family:arista;
}

/*Form switch */
.form-check-input:checked {
  background-color: #122b47;
  border:none;
}

.form-switch .form-check-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(111,208,166,255)'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='darkcyan'/%3e%3c/svg%3e");
}


/*Images*/
.image-cover{
  object-fit: cover !important;
}
.image-contain{
  object-fit: contain !important;
}

/*modals*/
.modal{
  --bs-modal-width: 100% !important;
}

.position-fixed-centered {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
}
@media only screen and (max-width: 720px) {

  /* Sizes */

  /*width in %*/
  .width-10-m{
    width: 10% !important;
  }
  .width-20-m{
    width: 20% !important;
  }
  .width-30-m{
    width: 30% !important;
  }
  .width-40-m{
    width: 40% !important;
  }
  .width-50-m{
    width: 50% !important;
  }
  .width-60-m{
    width: 60% !important;
  }
  .width-70-m{
    width: 70% !important;
  }
  .width-80-m{
    width: 80% !important;
  }
  .width-90-m{
    width: 90% !important;
  }
  .width-100-m{
    width: 100% !important;
  }

  .height-100-m{
    height: 100% !important;
  }

  .mobile-hidden{
    display: none !important;
  }
  .mobile-show{
    display: grid !important;
  }
}



/*for swiper*/
/*
.slide-container {
  width: 100%;
  margin-bottom: 50px;
  padding: 40px 0;
}

.slide-content {
  margin: 0 40px;
  overflow: hidden;
  border-radius: 5px;
  padding: 0 10px;
}

.card {
  width: 100%;
  height: 500px !important;
  border-radius: 30px;
  background-color: var(--secondary-color);
  cursor: pointer;
  transition: all .3s ease-out;
}

.card:hover {
  transform: scale(1.02);
}

.image-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 14px;
}

.image-content {
  position: relative;
  row-gap: 5px;
  padding: 65px 0;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 30px 30px 0 0;
 
}
.swiper-navBtn {
  color: var(--secondary-color) !important;
  transition: color 0.3s ease;
}

.swiper-navBtn:hover {
  color: var(--secondary-color) !important;
}

.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 35px;
}

.swiper-button-next {
  right: 0;
  color: var(--primary-color);
}

.swiper-button-prev {
  left: 0;
  color: var(--primary-color);
}

.swiper-pagination-bullet {
  background-color: var(--primary-color);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color);
}

.card-image {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: 4px solid var(--secondary-color);
  overflow: hidden;
}

.card-image .card-img:hover {
  transform: scale(1.15);
}

.card-image .card-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--primary-color);
  transition: all .4s ease-out;
}
*/


/* Custom slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 10px;
  background: #d3d3d3;
  background: -webkit-linear-gradient(
    to right,
    green,
    #4776e6
  );
  background: linear-gradient(
    to right,
    green,
    yellowgreen,
    yellow,
    orange,
    red,
    #4776e6,
    rgb(141, 81, 141),
    darkred
  );
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border: 8px solid #505050;
  box-shadow: 0px 0px 10px #000000;
  background-color: white;
  cursor: pointer;
  border-radius: 100%;
}