@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap');

:root {
   /* Colors: */
   --main-color: #03FFCE;
   --muted-text: #747474;
   --white: #fff;
   --black: #000;
   --dark: #6e6e6e;
   --light: #9196a1;
   --input: #fafafa;
}

::-webkit-scrollbar {
   height: 0.5rem;
   width: 0.6rem;
}


* {
   font-family: "Changa", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
   transition: 0.2s linear;
}

p {
   margin: 0;
}

html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}

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

/* Track */
::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.63);
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--main-color);
   border-radius: 10px;
}

/* ------------- global --------------- */
body {
   direction: rtl;
   line-height: 1.7;
}

a {
   text-decoration: none;
   color: #000000;
}

ul {
   padding-right: 0rem !important;
   list-style: none;
}

.main-color {
   color: var(--main-color) !important;
}

.secondary-color {
   color: var(--secondary-color);
}

.bg-main-color {
   background-color: var(--main-color);
   color: #fff !important;
}

.bg-white {
   background-color: #fff;
   color: var(--main-color) !important;
}

.bg-secondary-color {
   background-color: var(--secondary-color);
   color: #fff !important;
}

::selection {
   color: #fff;
   background-color: #34347a50;
}

#whatsapp {
   position: fixed;
   bottom: 10px;
   right: 10px;
   transform: translate(-50%, -50%);
   background: var(--main-color);
   display: inline-block;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   box-shadow: 0px 0px 9px #03ffcec2;
}

#whatsapp i {
   font-size: 36px;
   color: var(--white);
}

.custom-btn {
   font-size: 17px;
   padding: 0.5rem 2.86rem;
   color: #000 !important;
   border-radius: 35px;
   text-align: center;
   overflow: hidden;
   position: relative;
   display: block;
   width: fit-content;
   margin: auto;
   font-weight: bold;
   font-size: 22px;
   background: var(--main-color);
}

body {
   background: #000 !important;
   color: #fff !important;
}

.heroSec .logo {
   width: 240px;
   margin: 4.5rem 0 0 0;
}

.heroContent {
   position: absolute;
   inset: 0;
   padding-inline: 5rem;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

.carousel-control-prev {
   right: -60px;
}

.carousel-control-next {
   left: -60px;
}

.carousel-control-next,
.carousel-control-prev {
   width: 50px;
   opacity: 1;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
   display: block;
   width: 2.5rem;
   height: 2.5rem;
   background-color: var(--main-color);
   border-radius: 50%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 50%;
}

.carousel-control-prev-icon {
   background-image: url('../images/prev.png');
}

.carousel-control-next-icon {
   background-image: url('../images/arrow.svg');
}

#carouselExampleFade .carousel-inner {
   padding: 1.5rem;
   box-shadow: 0px 0px 9px #03ffcec2;
   border: 5px solid #ffffff;
}

.carousel-inner {
   border-radius: 15px;
   margin-top: 1.5rem;
   margin-bottom: 3rem;
}

.carousel-inner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 10px;
}
#carouselExampleFade .carousel-inner img {
      aspect-ratio: 13 / 7;
   }
   #carouselExampleFade2 .carousel-inner img {
      aspect-ratio: 25 / 9;
   }

footer h3 {
   width: max-content;
   padding: 10px 0;
   color: var(--main-color);
   border-bottom: 3px solid var(--main-color);
   margin-bottom: 1.75rem;
}

footer li a {
   color: #fff !important;
   display: block;
   margin: 6px 0;
   font-size: large;
   font-weight: 500;
   width: fit-content;
}

@media (max-width: 578px) {
   .heroContent {
      position: relative;
      text-align: center;
   }

   .heroSec .logo {
      margin: 2.5rem 0 1.85rem 0;
      width: 200px !important;
   }

   .custom-btn {
      font-weight: 500;
      font-size: 18px;
      padding: 0.5rem 2rem;
   }

   #carouselExampleFade .carousel-inner {
      padding: 0.5rem;
      box-shadow: 0px 0px 2px #03ffcec2;
      border: 3px solid #ffffff;
   }

   .carousel-inner {
      border-radius: 6px;
      margin-bottom: 5rem;
   }

   .carousel-inner img {
      aspect-ratio: 11 / 7;
      border-radius: 4px;
   }

   .carousel-control-next,
   .carousel-control-prev {
      position: absolute;
      top: unset;
      bottom: -3.5rem;
   }

   .carousel-control-prev {
      right: calc(50% - 54px);
   }

   .carousel-control-next {
      left: calc(50% - 54px);
   }
   .heroContent {
      padding-inline: 0rem;
   }
}

@media (min-width: 578px) {
   .w-md-50 {
      width: 50%;
   }

   .mb-md---5 {
      margin-bottom: -5rem;
   }

   .carousel.slide {
      width: calc(100% - 140px);
      margin: auto;
   }
   .position-md-absolute{
      position: absolute;
   }
   .trust{
      top: 50%;
      inset-inline-start: 58%;
      inset-inline-end: 4rem;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      text-align: start !important;
   }
   .trust.safe{
      /* inset-inline-start: unset; */
      inset-inline-end: 65%;
      /* inset-inline-end: unset; */
      inset-inline-start: 4rem;
   }
}