@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Dosis', sans-serif;
  /* outline: solid 1px red; */


}

html {
  scroll-behavior: smooth;
}

/* nav section */
nav {
  width: 100%;
  background-color: rgba(8, 7, 10, 0.981);
  backdrop-filter: blur(20px);
  filter: blur(px);
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;

}

.topnav {
  background-color: #000;
  display: flex;
  /* padding: 5px 20px; */
  justify-content: space-evenly;
  align-content: center;
  overflow: hidden;
  border-bottom: 5px solid #fbda01;

}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;

  text-decoration: none;
  /* font-size: 50px; */

}

.active {
  background-color: #fbda01;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  /* background-color: #04AA6D; */

}

.home-drop .dropdown {
  display: flex;
  justify-content: center;
  align-self: center;
}


.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  /* padding: 12px 20px; */
  height: 70px;
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  /* transition: all 1s; */
  font-weight: 700;

}

.dropdown>a:hover {
  color: #fbda01;
}

.dropbtn:hover i {
  transform: rotate(90deg);
}

.fa-solid {
  color: #fbda01;
  transition: all 1s;

  &:hover {
    color: #fff;
  }
}

.dropdown-content {

  position: absolute;
  top: 100px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 2px 7px rgba(225, 225, 225, 0.986);
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}

.dropdown:hover .dropdown-content {
  top: 71px;

  visibility: visible;
  opacity: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;

}



.dropdown-content a:hover {
  background-color: #fbda01;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 999;
}






/* hero section */
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;

  height: 100vh;
  width: 100%;
}

.slider-container h1 {
  color: #fff;
  font-size: 100px;
  letter-spacing: 5px;
  position: relative;
  z-index: 100;
  text-align: center;
}

.slider-container::after {
  background-color: #000;
  content: '';
  position: absolute;
  opacity: 0.3;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 1;
}

.slide {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100vh;
  width: 100%;
  transform: scale(1.15);
  transition: opacity .6s ease;
}

.slide.active {
  animation: grow 4s linear forwards;
  opacity: 1;
}

@keyframes grow {

  0%,
  20% {
    transform: scale(1);
  }

  75%,
  100% {
    transform: scale(1.15);
  }
}

.controls-container {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
  z-index: 2;
}

.control {
  background-color: #fff;
  cursor: pointer;
  opacity: 0.5;
  margin: 6px;
  height: 40px;
  width: 5px;
  transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
}

.control.active,
.control:hover {
  background-color: #fff;
  opacity: 1;
  transform: scale(1.2);
}

/* get form */
.get-taxi {
  position: absolute;
  top: 110px;
  border-radius: 30px;
  left: 80px;
  z-index: 100;
  background-color: #f2f0f0;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  box-shadow: 0px 5px 10px rgba(255, 230, 0, 0.515);
  align-content: center;
}

.get-input {
  height: 50px;
  width: 250px;
  /* border: 1px solid black; */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgb(204, 203, 203);
}




.grt-for {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;

}

.get-input>input {
  border: none;
  outline: none;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
  background-color: #fff;
}

.get-btn {
  grid-column: span 2;
  background-color: #fbda01;
  color: #000;
  padding: 15px 30px;
  border: none;
  font-size: 18px;
  border-radius: 40px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  justify-self: center;
  align-items: center;
  text-align: center;
}

.car-icon {
  display: flex;
  gap: 50px;
  margin-top: 20px;
  justify-content: center;
}

.car-icon>a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  transition: all 1s;
}

.car-icon img:active {
  background-color: #000;
  border-radius: 50%;

  box-shadow: 0px 0px 5px rgb(15, 0, 217);
}

.car-icon img:hover {
  background-color: #000;
  border-radius: 50%;
  box-shadow: 0px 0px 5px rgb(15, 0, 217);

  /* scale: 1.1; */

}

.car-icon span {

  font-weight: 700;
  color: black;
}

.get-text {
  font-weight: 900;
  font-size: 40px;
}

/* TOP2 */
.top-con {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 20px;
  background-color: #fbda01;
}

.top-container {
  display: flex;
  width: 90%;
  justify-content: space-around;
  align-items: center;
  gap: 50px;
}

.con {
  display: flex;
  align-items: center;
  gap: 10px;
}

.con>h4 {
  font-size: 18px;
}

#top-ic {
  background-color: #fff;
  padding: 10px;
  color: #000;
  border-radius: 50%;
  font-size: 25px;

  &:hover {
    background-color: rgb(238, 3, 113);
    color: #fff;
  }
}

.top-container>a {
  text-decoration: none;
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  color: #000;
  font-weight: 600;
  border: 1px solid rgb(145, 145, 145);
  transition: all 1s;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.398);

  &:hover {
    background-color: #000;
    color: #fff;
    transform: rotate(2deg);
  }
}

/* our services */
.our-ser {
  margin: 70px 0px;
  display: block;
  text-align: center;
  justify-content: center;
}

.our-ser>h1 {
  font-size: 40px;
}

.our-ser>h3 {
  font-weight: 900;
  color: orange;
  font-size: 20px;
}

/* our service card
 */
.our-service {
  margin: 80px 0px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.our-con {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 70%;
}

.our-card>img {
  height: 150px;
  width: 150px;
}

.our-card {
  border: 1px solid rgba(128, 128, 128, 0.753);
  display: flex;
  background-color: #fff;
  width: 300px;
  gap: 15px;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 1px 5px 6px rgba(156, 155, 155, 0.457);
  transition: all 1s;

  &:hover {
    transform: translateY(20px);
  }
}

#vipr {
  position: relative;
}

.our-card>h2 {
  font-size: 20px;
}

#vipr>h3 {
  position: absolute;
  top: 3%;
  right: 2%;
  border-radius: 50%;
  background-color: #fbda01;
  padding: 7px;


}

/* down app section */
.down-con {
  position: relative;
}

.down-con>img {

  height: 100vh;
  /* background-position: 100% 100%; */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  filter: grayscale(100%);
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);

}

.down-app {
  position: absolute;
  top: 57%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* border: 2px solid blueviolet; */
}

.down-app>h2 {
  font-size: 30px;
  color: yellow;
  font-weight: 700;
  text-shadow: 0px 0px 10px black;

}

.down-app>h1 {
  color: #fff;
  font-size: 50px;
  font-weight: 900;
  text-shadow: 0px 0px 10px black;
}

.fast-b {
  display: flex;
  justify-content: start;
  flex-direction: column;
  gap: 30px;
}

.fast-c p {
  color: #fff;
  text-shadow: 0px 0px 10px rgb(245, 242, 242);


}

.fast-c {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: start;
  line-height: 25px;
}

.fast-c h2 {
  color: #fbda01;
  text-shadow: 0px 0px 10px rgb(7, 6, 6);
  line-height: 40px;
}

#fast-s {
  background-color: #fbda01;
  color: #0a0707;
  border-radius: 50%;
  padding: 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 20px;
}

#app-img2 {
  transition: all 1s;
}

#app-img2>img:hover {
  scale: 0.9;
}

/* DRIVER SEC */
.driver-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin: 30px 0px;
}

.driver-con {
  display: flex;
  /* border: 1px solid black; */
  flex-direction: column;
  gap: 30px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 85%;
  margin: 30px 0px;
}

.driver-he>h2 {
  color: #fbda01;
  font-size: 40px;
  /* text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.288); */
  font-weight: 700;
}

.driver-he>h1 {
  font-size: 45px;
  line-height: 40px;
  font-weight: 900;
}

.dr-p>p {
  font-size: 20px;
  font-weight: 500;
}

.bennifit-main {
  display: flex;
  gap: 50px;
  line-height: 40px;
}

.benifit>h4 {
  font-size: 25px;
}

.benifit>h4>i {
  font-size: 20px;
}

.dri-btn>a {
  text-decoration: none;
  color: #000;
  background-color: #fbda01;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 22px;
  font-weight: 500;
  box-shadow: 0px 2px 10px rgba(255, 0, 106, 0.775);
  transition: all 1s;

  &:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(10px);
  }
}

/* testimonial section */
.wrapper {
  max-width: 1100px;
  width: 100%;
  margin: 100px 0px 50px 0px;
  position: relative;
}

.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}

.wrapper i:active {
  transform: translateY(-50%) scale(0.85);
}

.wrapper i:first-child {
  left: 2px;
}

.wrapper i:last-child {
  right: 2px
}

.wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel.no-transition {
  scroll-behavior: auto;
}

.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}

.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.carousel .card {
  scroll-snap-align: start;
  height: 400px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}

.carousel .card .img {
  background: #f3f300;
  /* border: 2px dotted rgb(249, 246, 246); */
  height: 148px;
  width: 148px;
  border-radius: 50%;
  box-shadow: 0px 4px 9px rgba(194, 194, 196, 0.799);

  &:hover {
    scale: 0.9;
  }
}

.card .img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}

.carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}

.carousel .card span {
  color: #6a6d78;
  font-size: 1.31rem;
}

.main-testo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-top: 5px dotted rgb(8, 8, 7);
  background-color: #F5F5F5;
}

.testo-h {
  margin-top: 60px;
  text-align: center;
}

.testo-h>h2 {
  font-size: 30px;
  color: #fbda01;
  text-shadow: 0px 0px 5px rgba(197, 196, 196, 0.287);
}

.testo-h>h1 {
  font-size: 45px;
}


/* demo img section */
.bus-csr {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 40px 0px 0px 0px;
  gap: 10px;
}

/* partner sec */
.partner {
  background-color: #f3ae00d9;
  margin-top: 20px;
}

.partner-con {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px 0px;
}

.partner-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  transition: all 2s;
}

.partner-img>h4>img:hover {
  scale: 1.1;
}

.demo-img2>a>img:hover {
  scale: 0.9;
}

.partner-con>h1 {
  font-size: 35px;
  line-height: 40px;
  text-shadow: 0px 0px 5px rgba(4, 2, 2, 0.602);
}

/* footer section */
.footer {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  background: #161616;
  border-radius: 1px;
  /* margin-top: 50px; */
}

.footer .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 60px;
}

.footer-row .footer-col h4 {
  color: #fefdfd;
  font-size: 1.5rem;
  font-weight: 400;

}

.footer-col .links {
  margin-top: 20px;
}

.footer-col .links li {
  list-style: none;
  margin-bottom: 10px;
}

.footer-col .links li a {
  text-decoration: none;
  color: #fefefe;
}

.footer-col .links li a:hover {
  color: #fdd700;
}

.footer-col p {
  margin: 20px 0;
  color: #f9d4d4;
  max-width: 300px;
}

.footer-col form {
  display: flex;
  gap: 5px;
}

.footer-col input {
  height: 40px;
  border-radius: 6px;
  background: none;
  width: 100%;
  outline: none;
  background-color: #fff;
  border: 1px solid #7489C6;
  caret-color: #f7f2f2;
  color: #090505;
  padding-left: 10px;
}

.footer-col input::placeholder {
  color: #0a0606;
}

.footer-col form button {
  background: #fad502;
  outline: none;
  border: none;
  padding: 10px 15px;
  box-shadow: 3px 3px 5px rgba(221, 220, 220, 0.398);
  border-radius: 6px;

  cursor: pointer;
  font-weight: 700;
  transition: 0.2s ease;
}

.footer-col form button:hover {
  background: #fefa02;
  color: #060000;
}

.footer-col .icons {
  display: flex;
  margin-top: 30px;
  gap: 20px;
  cursor: pointer;

}

.footer-col .icons i {
  color: #afb6c7;
  font-size: 20px;
}

.footer-col .icons i:hover {
  color: #f86605;
}

.end-se {
  width: 100%;
  background-color: #fefefe;
  display: flex;
  justify-content: space-around;
  padding: 20px;
  align-content: center;
}
#copy-ry{
  color: rgb(211, 211, 207);
  font-size: 16px; 
}
.logo-payment>img {
  padding-left: 10px;
  align-self: center;

}

@media (max-width: 768px) {
  .footer {
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
  }

  .footer .footer-row {
    padding: 20px;
    gap: 1rem;
  }

  .footer-col form {
    display: block;
  }

  .footer-col form :where(input, button) {
    width: 100%;
  }

  .footer-col form button {
    margin: 10px 0 0 0;
  }
}

/* hamburger-container */

.hamburger-container {
  width: max-content;
  position: absolute;
  top:20px;
  right: 12px;
  color: white;
  transition: transform 0.5s ease;
  display: none;
}

/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
  opacity: 0;
  position: absolute;
}

/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {
  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
  outline: 2px solid white;
  outline: auto;
  outline-offset: 4px;
}

/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
  .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
    outline: none;
  }
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
  visibility: hidden;
  transition: visibility 0.5s linear;
}

/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
  visibility: visible;
}

.hamburger-container .checkbox:checked ~ .drawer {
  transform: translateX(0%);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
  opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.hamburger {
  width: 32px;
  height: 32px;
  position: relative;
  display: block;
  transition: transform 0.5s ease;
  z-index: 1;
  cursor: pointer;
  padding-top: 5px;
}

.hamburger .slice {
  display: block;
  width: 100%;
  height: 2px;
  background-color: white;
  transition: all 0.5s ease;
}

.hamburger .slice:not(:first-child) {
  margin-top: 10px;
}

.drawer {
  position: fixed;
  left: 0;
  top: 75px;
  height:fit-content ;
  width: max-content;
  max-width: 100%;
  padding: 16px;
  background: rgba(226, 137, 3, 0.912);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  box-shadow:0px 3px 10px rgba(255, 255, 255, 0.842) ;
}

.drawer .nav-list {
  padding: 0;
  list-style: none;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin-left: 20px; */
}

.drawer .nav-list .nav-list-item {
  /* padding-bottom: 10px; */
}
.nav-list-item{
  font-size: 25px;
  font-weight: 700;
  &:hover{
    color: #000;
  }
}


@media screen and (max-width: 768px) {
  .drawer {
    width: 100%;
  }
  .hamburger-container{
    display: inline-block;
    top: 20px;
  right: 25px;
  }
}

.content {
  margin-top: 52px;
  padding: 10px;
}

.nav-list-item>a {
  color: white;
transition: all 1s;
}

.nav-list-item>a:hover {
  color: rgb(2, 1, 2);
}

/* top btn */
/* top css */

#myBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 99;
  font-size: 15 px;
  border: none;
  outline: none;
  background-color: rgb(255, 98, 0);
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  box-shadow: rgba(44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px;

}

#myBtn:hover {
  background-color: #f608c6;
  box-shadow: rgba(44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);

}
#myBtn>i{
  transform: rotate(180deg);
  transition: 1s;
  /* border: 1px solid black; */
  &:hover{
      transform: rotate(3deg);
  }
}