@font-face {
    font-family: 'customfont';
    src: url('./Italiana-Regular.ttf');
}

@font-face {
    font-family: 'lato';
    src: url('./lato/Lato2OFL/Lato-Medium.ttf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'lato';
}

a,
a:hover {
    text-decoration: none;
    color: var(--frist--color);


}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

dl,
ol,
ul {
    margin: 0px;
}

:root {
    --frist--color: #000000;
    --second--color: #FFD645;
    --white--color: #fff;
    --gray-color: #303030;
}

.wrapper {}

.main-btn {
    padding: 10px 20px;
    color: var(--frist--color);
    background-color: var(--second--color);
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    animation: button 2s 1s 1;
}

/* @keyframes button {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
} */
.car-img{
    position: relative;
}
/* .car-img img{
    position: absolute;
} */

/* .img2 {
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction: alternate;
}

@keyframes fade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
} */


/* NAVBAR */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 100px;
    z-index: 999;
    transition: 0.5s;
}
.navbar-nav .nav-link:hover{
    color: var(--frist--color);
}
.navbar-nav .nav-item .active{
    font-weight: 600;
    color: var(--frist--color)

}
/* .sticky .nav-item .active{
    font-weight: 500;
    color: var(--second--color);

}
.sticky .nav-link:hover{

    color: var(--frist--color);
} */

.nav-link {
    color: var(--frist--color);
    letter-spacing: 1.5px;
   
}

.navbar-brand{
    width:50%;
}

/* .sticky {
    background-color: #fff;
    padding: 20px 100px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

}

.sticky .nav-link {
    color: var(--frist--color);
} */

.navigation{
    padding: 6px 30px;
    background-color: var(--white--color);
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
} 
/* ul li{
    list-style: none;
    margin-left: 30px;
    color: var(--frist--color);
    font-family: 'lato';
}
 ul li a{
    color: var(--white--color);
} */
/* 



HOME PAGE */
.navbar-toggler {
  border: none;
  outline: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler i:focus {
     outline: none;
     box-shadow: none;
   }

.navbar-toggler i{
    font-size:30px;
     color: #212427;
    
}
.whatsapp-icon {
      position: fixed;
      bottom:20px;
      right:30px;
      background: #fff;
      padding:10px 15px;
      border-radius:10px;
      box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
      z-index:4;
}
.whatsapp-icon i{
    font-size:40px;
    color: #212427;
    
}
.home-banner {
    position: relative;
    margin-top: 80px;
    height: 80vh;
  
   

}
.home-banner::after {
   content: " ";
   width: 100%;
   height: 100%;
   background-color: #00000086;
   top: 0;
   left: 0;
   position: absolute;
   z-index: 1;
  
   

}
.bg-video{
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: -1;
  

}

.navbar-brand img{
 width: 15%;  
}
.home-content {
    position: relative;
  padding: 18% 40px;
    text-align: center;
    z-index: 2;

}

.home-banner h3 {
    font-family: 'customfont';
    font-size: 55px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;

}

.home-banner p {
    color: var(--white--color);
    margin: 10px 0px;
    font-size: 20px;
    text-align:center;
}

.home-banner-button {
    padding-top: 30px;
}

/* STORY SECTION */
.story-bg {
    margin-top: 60px;
}

.sub-heading h2 {
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.cars-home-bg {
    margin-top: 60px;
}


/*.all-car-imgs{*/
/*    height: 225px;*/
/*}*/

.content-story h5 {
    font-size: 30px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* CAR HOME PAGE */
.cars-section-card {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
}

.cars-section-card img {
    border-radius: 10px 10px 0px 0px;
    width: 100%;
}

.car-content {
    padding: 20px 10px;
}

.heading-car h5 {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1.4px;
    transition: all  0.8s ease-in;
}
.year-car{
    margin-top: 15px;
}
.year-car h6{
    font-size: 18px;
    margin-top: 10px;
}
.year-car b{
    
    margin-right: 5px;
}
.owl-stage{
    padding: 10px 0px;
}


.main-content-car span {
    font-size: 13px;
    color: var(--gray-color);
}

/* CAR TYPE */
.car-type-bg {
    margin-top: 60px;

}
.main-car-type{
    position: relative;
}
.content-car{
    position: absolute;
    bottom: 0px;
    text-align: center;
    padding: 20px;
    background: linear-gradient(0deg, rgba(6,6,6,0.958420868347339) 0%, rgba(51,51,51,0) 100%); width: 100%;
    color: #fff;
    font-size: 30px;
    
}
.content-car h6{
    font-size: 25px;

}

.car-type-bg .sub-heading h2 {


    margin-bottom: 5px;
}

.car-type-bg .sub-heading p {
    text-align: center;
    margin-bottom: 30px;
}
.button-car{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-direction: column;
}
.button-car p{
    background-color: transparent;
    color: #d6a802;
    border: 1px solid var(--second--color);
    border-radius: 5px;
    font-weight: 500;
}
.button-car .main-btn{
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

/* PARLLAX */
.parallax-bg {
    margin-top: 60px;
   background: linear-gradient(4deg, rgba(33,38,42,0.5102415966386555) 0%, rgba(7,30,45,0.6474964985994398) 100%) , url('../images/homepage/banner.jpg');
   background-position: center;
   background-size: cover;
   padding: 60px 0px;
}

/* .parallax-bg video {
    width: 100%;


}

.video-parallax-bg {

    position: relative;
}

.overlay-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000094;
} */

.parallax-content {
   
}

.service-main-content h5 {
    font-size: 25px;
    color: rgb(255, 255, 255);
    text-align: center;
}

.service-main-content p {
    color: rgb(255, 255, 255);
    text-align: center;
   font-size: 18px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.service-section-two {
    margin-top: 50px;
}

.parallax-heading {
    text-align: center;
    color: #fff;
    margin-top: 80px;
}

.parallax-heading h3 {
    font-size: 45px;
}

.parallax-heading p {
    font-size: 18px;
    letter-spacing:1px;
    margin-top:10px;
}
.service-section-two {
    margin-top: 50px;
}
.parallax-heading {
    margin-top: 35px;

}

/* SERVICE */

.service-home-bg {
    margin-top: 40px;
}

.service-card-bg {
    border-radius: 10px;
    border: 1px solid var(--gray-color);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    transition: all 0.8s ease-in-out;

}

.service-content-value {
    transition: all 0.8s ease-in-out;
}

.service-card-bg:hover {
    box-shadow: 500px 0 0 0 rgba(0, 0, 0, 0.795) inset;
    color: #fff;
}

.service-card-bg:hover .service-content-value {
    color: var(--second--color);
}

/* AMBULANCE */
.ambulance-bg {
    margin-top: 40px;
}

.ambulance-main {
    text-align: center;
}
.ambulance-img i{
    font-size: 60px;
    color: #5a5a5a;
}
.ambulance-img img {
    width: 35%;
}

.ambulance-content {
    margin-top: 20px;
}

.ambulance-content p {
    font-size: 23px;
    font-weight: 600;
    margin-top:10px;
}

.ambulance-content a {
    font-size: 20px;
    font-weight: 600;

}

/* 
CONDITION */

.condition-bg {
    margin-top: 60px;
}

.condition-bg .sub-heading h2 {
    margin-bottom: 5px;
}

.condition-bg .sub-heading p {
    text-align: center;
    font-size: 22px;
    margin-bottom: 30px;
}

.main-condition {
    position: relative;
}

.condition-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(24, 24, 24, 0.693);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
}

.main-condition:hover .condition-content {
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);

}

/* 
FOOTER */

.footer-bg {
    padding: 40px 0px;
    background: var(--frist--color);
    color: #fff;
    margin-top: 80px;
    font-size: 16px;
}

.footer-main-icon a,
i {
    color: #fff;
}

.footer-main-icon {
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
}

.footer-icon {
    margin-right: 20px;

}

.social-media-footer a {
    font-size: 25px;
    margin: 0px 10px;
}

.footer-content {
    position: relative;

    text-align: center;
    /* border-right: 1px solid var(--white--color); */
}

/* .vl {
    border-left: 2px solid var(--white--color);
    height: 100px;
    margin-left: 10px;
  } */
.social-media-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* .footer-content::before{
    position: absolute;
    content: ' ';
    top: -10px;
    height: 100px;
    width: 1px;
    background-color: var(--white--color);
    right: -10px;
    text-align: center;
} */

/* ABOUT US PAGE */

.about-banner {
    background: linear-gradient(0deg, rgba(51,51,51,0.4222864145658263) 0%, rgba(6,6,6,0.5914740896358543) 100%), url('../images/about/bg.jpg');
    background-size: cover;
    background-position: center;
  

}

.about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   padding-top: 17%;
    padding-bottom: 12%;

}

.about-content h3 {
    font-size: 55px;
    letter-spacing: 1px;
    color: var(--white--color);
    font-weight: 600;
    text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.guideline-content p{
    font-size: 20px;
    color: var(--frist--color);
    margin-bottom: 10px;
}
.guideline-content i{
    color: var(--frist--color);
    font-size: 12px;
    margin-right: 10px;
}
.guideline-content ul{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
 
}
.who-we-are-bg {
    margin-top: 80px;
}

.sub-heading h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
    color: var(--gray-color);
}

.sub-heading p {
    font-size: 16px;
    line-height: 1.8;
}
.who-we-img{
    text-align: center;
}
.who-we-img img {
    height: 350px;
  

}

.mission-bg {
    margin-top: 80px;
    padding: 40px 0px;
    background-color: #F2F2F2;

}

.mission-content {
    padding-right: 20px;
}

.vision-content {
    padding-left: 20px;
}

.why-choose-us-bg {
    margin-top: 80px;

}
.why-choose-img {
    text-align: center;
}
.why-choose-img img {
    height: 350px;
    

}

/* CARS PAGE */
.cars-banner {
 background: linear-gradient(0deg, rgba(51,51,51,0) 0%, rgba(6,6,6,0.958420868347339) 100%),url('../images/cars/bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 600px;

}


.cars-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
      padding-top: 250px;

}

.cars-content h3 {
    font-size: 55px;
    letter-spacing: 1px;
    color: var(--white--color);
    font-weight: 600;
    text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.ourcar-bg {
    margin-top: 60px;
}

/* CRAS_CRAD */
.cars-info-bg {
    margin-top: 50px;
}

.filter-style{
    width: 100%;
    padding: 10px; 
}

.cars-info-card {
    border: 1px solid var(--gray-color);
    padding: 0px;
    border-radius: 10px;
   margin-top: 40px;
   
}

.cars-name h6 {
    font-size: 25px;
    font-weight: 500;
    min-height:60px;
}

.cars-info-content {
    padding: 30px;
}

.cars-img img {
    border-radius: 10px 10px 0px 0px;
    width:100%;
    height:100%;
   
}

.main-info {
    margin-top: 15px;
}

.main-info p,
span {
    font-size: 18px;
}

.main-info p {
    margin-bottom: 5px;
    color: var(--gray-color);
}

.main-info span {
    font-weight: 600;
}

.cars-info-button button {
    border: 0px;
    margin-top: 30px;
}
.date-class,.fliter-class{
    padding: 10px 20px;
    border: 1px solid var(--gray-color);
    width: 100%;
    min-height: 46px;
}

.ourcar-bg .input-group, .fliter-class{
     width: 100%;

    
}



/* Policy PAGE */
.policy-banner {
    background-image:linear-gradient(4deg, rgba(33,38,42,0.5102415966386555) 0%, rgba(7,30,45,0.6474964985994398) 100%) , url('../images/service/bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 600px;

}


.policy-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     padding-top: 250px;

}

.policy-content h3 {
    font-size: 55px;
    letter-spacing: 1px;
    color: var(--white--color);
    font-weight: 600;
    text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    text-align:center;
}

.term-condition-content {
    margin-top: 40px;
}
.guideline-content{
      margin-top: 30px;
}
    


/* ADDS BANNER */
.policy-add-banner {
    background-image: url('../images/service/banner.jpg');
    padding: 40px 0px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.main-policy-add-content {
    padding: 30px 0px;
}

.adds-main-card {
    text-align: center;
    color: #fff;
}

.adds-img i {
    font-size: 40px;
}

.adds-content {
    margin-top: 15px;
    padding: 0px 20px;
}

.adds-content h6 {
    font-size: 22px;
    margin-bottom: 5px;
}

/* CONTACT PAGE */

.contact-banner {
    background-image: url('../images/contact/bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 600px;

}


.contact-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     padding-top: 250px;
}

.contact-bg .sub-heading h3{
    
    color: #fff;
}
.contact-bg .sub-heading p{
     color: #fff;
    
}
.contact-bg i{
     color: #fff;
    
}
.social-media-content p{
     color: #fff;
}
    

.contact-bg  a{
     color: #fff;
    
}

.contact-content h3 {
    font-size: 55px;
    letter-spacing: 1px;
    color: var(--white--color);
    font-weight: 600;
    text-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.contact-bg {
    background-image: linear-gradient(8deg, rgba(33,38,42,0.5102415966386555) 0%, rgba(7,30,45,0.6474964985994398) 100%),url('https://thecreativebreed.com/jntcars/asset/images/contact/banner.jpg');
    margin-top: 50px;
    background-size:cover;
    padding:50px 20px;
}

.sub-contact {
    position: relative;
    margin-top: 30px;
}
.sub-contact select{
    width: 80%;
    border-radius: 2px;
    padding: 20px 10px;
}
.sub-contact option{
   padding: 10px 0px;
   padding: 10px;
  
}

.sub-contact input,
textarea {
    width: 80%;
  
    border-radius: 2px;
    padding: 15px 10px;
}
.car-content button{
    outline: 0px;
    border: 0px;
}

.sub-contact label {
    position: absolute;
    left: 10px;
    pointer-events: none;
    padding: 10px;
    transition: 0.5s;
    font-size: 14px;
    color: var(--gray-color);
    letter-spacing: 1px;

}

 .sub-contact input:focus,
 .sub-contact input:valid,
 .sub-contact textarea:focus,
 .sub-contact textarea:valid{
border: 0px solid;

} 

.sub-contact input:valid~label,
.sub-contact input:focus~label,
.sub-contact textarea:valid~label,
.sub-contact textarea:focus~label {
  
    font-size: 16px;
    padding: 0px 10px;
    color: #d6a802;
    background-color: #fff;
    transform: translateX(10px) translateY(-7px);
}

.sub-social-media{
    text-align: center;
    margin-bottom: 30px;
}
.social-media-icon i{
    font-size: 30px;
    color: #fff;
}
.social-media-content{
    margin-top: 10px;
}
.social-media-card a{
    margin: 0px 10px;
}
.main-form{
    position: relative;
}
.main-form:before{
    position: absolute;
    content: " ";
    height: 100%;
    width: 2px;
    background-color: #fff;
    top: 0;
    right: -20px;
    opacity: 0.6;
}
.sub-contact button{
    border: 0;
}
.sub-contact .main-btn{
    padding: 10px 30px;
}

.condition-content p {
    font-size: 18px;
}
.cars-info-button{
    justify-content: space-between;
    display: flex;
}
.enquiry-cars-main input{
    width: 100%;
}
.enquiry-cars-main textarea{
    width: 100%;
}
.enquiry-cars-main select{
    width: 100%;
}

.enquiry-form-bg{
    background: linear-gradient(0deg, rgba(51,51,51,0.7222864145658263) 0%, rgba(6,6,6,0.7914740896358543) 100%), url('../images//contact/form.jpg');
    background-size: cover;
    background-position: center;
    padding: 30px 20px;
}
.enquiry-form-bg input{
    border: 0px;
    border-bottom: 1px solid var(--white--color);
    background-color: transparent;
}

.enquiry-cars-main{
    position: relative;
    border-bottom: 2px solid rgb(197, 195, 195);
    margin-top: 35px;
}
.enquiry-cars-main input,select{
    width: 100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background-color: transparent;
    outline: none;
    color: #fff;
    opacity: 0.5;
}
.enquiry-cars-main textarea{
    width: 100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background-color: transparent;
    outline: none;
    color: #fff;
}
.enquiry-cars-main  label{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    color: rgb(238, 238, 238);
    left: 0px;
    transition: 0.5s;
    opacity: 0.5;
}


.enquiry-cars-main input:focus ~ label,
.enquiry-cars-main input:valid ~ label,
.enquiry-cars-main textarea:focus ~ label,
.enquiry-cars-main textarea:valid ~ label

{
   
    opacity: 1;
    top:-10px;
    color:rgb(255, 255, 255);
  
}

.enquiry-form-modal {
    padding: 0px;
}

.enquiry-cars-main select:focus{
    background-color: #303030;
} 
.enquiry-cars-main-button{
    margin-top: 30PX;
}

.main-carouel-car{
    margin-top: 30px;
}

.main-carouel-car .owl-home-carousel .owl-item{
    transition: all  0.8s ease-in;
    opacity:0;
}
.main-carouel-car .owl-home-carousel .owl-item.active{
    opacity:1;
}

.footer-content img{
    width: 80%;
}



/* .button-car{
    font-size: 14px;
} */