/*==================================
* Author        : "ThemeSine"
* Template Name : CarVilla  HTML Template
* Version       : 1.0
==================================== */

/*==================================
font-family: 'Poppins', sans-serif;
font-family: 'Rufina', serif;
==================================== */


/*=========== TABLE OF CONTENTS ===========
1.  General css (Reset code)
2.  Top-area
3.  Welcome-hero
4.  Model-search
5.  Service
6.  New-cars
7.  our-fleet
8.  Client-say
9.  Brand
10. Blog
11. Contact
==========================================*/

/*-------------------------------------
		1.General css (Reset code)
--------------------------------------*/
@font-face {
      font-family: "Nunito", sans-serif;
    src: url(fonts/HelveticaRoundedLTStd-Bd.ttf);
}

*{
    padding: 0;
    margin: 0;
}

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
body{
    font-family: "Nunito", sans-serif;
	font-size:16px;
    font-weight: 800;
    background: #000000;
	color:#818998;
    text-transform:initial;
    max-width:1920px;
    margin:0 auto;
	overflow-x:hidden;
}

:root {
    --bbg-color:#F0F8FF;
    --primary-bbg-color: #4B4E57;
    --secondary-bbg-color: #1A1A1A;
    --dbg-color:#1A1A1A;
    --primary-dbg-color:#FFBF00;
    --secondary-dbg-color:#F0F8FF;
}

a,a:hover,a:active,a:focus {
	display:inline-block;
	text-decoration:none;
	color: #444a57;
	font-size:20px;
	padding:0;
    font-weight: 600;
    text-transform: capitalize;
}
h1,h2,h3,h4,h5,h6 { 
	margin: 0;
	color:#444a57;
    font-size: 20px;
    font-weight: 800;
    text-transform: capitalize;
}
p {
	margin: 0;
	color:#818998;
	font-size:16px;
    line-height: 1.8;
    text-transform: initial;
}
img{border:none;max-width:100%; height:auto;}
ul{
	padding: 0;
    margin: 0 auto;
    list-style: none;
}
ul li {
	list-style: none;
    display: inline-block;
}
select,input,textarea,button,.form-control{box-shadow:none;outline:0!important;}
button {background: transparent;border: 0;font-size: 16px;text-transform: capitalize;}

html,body{scroll-behavior: smooth;
   }

[placeholder]:focus::-webkit-input-placeholder {
  -webkit-transition: opacity 0.3s 0.3s ease; 
  -moz-transition: opacity 0.3s 0.3s ease; 
  -ms-transition: opacity 0.3s 0.3s ease; 
  -o-transition: opacity 0.3s 0.3s ease; 
  transition: opacity 0.3s 0.3s ease; 
  opacity: 0;
}
.owl-carousel {z-index: 0;}
/* section-header */
.section-header{
    padding-top: 6vh;
    position: relative;
    text-align: center;
}
.section-header h2{
    position: relative;
    display: flow;
    margin: 0 auto;
    max-width: fit-content;
    font-size: 36px;
    font-weight: 800;
    padding-bottom: 10px;
    overflow: hidden;
}
.section-header h2:before {
    position: absolute;
    content: "";
    width: 80px;
    height: 2px;
    bottom: 0;
    left: -50%;
    background: #FEBF10;
    animation: headerline 3s linear infinite alternate ;
}
@keyframes headerline { 
    0% {
        left: -50%;
        

    }
    10% { width: 20px;}

     50% {width: 150px;
     
    }
     100% {
        left: 130%; 
        width: 80px;
     }
}





.section-header p{color: aliceblue;text-transform: capitalize;margin-bottom:10px;}
.section-header h2 span,.section-header p span{text-transform: lowercase;}

/* section-header */

/*=============Style css=========*/


/*-------------------------------------
        2. Top-area
--------------------------------------*/


/*.nav li*/
.navbar0 {
position: fixed;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 3vh 6vw;
transition: .3s linear;
}
.sticky {
    background: linear-gradient(to bottom, #000000, #0000006e);
    backdrop-filter: blur(5px);
    box-shadow: #febf1075 0px 0px 5px;
    padding: 2vh 7vw;
}

.navbar0 .links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    
}
.navbar0 .links a:hover {
    color:#FEBF10 ;
}
.navbar0 .links a:after {
    display: flex;
    content: '';
    border-radius: 1px;
    width: 0%;
    height: .1px;
    align-items: center;
    background: #FEBF10;
    transition: .2s ease-in-out;
}

.navbar0 .links a:hover:after { width: 100%;}


.navbar0 .links a.active { color: #FEBF10;}

.logo {
    text-transform: uppercase;
    
    font-size: 25px;
    font-weight: 600;
    margin: 0;
    color: aliceblue;
    
}
.textgoldanim {
color: #febf1000;
background: repeating-linear-gradient(45deg, #FEBF10 -1%, #6b4f00 385px);
background-clip: text;
background-position-x: 0px;
animation: textgold 150s ease-out infinite;
}

.logo:hover,
.logo:focus { 
text-transform: uppercase;
letter-spacing: 5px;
font-size: 25px;
font-weight: 600;
margin: 0;
color: #febf1000;
background: repeating-linear-gradient(45deg, #FEBF10 -1%, #6b4f00 385px);
background-clip: text;
background-position-x: 0px;
animation: textgold 150s ease-out infinite;
}


.navbar0 .links { 
    display: flex;
    gap: 20px;
    margin: 0;
}
.navbar0 .toggle_btn {
    color: aliceblue;
    font-size: 25px;
    cursor: pointer;
    display: none;
    transition: .5s;
    

}
.navbar0 .toggle_btn:active
{ color: #FEBF10;
scale: 1.1;
transform: rotate(-360deg);}
/*dropdown-menu*/
.dropdown-menu0 {

   visibility: hidden;
   opacity: 0;
    position: fixed;
    height: 0vh;
    box-shadow: #febf1075 0px 0px 5px;
    top: -40vh;
    right: 7vw;
    width: 20em;
    margin: 0 auto;
    display: flex;
    row-gap: 3vh;
    flex-direction: column;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    background: linear-gradient(to bottom, #000000, #0000006e);
    backdrop-filter: blur(5px);
    border-bottom-right-radius: 3vw;
    border-bottom-left-radius: 3vw;
    transition: .3s linear;
    z-index: 9999;
    overflow: hidden;
}
.dropdown-menu0.open {
   
    opacity: 1;
    visibility: visible;
    height: 57vh;
    top: 8vh;
    
   
}



.dropdown-menu0 li {
    display: block;

}
.dropdown-menu0 li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1px;
    
}

.dropdown-menu0.open li a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    
}

.dropdown-menu0 li a:after {
    display: flex;
    content: '';
    border-radius: 1px;
    width: 0%;
    height: .1px;
    align-items: center;
    background: #FEBF10;
    transition: .2s ease-in-out;
}

.dropdown-menu0 li a:hover:after { width: 100%;}
.dropdown-menu0 li a:hover {color: #FEBF10;}






/*.navbar-toggle */

/*-------------------------------------
        3.  Welcome-hero
--------------------------------------*/

.welcome-hero {
    position: relative;
    display: flex;
    background: url(../images/welcome-hero/02.png);
    background-color: #1A1A1A;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 12% 0% 10%;
    box-sizing: border-box;
    margin: 0px auto;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 10%;
}



    
.header-area{position: absolute;top:0;left:0;width: 100%;z-index: 99;}




/*.welcome-hero-txt*/
.welcome-hero-txt{
    position: relative;
    flex: 1;
    text-align: center;
    max-width: 40%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3vh;

}

.social-icons {
    display: flex;
    gap: 5vw;
    margin: 0 auto;
    padding-top: 3vh;
    opacity: .5;
    transition: .5s;
    
 }
 .social-icons i {color: aliceblue;
font-size: 1.2em; 
-webkit-box-reflect: below 1px linear-gradient(#00000000, #00000012, #00000042);}

.social-icons a:hover { scale: 1.2;}
.social-icons i:hover { color: #FEBF10;
}

.blur {transition: 1s ease-in;}
.blur.ok { width: 100%;
height: 150vh;
position: fixed;
z-index: -1;
backdrop-filter: blur(10px);
}

.Banner {
    position: relative;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    flex-wrap: wrap;
    max-width: 40%;
    top: 55px;
}
.Banner h1 {text-transform: capitalize;
    text-align: center;
    margin: 0 auto;
    font-size: clamp(3.5rem, 4vw,5rem) ;
    width: auto;
    color: #FEBF10;
    font-weight: 800;}

.Banner p {
color: #E5E9F2;
text-align: center;
text-transform: capitalize;
font-weight: 600;
font-size: clamp(1rem, 4.5vw,2rem) ;
padding: 5% 5%;
    }



/* booking form start */

.popupcenter {
position: fixed;
display: flex;
align-items: center;
place-content: center;
text-align: center;
z-index: 100;
width: 100%;
height: 100%;
top:150%;
content-visibility: 0;
transition: content-visibility 0s ease-in-out,top .5s ease-in-out ;
}
.popup { 
    display: flex;
    background: #ffffff15;
    backdrop-filter: blur(10px);
    width: 45%;
    box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid #febf107b;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    }

body.active-popupcenter {
    overflow: hidden;
}

body.active-popupcenter .popupcenter {
    content-visibility: 1;
    top: 0%;
    transition: content-visibility 2s ease-in-out,top .5s ease-in-out ;
    

}

/* ----------------------------------------------------------------- */
    .popup form {
        position: relative;
        box-sizing: border-box;
        padding: 0px;
        display: flex;
        flex: 2;
        position: relative;
        flex-direction: column;
        gap: .8em;
        width: 85%;
        padding: 1em 0em;
        align-content: center;
        align-items: center;
    }

    
    form input { 
        color: var(--primary-dbg-color);
        width: 100%;
        height: 2em;
        display: block;
        width: 100%;
        outline:none;
        font-size: 15px;
        border:none;
        border-radius:10px;
        text-align: center;
        background:#00000081;
        box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.073);
    }
    form select { 
        color: var(--primary-dbg-color);
        width: 100%;
        height: 2em;
        display: block;
        width: 100%;
        outline:none;
        font-size: 15px;
        border:none;
        border-radius:10px;
        text-align: center;
        background:#00000081;
        box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.073);
    }
    .form-rows { 
        width: 100%;
        display: flex;
        gap: 1em;
    }
    .form-rows .country_code {width: 25%;}


    /* Change the calendar background and border */
.flatpickr-calendar {
   background:#00000081;
   color: #FEBF10;
   border : 1px solid #FEBF10;
   backdrop-filter: blur(5px);
}

.flatpickr-current-month { color: #FEBF10;}
span.flatpickr-weekday {color: #FEBF10;}
.flatpickr-day {color: #febf1049;}
.flatpickr-day.flatpickr-disabled {color: rgba(255, 255, 255, 0.277);}
.flatpickr-day.prevMonthDay {color: rgba(255, 255, 255, 0.277);}
/* Style the selected date */
.flatpickr-day.selected {
    background: #FEBF10 !important; /* Amber Orange */
    color: #fff;
    border-radius: 10px;
}

/* Change hover effect on dates */
.flatpickr-day:hover {
    background: #FEBF10 !important; /* Fluorescent Orange */
    color: black;
}
  
    .popup .close-btn {
        position: relative;
        flex: 1;
        width:20px;
        height: 20px;
        background-color: #222;
        color: #FEBF10;
        border-radius: 10px;
        cursor: pointer;
        left: 47.5%;
        transform: translate(-50% );
        top: 1em;
        
    }
    .popup .close-btn:hover { scale: 1.1;
    box-shadow: inset 0 0 5px #FEBF10;
    }
    form ::placeholder {color: #FEBF10;}
    form input:focus,form input:valid,form select:focus,form select:valid {
        color: #FEBF10;
        border : 1px solid #FEBF10;
    }
   
    .form-button { 
        position: relative;
        background: linear-gradient(135deg, #000000, #222222);
        padding: 10px 26px;
        color: #FEBF10;
        border-bottom: solid #FEBF10 2px;
        border-top: solid #FEBF10 2px;
        border-radius: 25px;
        transition: .3s linear;
        
        

    }
    
    .form-button:hover,
    .form-button:active,
    .form-button:focus {
        border-bottom: solid #000000 2px;
        border-top: solid #000000 2px;
        color: #000000;
        background: #FEBF10;
        font-weight: 600;
        scale: 1.1;
    
    }

   /* booking form end */

    .Banner a{
        position: relative;
        margin: 0 auto;
        padding: 20px;
        color: #FEBF10;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 3px;
        font-size: 25px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
        overflow: hidden;
        scale: .8;
        transition: .1s linear;
      }
      .Banner a:hover,.Banner a:active {scale: .9;
        box-shadow: 10px 0 10px #febf106d , -40px 0px 60px #febf106d;}

      
      .Banner a::before
      {
        content:"";
        position:absolute;
        top:2px;
        left:2px;
        bottom:2px;
        width:50%;
        background:rgba(255,255,255,0.05);
        
      }
      .Banner a span:nth-child(1)
      {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:2px;
        background:linear-gradient(to right, #222b00 ,#ffcb3b);
        animation: animate1 2s linear infinite;
        animation-delay:1s;
        
      }
      @keyframes animate1
      {
        0%
        {
          transform:translateX(-100%);
      }
        100%
        {
          transform:translateX(100%);
        }
      }
      .Banner a span:nth-child(2)
      {
        position:absolute;
        top:0;
        right:0;
        width:2px;
        height:100%;
        background:linear-gradient(to bottom, #222b00 ,#ffcb3b);
        animation: animate2 2s linear infinite;
        animation-delay:2s;
      }
      @keyframes animate2
      {
        0%
        {
          transform:translateY(-100%);
      }
        100%
        {
          transform:translateY(100%);
        }
      }
      .Banner a span:nth-child(3)
      {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:2px;
        background:linear-gradient(to left, #222b00 ,#ffcb3b);
         animation: animate3 2s linear infinite;
        animation-delay:1s;
        
      }
      @keyframes animate3
      {
        0%
        {
          transform:translateX(100%);
      }
        100%
        {
          transform:translateX(-100%);
        }
      }
      .Banner a span:nth-child(4)
      {
        position:absolute;
        top:0;
        left:0;
        width:2px;
        height:100%;
        background:linear-gradient(to top, #222b00 ,#ffcb3b);
         animation: animate4 2s linear infinite;
        animation-delay:2s;
        
      }
      @keyframes animate4
      {
        0%
        {
          transform:translateY(100%);
      }
        100%
        {
          transform:translateY(-100%);
        }
      }

.welcome-btn {
    display: inline-block;
    width: 230px;
    height: 60px;
    background: #FEBF10;
    color: #fff;
    border-radius: 3px;
    margin-top: 55px;
    -webkit-transition: .3s linear; 
    -moz-transition:.3s linear; 
    -ms-transition:.3s linear; 
    -o-transition:.3s linear;
    transition: .3s linear;
}
.welcome-btn:hover{
    background: #0102fa;
}
/*.welcome-hero-txt*/

/*-------------------------------------
        4. Model-Search
--------------------------------------*/
.model-search-content .col-sm-12 {padding: 0;}
.model-search-content {
    padding: 40px 0;
    background: #fff;
    box-shadow:0 10px 40px 0px rgba(38,40,64,.2);
    position: absolute;
    bottom: -150px;
    width: 100%;
    border-radius: 3px;
}

/*.single-model-search*/
.single-model-search{margin-bottom: 30px;}
.single-model-search:last-child {margin-bottom: 0;}

.single-model-search h2 {
    font-size: 16px;
    font-weight: 800;
    text-transform: capitalize;
    margin-bottom: 20px;
}
/*model-select-icon*/
.model-select-icon{
    position:relative;
}
.model-select-icon .form-control {
    outline: 0!important;
    box-shadow: none;
    border: 1px solid #f8f8f8;
    background: #f8f8f8;
    height: 60px;
}
.model-select-icon select {
    font-size: 16px;
    color: #888f9d;
    text-transform: capitalize;
}
.model-select-icon:after{
    position: absolute;
    content: "\f103";
    right: 0px;
    top: 0;
    font-size: 10px;
    color: #888f9d;
    background: #f8f8f8;
    height: 60px;
    line-height: 60px;
    width: 50px;
    text-align: center;
    font-family: "Flaticon";
    pointer-events: none;
    border: transparent;
}/*model-select-icon*/
.welcome-btn.model-search-btn {
    width: 160px;
    margin-top: 80px;
    margin-left: 53px;
}

/*.single-model-search*/

/*-------------------------------------
        5. Service 
--------------------------------------*/
.services { padding:3% 0%;
background:linear-gradient(to bottom, #000000, #222222);
border-bottom: solid #FEBF10 2px;
border-radius: 50px;
}
.services .hh { color: aliceblue;}
.services .hp {
    color: #febf1000;
    background: repeating-linear-gradient(45deg, #FEBF10 -1%, #6b4f00 385px);
    background-clip: text;
    background-position-x: 0px;
    animation: textgold 150s ease-out infinite;
}



.service-content {
    padding-top: 5%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
}

.service-cards-container { 
    position: relative;
    display: flex;
    flex: 2;
    width: 50%;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10%;
    row-gap: 2vh;
    flex-direction: row;
}
.imgcontainer {flex: 1; width: 50%;position: relative;top:8vh;transition: .5s;}
.imgcontainer img {
    transform: perspective(800px) rotateY(-20deg);
    transition: .8s;
    box-shadow: 0px 1px 5px 0px #000000;
    -webkit-box-reflect: below 2px linear-gradient(transparent,transparent,#0000002e);
    cursor: pointer;
}
.imgcontainer img.act {transform: unset; }
.imgcontainer img:hover {transform: unset; 
}
.imgcontainer img:active {scale:.8; 
}



.service-card {max-width: 40%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1vh;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
   }



.single-service-icon {
    display: inline-block;
    color: #FEBF10;
    font-size: clamp(3.1rem,3.5rem,3.8rem);

}
.service-card h2 a {
    font-size:clamp(1.8rem , 3vw ,2.5rem);
    color: aliceblue;
}
.single-service-icon h2 {position: relative;}
.service-card p {text-transform: initial;position: relative;
color: rgba(255, 255, 255, 0.481);
font-size: clamp(1.3rem, 1vw, 1.8rem);}



/*-------------------------------------
        6. New-cars
--------------------------------------*/
.new-cars{
    background:linear-gradient( to top, #000000, #222222);
    padding:3% 0% ;

    border-top: solid #FEBF10 2px ;
}
.newcars-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    padding-top: 5%;
}
.newcars-card img {
    border-radius: 8vw;
    max-width: 50%
}


.new-cars .hh { color: aliceblue;}
.new-cars .hp {
    color: #febf1000;
    background: repeating-linear-gradient(45deg, #FEBF10 -1%, #6b4f00 385px);
    background-clip: text;
    background-position-x: 0px;
    animation: textgold 150s ease-out infinite;
}

.cta-content {
    display: flex;
    max-width: 45%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7vh;

}

.cta-content .texts {     
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 3vh;}

.booknow { 
        position: relative;
        background: linear-gradient(135deg, #000000, #222222);
        padding: 10px 26px;
        color: #FEBF10;
        border-bottom: solid #FEBF10 2px;
        border-top: solid #FEBF10 2px;
        border-radius: 25px;
        transition: .3s linear;
        left: 30vh;
        

    }
    
    .booknow:hover,
    .booknow:active,
    .booknow:focus {
        border-bottom: solid #000000 2px;
        border-top: solid #000000 2px;
        color: #000000;
        background: #FEBF10;
        font-weight: 700;
        scale: 1.1;
    
    }

.new-cars .texts h3 {
    color: aliceblue;
    font-weight: 800;
    font-size: clamp(1.8rem , 3vw ,2.5rem) ;

    
}
.new-cars .texts p {
    color: rgba(240, 248, 255, 0.589);
    font-size: clamp(1.3rem, 1vw, 1.8rem);

    

}

/*-------------------------------------
        7. our-fleet
--------------------------------------*/
.our-fleet {
    position: relative;
    padding:3% 0% ;

   background: linear-gradient(45deg, #000000, #222222);
    background-color: black;

    
}
.our-fleet .hp {
    position: relative;
    color: #febf1000;
    background: repeating-linear-gradient(45deg, #FEBF10 -1%, #6b4f00 385px);
    background-clip: text;
    background-position-x: 0px;
    animation: textgold 150s ease-out infinite  ;
    
}
@keyframes textgold {
    0% {background-position-x: 0px;}
    100%{background-position-x: 5000px;}
}


.our-fleet .hh {
    position: relative;
    color: aliceblue;
}
.our-fleet-content{
    position: relative;
    padding:3% 0%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-items: center;
    row-gap: 40px;
    overflow: hidden;
}
.fleet-content-box { 
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    max-width: 33%;
    }
.imagebox { 
    position: relative;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        flex-direction: column;
        padding: 10px;
        margin: 0;
        z-index: 1;
        max-width: 90%;
        background: linear-gradient(135deg, #000000, #222222);
        border-radius: 0vw 5vw ;
        transition: .3s linear;
        border-top: solid #FEBF10 2px;
        border-bottom:solid #FEBF10 2px ;
    }

     
     .imagebox:hover ,
     .imagebox:focus ,
     .imagebox:active {
        background: #FEBF10;
        box-shadow: 0 0px 10px 0px rgba(240, 248, 255, 0.304);
     }




.our-fleet .texts {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
     padding-top: 15px;
     box-sizing: border-box;
     margin-top: 10px;
     border-top:solid #FEBF10 2px ;

}
.our-fleet .texts h3 { color: aliceblue;
font-weight: 800;
font-size: clamp(2rem , 3vw ,2.5rem) ;

}

.our-fleet .texts p { color:rgba(240, 248, 255, 0.589);
    font-size: clamp(1.5rem, 1.5vw, 2rem);
}


.Button1 { 
    position: relative;
    background: linear-gradient(135deg, #000000, #222222);
    padding: 10px 26px;
    color: #FEBF10;
    border-bottom: solid #FEBF10 2px;
    border-top: solid #FEBF10 2px;
    border-radius: 25px;
    transition: .3s linear;
    top: 10px;
    

}

.Button1:hover,
.Button1:active,
.Button1:focus {
    border-bottom: solid #000000 2px;
    border-top: solid #000000 2px;
    color: #000000;
    background: #FEBF10;
    font-weight: 600;
    scale: 1.1;

}


.details-box { 
    display: flex;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    margin: 0 auto;
    width: 85%;
    height: 0em;
    background: #00000051;
    box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #febf107b;
    border-radius: 20px;
    z-index: 10;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    left: 7%;
    top: 100%;
    transition: .3s linear;
}


.activedetails {
    display: flex;
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(10px);
    height: 14em;
    top: 3%;
}


.details {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1.2em;
    flex-direction: row;
}
.details-box span {

    color: var(--primary-dbg-color);
    font-size: 1.2em;
    border-bottom: solid 2px var(--secondary-dbg-color);

}
.details-icon {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.details-icon i {
    color: var(--primary-dbg-color);
    font-size: 1.2em;

}
.details-icon span {
    color: var(--secondary-dbg-color);
    font-size: .8em;
    border-bottom: none;
}


/*.single-our-fleet*/






/*.single-our-fleet*/

/*-------------------------------------       
        8. Clients-say 
--------------------------------------*/



.clients-say {
    background: var(--bbg-color);
    
}

.section-title { 
    position: relative;
    display: flex;
    max-width: 45%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    left: 30%;
    gap: 1em;
    margin: 0 auto;
    padding: 3em;

}
.section-title span{
    font-size: clamp(1em,2em,3em  );
    color: var(--primary-bbg-color);
    font-weight: 600;
}
.section-title p{ 
    font-size: 1em;
    color: var(--secondary-bbg-color);
    line-height: 1.5;
    font-weight: 600;
}

.testimonial-cards-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 45em;
    background: url(../images/clients/testilogo.png) no-repeat;
    background-size: 7em;
    background-position-x :77% ;
    background-position-y: 85%;
    background-color: var(--bbg-color);
    overflow: hidden;
    padding: 5em;
    

}
 
#s1,#s2,#s3 { position: relative;
top: 17em;
padding: 5em;
display: none;}

.testimonial-card  {
    background: var(--dbg-color);
    border-radius: 3em 0em;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    width: 21em;
    height: 30em;
    flex-wrap: nowrap;
    box-sizing: border-box;
    /* -webkit-box-reflect: below 2px linear-gradient(#00000000, #00000000, #00000040); */
    transition: 1s ease-in-out;
    user-select: none;
    left: 10em;
    
}







.testimonial-card:hover .client-quote p {color: var(--dbg-color);
    background: var(--bbg-color);
    

}

.client-pic { padding: 3em 3em 0em
}
.client-pic img {border-radius: 100vw;}
.client-name {
    padding-top: 1em;

}
.client-name:before {
    content: '';
    position: absolute;
    display: flex;
    background-color: var(--primary-dbg-color);
    width: 55%;
    height: .1vh;
    border-radius: 6px;
    top: 60%;
    transform: scaleX(-0.0);
    animation: scalinger 5s  ease-in-out infinite;
}
@keyframes scalinger {
    0% { 
transform: scaleX(-0.0);
    }
    50% {transform: scaleX(1); }
    100% {transform: scaleX(-0.0);
    }
}


.client-name h3 { color: var(--primary-dbg-color);
    font-weight: 800;
    letter-spacing: .1em;
}
.client-name h6 { color: var(--secondary-dbg-color);
font-size: .8em;
font-weight: 600;}
.client-quote { 
    height: 5em;
}
.client-quote p { 
    padding: .5em;
    font-size: 1em;
    font-weight: 600;
    color: var(--secondary-dbg-color);
    background: var(--primary-bbg-color);
    transition: color 1s;
    transition: background 1s;
}
.client-quote i {
    color: var(--primary-dbg-color);
    font-size: 3em;
}
.client-quote .fa-quote-left {
    position: relative;
    right: 50%;
    transform: rotate(10deg);
}
.client-quote .fa-quote-right {
    position: relative;
    left: 50%;
    transform: rotate(-10deg);}


    input {z-index: 100;}

    #s1:checked ~ #testimonial-card1 {
       transform: translateX(0%);
       z-index: 3;
     }
     #s1:checked ~ #testimonial-card2 {
       transform:perspective(900px) rotateY(-20deg) translateX(+90%);
       z-index: 2;
       scale: .5;
       filter: blur(5px);
       opacity: .5;
       opacity: .5;
     }
     #s1:checked ~ #testimonial-card3 {
       transform:perspective(900px) rotateY(20deg) translateX(-90%);
       z-index: 1;
       scale: .5;
       filter: blur(5px);
       opacity: .5;
     }
   
     #s2:checked ~ #testimonial-card2 {
       transform: translateX(0%);
       z-index: 3;
     }
     #s2:checked ~ #testimonial-card3 {
       transform:perspective(900px) rotateY(-20deg) translateX(+90%);
       z-index: 2;
       scale: .5;
       filter: blur(5px);
       opacity: .5;
     }
     #s2:checked ~ #testimonial-card1 {
       transform:perspective(900px) rotateY(20deg) translateX(-90%);
       z-index: 1;
       scale: .5;
       filter: blur(5px);
       opacity: .5;
     }
     
     #s3:checked ~ #testimonial-card3 {
       transform: translateX(0%);
       z-index: 3;
     }
     #s3:checked ~ #testimonial-card1 {
       transform:perspective(900px) rotateY(-20deg) translateX(+90%);
       z-index: 2;
       scale: .5;
       filter: blur(5px);
       opacity: .5;
     }
     #s3:checked ~ #testimonial-card2 {
       transform:perspective(900px) rotateY(20deg) translateX(-90%);
       z-index: 1;
       scale: .5;
       filter: blur(5px);
       filter: blur(5px);
       opacity: .5;
     }

     
   




/*     
        END Clients-say 
--------------------------------------*/




/*-------------------------------------
        9. Brand
--------------------------------------*/
.brand{
    padding: 120px 0;
}
.brand-area {
    position:relative;
}
.brand-area .item {
    padding: 0 40px 0;
}

.brand .brand-area .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height:72px;
    border-radius:0;
}
/*-------------------------------------
        10. Blog
--------------------------------------*/

/*-------------------------------------
        12. Contact
--------------------------------------*/
.contact {
    background: var(--dbg-color);
}

.contact a { font-size: .9em;
    color: #f0f8ff61;
    padding: 0em 1em;
    transition: .2s;
}
.contact a:hover{ color:#FEBF10;
    transform: translateX(10px);
}
.contact h2{font-weight: 800;
letter-spacing: .2rem;
color: #F0F8FF;
padding: 1em 0em;

}
.contact p{color: #f0f8ff61; 
    line-height: 1.3em;
    font-weight: 600;
}

.fcopyright {    
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15vh;
    padding: 5vh;

}

.footercontainer { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 1em;}


    
    
.fabout { width: 30%;
display: flex
;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;}
.fabout div{display: flex
;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;}
.fcontacts { width: 30%;
display: flex
;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;}
.fimg{ 
   width: 30%;
}

/*========================Thank you=================