* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
}

html{
	scroll-behavior: smooth;
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}


/* ============================
   MODERN TOAST NOTIFICATION
=============================== */
.toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s ease;
  z-index: 10000;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast i {
  font-size: 20px;
}

.toast .toast-message {
  flex: 1;
}

.toast .toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  animation: progress 3.5s linear forwards;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

@keyframes progress {
  from { width: 100%; }
  to { width: 0; }
}

/* COLOR VARIANTS */
.toast.error {
  border-left-color: #ef4444;
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.toast.success {
  border-left-color: #16a34a;
  background: linear-gradient(90deg, #15803d, #22c55e);
}

.toast.info {
  border-left-color: #2563eb;
  background: linear-gradient(90deg, #2563EB, #3b82f6);
}

/* ===========================
   MODERN CONFIRMATION MODAL
============================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
}

.modal-overlay.active {
  visibility: visible;
  opacity: 1;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px 25px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  transform: translateY(40px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.modal-overlay.active .modal-box {
  transform: translateY(0);
}

.modal-box h2 {
  font-size: 20px;
  color: #222;
  margin-bottom: 10px;
}

.modal-box p {
  color: #555;
  margin-bottom: 20px;
  font-size: 15px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: 0.3s ease;
}

.btn.confirm {
  background: #ef4444;
  color: white;
}

.btn.confirm:hover {
  background: #dc2626;
}

.btn.cancel {
  background: #e5e7eb;
  color: #333;
}

.btn.cancel:hover {
  background: #d1d5db;
}



nav {
    width: 100%;
    display: flex;
    background-color: white;
    justify-content: space-between;
    padding: 30px 5%;
    align-items: center;
}

nav .fas {
    display: none;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.logo-container {
	display: flex;
	align-items: center;
}

.logo-text {
	font-size: 20px;
	line-height: 20px;
}

.logo {
	max-width: 120px;
}

.nav-links ul li {
	display: inline-block;
	list-style: none;
	margin: 0 20px;
}

.nav-links ul li a {
	color: black;
	text-decoration: none;
	font-size: 18p;
}


body.no-scroll {
    overflow: hidden;
}

header {
	margin: 10px 10% 50px;
	display: flex;
	align-items: center;
	gap: 50px;
	justify-content: center;
}

.head-info {
	display: flex;
	flex-direction: column;
	gap: 25px;
	max-width: 450px;
	min-width: 350px;
}

.head-img {
	max-width: 400px;
}

.header-img img{
	width: 100%; 
}

.head-info h1 {
	font-size: 48px;
}

.big {
	color: #2563EB;
}

.btns {
	display: flex;
	gap: 25px;
}

.btn-book {
	background-color: #2563EB;
	padding: 10px 15px;
	text-decoration: none;
	color: white;
	display: flex;
	gap: 10px;
	align-items: center;
	border-radius: 8px;
}

.btn-book:hover {
	background-color: #00243A;
}


.btn-learn {
	text-decoration: none;
	color: #2563EB;
	border: 0.5px solid #2563EB;
	padding: 10px 15px;
	display: flex;
	gap: 10px;
	align-items: center;
	border-radius: 8px;
}

.header-img {
	max-width: 600px;
}

.xplore-container {
	background-color: #F5F4F8;
	padding: 30px 0;
}

.xplore {
	margin: 10px 10%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}


.display-container {
	display: grid;
	grid-template-columns:  1fr 400px;
	gap: 15px;
	padding: 10px;
	margin: 10px auto;
	max-width: 1200px;
}

.item1 {
	 grid-row: 1 / 3;
	 position: relative;
}

.item2,
.item3 {
	 position: relative;
}

.book-position {
	position: absolute;
	bottom: 40px;
	right: 50px;
	text-decoration: none;
	color: white;
	border: 1px solid white;
	border-radius: 10px;
	font-size: 15px;
	padding: 5px 8px;
}

.book-position:hover {
	background-color: white;
	color: black;
	transition: 0.5s ease;
}

.display-img img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.5s ease-out;
}

.display-img img:hover {
	transform: scale(1.1);
}

.steps {
	text-align: center;
	margin: 0 5% 40px;
	padding: 40px;
	background-color: #F9FAFB;
	border-radius: 10px;
}

 .step-header p,
 .step-header h2{
	padding-bottom: 20px;
}

.step-header {
	margin-bottom: 60px;
}

.steps-container {
	display: grid;
	grid-template-columns: 260px 260px 260px;
	justify-content: center;
	gap: 100px;
}

.step-trip {
	cursor: pointer;
	padding: 20px;
	border-radius: 5px;
	transition: 0.5s ease;
}

.step-trip:hover {
	box-shadow: 1px 1px 3px #888888;
}

.step-trip img{
	width: 100%;
}

.step-trip i{
	font-size: 80px;
	margin-bottom: 20px;
	color: #2563EB;
}

.step-trip h3 {
	margin-bottom: 20px;
	font-weight: 400;
}

.step-trip p {
	font-size: 15px;
	font-weight: 300;
}

.fleet-header {
	text-align: center;
	max-width: 500px;
	padding-top: 40px;
	margin: 0 auto 40px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.fleet {
    display: grid;
    grid-template-columns: 250px 500px 250px;
    justify-content: center;
    align-items: center;
    margin: 0 20px 50px;
}

.car-models h3 {
    padding: 10px 20px;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 300;
    border-radius: 5px;
}

.car-models h3.active {
    background-color: #2563EB;
    color: white;
}

.car-img {
	height: 300px;
}

.car-imgg {
    width: 100%;
    height: 350px;
    margin: 0 auto;
    object-fit: contain;
}

.amount {
	font-weight: 600;
	font-size: 25px;
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; 
}

td, th {
    border: 0.5px solid black;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
}

th {
    width: 50%;
    background-color: #2563EB;
    color: white; 
    padding: 20px;
}

td {
    width: 50%;
}

.banner {
	text-align: center;
	background-color: #2563EB;
	padding: 50px;
	color: white;
}

.banner h1 {
	font-size: 30px;
	margin-bottom: 20px;
	color: white;
}

.banner p {
	color: white;
}

.banner span {
	color: #CADCFC;
	font-size: 25px;
	font-weight: 400;
}

.cars {
	padding: 60px;
	background-color: #F9FAFB;
}

.cars-head {
	text-align: center;
	margin-bottom: 40px;
}

.cars-head h2 {
	font-size: 36px;
	margin-bottom: 15px;
}

.cars-head p {
	font-size: 16px;
}

.cars-link {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.cars-link a {
	text-decoration: none;
	color: black;
	padding: 8px 14px;
	background-color: #FFFFFF;
	border-radius: 9999px;
	margin-bottom: 8px;
}

.cars-link .active {
	background-color: #2563EB;
	color: #FFFFFF;
}

.cars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	justify-content: center;
	opacity: 1;
  transition: opacity 0.4s ease;
  margin-top: 20px;
}

/* Hidden state during fade-out */
.cars-grid.fade-out {
  opacity: 0;
}


.cars-card {
	position: relative;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.cars-card img {
	width: 100%;
	height: 192px;
	object-fit: cover;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.label {
	background-color: #2563EB;
	color: #FFFFFF;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 14px;
	position: absolute;
	top: 20px;
	right: 20px;
}

.car-name h1 {
	font-size: 20px;
}

.car-details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}

.car-details p {
	font-size: 14px;
	color: #4B5563;
}

.car-name {
	display: flex;
	justify-content: space-between;
}

.car-name i {
	color: #fACC14;
}

.car-features {
	display: flex;
	justify-content: space-between;
	color: #374151;
	padding-bottom: 10px;
	border-bottom: 0.5px solid #4B5563;
	font-size: 14px;
}

.features {
	display: flex;
	gap: 5px;
}

.price-book {
	display: flex;
	justify-content: space-between;
}

.price-book h2 span {
	font-size: 16px;
	color: #4B5563;
	font-weight: 400;
}

.book-now-btn {
	background-color: #2563EB;
	color: #FFFFFF;
	padding: 8px 15px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.booking-overlay {
  	position: fixed;
  	inset: 0;
  	background: rgba(0, 0, 0, 0.5);
  	opacity: 0;
  	visibility: hidden;
  	transition: all 0.3s ease;
  	z-index: 9998;
}

.booking-overlay.active {
  	opacity: 1;
  	visibility: visible;
}

.booking-sec .booking-head i {
  font-size: 1.3rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.booking-sec .booking-head i:hover {
  color: #2563EB;
}

.booking-sec.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.booking-sec {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 9999;
  width: 90%;
  max-width: 500px;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  max-height: 90vh;  
  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}

.booking-head {
	padding: 16px;
	border-bottom: 0.5px solid black;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.booking-head h1 {
	font-size: 24px;
}

.car-form-img {
	width: 100px;
	height: 64px;
}

.car-form-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.car-form-details {
	background-color: #F9FAFB;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	margin-bottom: 24px;
}

.car-form-img-details {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.car-form-img-details h3 {
	font-size: 16px;
}

.car-form-img-details p {
	font-size: 14px;
}

.car-form-img-details h2 {
	font-size: 18px;
	color: #2563EB;
}

input {
	width: 100%;
	padding: 8px 16px;
	margin: 10px 0 10px;
	border-radius: 5px;
	border: 1px solid #D1D5DB;
	font-size: 16px;
}

.date-flex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.date-flex input[type="date"] {
	  background-color: #fff;
	  padding: 12px;
	  border-radius: 8px;
	  border: 1px solid #ddd;
	}

form label {
	font-size: 14px;
}

form button {
	margin-top: 24px;
	padding: 12px 0;
	width: 100%;
	border: none;
	background-color: #2563EB;
	color: white;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
}

/* ============================= */
/* CONFIRMATION POPUP BASE STYLE */
/* ============================= */
.confirm-booking-sec {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	 overflow-y: auto;     
   align-items: flex-start; 
   padding: 20px 0;
}

.confirm-booking-sec.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ============================= */
/* CONFIRMATION CONTAINER BOX    */
/* ============================= */
.confirmed-cont {
	background-color: #fff;
	border-radius: 16px;
	width: 95%;
	max-width: 480px;
	max-height: 100%;
  overflow-y: auto;  
  margin-top: 40px;
	padding: 24px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	transform: translateY(30px);
	transition: transform 0.4s ease;
}

.confirm-booking-sec.visible .confirmed-cont {
	transform: translateY(0);
}

/* ============================= */
/* HEADER SECTION                */
/* ============================= */
.confirm-booking-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.confirm-booking-head h1 {
	font-size: 24px;
	font-weight: 700;
	color: #111827;
}

.confirm-booking-head i {
	font-size: 22px;
	color: #6B7280;
	cursor: pointer;
	transition: color 0.3s ease;
}

.confirm-booking-head i:hover {
	color: #2563EB;
}

/* ============================= */
/* GIF + MESSAGE SECTION         */
/* ============================= */
.gif-container {
	width: 140px;
	margin: 0 auto 16px;
}

.gif-container img {
	width: 100%;
	display: block;
}

.booking-confirmed {
	text-align: center;
	margin-bottom: 24px;
}

.booking-confirmed h3 {
	font-size: 22px;
	color: #111827;
	margin: 8px 0;
}

.booking-confirmed p {
	font-size: 15px;
	color: #4B5563;
	line-height: 1.6;
}

/* ============================= */
/* DETAILS BOX                   */
/* ============================= */
.booking-details {
	background-color: #F9FAFB;
	padding: 16px;
	border-radius: 12px;
	margin-bottom: 20px;
}

.booking-details h3 {
	font-size: 18px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 10px;
}

.booking-p {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
	color: #4B5563;
}

.pspan {
	font-weight: 600;
	color: #111827;
}

/* ============================= */
/* BUTTON STYLING                */
/* ============================= */
.confirmed-cont button {
	width: 100%;
	padding: 12px 0;
	border: none;
	border-radius: 8px;
	background-color: #2563EB;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.bookings-container {
	padding: 64px;
}

.bookings {
	text-align: center;
	padding: 30px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.no-bookings {
	text-align: center;
	background-color: #F9FAFB;
	padding: 64px;
	border-radius: 12px;
}

.no-bookings i {
	font-size: 80px;
	opacity: 0.1;
	margin-bottom: 25px;
}

.no-bookings h2 {
	margin-bottom: 20px;
}

.no-bookings p {
	margin-bottom: 20px;
}

.no-bookings button {
	padding: 12px 32px;
	color: #FFFFFF;
	background-color: #2563EB;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}

.active-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.active-no {
	padding: 4px 12px;
	background-color: #DCFCE7;
	border-radius: 9999px;
	color: #15803D;
}

.reservations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 30px;
	justify-content: center;
	opacity: 1;
  transition: opacity 0.4s ease;
}

.reservations-card {
	position: relative;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.reservations-img {
	position: relative;
}

.reservations-img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.confirmlabel {
	background-color: #22C55E;
	color: white;
	font-weight: 500;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 14px;
	position: absolute;
	top: 20px;
	right: 20px;
}

.label2 {
	background-color: #FFFFFF;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 14px;
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.reservations-cont {
	padding: 24px;
}

.reservations-card h3 {
	margin-bottom: 10px;
}

.reservations-details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 12px;
	background-color: #EFF6FF;
	margin-bottom: 10px;
}

.reservations-info {
	display: flex;
	gap: 5px;
	align-items: center;
}

.reservations-info i {
	color: #2563EB;
}

.reservations-info p {
	font-size: 14px;
}

.reservations-x {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0 0;
}

.reservations-price p {
	font-size: 12px;
}

.reservations-price h1 {
	font-size: 30px;
}

.cancel-btn {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 12px 24px;
	border-radius: 12px;
	background-color: #FEF2F2;
	color: #DB2626;
	cursor: pointer;
}

.why-choose-us-container {
	margin: 100px 10%;
}

.choose-us-img img{
	width: 100%;
	margin-bottom: 90px;
}

.why-choose-us {
	display: grid;
	grid-template-columns: 400px 400px;
	align-items: top;
	justify-content: center;
	gap: 100px;
}

.choose-us h3,
.choose-us h1 {
	margin-bottom: 10px;
}

.choose-us p {
	font-weight: 300;
	margin-bottom: 40px;
	text-align: justify;
}

.choose-us-2-content {
	display: flex;
	gap: 20px;
}

.choose-us-2-content i{
	font-size: 35px;
	color: #2563EB;
}

.choose-us-2-content {
	margin-bottom: 10px;
}

.choose-us-2-content h3 {
	padding-bottom: 10px;
}

.choose-us-2-content p {
	font-weight: 300;
}


.find-details-btn {
	background-color: #2563EB;
	padding: 10px 15px;
	text-decoration: none;
	color: white;
	border-radius: 12px;
}


.testimonials-container {
	margin: 50px 8%;
	padding: 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	background-color: #F9FAFB;
	border-radius: 10px;
}

.testimonials-head {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 600px;
	margin: 0 auto;
}

.testimonials-head p {
	font-weight: 300;
}


.testimonials-carosel {
	gap: 50px;
	text-align: justify;
}

.frame {
	max-width: 650px;
	overflow: hidden;
}

.slider {
	display: grid;
	grid-template-columns: 300px 300px 300px 300px 300px 300px;
	transition: all 1s ease;
}

.testimonials-carosel h4 {
	margin-bottom: 20px;
}

.testimonial-avi {
	max-width: 40px;
	border-radius: 50%;
}

.testimonial-avi-grid {
	display: flex;
	gap: 15px;
}

.testimonial-avi-flex {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.testimonial-avi-flex i {
	font-size: 40px;
	color: #2563EB;
}

.testi-box h4 {
	font-weight: 400;
}

.button {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid black;
	cursor: pointer;
}

.bottom {
	display: flex;
	gap: 30px;
	align-items: center;
}

.bottom i {
	padding: 10px;
	
}

.bottom i:hover {
	color: white;
	background-color: #2563EB;
	cursor: pointer;
	transition: 0.5s ease-out;
	border-radius: 8px;
}


.faq-section {
    display: flex;
    flex-direction: column;
    margin: 100px auto;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    justify-content: center;
    position: relative;
}

.faq-position img{
	max-width: 500px;
	position: absolute;
	left: -550px;
	bottom: 10px;
}


.faq-section p {
    margin-bottom: 15px;
}

.faq-param {
	max-width: 500px;
	text-align: center;
	padding:0 10px;
}

.faq-title {
    font-size: 40px;
}

.faq {
    max-width: 800px;
    border-bottom: 0.5px solid black;
    cursor: pointer;
    margin: 0 30px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}
.faq-question h3 {
    font-weight: 500;
}

.faq-question i{
    font-size: 10px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
}

.faq-answer p{
    padding: 20px 20px 0;
    line-height: 1.6;
}

.faq.active .faq-question {
    background-color: #2563EB;
    color: white;
    border-radius: 7px;
}

.faq.active .faq-question h3 {
    color: white;
}

.faq.active .faq-answer {
    max-height: 800px;
    animation: fade 0.5s ease-in-out;
}


.faq.active .fas {
    transform: rotate(90deg);
    color: white;
}

.fas {
    transition: transform 0.3s ease-in;
}

footer {
	padding: 30px 10%;
	display: flex;
	gap: 30px;
	justify-content: center;
	background-color: #2563EB;
	color: white;
}

.car-rental-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 290px;
}


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

.company,
.working {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 250px;
}

.sub {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 250px;
}


.company ul,
.working ul{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.company ul li,
.working ul li{
	list-style: none;
}

.sub a {
	text-decoration: none;
	color: #2563EB;
	background-color: white;
	padding: 8px 10px;
	border-radius: 5px;
	text-align: center;
}

.sub a:hover {
	background-color: transparent;
	color: white;
	transition: 0.5s ease;
	border: 1px solid white;
}

.sub input {
	padding: 10px 20px;
	outline-color: #2563EB;
}

.scrollup {
	text-decoration: none;
	position: fixed;
	right: 32px;
	bottom: -50%;
	background-color: #2563EB;
	display: inline-flex;
	padding: 8px;
	font-size: 22px;
	color: white;
	z-index: 2;
	transition: bottom .4s, transform .4s, background-color .4s;
	border-radius: 8px;
}

.scrollup:hover {
	transform: translateY(-10px);
}

.show-scroll {
	bottom: 22px;
}


@media only screen and (max-width: 1000px){
    .steps-container {
		grid-template-columns: 200px 200px 200px;
	}

	.fleet {
	   grid-template-columns: 100px 400px 250px;
	}

	.why-choose-us {
		grid-template-columns: 350px 350px;
	}

	.faq-position img{
		max-width: 350px;
		position: absolute;
		left: -350px;
		bottom: 10px;
	}

  }



@media only screen and (max-width: 940px){
    nav .fas {
        display: block;
        font-size: 25px;
        color: #2563EB;
    }

    nav ul {
        background-color: #ffffff;
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        padding-top: 50px;
        z-index: 2;
        transition: ease 0.5s;
    }

    .nav-links ul li {
        display: flex;
        margin: 25px;
    }

    nav ul .fas {
        position: absolute;
        top: 25px;
        left: 25px;
        cursor: pointer;
    }

    .button-fas {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .book-a-car-form {
	     grid-template-columns: 300px 300px;
	}

	.steps-container {
		grid-template-columns: 260px 260px;

	}

	.fleet {
	    grid-template-columns:  500px ;
	    text-align: center;
	}

	.faq-position img{
		max-width: 300px;
		position: absolute;
		left: -250px;
		bottom: 10px;
	}

	footer {
		flex-wrap: wrap;
		align-items: left;
		justify-content: left;
	}

	.modal {
        width: 500px;
        max-width: 500px;
    }
	
}

@media only screen and (max-width: 830px){
	   header {
		flex-direction: column;
		align-items: center;
	}

	.display-container {
		grid-template-columns:  1fr;
	}

	.book-a-car-form {
	     grid-template-columns: 300px;
	}

	.steps-container {
		grid-template-columns: 500px;
		gap: 50px;
	}

	.why-choose-us {
		grid-template-columns: 500px ;
	}

	.frame {
		max-width: 300px;
		overflow: hidden;
	}

	.book-a-car-form {
		gap: 2px;
	}

	.book-a-car-form button {
	    margin-top: 10px;
	}

	.select-wrapper::after {
	  top: 30px;
	  right: 25px;
	}

	.modal {
        width: 350px;
        max-width: 350px;
    }
}

@media only screen and (max-width: 600px) {
	.steps-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.book-a-car-form {
	     grid-template-columns: 300px;
	}

	.fleet {
	    grid-template-columns:  1fr ;
	    margin-left: 50px;
	    margin-right: 50px;
	}

	.why-choose-us {
		grid-template-columns: 1fr ;
	}

	.choose-us p{
		font-size: 15px;
	}

	.choose-us-2-content p {
		font-size: 15px;
	}

	.button {
		width: 10px;
		height: 10px;
	}

	.bottom {
		gap: 15px;
	}

	.fleet-header {
		max-width: 300px;
		margin: 0 auto 40px;
	}

	.date-flex {
		grid-template-columns: 1fr;
	}

	.cars,
	.bookings-container {
		padding: 20px;
	}

}