body{overflow-x:hidden;    
font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

:root {
    
--main-color:rgb(0 92 138);
--primary-color: #3498db;
--secondary-color: #2ecc71;
--sub-color:rgb(236 246 250);
--golden:#c99b5a;
}

.bg-sub{background:var(--sub-color);}
.bg-main{background:var(--main-color) !important;}
.golden{color:var(--golden);}
.my-btn {
  background-color: var(--main-color);
  border: none;
  padding: 10px 20px;
  color: white;
}

html {
  scroll-behavior: smooth;       /* optional, for smooth scroll */
  scroll-padding-top: 70px;     /* equal to sticky navbar height */
}

.my-btn:hover {
  background-color: var(--main-color);
 color:white;
}

.mbtn{  transition: all 0.3s ease; /* smooth animation */}

.mbtn:hover{ transform: translateY(-6px); /* lifts the box upward */
  box-shadow: 0 5px 5px rgba(0,0,0,0.2); /* stronger shadow */}

.nav-link{
    color:black !important;
}

/*.contact a{color:black;}*/

.accordion .item {
    border: 1px solid #e7e7e7;
    margin-bottom: 15px;
    background: white;
}

.t-p{
  color: black;
  padding: 10px 15px ;
}

.accordion .item .item-header h2 button.btn.btn-link {
    background: transparent;
    color: black;
    border-radius: 0px;
    /*font-size: 16px;*/
    font-weight: 500;
    line-height: 2.5;
    text-decoration: none;
}
.accordion .item .item-header {
    border-bottom: none;
    background: transparent;
    padding: 0px;
    margin: 2px;
}

.accordion .item .item-header h2 button {
    color: white;
    font-size: 20px;
    /*padding: 15px;*/
    display: block;
    width: 100%;
    text-align: left;
}

.accordion .item .item-header h2 i {
    float: right;
    font-size: 22px;
    color: black;
    /*background-color: var(--main-color);*/
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

button.btn.btn-link.collapsed i {
    transform: rotate(0deg);
}

button.btn.btn-link i {
    transform: rotate(180deg);
    transition: 0.5s;
}

.form-label{text-transform:uppercase; font-weight:600; font-size:13px;}

.banner{background: linear-gradient(rgb(0, 0, 0, 0.55), rgb(0, 0, 0, 0.55)), url(images/banner.jpg) center fixed repeat;
    background-size: auto; color:white; height:90vh;}

.why-choose{background:var(--main-color); color:white;}

p{color: rgb(89 101 108);}

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

#pricing{background:var(--sub-color);}

section{scroll-margin-top:70px;}

.section-heading::after {
  content: "";
  display: block;
  width: 5%;          /* underline width */
  height: 0.25rem;         /* underline thickness */
  background-color: var(--golden); /* underline color */
  margin: 0 auto;      /* centers the underline */
  margin-top: 8px;     /* spacing between text and underline */
border-radius:10px;
    
}

/*.boxshadow{box-shadow:0 0 2px 2px white;}*/
.boxshadow p{word-spacing:5px;}

.boxshadow {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(255,255,255,0.8);
  transition: all 0.3s ease; /* smooth animation */
}

/* Hover effect: move up slightly and deepen shadow */
.boxshadow:hover {
  transform: translateY(-6px); /* lifts the box upward */
  box-shadow: 0 12px 20px rgba(0,0,0,0.2); /* stronger shadow */
}

.bookride{background:var(--main-color);}
.footer p{font-size:13px; color:rgba(255, 255, 255, 0.6);}
.footer a{color:rgba(255, 255, 255, 0.6);}

.social-icons {
  display: flex;
  gap: 10px; /* spacing between icons */
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* circle size */
  height: 40px;  /* circle size */
  border-radius: 50%; /* makes it round */
  background-color: #434344; /* circle background color */
  color: #fff;   /* icon color */
  font-size: 18px; /* icon size */
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  background-color: #77777a; /* darker shade on hover */
  transform: scale(1.1);     /* subtle zoom effect */
}


.fleet .card {
  transition: all 0.3s ease;
   /* cleaner look */
}

.fleet .card:hover {
  transform: translateY(-8px); /* subtle lift */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* deeper shadow */
}

.fleet .card img {
  transition: transform 0.4s ease;
}

.fleet .card:hover img {
  transform: scale(1.05); /* slight zoom */
}

.fleet .card {
  overflow: hidden;
}