:root {
   --primary-color: #000000;
   --secondary-color: #FFE600;
   --text-color: #333333;
   --light-gray: #F5F5F5;
   --dark-gray: #2C2C2C;
}


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
}
ul {
   list-style: none;
   padding: 0;
   margin: 0;
}


body {
   line-height: 1.6;
   color: var(--text-color);
}


header {
   position: fixed;
   width: 100%;
   top: 0;
   background: rgba(0, 0, 0, 0.9);
   z-index: 1000;
   padding: 1rem 2rem;
}


nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 3%;
   margin: 0 auto;
}


.hamburger {
   width: 25px;
   margin-top: -5px;
   display: none;
   position: relative;
}


.hamburger>div {
   width: 100%;
   height: 2px;
   margin-bottom: 8px;
   background: white;
}


.nav-links a {
   color: white;
   text-decoration: none;
   margin-left: 2rem;
   font-size: 12px;
   transition: color 0.3s ease;
}


/*.nav-links a:hover {
   color: var(--secondary-color);
}*/


.link-external {
   border: 1px solid #FFFFFF;
   padding: 12px 20px;
}


/* .link-external:hover {
   background-color: var(--secondary-color);
   border: 1px solid var(--secondary-color);
} */
.link-external a:hover{
   color: var(--dark-gray);
}


.call-icon {
   position: relative;
   top: 3px;
   margin-right: 2px;
}


.call-icon-mobile {
   display: none;
}


.hero {
   height: 60vh;
   background-color: var(--primary-color);
   position: relative;
   display: flex;
   align-items: center;
   padding: 0 5%;
}


.hero-content {
   color: white;
   z-index: 2;
}


.hero h1 {
   font-size: 3.5rem;
   font-weight: normal;
   padding-top: 0px;
   padding-bottom: 0px;
}


.hero h1 span {
   font-weight: bold;
   margin-left: 10px;
}


.hero h2 {
   color: #F8E823;
   font-size: 20px;
   margin-bottom: 45px;


}


.hero-pattern {
   position: absolute;
   right: 0;
   width: 100%;
   height: 100%;
   background:
       linear-gradient(180deg, #000, rgba(0, 0, 0, 0.00) 24%),
       url('images/desktop-header.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}


.cta-button {
   display: inline-block;
   padding: 16px 20px;
   border: 2px solid var(--secondary-color);
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   transition: background-color 0.3s ease, color 0.3s ease;
}
.cta-button:hover {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: none;
}


.header-button {
   display: inline-block;
   padding: 14px 18px;
   border: 1px solid white;
   color: #fff;
   text-decoration: none;
   transition: background-color 0.3s ease, color 0.3s ease;
}
.header-button:hover {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: none;
}
.header-button .svg-icon {
   filter: brightness(0) invert(1); /* Set the default color to white */
}
.header-button:hover .svg-icon {
   filter: none; /* Set the color to black on hover */
}
@media (max-width: 768px) {
   .header-button{
       border: none;
       font-weight: normal;
   }
  
}


.cta-button .svg-icon {
   filter: brightness(0) invert(1); /* Set the default color to white */
}
.cta-button:hover .svg-icon {
   filter: none; /* Set the color to black on hover */
}
.nav-links a:hover .svg-icon {
   filter: none
}
.nav-links .svg-icon {
   filter: brightness(0) invert(1);
   transition: filter 0.3s ease;
}


.what-we-do {
   padding: 0;
   background: white;
}


.what-we-do h2 {
   margin-bottom: 3rem;
}


.service-description {
   display: flex;
   position: relative;
}


.text-content {
   flex: 0 1 50%;
   padding-left: 5%;
   padding-right: 5%;
}
.text-content p {
   line-height: 24px;
   margin-bottom: 1.5rem;
}


.finance-link{
   color:#000;
   font-weight: 600;
}


.finance-images{
   display: flex;
   gap:10px;
}


.finance-image img{
   width:124px;
   height:44px;
}


.car-image {
   flex: 1;
   position: relative;
   margin-right: 0;
   overflow: hidden;
}


.car-image img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
   overflow: hidden;
}


.journey {
   padding: 0 5%;
   padding-bottom: 5rem;
}


.journey h2 {
   margin-bottom: 43px;
   color: var(--primary-color);
}


.journey-steps {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
}

@media (max-width: 1024px){
    
    .journey-steps {
 
   flex-wrap: wrap;
   
}
    
}


@media (max-width: 768px) {
   .journey {
  padding-bottom: 0px;
       margin-bottom: 48px;
}
}


.step {
   background: white;
   padding: 58px 13px;;
   text-align: center;
   min-height: 372px;
   font-size: 14px;
   line-height: 21px;
   display: flex;
   flex-direction: column;
   align-items: center;
   border: 1px solid #DFDFDF;
    justify-content: space-between;
}


.journey-steps .step:nth-child(4),
.journey-steps .step:nth-child(5) {
}






.step p {
   max-width: 230px;
}


.step .icon {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
}


.step a{
    color: #000;

    font-family: Montserrat;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}


@media (max-width: 1440px) {
    
    .step a{
        padding-left: 6px;
        padding-right: 6px;
}
    
}

@media (max-width: 1024px) {
    
    .step a{
        padding-left: 20px;
        padding-right: 20px;
}
    
}


@media (max-width: 1024px) {
 
   .step {
   background: white;
   padding: 45px 40px;
   text-align: center;
   min-height: 372px;
   border: 1px solid #DFDFDF;
   font-size: 14px;
   line-height: 21px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
    width: 33.33%;
}


   .journey-steps .step:nth-child(4),
   .journey-steps .step:nth-child(5) {
   width:50%;
   }


}


@media (max-width: 960px) {
 
   .step {
  
}


   .journey-steps .step:nth-child(4),
   .journey-steps .step:nth-child(5) {
   width:50%;
   }


}




@media (max-width: 768px) {
 
   .step {
   width:100%;
}


   .journey-steps .step:nth-child(4),
   .journey-steps .step:nth-child(5) {
   width:100%;
   }


}


button .svg-icon, a .svg-icon {
   margin-left: 10px;
   display: inline-flex;
   align-items: center;
}
/*button:hover .svg-icon, a:hover .svg-icon {
   filter: brightness(0) invert(1);
}*/
.contact {
   padding: 5rem 5%;
   background: white;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
}


.contact h2 {
   color: var(--primary-color);
   margin-bottom: 2rem;
}


.contact-form form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-radius: 8px;
}


.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #858585;
   font-family: "Montserrat", sans-serif;
   font-size: 14px;
   transition: border-color 0.3s ease;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
   padding: 1rem;
   border-radius: 0;
   background: white;
}


.contact-form a{
   font-weight: bold;
   text-decoration: underline;
   color: black;


}
.contact-form button {
   padding: 1rem 2rem;
   border: none;
   font-weight: bold;
   cursor: pointer;
   max-width: 200px;
   background-color: #fff;
   border: 1px solid var(--primary-color);


}


.contact-form button:hover {
  background-color: var(--secondary-color);
   color: #000;
   border: 1px var(--secondary-color) solid;
}




.custom-dropdown {
   position: relative;
   width: 100%;
}


.dropdown-header {
   padding: 10px 15px;
   background: #fff;
   border: 1px solid #858585;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
}


.dropdown-header.active {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}


.dropdown-options {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid #ddd;
   border-top: none;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   z-index: 1000;
}


.dropdown-options.visible {
   display: block;
}


.dropdown-option {
   padding: 10px 15px;
   cursor: pointer;
}


.dropdown-option:hover {
   background-color: #f5f5f5;
}


.dropdown-arrow {
   transition: transform 0.2s ease;
   height: 20px;
}


.dropdown-header.active .dropdown-arrow {
   transform: rotate(180deg);
}


/* File upload */
.file-upload-container {
   width: 100%;
   max-width: 700px;
   margin: 20px 0;
 }


 .upload-square {
   width: 100%;
   position: relative;
   margin-bottom: 20px; /* Add margin to separate from file list */
}




.upload-label {
   width: 100%;
   min-height: 140px; /* Set a minimum height instead of percentage */
   border: 2px solid #e1dee4;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
}






 .upload-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: --var(--primary-color);
     text-align: center;
 }


 .upload-content svg {
   margin-bottom: 8px;
 }


 .upload-content span {
   font-size: 16px;
   font-weight: 500;
 }


 .upload-content small {
   font-size: 14px;
   opacity: 0.7;
 }


.upload-content .show-mob{
   display: none;
}


 @media (max-width: 768px) {
    
.upload-label{
   padding-top: 20px;
   padding-bottom: 36px;
     }
    
    
.upload-content .show-mob{
   display: block;
   text-decoration: underline;
   color: #858585;
   text-align: center;
   font-family: Montserrat;
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: 24px; /* 171.429% */
   text-decoration-line: underline;
   text-decoration-style: solid;


}
    
    
.upload-content .hide-mob{
   display: none;
}
  
.upload-content small {
  max-width: 205px;
 }
    
}


 .file-list {
   margin-top: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }




 .file-item {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   padding: 0;
   background-color: white;
   border: #000000 solid 1px;
   min-width: 300px;
   max-width: 90%;
   width: fit-content;
   height: auto; /* Changed from 30% to auto */
   margin-bottom: 10px; /* Added margin for spacing between items */
}




.file-details {
   display: flex;
   align-items: center;
   gap: 12px;
}




.file-icon {
   width: 60px;  /* Reduced from 80px */
   height: 60px; /* Reduced from 80px */
   background-color: var(--secondary-color);
   color: white;
   border-radius: 4px 0 0 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 500;
}


 .file-name {
   font-size: 14px;
   color: --var(--text-color);
   font-weight: 500;
 }




 .remove-file {
   background: white;
   border: none !important;
   cursor: pointer;
   padding: 0;
   color: currentColor;
   transition: opacity 0.3s ease;
 }


 .remove-file:hover {
   opacity: 0.7;
   background: transparent !important;
   color: currentColor !important;
 }


 .remove-file svg {
   display: block;
 }


.file-info {
   max-width: 440px;
   overflow: hidden;
}


.file-icon{
   height: 100%;
}


@media (max-width: 768px){
  
   .file-info {
       max-width: 190px;
       overflow: hidden;
   }


   .file-item{
       max-width: 100%;
   }
  
   .file-name{
       word-wrap: break-word;
   }


 
  
}


/* Footer */
footer {
   background: var(--primary-color);
   color: white;
   padding: 3rem 5%;
}
.footer-button{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 1.5rem;
   border: 1px solid white;
   color: white;
   text-decoration: none;
   margin-top: 1rem;
   transition: background-color 0.3s ease;
   white-space: wrap;
   background-color: #000000;
}


.footer-button .svg-icon {
   filter: brightness(0) invert(1); /* Set the default color to white */
}
.footer-button:hover .svg-icon {
   filter: none; /* Set the color to black on hover */
}
.footer-button:hover {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: none;
}


a .svg-icon, button .svg-icon {
  
   margin-left: 5px;
}


.footer-info a{
   text-decoration: underline;
   font-weight:500;
   color: white;
   padding-left: 5px;
}


.footer-content {
   /* max-width: 1200px; */
   /* margin: 0 auto; */
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
}




.footer-logo {
   grid-column: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}


.footer-links {
   grid-column: 2;
}


.footer-social {
   grid-column: 1;
   display: flex;
   justify-content: flex-start;
   gap: 0.3rem;
   /* margin-top: 1rem; */
}


.footer-newsletter {
grid-column: 4;
}




.footer-newsletter form {
   display: flex;
   gap: 0.5rem;
   align-items: center; /* Aligns items vertically in the center */
   justify-content: flex-start;
}


.footer-newsletter input {
   padding: 0.8rem;
   border: none;
   flex-grow: 1;
   border-radius: 0;
}


.footer-newsletter button {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: none;
   padding: 0.8rem 1.5rem;
   cursor: pointer;
   font-weight: bold;
}


.footer-bottom {
   margin-top: 2rem;
   padding-top: 2rem;
   grid-column: 1 / -1;
}








.dealership {
   padding: 5rem 5% 64px 5%;
   background: var(--primary-color);
   color: white;
   display: grid;
   grid-template-columns: 1fr;
   gap: 4rem;
   margin-bottom: 0px;
}

@media (max-width: 589px){
  .dealership {
   
   display: block;
   
}
  
}




.about-dealership {
   max-width: 760px;
}


.about-dealership h2,
.expert-staff h2 {
   font-size: 2rem;
   margin-bottom: 2rem;
   color: white;
}


.expert-staff h3 {
   margin-top: 64px;
   color: white;
}


.expert-staff > p{
   max-width: 520px;
}


.about-dealership p {
   margin-bottom: 1.5rem;
}


.mission, .quality .accreditations {
   margin-top: 2.5rem;
}


.mission h3, .quality h3,.accreditations h3 {
   color: var(--secondary-color);
   font-size: 1.2rem;
   margin-bottom: 1rem;
   text-transform: uppercase;
}

.accreditation-images {
   display: flex;
   gap:20.7px;
   align-items: center;
   flex-wrap: wrap;

}

.accreditation-images img:nth-child(1) {
  height: 55px;
  
}

.accreditation-images img:nth-child(2) {
  height: 55px;
  
}

.hr-section{
   padding-bottom: 64px;
   margin-bottom: 0px;
   background-color: var(--primary-color);
}

.hr-section hr{
   margin-left:5rem;
   margin-right: 5rem;
}

.team-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem;
   margin-top: 2rem;
}


.team-member {
   display: flex !important;
   flex-direction: column;
   width: 100%;
   height: 240px;
   background-color: white;
   overflow: hidden;
   position: relative;
}

.team-member a{
   text-decoration: none;
}


.team-member img {
    width: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    max-height: 125px;
    object-position: 50% 50%;

}

.team-member:hover img {

    transform: scale(1.1);    transition: all 0.3s;

}

.team-member h3 {
   color: white;
   margin-top: 15px;
   margin-bottom: 4px;
   font-size: 14px;
   color: #000;
   padding-left: 16.67px;
}


.team-member p {
   color: #F7931A;
   font-size: 12px;
   font-weight: 700;
   padding-left: 16.67px;
}


.team-member svg{
   margin-top: 20px;
   color:#000;
   width: 13px;
   height: 14px;
   flex-shrink: 0;
   cursor: pointer;
   position: absolute;
   bottom: 10px;
   right:20px;

}


.team-member:hover svg {
    bottom: 15px;    right: 5px;    transition: all 0.3s;
}



.contact-form textarea {
   min-height: 150px;
   resize: vertical;
}
.form-group {
   margin-bottom: 20px;
}


.form-group input[type="email"].invalid{
   border: 2px solid var(--secondary-color);
}
.form-label {
   display: block;
   margin-bottom: 8px;
   font-family: "Montserrat", sans-serif;
   font-weight: 500;
   color: #333;
   font-size: 14px;


}
@media (max-width: 767px) {
   .form-label {
       margin-top: 10px; /* Adjust the spacing as needed */
   }


   .form-label strong {
    
       margin-top: 5px; /* Adjust the spacing as needed */
   }
}
.form-label img {
   vertical-align: middle;
}


.form-label strong{
   text-decoration: underline;
   padding-left: 5px;
}


.tooltip{
   cursor: pointer;
}


.tooltip-modal {
   position: fixed;
   display: none;
   top: 0;
   left: 0;
   width: 100%;
   padding: 20px;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
   z-index: 1000;
}
 .modal-content {
   background: #fff;
   width: 80%; /* Default for mobile */
   max-width: 900px; /* Max width on larger screens */
   border-radius: 8px;
   padding: 32px 38px;
   overflow-y: auto;
}
 .tooltip-modal .modal-header {
   display: flex;
   justify-content: space-between;
   align-items:flex-start;
   margin-bottom: 20px;
 }






 .close-tooltip-modal {
   font-size: 28px;
   cursor: pointer;
   color: #666;
     display: flex;
   margin-bottom: 0px;
 }


 .close-tooltip-modal:hover {
   color: #000;
 }


 .tooltip-modal .modal-body {
   color: #333;
 }


 .tooltip-modal .modal-body ul {
   margin: 15px 0;
   padding-left: 20px;
 }


 .tooltip-modal .modal-body li {
   margin: 10px 0;
 }


 @keyframes modalSlideIn {
   from {
     transform: translateY(-100px);
     opacity: 0;
   }
   to {
     transform: translateY(0);
     opacity: 1;
   }
 }


 .modal-visible {
   display: flex;
 }


 .tooltip-modal .modal-body {
  }


 .modal-sections {
   display: flex;
   gap: 2rem; /* Adds space between the two sections */
 }


 .modal-section {
   flex: 1;
 }


 .modal-section h4 {
   margin-bottom: 1rem;
   font-size: 1.2rem;
   color: var(--primary-color);
 }


 .modal-section ul {
   list-style-type: disc;
   padding: 0;
   margin: 0;
 }


 .modal-section li {
   margin-bottom: 0.5rem;
   line-height: 1.5;
   font-size: 0.9rem;
 }




 @media (max-width: 768px) {
   .modal-content {
     width: 95%; /* Slightly more width for smaller screens */
     padding: 32px 24px;
     height:  min-content ; /* Full viewport height */
     max-height: 90%; /* Ensure content fits within the screen */
     box-sizing: border-box; /* Include padding in the element's total height and width */
   }
   .modal-sections {
       display: flex;
       flex-direction: column; /* Stack sections vertically */
       gap: 1rem; /* Space between sections */
     }
     .modal-section {
       margin: 0; /* Remove additional margins to fit content */
     }
  
     /* Optionally adjust text size to fit better */
     .modal-content p, .modal-content h1, .modal-content h2 {
         color: #000;
           font-size: 11px;
           font-style: normal;
           font-weight: 400;
           line-height: 20px;
     }


   .modal-header h3 {
       font-size: 1.1rem; /* Smaller font size on mobile */
   }


   .modal-body {
       font-size: 0.95rem; /* Adjust font size for readability */
   }


   .modal-section h4 {
       font-size: 1rem; /* Slightly smaller headings */
   }


   .modal-section li {
       font-size: 0.9rem; /* Reduce font size for smaller text */
   }
}


@media (max-width: 480px) {
   .modal-header h3 {
      color: #000;
       font-size: 12px;
       font-style: normal;
       font-weight: 700;
       line-height: 20px;
   }


   .modal-body {
       font-size: 0.9rem;
   }


   .modal-section h4 {
      color: #000;
       font-size: 12px;
       font-style: normal;
       font-weight: 700;
       line-height: 20px; /* 166.667% */
   }


   .modal-section li {
     color: #000;
       font-size: 12px;
       font-style: normal;
       line-height: 20px; /* 166.667% */
   }


   /* Adjust close button */
   .close-tooltip-modal {
       font-size: 1.25rem;
   }
}
/* Mobile styles */
@media (max-width: 768px) {
   .modal-sections {
     display: flex;
     flex-direction: column; /* Stack sections vertically */
   }
    .modal-section {
     margin-bottom: 1rem; /* Add space between sections */
   }
   .close-tooltip-modal {
      
   }
 }


.terms {
   position: relative;
   /* display: flex; */
   /* align-items: center; */
   margin-top: 20px 0;
   padding-left: 30px;
   display: flex;
}
.terms-invalid{
  border: 2px solid var(--secondary-color);
  padding-top: 10px;
  padding-bottom: 10px;
}




.terms input[type="checkbox"] {
   opacity: 0;
   position: absolute;
}


.terms label {
   vertical-align: middle;
}


.terms label::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 18px; /* Larger box */
   height: 18px; /* Larger box */
   border: 2px solid #5b5e5e; /* Adjust border width for better visibility */
   background-color: white;


   transition: all 0.2s ease;
}


/* input.invalid::placeholder {
   background: var(--secondary-color);
   padding: 10px 5px;
} */


.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
   background-color: #f5f5f5; /* Light gray background on hover */
   transition: background-color 0.3s ease;
}




.terms input[type="checkbox"]:checked + label::after {
   content: '';
   position: absolute;
   left: 7px; /* Adjust for centering */
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   width: 5px; /* Size of the checkmark */
   height: 10px; /* Length of the checkmark */
   border: solid var(--primary-color); /* Color of the checkmark */
   border-width: 0 2px 2px 0;
}


.terms-message{
   font-size: 0.9rem;
}


.error-message {
   font-size: 10px;
   color: --var(--primary-color);
   margin-top: 4px;
   display: block;
 }


 input,
 textarea {
   border: 1px solid #858585;
   padding: 8px;
   width: 80%;
   box-sizing: border-box;
 }


 input:focus,
 textarea:focus {
   outline: none;
 }


 .terms-label {
   margin-left: 0.5rem;
   font-size: 0.9rem;
   cursor: pointer;
 }








.footer-newsletter input {
   padding: 0.8rem;
   border: none;
   margin-right: 0;
   min-width: 313px;
}


.footer-newsletter button {
   background-color: var(--secondary-color);
   color: var(--primary-color);
   border: none;
   padding: 0.8rem 1.5rem;
   cursor: pointer;
   font-weight: bold;
   margin-left: -0.5rem;
}


.footer-social a {
   color: white;
   margin-right: 1rem;
   font-size: 1.5rem;
   transition: color 0.3s ease;
}


.footer-social a:hover {
   color: var(--secondary-color);
}


.step-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.8rem 1.5rem;
   border: 1px solid var(--primary-color);
   color: var(--primary-color);
   text-decoration: none;
   font-weight: bold;
   margin-top: 1rem;
   transition: background-color 0.3s ease;
   white-space: nowrap;
}
.step-button:hover {
   background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
   color: #000;
}




.contact-info{
   max-width: 450px;
}


.map {
   margin: 2rem 0;
}


.map img {
   width: 100%;
   height: auto;
   border-radius: 8px;
}


.contact-details {
   margin-top: 2rem;
}


.contact-details p {
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 24px;
   font-weight: bold;
}


.contact-details p:first-child > span {
   margin-left: -16px;
}


.contact-details p:first-child > a{
   margin-left: -16px;
}


.contact-details i {
   color: var(--secondary-color);
}
.contact-details a {
   color: var(--primary-color);
}


.business-hours {
   margin-top: 2rem;
   padding-top: 2rem;


}


.business-hours h3 {
   margin-bottom: 1rem;
   color: var(--primary-color);
}


.business-hours p {
   margin-bottom: 0.5rem;
   font-weight: normal;
}


/* Hide the clickable link by default */
.mobile-only {
   display: none;
 }
  /* Show the clickable link only on mobile devices */
 @media (max-width: 768px) {
   .mobile-only {
     display: inline;
   }
   .desktop-only {
     display: none;
   }
 }


@media (max-width: 1175px){
       .hamburger {
       display: block;
       cursor: pointer;
   }
  
   .nav-links {
       display: none;
   }
  
   header.open .nav-links {
       display: flex;
       flex-direction: column;
       top: 50px;
       position: fixed;
       background: var(--primary-color);
       left: 0;
       width: 100%;
       height: 100%;
       max-width: none;
   }
       header.open .nav-links .link-external {
       border: 0;
   }


   header.open .call-icon {
       display: none;
   }


   header.open .call-icon-mobile {
       display: inline;
       width: 25px;
       height: 25px;
       margin-left: 8px;
   }


   header.open .hamburger>div {
       position: absolute;
       top: -5px;
       width: 33px;
       left: -3px;
       margin: 0px;
   }


   header.open .hamburger>div:nth-of-type(1) {
       transform: rotate(45deg);
   }


   header.open .hamburger>div:nth-of-type(2) {
       transform: rotate(-45deg);
   }


   header.open .hamburger>div:nth-of-type(3) {
       display: none;
   }


   header.open .nav-links a:first-child {
       margin-top: 75px;
   }


   header.open .nav-links a {
       font-size: 30px;
       padding: 22px 0px;
       text-wrap: wrap;
   }
}








 @media (max-width: 1024px) {
  
  
   .dealership {
       grid-template-columns: 1fr;
       gap: 3rem;
   }


   .team-grid {
       grid-template-columns: repeat(2, 1fr);
   }
}




@media (max-width: 768px) {
  
  
  
   header {
       padding: 1rem 5%;
   }
   nav {
       display: flex;
       justify-content: space-between;
       padding: 0;


   }


   .team-members.slick-slider{
       margin-left: 0px;
   }
  
   .cta-button {
       font-size: 14px;
   }
   .logo img {
       width: 60%;
   }
   .hamburger {
       display: block;
       cursor: pointer;
   }
   .team-grid {
       grid-template-columns: 1fr;
   }


   .dealership {
       padding: 3rem 5%;
   }


 
   .expert-staff h2 {
       font-size: 1.75rem;
   }
  
   .about-dealership h2{
       font-size:  20px;
   }
}


@media (max-width: 1024px) {
   .journey-steps {
       grid-template-columns: repeat(2, 1fr);
   }


   .dealership {
       grid-template-columns: 1fr;
   }


   .contact {
       grid-template-columns: 1fr;
   }
}


@media (max-width: 1115px){
   .footer-content {
       display: block;
   }


   .footer-logo {
       margin-bottom: 32px;
   }


   .footer-links {
       margin-bottom: 47px;
   }
   .footer-newsletter p {
       margin-bottom: 27px;
   }
   .footer-newsletter input {
       min-width: 50%;
   }


   .footer-social {
       margin-top:48px;
       gap: 2rem;
   }


   .footer-info {
       margin-top: 30px;
   }


   .footer-info p {
       display: flex;
       justify-content: space-between;
   }


}


@media (max-width: 768px) {
   .hero h1 {
       font-size: 35px;
       line-height: 36px;
       margin-bottom: 14px;
   }
   .hero {
       height: 479px;
       align-items:normal;
       padding-top: 92px;
       position: relative;
       margin-bottom: 250px;
   }
   .hero-pattern {
       position: absolute;
       top: 38%;
       right: 0;
       width: 100%;
       height: 100%;
       background-image:
       linear-gradient(180deg, #000, rgba(0, 0, 0, 0.00) 100%),
       url('images/mobile-header.png');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
      
   }


   .what-we-do {
       padding-top: 1rem;
       margin-bottom: 0px;
   }


   .what-we-do h2 {
       margin-bottom: 1rem;
   }
   .what-we-do .text-content{
       margin-bottom: 0px;
   }
   .what-we-do .text-content p{
     
   }
   .what-we-do .text-content p:last-child{
      margin-bottom: 0px;
   }
   .hero h1 span {
       display: block;
       margin-left: 0;
   }
   .nav-links {
       display: none;
   }
   header.open .nav-links {
       display: flex;
       flex-direction: column;
       top: 50px;
       position: fixed;
       background: var(--primary-color);
       left: 0;
       width: 100%;
       height: 100%;
       max-width: none;
   }
   header.open .nav-links .link-external {
       border: 0;
   }


   header.open .call-icon {
       display: none;
   }


   header.open .call-icon-mobile {
       display: inline;
       width: 25px;
       height: 25px;
       margin-left: 8px;
   }


   header.open .hamburger>div {
       position: absolute;
       top: -5px;
       width: 33px;
       left: -3px;
       margin: 0px;
   }


   header.open .hamburger>div:nth-of-type(1) {
       transform: rotate(45deg);
   }


   header.open .hamburger>div:nth-of-type(2) {
       transform: rotate(-45deg);
   }


   header.open .hamburger>div:nth-of-type(3) {
       display: none;
   }


   header.open .nav-links a:first-child {
       margin-top: 75px;
   }


   header.open .nav-links a {
       font-size: 30px;
       padding: 22px 0px;
       text-wrap: wrap;
   }


   .hamburger {
       display: block;
   }


   .journey-steps,
   .team-grid {
       grid-template-columns: 1fr;
   }


  


   .service-description {
       flex-direction: column;
       gap:48px;
       margin-bottom: 115px;
   }


   .text-content {
       flex: 1;
       padding: 0 5%;
      
   }


   .car-image img {
       min-width: 290px;
       height:auto;
       max-width:100% ;


   }


   .team-member {
       /* flex: 0 0 calc(33.333% - 40px); */
       margin: 0 20px;
       background-color: white;
   }
   

   .footer-content {
       display: block;
   }


   .footer-logo {
       margin-bottom: 32px;
   }


   .footer-links {
       margin-bottom: 47px;
   }
   .footer-newsletter p {
       margin-bottom: 27px;
   }
   .footer-newsletter input {
       min-width: 50%;
   }


   .footer-social {
       margin-top:48px;
       gap: 2rem;
   }


   .footer-info {
       margin-top: 30px;
   }


   .footer-info p {
       display: flex;
       justify-content: space-between;
   }


   .slick-prev,
   .slick-next {
       top: auto;
       bottom: -60px;
       transform: none;
   }

   .dealership .slick-prev {
       left: calc(50% - 50px) !important;
   }


   .dealership .slick-next {
       right: auto;
       left: calc(50% + 10px);
   }


   
   


   .slick-list {
       margin-bottom: 80px;
   }
   .about-dealership {
       padding-right: 20px;
     
   }


}


.slick-list {
    margin-top: -1px;
    padding: 0 1rem;
}


.slick-slide {
   margin: 0 1rem;
   padding: 0px 0px fpx 0px;
   width: 158px !important;
   box-sizing: border-box;
   /* min-width: 160px; */
}


@media (max-width: 1320px) {
  .slick-list {
   max-width: 40vw;
   padding: 0 1rem;
}


.slick-slide {
   margin: 0 1rem;
   width: calc(22vw - 44px) !important;
   /*width: calc(14vw - 25px) !important;*/
   box-sizing: border-box;
   /* min-width: 160px; */
}

.team-member img {
    width: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
  
    }
}


@media (max-width: 1024px) {
  
  .slick-list {
   max-width: 40vw;
   padding: 0 1rem;
}


.slick-slide {
   margin: 0 1rem;
   width: 163px !important;
   box-sizing: border-box;
   /* min-width: 160px; */
}
  


}




.slick-track {
    display: flex;
    /* gap: 1rem; */
}


.slick-slide img {
   display: block;
   margin: 0 auto;
}
.slick-prev {
   left: -40px;
   z-index: 1;
}


.slick-next {
   right: -40px;
   z-index: 1;
}


.slick-prev,
.slick-next {
   display: flex;
   align-items: center;
   justify-content: center;
}


.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    border: 1px solid #858585;
}


.slick-prev.slick-disabled:before {
   content: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.5L7 0V11L0 5.5Z' fill='%23858585'/%3E%3C/svg%3E");
   opacity: 1;
}


.slick-next.slick-disabled:before {
   content: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5.5L0 0V11L7 5.5Z' fill='%23858585'/%3E%3C/svg%3E");
    opacity: 1;
}


.slick-next:before {
   content: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5.5L0 0V11L7 5.5Z' fill='%23F8E823'/%3E%3C/svg%3E");
}


.slick-prev:before {
   content: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.5L7 0V11L0 5.5Z' fill='%23F8E823'/%3E%3C/svg%3E");
}


.slick-prev:before,
.slick-next:before {
   opacity: 1;
    line-height: 7px;
}


.slick-prev,
.slick-next {
   border: 1px solid #DFDFDF;
   width: 40px;
   height: 40px;
   background: var(--primary-color);
   color: white;
}


.team-members.slick-slider{
   max-width: 538px;
}


.team-members .slick-slide {
        margin-left: 8px;
        margin-right: 8px;
}


@media (max-width: 590px) {
    
    .about-dealership {
       margin-bottom: 40px;
   }

    
    
    .team-members .slick-slide {
        width: calc(50vw - 40px) !important;
        margin-left: 12px;
        margin-right: 12px;
    }

    .team-member img {
    width: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
  
    }
    
}






@media (max-width: 480px) {
    .team-members .slick-slide {
        margin-left: 12px;
        margin-right: 12px;
    }
   
}


@media (max-width: 769px) {
   .slick-list {
       max-width: calc(100vw - 20px);
   }
}


@media (max-width: 1025px) {
   .slick-list {
      max-width: calc(100vw - 20px);
       height: 100%!important;
   }
}

.testimonial-section{
     background-color: var(--primary-color);
     padding-left: 5rem;
     padding-right: 5rem;


}

@media (max-width: 417px) {
   .testimonial-section{
     padding-left: 1rem;
     padding-right: 1rem;
}
   .testimonial-section .slick-dots {

      left:50%;
      transform: translateX(-55%);
   }


}


.testimonial-section .slick-track {
    display: flex;
    /* gap: 1rem; */
}

.testimonial-section .slick-list{
     max-width:1400px;
     margin-left:auto;
     margin-right: auto;
     padding: 0 1rem;

}

.testimonial {
  border-radius: 0.5rem;
  background-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  width: 280px !important;
  margin: auto;
  text-align: center;
  border: none;
  height:400px;
  box-sizing: content-box;
  
}



@media (max-width: 1018px) {
   .testimonial{
      margin-left: 16px;
      margin-right: 16px;
      width: 50% !important;
   }

   .testimonial-message{
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
   }
}

.testimonial p{
   color:white;

}

.testimonial-stars {
  color:  #F8E823; /* gold-like star color */
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.testimonial-message p {

  color: white;
  margin: 0 0 1rem;
  font-size: 16px;
  
}

.testimonial-author strong{
  font-weight: 400;
  color: #858585;
  font-size: 14px;
}

.testimonial-section .slick-dots {
  background-color:none;
  text-align: center;
  color:white;
  padding-bottom: 100px;
  height:20px;

}

.testimonial-section .slick-dots li button::before {
  color: white; /* sets the dot color */
  opacity: 0.5;
  font-size: 8px;
  
}

.slick-dots li{
   width: 2.5px;
}

.testimonial-section .slick-dots li.slick-active button::before {
  color: white;
  opacity: 1;
}

.testimonial-section .slick-dots {
    position: absolute;
    bottom: 0px;
    display: block;
    width: calc(100% - 10rem);
}

.testimonial-section .slick-next {
    top:110px;
    right: 5rem;
    z-index: 1;
}

.testimonial-section .slick-prev {
    top:110px;
    left: 5rem;
    z-index: 1;
    
}

@media (max-width: 1200px) {
.testimonial-section .slick-next {
    top:110px;
    right: 10px;
    z-index: 1;
}

.testimonial-section .slick-prev {
    top:110px;
    left: 10px;
    z-index: 1;
    
}
   

}


.terms-conditions {
   max-width: 800px;
   margin: 40px auto;
   padding-top: 60px;
   padding-bottom: 40px;
   padding-left: 30px;
   padding-right: 30px;
   border-radius: 8px;
}


.hero-content-terms-conditions {
   color: white;
   z-index: 2;
}
.terms-conditions h1, h2, h3 {
   color: #222;
   margin-bottom: 16px;
   font-weight: bold;
}
.terms-conditions p {
   margin-bottom: 20px;
   color: #555;
}
  /* Spacing Between Sections */
 section {
   margin-bottom: 40px;
 }
  section:last-child {
   margin-bottom: 0;
 }


 .form-submitted {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   border: 1px solid var(--primary-color);
   height: 400px;
}


.form-submitted img {
   margin: 0 auto;
}




.subscription-box {
   border-width: 2px;
   border-style: solid;
   border-color: white;
   padding: 1rem; /* p-4 */
   display: flex; /* flex */
   justify-content: space-between; /* justify-between */
   align-items: center; /* items-center */
   width: 400px;
}


.subscription-status {
   color: white
}


.subscription-icon {
   color: var(--secondary-color);
}


@media (max-width: 768px) {
   .subscription-box {
     width: 100%;
   }
 
 }




 .loader-container {
   display: none;
   justify-content: center;
   align-items: center;
 }
  .loader {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: #000;
   animation: loader 1s infinite linear alternate;
   display: none;
 }


   .contact-form button:hover .loader{
   background: #FFF;
   animation: loader-hover 1s infinite linear alternate;
   }


.contact-form button .button-text{
   color: #000;
}






  .loader-container.visible,
 .loader.visible {
   display: flex !important;
 }
  @keyframes loader {
   0%  { box-shadow: 20px 0 #000, -20px 0 #0002; background: #000; }
   33% { box-shadow: 20px 0 #000, -20px 0 #0002; background: #0002; }
   66% { box-shadow: 20px 0 #0002, -20px 0 #000; background: #0002; }
   100%{ box-shadow: 20px 0 #0002, -20px 0 #000; background: #000; }
 }


@keyframes loader-hover {
   0%  { box-shadow: 20px 0 #FFF, -20px 0 #FFF2; background: #FFF; }
   33% { box-shadow: 20px 0 #FFF, -20px 0 #FFF2; background: #FFF2; }
   66% { box-shadow: 20px 0 #FFF2, -20px 0 #FFF; background: #FFF2; }
   100%{ box-shadow: 20px 0 #FFF2, -20px 0 #FFF; background: #FFF; }
 }


.general-content{padding-left: 5%;padding-right: 5%;padding-top: 100px;padding-bottom: 84px;max-width: 1440px;}


.general-content h1{
   margin-bottom:  32px;
}


.general-content h2{
   margin-top: 16px;
}


.slick-next.slick-disabled{
   opacity: 0;
   transition: opacity 0.5s ease-out; 
}

.error{
    color: red;
    font-size: 12px;
}