/* ////////// Start Collapsible ///////////////// */
	
summary {
   display: block;
}

summary::-webkit-details-marker {
   display: none;
}

.p-section-faq__item:nth-of-type(n+2) {
   margin-top: 10px;
}

.p-faq__question {
   display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 16px; color: black;
   /* color: rgba(204, 0, 0, 1);
       background-color: #4B7CB6; */
   background-color: #eee; cursor: pointer; font-size: 24px; font-weight: 700;
}

.p-faq__icon {
   display: block; flex-shrink: 0; position: relative; width: 40px; transform-origin: center; background-color: rgba(0, 0, 0, 1); padding: 24px; border-radius: 50%;
}

.p-faq__icon::after {
   right: 15px; content: ""; position: absolute; display: block; width: 16px; height: 16px; transition: transform .3s; transform: translateY(-80%) rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white;
}

.is-opened .p-faq__icon::after {
   transform: translateY(-25%) rotate(-135deg);
}

.p-faq__answer {
   overflow: hidden;
}

.p-faq__answer-inner {
   padding: 16px 32px;
   /* border: 2px solid #4B7CB6; */
   border-top: none; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; font-size: 20px; font-weight: 700;
}

.l-inner {
   margin: 0 auto;
   /* max-width: 648px; */
   width: 100%;
   /* padding: 24px; */
}

   /* ////////// End Collapsible ///////////////// */


   /* ////////// START IMG-HOVER-ZOOM CSS ///////////////// */

.img-hover-zoom {
   height: inherit;
   /* [1.1] Set it as per your need */
   overflow: hidden;
   /* [1.2] Hide the overflowing of child elements */
}
/* [2] Transition property for smooth transformation of images */

.img-hover-zoom img {
   transition: transform .5s ease;
}
/* [2] Transition property for smooth transformation of images */

.img-hover-zoom>.img {
   transition: transform .5s ease;
}
/* [3] Finally, transforming the image when container gets hovered */

.img-hover-zoom:hover img {
   transform: scale(1.1);
}
/* [3] Finally, transforming the image when container gets hovered */

.img-hover-zoom:hover>.img {
   transform: scale(1.1);
}

   /* ////////// END IMG-HOVER-ZOOM CSS ///////////////// */ 
   
   /* ////////// Start Container CSS ///////////////// */

.container {
   width: 100%;
   padding-right: 0px !important; 
   padding-left: 0px !important; 
   margin-right: auto; 
   margin-left: auto;
}
.container-fluid {
   padding-right: 0px !important; 
   padding-left: 0px !important; 
   margin-right: auto; 
   margin-left: auto;
}

.container.con1 {
   width: 85%;
}

@media(max-width: 850px) {
   .container.con1 {
   width: 95%;
   }
}

.container.con2 {
   width: 90%;
}

.row {
   margin-right: 0px; 
   margin-left: 0px;
}
.container2-banner {
   display: flex; 
   align-items: flex-end; 
   width: 100%; 
   height: 650px; 
   background-color: #0000002e;
}
.banner-spacer{
   height: 48px;
}

   /* ////////// End Container CSS ///////////////// */


   /* ////////// Start BTN CSS ///////////////// */

   #btn-banner-hover-effects {
       height: 50px;
       width: 30% !important;
       background-color: #000000 !important;
       color: #eee !important;
       line-height: 34px;
       font-size: 18px !important;
   }

   #btn-banner-hover-effects:hover {
       background-color: #181818 !important;
       color: #fff !important;
       border: #000 2px solid;
   }

   #btn-bot-hover-effects {
       height: 50px;
       width: 100% !important;
       background-color: #000000 !important;
       color: #eee !important;
       line-height: 34px;
       font-size: 18px !important;
       margin-top: 2%;
   }

   #btn-bot-hover-effects:hover {
       background-color: #181818 !important;
       color: #fff !important;
       border: #000 2px solid;
   }

   /* ////////// End BTN CSS ///////////////// */

   /* ////////// Sart Font size res CSS ///////////////// */

.Paragraph {
   font-size: 22px;
}  
.title-48-38 {
   font-size: 48px !important; 
   font-weight: 700 !important;
}
.title-36-29 {
   font-size: 36px !important; 
   font-weight: 700 !important;
}
.title-30-24 {
   font-size: 30px !important; 
   font-weight: 700 !important;
}
.title-19-24{
   font-size: 24px !important;
   font-weight: 600;
}
.title-32-26{
   font-size: 32px !important;
   font-weight: 700;
}

@media(max-width: 1300px) {
   .title-48-38 {
   font-size: 38px !important; 
   } 
   .title-36-29 {
   font-size: 29px !important; 
   } 
   .title-30-24 {
   font-size: 24px !important; 
   } 
   .title-19-24 {
   font-size: 19px !important; 
   } 
   .title-32-26{
   font-size: 26px !important;
   }
   .Paragraph {
   font-size: 18px;
}  
}

   /* ////////// End Font size res CSS ///////////////// */

   /* ////////// Sart IMG res CSS ///////////////// */

.Main-Banner-IMG {
   background-size: cover; 
   background-position: center center; 
   background-image: url(https://irp.cdn-website.com/5680cf71/dms3rep/multi/2024-nissan-leaf-in-white.webp); 
   background-repeat: no-repeat; 
   width: 100%; 
   display: flex; 
   align-items: flex-end; 
   height: 650px;
}

.Bot-IMG {
   background-size: cover; 
   background-position: center center; 
   background-image: url(https://irp.cdn-website.com/5680cf71/dms3rep/multi/2024-nissan-leaf-led-headlights.webp); background-repeat: no-repeat; 
   width: 100%; 
   height: 750px;
}

.spacer {
       height: 600px;
   }

   @media(max-width: 2000px) {
       #title-banner{
           padding-right: 45%;
       }

   }
   @media(max-width: 1700px) {
       #IMG-Bot-Content-res{
           padding-top: 5%;
       }

   }
   @media(max-width: 1600px) {
       #title-banner{
           padding-right: 43%;
       }
       .IMGcon-1{
           height: 450px;
       }
       .IMGcon-3{
           height: 300px;
       }
   }

   @media(max-width: 1600px) {
       #title-banner{
           padding-right: 35%;
       }
       .spacer {
           height: 641px;
       }
   }

   @media(max-width: 1400px) {
       #IMG-Bot-Content-res{
           padding-top: 12%;
       }
   }
   
   @media(max-width: 1300px) {
       .IMGcon-1{
           height: 400px;
       }
       .Bot-IMG{
           height: 656px;
       }
       #IMG-Bot-Content-res{
           padding-top: 7%;
       }
   }

   @media(max-width: 1200px) {
       .Main-Banner-IMG{
           height: 560px;
       }
       .spacer{
           height: 545px;
       }
       #IMG-Bot-Content-res{
           padding-top:12%;
       }
   }

   @media(max-width: 1100px) {
       .IMGcon-1{
           height: 450px;
       }
       .IMGcon-2{
           height: 350px;
       }
   }
   @media(max-width: 1000px) {
       .Bot-IMG{
           height: 550px;
       }
       .IMGcon-1{
           height: 500px;
       }
   }

   @media(max-width: 900px) {
       .Main-Banner-IMG{
           height: 456px;
       }
       #title-banner{
           padding-right:15%;
       }
       .spacer{
           height: 450px;
       }
       #IMG-Bot-Content-res{
           padding-top: 22%;
       }
       .Bot-IMG{
           height: 499px;
       }
   }
   @media(max-width: 766px) {
       #btn-banner-hover-effects{
           width: 100% !important;
       }
       .IMGcon-3{
           height: auto;
       }
       .IMGcon-2{
           height: auto;
       }
       .IMGcon-1{
           height: auto;
       }
       .Bot-IMG{
           height: 280px;
       }
   } 
  
.video-container-yt {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container-yt iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5% 12.5% 5% 12.5%;
}



/* ////////// End IMG res CSS ///////////////// */