:root {
	--body: #ffffff;
	--black: #000;
	--blackbg: #000000;
    --blacklite: #1E1E1E;
	--white: #fff;
	--spantext: #757575;
	--theme: #D6B046;
	--theme2: #FF7425;
	--bg1: #161616;
	--bg2: #1b1b1b;
	--bg3: #fff;
	--bnbg: #0E0E0E;
	--border1: #454750;
	--pra-clr: #bebebe;
	--dd-clr: #dadada;
	--place: #858585;
	--tag: #646464;
	--bspan: #ababab;
}

.header-sectionv2.header-fixed {
	background: var(--bg2) !important;
	
		z-index: 9999 !important;
        color: var(--white) ;
	
}

.contact-text {
        color: var(--white) !important;
    }


    .custom-nav .menu-item button{
        
                &::after {
                    position: absolute;
                    content: "\f062";
                    font-family: "FontAwesome";
                    font-weight: 500;
                    font-size: 16px;
                    left: 0px;
                    transition: all 0.1s ease;
                    transform: rotate(60deg);
                }}
            
        
        .menu-item,
        .menu-link {
            button,
            a {
                transition: all 0.4s;
                font-size: 16px !important;
                font-weight: 600;
                text-transform: uppercase;
                color: var(--white);
             
               
             
           
             
             
                &:hover,
                &.active {
                    color: var(--theme);
                    &::after {
                        transform: rotate(90deg);
                    }
                }
            }
        }

        @media (min-width: 991px) {
        .my-logo{
            padding:10px; width: 70%;
        }
    }
    @media (max-width: 991px) {
        .my-logo{
          
            width: 100%;
        }
        .header-sectionv2{
            background-color: var(--black);
        }
        .my-service{
            margin-bottom: 20px;
        }
        .my-card{
            margin-bottom: 50px; 
        }
    }


    .hero-section-version2 {
        padding: 190px 2px 60px;
      

        background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.73)),
        url("../img/banner/hero-v2bg.png");
        
        z-index: 1;
    }


    .car-card{
        position: relative;
        border-radius: 30px;
        border: 2px solid var(--primary-color);
        min-height: 180px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: all 0.5s ease-in-out;
      }
      .card-label-btn{
      
        position: absolute;
        bottom: 20px; /* Adjust this value to your preference */
        left: 20px;   /* Adjust this value to your preference */
        margin: 0;
        border-radius: 20px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
      
      
        color: #000;
        background-color: #ffffffd5
      }
      .car-card:hover{
       
        box-shadow: rgba(234, 185, 65, 0.925) 0px 20px 50px -25px;
 
      }

      .hero-section-version2::after{
        content: "";
        position: absolute;
        overflow: hidden;
        z-index: 1;
      
        background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
        width: 100%;
       
      }


      .my-card-image img{
        width:100%;
        border-radius: 15px;
      }
      .my-card-image:hover{
       
        box-shadow: rgba(234, 185, 65, 0.925) 0px 20px 50px -25px;
 
      }
      .car-name{
        padding-top: 20px;
        font-size: 20px;
        font-weight: 300;
      }
      .car-name:hover{
        color: var(--theme);
      }

      .label{
        padding: 5px 20px ;
     
        background-color: var(--blacklite);
        width: auto;
        white-space: nowrap;
        color: var(--white);
        margin-top: 7px;
        border-radius: 50px;

      }
      .action:hover{
        color: var(--theme);
      }
      .action{
        padding: 5px 20px ;
     
        background-color: var(--blacklite);
        width: auto;
        white-space: nowrap;
        color: var(--white);
        margin-top: 7px;
        border-radius: 50px;
        border: 1px solid var(--theme);
        

      }
      .action i{
        color: var(--theme);
      }
      .more-align-center{
        margin-top:30px ;
        text-align: center; /* For inline elements */
  display: flex; /* For both inline and block elements */
  justify-content: center;
      }



      /* Servicebox */

      .service-box{
        background-color: var(--blacklite);
        border-radius: 15px;
        padding-top:30px ;
        margin-top: 20px;
       padding-left: 30px;
        padding-right: 30px;


        padding-bottom:30px ;

      }

      .service-box h4{
        text-align: center; /* For inline elements */
        display: flex; /* For both inline and block elements */
        justify-content: center;
      }

      .service-image{
        width: 30%;
        text-align: center; /* For inline elements */
    
      }

      .my-service{
        display: flex; /* For both inline and block elements */
        justify-content: center;
        align-items: center;
        align-content: center;
      }

      .my-paragraph2{
        padding-top: 7px;
        padding-bottom: 17px;
        font-weight: 400;

      }

      .service-text{
        font-weight: 300;
      }


      /* Input */

      .my-input{
        background-color: transparent;
        color: #fff;
      }
      .my-input-options{
        background-color: var(--blackbg) !important;
        color: var(--theme) !important;
      }
      
     input[type="email"]:focus{
        background-color: transparent;
        color: #fff;
      }
     input[type="text"]:focus{
        background-color: transparent;
        color: #fff;
      }
      input[type="number"]:focus{
        background-color: transparent;
        color: #fff;
        display: block;
      }
      .quote-form{
        padding: 2%;
      }



      /* Our story */
      .story{
        padding-top: 2%;
        padding-bottom: 5%;
      }


      /* Alert Styles */
.alertt {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ffcc00;
  color: #000;
 
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: none; /* Hidden by default */
  font-family: 'Arial', sans-serif;
  z-index: 1000;
  max-width: 400px;
}

.alertt-body {
  padding: 15px;
  
}
.alertt-head {
  padding: 15px;
  border-radius: 10px 10px 0px 0px;

  background-color: var(--theme);
}
.alertt.error {
  background-color: #ff4c4c;
  color: #1a1a1a;
}

.alertt.success {
  background-color: #fff;
  color: #1a1a1a;
}

.alertt .close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 16px;
  cursor: pointer;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	left:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

.car-feature{
  background-color:#282828 ;
  padding:25px;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius:20px;
}
.car-feature img{
  width:50%
}

/* FAQ */

.accordion-button{
background-color: #000 !important;
color: #fff !important;

}