/*---- Top Header contacts and Social media links ---- */

 .header-contact {
     background-color: rgb(20, 57, 131);
     padding: 5px;
     font-size: 12px;

 }

 .header-contact .contacts .contact-links,
 .header-contact .contacts .contact-links a,
 .social-links .social-link {
     color: white;
     text-decoration: none;
     /* padding-left: 10px; */
     font-size: 13px;

 }

 .header-contact .contacts {
     text-align: center;
 }

 .header-contact .contacts .contact-links i {
     padding-right: 5px;
 }

 .social-links .social-link {
     padding-left: 20px;

 }

 .social-links .social-link a {
     text-decoration: none;
     color: white;
 }

 .social-links {
     text-align: right;
 }

 /* .header-contact .contact-1 {
        height: 100%;
        background-color: white;
        clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 0% 100%);
    }

    .header-contact .contact-2 {
        height: 100%;
        background-color: white;
        clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    } */

 /* 
    #c1 {
        background-color: rgb(243, 240, 240);
    }

    .header-contact i {
        color: white;
        font-size: 15px;
    } */


 /*---- Naviagtion bar ----*/

 body {
     background-color: rgb(255, 255, 255);
 }

 .navigation-bar {
     background-color: rgb(211, 55, 55);
     position: sticky;
     top: 0;
     z-index: 11;
 }

 .navbar {
     clip-path: polygon(0% 0%, 90% 0%, 86% 100%, 0% 100%);
     width: 85%;

     z-index: 8;
     /* color: red; */
     box-shadow: 1px 1px 0px 1px red;
     border-bottom: 2px solid rgb(211, 55, 55);

 }

 .navigation-bar .nav-link {
     color: rgb(6, 15, 68);



     &:hover {
         /* background-color: skyblue; */
         transform: scale(1.2);
         transition: .5s;
         color: rgb(249, 16, 16);
     }
 }

 .nav-link {
     margin: 0px 20px 0px 20px;
 }

 .phone .nav-phone {
     color: white;
     text-decoration: none;
     /* justify-content: end; */
     float: right;
     position: relative;
     bottom: 50px;
     right: 60px;
     z-index: 10;
 }

 .phone a i {
     margin-right: 30px;
     background-color: white;
     color: rgb(211, 55, 55);
     padding: 10px;
     border-radius: 50%;
     box-shadow: 1px -1px 10px 1px rgb(190, 130, 130);


 }



 /* Footer Styles */

 .copyrights {
     background-color: transparent;
     color: white;
     /* width: 800px; */
     padding: 8px;
     text-align: center;
     /* margin: auto; */
 }

 .copy .copyrights .copy-rights-left {
     text-align: left;
 }

 .copy .copyrights .copy-rights-right {

     text-align: right;
 }

 .copy .copyrights .copy-rights-right a {
     color: lightblue;
     text-decoration: none;
     font-weight: 600;
 }


 .icon a>i {
     text-decoration: none;
     background-color: white;
     color: #000851;
     /* border-radius: 50%; */
     width: 40px;
     height: 40px;
     font-size: 23px;
     /* padding: 13px; */
     margin-left: 10px;
     border-radius: 50%;
     padding: 10px;

     &:hover {
         background-color: #000851;
         color: white;
         transform: translateY(-5px);
         transition: .5s;
     }
 }

 .icon {
     margin-left: 0px;
 }

 .footer {
     /* background-color: rgb(240, 61, 61); */

     background-image: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
     color: white;
     /* margin-top: 30px; */
     position: relative;
     bottom: 0;
     /* background-image: url('footer-bg-3.jpg');        */

     /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('footer-bg-3.jpg');


        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; */



 }

 .footer-1 h3 {
     /* text-decoration: underline; */
     border-bottom: 2px solid white;
     display: inline-block;
     padding-bottom: 8px;
     font-size: 20px;
 }

 .quick-links .q-link-ul {
     list-style: none;
     text-align: left;
     padding: 0px;
 }

 .quick-links .q-link-ul li a {
     text-decoration: none;
     list-style: none;
     color: white;
     display: inline-block;
     padding-top: 10px;
     position: relative;


 }

 .quick-links .q-link-ul li a::after {
     content: "";
     position: absolute;
     width: 0%;
     height: 3px;
     bottom: 0;
     left: 0;
     background-color: white;
     transition: width 0.4s ease;
 }

 .quick-links .q-link-ul li:hover a::after {
     width: 100%;
 }

 .vehical-types li {
     list-style: none;
     margin-top: 10px;
 }

 .footer-contact a {
     text-decoration: none;
     color: white;
     display: block;
     /* margin-top: 20px; */
     font-size: 16px;
     /* text-align: center; */
 }

 .footer-contact .foot-contacts span a {
     /* width: 300px; */
     padding-left: 10px;
 }

 .footer-contact .foot-contacts span i {
     padding-top: 5px;
 }

 .footer-contact .foot-contacts i {
     /* padding-right: 15px; */
     font-size: 20px;

 }

 .foot-contacts {
     margin-top: 10px;
 }

 .foot-about {
     padding-right: 20px;
 }


 /* cars start */
 body {
     background: linear-gradient(135deg, #360033, #0b8793);
     /* background-color: #2d383a; */
     background-repeat: no-repeat;
     background-size: cover;
 }

 .card img {
     width: 100%;
     height: 200px;
 }

 .card {
     background-color: white;
     color: black;
     width: 340px;
 }

 .card:hover {
     transform: scale(1.1);
     transition: .4s ease;
 }

 .modal-footer a {
     text-decoration: none;
     color: white;
 }

 .card h5 {
     padding-bottom: 10px;
     position: relative;
     display: inline-block;
 }

 .card h5::after {
     content: "";
     position: absolute;
     width: 0%;
     height: 3px;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
     transition: width 0.4s ease;
 }

 .card:hover h5::after {
     width: 100%;
 }

 .card ul li {
     list-style: none;
     padding-top: 10px;
 }

 ul li>.marker {
     background-color: rgb(198, 64, 64);
     /* Bootstrap Purple */
     color: white;
     font-weight: bold;
     width: 24px;
     height: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 14px;
 }

 .title {
     text-align: center;
 }

 .title h4 {
     color: white;
     border-bottom: 2px solid red;
     display: inline;
     padding-bottom: 5px;

 }

 @media screen and (min-width: 501px) and (max-width: 768px) {
     .card {
         width: 18rem;

         &:hover {
             transform: translateY(-10px);
             transition: .7s;
         }
     }

 }

 @media screen and (max-width:500px) {
     .container-fluid {
         margin-top: 40px;
         padding-left: 60px;
     }

     .card {
         width: 18rem;
         margin: auto;

         &:hover {
             transform: translateY(-10px);
             transition: .7s;
         }
     }


 }

 /* cars end */








 /* Header and Footer Media Query for Mobile view */

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

     /* Header */

     .header-contact,
     .phone {
         display: none;
     }

     .navbar {
         clip-path: none;
         width: 100%;
     }

     .navigation-bar h3 {
         font-size: 20px;
         color: #000851;
     }

     .navigation-bar .nav-link {
         &:hover {
             transform: none;
             transition: none;
             color: rgb(249, 16, 16);
         }


     }

     /* Footer */

     .quick-links {
         margin-left: 0px;
     }

     .icon a>i {
         font-size: 20px;

     }

     .footer-1 h3 {
         margin-top: 20px;
         font-size: 20px;
     }

     .copyrights {
         font-size: 10px;
     }

     .copy .copyrights .copy-rights-left,
     .copy .copyrights .copy-rights-right {
         text-align: center;
     }

     .footer-contact .foot-contacts span a {
         font-size: 16px;
     }

     .footer-contact .foot-contacts span i {
         font-size: 16px;
     }

     .footer {
         padding-left: 20px;
     }
 }

 /* Media query for laptop view */

 @media screen and (min-width:769px) {
     .navigation-bar .navbar-nav .nav-link-mb {
         display: none;
     }
 }