@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
/* font-family: 'Patua One', cursive; */

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     outline: none;
     text-decoration: none;
     border: none;
     scroll-behavior: smooth;
     font-family: 'Roboto', sans-serif;
}

:root {
     --main-color: #001EFF;
     --bg-color: #fff;
     --bg-second: #E2EEF5;
     --bg-transparent: rgba(0, 0, 0, .8);
     --bg-transparent-card: rgba(0, 0, 0, .7);
     --bg-third: #EFEFEF;

     --blue: #152B42;
     --green: #25D366;
     --grey: #777;
     --red: #fa3e3e;

     --heading-color: #444444;
     --text-color-dark: #626262;
     --text-color-light: #fff;

     --border: .1rem solid #ccc;
     --border-white: : .1rem solid #fff;
     --border-main-color: .1rem solid var(--main-color);

     --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
     --box-shadow-footer-links: 1px 1px 2px #6f6f6f;
}

html {
     font-size: 62.5%;
     overflow-x: hidden;
}

body {
     overflow-x: hidden;
}

.space {
     height: 100vh;
}

.space.black {
     background-color: rgb(49, 42, 42);
}

.space.white {
     background-color: rgb(245, 235, 235);
}

section {
     padding: 5rem 7% 5rem;
}

.heading {
     font-size: 4rem;
     line-height: normal;
     font-family: 'Patua One', cursive;
     padding: 1rem 0rem 1rem;
     color: var(--heading-color);
     text-transform: capitalize;
     text-align: start;
     font-weight: 500;
     text-align: center;
     padding: .5rem;
}

.heading>span {
     font-family: 'Patua One', cursive;
     font-weight: 500;
     background-color: var(--main-color);
     color: var(--text-color-light);
     padding: .5rem 1rem;
     border-radius: .5rem;
     text-transform: capitalize;
     position: relative;
     background-image: url('../img/lines.png');
}

.heading-1 {
     font-size: 3rem;
     line-height: normal;
     font-family: 'Patua One', cursive;
     padding: .5rem 0rem .5rem;
     color: var(--heading-color);
     text-align: start;
     font-weight: 500;
}

.heading-2 {
     font-size: 2rem;
     line-height: normal;
     font-family: 'Patua One', cursive;
     padding: .5rem 0rem .5rem;
     color: var(--heading-color);
     text-align: start;
     font-weight: 500;
}

.text {
     font-size: 1.5rem;
     color: var(--text-color-dark);
     font-family: 'Roboto', sans-serif;
}

.text-1 {
     font-size: 1.7rem;
     color: var(--text-color-dark);
     font-family: 'Roboto', sans-serif;
}

.btn {
     font-size: 1.5rem;
     background-color: var(--main-color);
     color: var(--text-color-light);
     padding: 1.5rem 2.5rem;
     border-radius: .5rem;
     cursor: pointer;
}

.flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
}

.header {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     z-index: 100;
}

.header.sticky {
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.header>.header-top,
.header>.header-down {
     padding: 0 7%;
     font-size: 1.5rem;
     font-weight: 500;
     text-transform: capitalize;
     transition: transform 0.3s ease-in-out;
}

.header-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     background-color: var(--bg-second);
     height: 4rem;
}

.header .contact a {
     color: var(--text-color-dark);
}

.header .contact {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-transform: inherit;
     gap: 2rem;
     height: 100%;
}

.header .contact span a {
     display: flex;
     align-items: center;
     gap: .5rem;
}

.header .contact a i {
     font-size: 2.2rem;
     font-weight: 500;
}

.header-top>.contact>a {
     border: var(--border);
     border-radius: 10rem;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: .5rem;
     font-size: 4rem;
}

.header .contact a {
     transition: all .2s ease-in-out;
}

.header .contact a:hover {
     transform: translateX(1rem);
     color: var(--main-color);
}

.hide {
     height: 0;
}

.header-down {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 10rem;
     background: transparent;
     color: var(--text-color-light);
}

.header-down .contact {
     display: none;
}

.header-down .contact a {
     color: var(--bg-color);
}

.header-down .contact .btn {
     position: relative;
     animation: fade 3s infinite;
}

@keyframes fade {
     0% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.1);
     }

     100% {
          transform: scale(1);
     }
}

.header-down.transparent {
     background: var(--bg-transparent);
}

.header-top-space {
     height: 5rem;
     background: transparent;
}

.header-down-space {
     height: 10rem;
     background: transparent;
}

.navbar ul {
     display: flex;
     align-items: center;
     width: 100%;
     justify-content: center;
     gap: .5rem;
}

.navbar ul a {
     color: var(--text-color-light);
     font-weight: 400;
     font-size: 1.5rem;
     height: 100%;
     padding: 1.8rem 2rem;
     border-radius: 1rem;
     display: flex;
     align-items: center;
}

.navbar a:hover {
     background-color: var(--main-color);
     color: var(--text-color-light);
}

.navbar a.active {
     background-color: var(--main-color);
     color: var(--text-color-light);
}

.logo img {
     height: 10rem;
}

#hamburg {
     font-size: 3.5rem;
     color: var(--text-color-light);
     display: none;
     cursor: pointer;
}

.links {
     display: flex;
     align-items: center;
     gap: 1rem;
}

.links a {
     font-size: 2.5rem;
     border-radius: 10rem;
     background-color: var(--bg-color);
     color: var(--text-color-dark);
     padding: .5rem;
     display: flex;
     justify-content: center;
     align-items: center;
}

.links a.blue:hover {
     background-color: var(--blue);
     color: var(--bg-color);
}

.links a.red:hover {
     background-color: var(--red);
     color: var(--bg-color);
}

.links a.main:hover {
     background-color: var(--main-color);
     color: var(--bg-color);
}

.active {
     display: block;
}

.home {
     /* margin-top: 110px; */
     position: relative;
     min-height: 70rem;
     height: 100vh;
     padding: 0;
}

.home .carousel {
     max-width: 100vw;
     max-height: 100vh;
     min-height: 70rem;
}

.carousel {
     overflow: hidden;
     width: 100%;
     height: 100%;
}

.carousel-container {
     display: flex;
     transition: transform 0.5s ease;
     width: 100%;
     height: 100%;
}

.carousel {
     position: relative;
     box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
     /* margin-top: 150px; */
}

.carousel-inner {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
}

.carousel-open:checked+.carousel-item {
     position: static;
     opacity: 100;
}

.carousel-item {
     position: absolute;
     opacity: 0;
     -webkit-transition: opacity 1s ease-out;
     transition: opacity 1s ease-out;
     width: 100%;
     height: 100%;
}

.carousel-item img {
     display: block;
     height: 100%;
     width: 100%;
     max-width: 100%;
     object-fit: cover;
}

.carousel-control {
     background: var(--bg-transparent-white-form);
     border-radius: 50%;
     color: var(--text-color-light);
     cursor: pointer;
     display: none;
     font-size: 3.5rem;
     height: 4rem;
     line-height: 3.5rem;
     position: absolute;
     top: 60%;
     -webkit-transform: translate(0, -50%);
     cursor: pointer;
     -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
     text-align: center;
     width: 4rem;
     z-index: 10;
     user-select: none;
     background: rgba(0, 0, 0, 0.8);
}

.carousel-control.prev {
     left: 2%;
}

.carousel-control.next {
     right: 2%;
}

.carousel-control:hover {
     background: rgba(0, 0, 0, 0.8);
     color: #aaaaaa;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3,
#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5 {
     display: block;
}


.carousel-item .card {
     position: absolute;
     background-color: var(--bg-transparent-card);
     padding: 3rem;
     z-index: 2;
     top: 40%;
     color: var(--text-color-light);
     /* max-width: 60rem; */
     margin-left: 8%;
     width: 40%;
}

.carousel-item .card h1 {
     font-size: 5rem;
     text-transform: uppercase;
}

.carousel-item .card p {
     font-size: 1.8rem;
     padding: 2rem 0;
     line-height: 1.8rem;
     text-align: justify;
}

.carousel-item .card.bus {
     background: transparent;
     width: 50%;
}

.carousel-item .card.bus img {
     transform: translate(-200%);
     padding: 2rem 0;
     transition: 1s ease;
}


.home .form-container {
     padding: 4rem;
     background-color: var(--bg-transparent-card);
     position: absolute;
     width: 30%;
     display: flex;
     justify-content: center;
     top: 30%;
     margin-right: 8%;
     right: 0;
}

.home .form-container form {
     display: flex;
     gap: 1rem;
     flex-direction: column;
     width: 100%;
     justify-content: center;
     color: var(--text-color-light);

}

.home .form-container form h2 {
     font-size: 2.5rem;
     font-family: 'Patua One', cursive;
     text-align: center;
     margin-bottom: 1rem;
     font-weight: 100;
     text-transform: uppercase;
}

.home .form-container form input {
     padding: 1rem;
     font-size: 1.4rem;
}

.home .form-container form textarea {
     padding: 1rem;
     height: 12rem;
     font-size: 1.4rem;
     resize: none;
}

.home .form-container form input.btn {
     background-color: var(--main-color);
     color: var(--text-color-light);
     cursor: pointer;
     border-radius: .3rem;
}

.about {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 2rem;
}

.about-content {
     display: flex;
     gap: 2rem;
     padding-top: 3rem;
}

.about-content .left {
     width: 100%;
     /* height: 100%; */
     display: flex;
     align-items: center;
     justify-content: center;
}

.about-content .left img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.about-content .right {
     width: 90%;
     display: flex;
     flex-direction: column;
     gap: 2rem;
     align-items: start;
}

.about-content .right ul {
     display: grid;
     grid-template-columns: 1fr 1fr;
     width: 100%;
     list-style: none;
     row-gap: 2rem;
     padding-left: 2rem;
}

.about-content .right ul li {
     display: flex;
     gap: 2rem;
     align-items: center;
}

.about-content .right ul li i {
     font-size: 2rem;
}


.services {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     justify-content: center;
     background-color: var(--bg-second);
}

.grid-container-services {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 2rem;
     margin-bottom: 3rem;
}

.grid-item-services {
     display: flex;
     flex-direction: column;
}

.grid-item-services .img-container {
     display: flex;
}

.grid-item-services .img-container img {
     width: 100%;
     height: 100%;
     transition: all .3s ease;
     transform: translateY(1rem);
}

.grid-item-services:hover .img-container img {
     transform: translateY(0rem);
}

.grid-item-services .content {
     display: flex;
     background-color: var(--main-color);
     justify-content: center;
     padding: 1rem 0;
     z-index: 1;
}

.grid-item-services .content .heading-2 {
     color: var(--text-color-light);
     text-align: center;
}


.fleet {
     display: flex;
     flex-direction: column;
     gap: 3rem;
}

.grid-container-fleet {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     gap: 2rem;
}


.grid-item-fleet {
     position: relative;
     cursor: pointer;
}

.grid-item-fleet::before {
     transition: .1s ease-in;
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.grid-item-fleet:hover::before {

     background-color: rgba(0, 0, 0, 0.137);
     z-index: 1;
}

.grid-item-fleet img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.grid-item-fleet .content {
     position: absolute;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     bottom: 1rem;
     padding: 0 1rem;
     width: 100%;
}

.grid-item-fleet .content .heading-1 {
     color: var(--text-color-light);
     text-align: center;
}

.grid-item-fleet .content .line {
     height: 1px;
     border: 1px solid var(--text-color-light);
     margin: 1rem 0;
     width: 0;
     opacity: 0;
     display: none;
     transition: 0.5s ease-in;
}

.grid-item-fleet:hover .content .line {
     display: block;
     opacity: 1;
     width: 80%;
}

.contact-us {
     display: flex;
     flex-direction: column;
     gap: 3rem;
     background: url('../img/home_transport.jpg');
     background-repeat: no-repeat;
     background-size: cover;
}

.contact-us .heading {
     color: var(--main-color);
}

.contact-us .content p {
     padding-top: 2rem;
}

.footer {
     background: url('../img/footer-img.jpg');
     background-repeat: no-repeat;
     /* background-position: bottom; */
     background-size: cover;
}

.footer-up {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
     gap: 2rem;
     justify-content: space-between;
     align-items: flex-start;
     padding: 5rem 7%;
}

.box-footer {
     display: flex;
     flex-direction: column;
     margin-top: 2rem;
     gap: 1.5rem;
}

.box-footer .logo img {
     width: 25rem;
     height: fit-content;
}

.box-footer a {
     font-size: 1.7rem;
     color: var(--main-color);
     font-weight: normal;
     width: max-content;
}

.box-footer span {
     transition: all .2s ease;
}

.box-footer span:hover {
     transform: translateX(1rem);
}

.box-footer a {
     transition: all .2s ease;
}

.box-footer a:hover {
     transform: translateX(1rem);
}

.box-footer a i {
     border: var(--border-main-color);
     padding: .1rem;
     font-size: 2.5rem;
}

.box-footer .map {
     max-width: 27rem;
     max-height: 27rem;
     width: 100%;
     background-color: var(--text-color-dark);
}

.footer-down {
     padding: 0rem 7% 4rem;
}

.footer-down .links a {
     background-color: var(--text-color-dark);
     color: var(--text-color-light);
}

.footer .credit {
     text-align: center;
     font-size: 1.5rem;
     color: var(--heading-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
     font-weight: 500;
}

.footer .credit .content a {
     text-decoration: underline;
     color: var(--main-color);
}

.footer .credit .content a:hover {
     color: var(--text-color-dark);
}

.fixed-btns {
     position: fixed;
     bottom: 1rem;
     right: 2rem;
     z-index: 100;
     flex-direction: column;
     gap: 1.5rem;
}

.top a {
     background-color: var(--grey);
     border-radius: 10rem;
}

.top a i {
     font-size: 4rem;
     color: var(--text-color-light);
}

.whatsapp a {
     background-color: var(--green);
     border-radius: 10rem;
     padding: 1rem;
}

.whatsapp a i {
     font-size: 4rem;
     color: var(--text-color-light);
}

/* Index Page end */
/* about us page */

.banner {
     height: 26rem;
     background: url('../img/banner-about.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: bottom;
}

.about-us .heading {
     padding-bottom: 2rem;
}

.about-us>p {
     padding-bottom: 3rem;
     line-height: 3rem;
}

.about-us .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 3rem;
     padding-top: 5rem;
}

.about-us .container .box {
     display: flex;
     gap: 2rem;
     align-items: center;
     justify-content: center;
     background-image: url('../img/lines.png');
     padding: 3rem 4rem;
     height: 100%;
     width: 100%;
}

.about-us .container .box .inner-box {
     display: flex;
     gap: 2rem;
     align-items: center;
     justify-content: space-between;
     width: 80%;
     max-width: 20rem;
}

.about-us .container .box i {
     font-size: 7rem;
     color: var(--main-color);
}

.about-us .container .box p {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 1rem;
     text-align: end;
}

.about-us .container .box p big {
     font-size: 5rem;
}

.about-us .container .box p small {
     color: var(--text-color-dark);
     font-size: 1.7rem;
}

.contact-banner {
     min-height: 35rem;
     display: flex;
     align-items: center;
     justify-content: center;
     background-position: top right;
}

/* Services page */

.info-services .heading-1 {
     padding: 3rem 0;
     text-align: center;
}

.info-services ul {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     padding-left: 2rem;
     padding-bottom: 3rem;
}

.info-services a.text-1 {
     color: var(--main-color);
}

.info-services a.text-1:hover {
     text-decoration: underline;
}

.info-services p {
     padding: 1rem 0;
}

/* Fleet page */
.fleet-page-section .heading {
     padding-bottom: 5rem;
}

.fleet-page-item {
     display: flex;
     gap: 2rem;
     /* align-items: center; */
     padding-bottom: 5rem;
}

.fleet-page-item .heading {
     text-align: start;
}

.fleet-page-item .text-1 {
     line-height: 2.5rem;
}

.fleet-page-item .right {
     padding-top: 5rem;
     width: 100%;
}

.fleet-page-item .left {
     width: 70%;
}

.fleet-page-item .left img {
     width: 100%;
     left: 100%;
     object-fit: contain;
}

/* Get a qoute */
.pop-up {
     position: fixed;
     inset: 0;
     z-index: 500;
     background-color: rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
     display: none;
}

.pop-up.active {
     display: flex;
}

.pop-up .card {
     background-color: var(--bg-color);
     padding: 2rem;
     display: flex;
     gap: 1rem;
     flex-direction: column;
     max-width: 80rem;
     width: 100%;
     position: relative;
}

.pop-up .card .heading {
     color: var(--main-color);
     text-align: start;
}

.pop-up .card form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.pop-up .card form>div {
     display: flex;
     gap: 1rem;
     width: 100%;
}

.pop-up .card form input,
.pop-up .card form textarea {
     border: var(--border);
     padding: 1rem;
     font-size: 1.4rem;
     width: 100%;
     resize: none;
}

#cancel-popup {
     position: absolute;
     right: 1rem;
     top: 1rem;
     background-color: var(--main-color);
     color: var(--bg-color);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: .2rem;
     font-size: 2rem;
     user-select: none;
     cursor: pointer;
}

/* Contact us page */

.contact-us-page .heading {
     padding-bottom: 5rem;
}

.contact-us-page .container {
     display: flex;
     gap: 2rem;
}

.contact-us-page .container .left {
     width: 90%;
}

.contact-us-page .container .right {
     width: 50%;
}

.contact-us-page .container .left form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.contact-us-page .container .left form>div {
     display: flex;
     gap: 1rem;
     width: 100%;
}

.contact-us-page .container .left form input,
.contact-us-page .container .left form textarea {
     border: var(--border);
     padding: 1rem;
     font-size: 1.4rem;
     width: 100%;
     resize: none;
}

.contact-us-page .container .left form input[type='submit'] {
     width: fit-content;
}

.contact-us-page .container .right>div {
     display: flex;
     flex-direction: column;
     align-items: start;
     gap: 1rem;
     padding: 1rem 0;
}

.contact-us-page .container .right>div:not(:last-child) {
     border-bottom: var(--border);
     border-color: var(--bg-second);
}

.map {
     width: 100%;
     height: 40rem;
     background-color: var(--text-color-dark);
}

/* responsive breakpoints less than 5200px  */

@media (width<=5200px) {
     html {
          font-size: 220%;
     }
}

@media (width<=5000px) {
     html {
          font-size: 200%;
     }
}

@media (width<=4500px) {
     html {
          font-size: 180%;
     }
}

@media (width<=4000px) {
     html {
          font-size: 160%;
     }
}

@media (width<=3500px) {
     html {
          font-size: 140%;
     }
}

@media (width<=3000px) {
     html {
          font-size: 120%;
     }
}

@media (width<=2500px) {
     html {
          font-size: 100%;
     }
}

@media (width<=2000px) {
     html {
          font-size: 80%;
     }
}

@media (width<=1500px) {
     html {
          font-size: 60%;
     }
}

@media (width<=1200px) {
     html {
          font-size: 55%;
     }

     .carousel-item .card h1 {
          font-size: 4rem;
     }

     .home .form-container {
          width: 35%;
     }

     /* Index Page end */
}

@media (width<992px) {
     html {
          font-size: 50%;
     }

     .home {
          min-height: 700px;
     }

     .home .carousel {
          min-height: 700px;
     }

     .header>.header-top,
     .header>.header-down {
          padding: 0 3%;
     }

     section {
          padding: 5rem 3%;
     }

     .navbar a {
          padding-left: 3%;
     }

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

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

     .grid-item-fleet {
          height: 40rem;
     }

     .grid-item-fleet img {
          object-fit: cover;
          object-position: top;
     }

     .grid-item-fleet .content {
          bottom: 5%;
     }

     .grid-item-fleet .content .heading-1 {
          font-size: 4rem;
     }

     /* Index Page end */
}

@media (width<778px) {
     .heading {
          font-size: 3rem;
     }

     .heading-1 {
          font-size: 2.2rem;
     }

     .heading-2 {
          font-size: 1.7rem;
     }

     .text-1 {
          font-size: 1.5rem;
     }

     .header-down {
          background-color: var(--bg-third);
          height: 10rem;
     }

     .header-down-space {
          height: 10rem;
     }

     .logo img {
          height: 10rem;
     }

     .navbar {
          /* width: 100%; */
          display: none;
     }

     .navbar ul {
          position: absolute;
          display: grid;
          grid-template-columns: 1fr;
          top: 100%;
          gap: 0;
          background-color: var(--bg-second);
          left: 0;
          right: 0;
          justify-content: start;
          width: 100%;
     }

     .navbar ul a {
          color: var(--text-color-dark);
          font-size: 2rem;
          font-weight: 400;
          padding: 1.5rem;
          padding-left: 7%;
          border-radius: 0;
          width: 100%;
     }

     #hamburg {
          display: block;
          color: var(--main-color);
     }

     .active {
          display: block;
     }

     .header-top .links {
          display: none;
     }

     .header-top .contact {
          width: 100%;
     }

     .header-top .contact>p {
          display: none;
     }

     .carousel-item .card {
          top: 82%;
          margin: 0;
          width: 80%;
          left: 50%;
          right: 50%;
          transform: translate(-50%, -50%);
     }

     .carousel-item .card.bus {
          width: 90%;
     }

     .home .form-container {
          top: 40%;
          margin: 0;
          width: 80%;
          left: 50%;
          right: 50%;
          transform: translate(-50%, -50%);
     }

     .about-content {
          flex-direction: column;
     }

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

     .footer .credit {
          justify-content: center;
          gap: 3rem;
     }

     /* Index Page end */
     /* About Page */
     .about-us .container {
          flex-direction: column;
     }

     .about-us .container .box {
          justify-content: center;
     }

     /* Services page */
     .info-services ul {
          grid-template-columns: 1fr;
     }

     /* fleet page */
     .fleet-page-item {
          flex-direction: column;
     }

     .fleet-page-item .left {
          width: 70%;
     }

     /* Contact us page */
     .contact-us-page .container {
          flex-direction: column;
     }

     .contact-us-page .container .left {
          width: 100%;
     }

     .contact-us-page .container .right {
          width: 100%;
     }
}

@media (width<=600px) {
     html {
          font-size: 48%;
     }

     .heading {
          font-size: 2.5rem;
     }

     .about-content .right {
          width: 100%;
     }

     .grid-item-fleet {
          height: 35rem;
     }

     .grid-item-fleet img {
          object-fit: cover;
          object-position: top;
     }

     /* Index Page end */
}

@media only screen and (max-width: 480px) {

     .header .contact {
          gap: .4rem;
          justify-content: space-between;
     }

     .header .contact span {
          font-size: 1.4rem;
     }

     .header .contact span,
     .header .contact span i {
          font-size: 1.4rem;
     }

     .carousel-item .card h2 {
          font-size: 3.5rem;
     }

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

     /* Index Page end */
     /* popup qoute */
     .pop-up {
          padding: 1rem;
     }

     .pop-up .card form>div {
          flex-direction: column;
     }

     /*  mobile setting changes */

     .home .form-container form textarea {
          display: none;
     }

     .carousel-item .card {
          width: 90%;
     }

     .home .form-container {
          width: 90%;
     }

     .header-top {
          display: none;
     }

     .header-down .contact {
          display: flex;
          /* width: 100%; */
          text-align: center;
          align-self: center;
     }

     .header-down .contact span {
          font-size: 12px !important;
     }

     .header-down .contact i {
          font-size: 16px !important;
     }

     .carousel-item .card p {
          font-size: 16px;
          line-height: 20px;
     }

     input,
     textarea {
          font-size: 16px !important;
          line-height: 20px !important;
     }

     .heading {
          font-size: 22px !important;
     }

     .heading-1 {
          font-size: 20px !important;
     }

     .heading-2 {
          font-size: 18px !important;
     }

     .text {
          font-size: 16px !important;
     }

     .text-1 {
          font-size: 17px !important;
     }

     .btn {
          font-size: 16px !important;
     }

     .box-footer .logo img {
          width: 15rem;
     }

     .footer-up {
          padding: 5rem 2%;
     }

     .grid-item-fleet .content {
          bottom: 5%;
     }

     .grid-item-fleet .content .heading-1 {
          font-size: 3.5rem !important;
     }
}

@media only screen and (max-width: 414px) {
     .carousel-control.prev {
          left: 1%;
     }

     .carousel-control.next {
          right: 1%;
     }

     .about-content .right ul {
          grid-template-columns: 1fr;
     }

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

     /* Index Page end */

     .grid-item-fleet {
          height: 40rem;
     }

     .grid-item-fleet img {
          object-fit: cover;
          object-position: top;
     }

}

@media only screen and (max-width: 320px) {
     .header .contact span {
          font-size: 1.2rem;
     }

     .header .contact span,
     .header .contact span i {
          font-size: 1.2rem;
     }

     .carousel-item .card {
          top: 76%;
     }

     .carousel-item .card.bus {
          width: 100%;
     }

     .home .form-container {
          top: 35%;
     }

     /* Index Page end */
}