/*---- 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;
 }



 /*---- 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-b-6a.jpg');        */

     /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('footer-b-6a.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;
 }




@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;
     }
 }





 /* Contact Us Form Styles */

 body {
     background-color: #f7f9fc;
     font-family: 'Segoe UI', sans-serif;
 }
 h1{
    text-align: center;
 }
 .div {
     width: 150px;
     margin-left: 30px;
     margin-top: -40px;
 }

 .div a {
     text-decoration: none;
     color: black;
 }

 .contact-container {
     background: #fff;
     border-radius: 10px;
     padding: 40px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
     margin-top: 50px;
 }

 .contact-title {
     font-weight: 700;
     font-size: 32px;
 }

 .form-control {
     background-color: #f1f5f9;
     border: none;
     border-radius: 8px;
 }

 .btn-send {
     background-color: #ff4d4d;
     color: #fff;
     border-radius: 8px;
     padding: 10px 25px;
     font-weight: bold;
 }

 .contact-info i {
     color: #0d6efd;
     font-size: 20px;
     margin-right: 10px;
 }

 .contact-info p {
     padding-top: 10px;
     margin-bottom: 10px;
 }

 .social-icons a {
     margin-right: 15px;
     color: white;
     background-color: black;
     padding: 10px;
     border-radius: 50%;
     /* &:hover{
        background-color: #ff4d4d;
        color: white;
      } */
 }

 #font {
     padding-left: 4px;
     padding-right: 4px;
 }

 #font-face {
     padding-left: 5px;
     padding-right: 5px;
 }

 .contact-image {
     border-radius: 10px;
     width: 270px;
     height: 120px;
     margin-bottom: 15px;

 }

 .right {
     width: 280px;
     display: inline-block;
 }

 .contact-us-form {
     margin-bottom: 50px;
 }

 @media (max-width: 768px) {
     .contact-container {
         padding: 20px;
     }

 }

  .error {
      color: red;
      font-size: 14px;
      margin-top: 4px;
    }