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

body {
	font-family: 'Poppins', sans-serif !important;
}
.hero-section.carbanner{
        background: linear-gradient(90deg, rgba(2, 12, 125, 0.378) 19.14%, rgba(2, 12, 125, 0.427) 35.84%, rgba(2, 12, 125, 0) 45.85%)
, url(../images/car/carbanner.png) no-repeat top center;
padding-bottom: 20px ;
}

.input-section-main {
    background-color: #FFFFFF;
    box-shadow: 3px 7px 17.3px 4px #6E6E6E40;
    border-radius: 15px;
    padding: 20px;
}

.destination-input {
    input {
        width: 100%;
        padding: 11px;
        border: 0.75px solid #8D8D8D;
        border-radius: 8px;
        height: 48px ;
        &:focus{
            outline: none ;
        }
    }
        select {
        width: 100%;
        height: 48px ;
        padding: 10.5px 0 10.5px 10px;
        border: 1px solid #8D8D8D;
        border-radius: 0 8px 8px 0;
        color: #8D8D8D;
        border-left: none;
        &:focus{
            outline: none ;
        }
    }
}

.double-input {
    position: relative;
        .first {
        border-radius: 8px 0 0 8px !important;
        padding-left: 33px;
        padding-right: 5px !important;
        width: 100% !important;
    }
    &:after {
        width: 1px;
        height: 30px;
        position: absolute;
        top: 9px;
        left: 60%;
        content: '';
        background-color: #8D8D8D;
    }
        &:before {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 14px;
        left: 7px;
        background-image: url(../images/car/calendar.png);
        content: '';
    }
}
.big-box {
    width: 60%;
}
.small-box {
    width: 40%;
}
.request-btn {
    button {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F3B718;
        height: 48px;
        border-radius: 8px;
        color: white;
        border: none;
    }
}
.flysmarter{
    margin-bottom: 100px ;
}
.feature-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    color: #303030;
    line-height: 24px;
    max-width: 150px;
}
.car-dollar{
    position: absolute ;
    top: 10px ;
    right: 10px ;
    opacity: 0 ;
    visibility: hidden ;
    p{
        font-size: 20px ;
        font-weight: 600 ;
        color: #FFFFFF ;
    }
}
.dom-car-img{
    img{
        width: 100% ;
    }
}
.rental-name{
    width: 100% ;
    position: absolute ;
    bottom: 0 ;
    left: 0 ;
    padding: 15px ;

}
.cityname{
    .rentals{
        font-size: 16px ;
        font-weight: 400 ;
        color: #FFFFFF;
    }
    .losangeles{
        font-size: 20px ;
        font-weight: 600 ;
        color:  #FFFFFF ;
    }
}
.callnow{
    opacity: 0 ;
    visibility: hidden ;
    transition: 0.5s ;
    button{
        width: 90px ;
        height: 31px ;
        border-radius: 5px ;
        display: flex;
        font-size: 16px ;
        font-weight: 500 ;
        justify-content: center ;
        align-items: center ;
        border: none ;
        background: #F3B718;
        color: #ffffff ;
    }
}
.domestic-deal{
    font-size: 32px ;
    font-weight: 500 ;
    color: #323232 ;
}

.domestic-inner:hover{
    .car-dollar{
        opacity: 1 ;
        visibility: visible ;
    }
    .callnow{
        opacity: 1 ;
        visibility: visible ;
    }
}
.exclusive-car-main{
    background: url(../../resources/images/car/exclusivecar.png) no-repeat top center;
    height: 520px ;
    padding: 100px 0;
}
.unlock{
    font-size: 44px ;
    font-weight: 500 ;
    color: #ffffff ;
}
.dummy-txt{
    font-size: 14px ;
    font-weight: 400 ;
    color: #FFFFFF ;
}
.exclusive-car-call{
    font-size: 30px ;
    font-weight: 600 ;
    color: #FFFFFF ;
    text-decoration: none ;
    width: fit-content ;
}
.economy{
    font-size: 16px ;
    font-weight: 600 ;
    color: #101828 ;
}
.trip-txt{
    padding: 10px ;
}
.economy-price{
    font-size: 16px ;
    font-weight: 400 ;
    color: #636363 ;
    span{
        font-weight: 600 ;
        color: #149408 ;
    }
}
.every-trip-img{
    width: 100% ;
    img{
        width: 100% ;
    }
}
.right-car-inner{
    border: 1px solid #00000026;
    border-radius: 12px ;
}
.choose-rental{
    font-size: 40px ;
    font-weight: 500 ;
    color: #2B1810 ;
    line-height: 40px ;
}
.inting{
    font-size: 18px ;
    font-weight: 400 ;
    color: #4A5565 ;
    margin-bottom: 40px ;
}
.unbeatprice{
    font-size: 20px ;
    font-weight: 500 ;
}
.established{
    font-size: 16px ;
    font-weight: 400 ;
    color: #4A5565 ;
}
.choose-car{
    width: 100% ;
    img{
        width: 100% ;
    }
}
.dollar-img{
    img{
        min-width: 48px ;
        max-width: 48px ;
    }
}
.dest-dollar{
    p{
        font-size: 20px ;
        font-weight: 600 ;
        color: #ffffff ;
    }
}
.dest-date{
    font-size: 14px ;
    font-weight: 400 ;
    color: #ffffff ;
}
.booknow{
    img{
        width: 20px ;
    }
}
.transfer-txt{
    color: #ffffff ;
}
.comefrom{
    font-size: 30px ;
    font-weight: 500 ;
    color: #FFFFFF ;
}
.smooth{
    font-size: 18px ;
    font-weight: 400 ;
    color:#FFFFFFE5;
}
.cruise-tour-main{
    background: #101828 ;
    padding: 40px 0;
}
.cruisecountryname{
    font-size: 24px ;
    font-weight: 500 ;
    color: #FFFFFF ;
    text-align: center ;
}
.cruise-price{
    font-size: 14px ;
    font-weight: 400 ;
    color: #FFFFFF ;
    text-align: center;
    span{
        font-size: 24px ;
        font-weight: 600 ;
    }
}
.cruie-call-btn{
    display: flex ;
    justify-content: center ;
    align-items: center ;
    margin-top: 20px ;
    transition: 0.5s ;
    button{
        width: 142px ;
        height: 40px ;
        border-radius: 5px ;
        display: flex;
        justify-content: center ;
        align-items: center ;
        border: none ;
        background: #F3B718;
        color: #ffffff ;
    }
}
.cruise-txt{
        bottom: -60px  ;
        left: 0 ;
        width: 100%;
        padding: 15px ;
         transition:  0.5s; /* smooth animation */
}
.booknow{
    font-size: 16px ;
    font-weight: 500 ;
    color: #ffffff ;
}

 .cruise-inner{
    overflow: hidden ;
 }
.cruise-img{
    img{
        width: 100% ;
    }
}
.cruise-inner:hover{
    .cruie-call-btn{
         margin-top: 0px ;
    }
    .cruise-txt{
        bottom: 0px  ;
        left: 0 ;
        width: 100%;
        padding: 15px ;
}

}


@media screen and (max-width:768px) {
   .hero-section.carbanner{
        background: #030d7d;
   }
   .flysmarter {
        margin-bottom: 20px;
    }
    .feature-title{
        max-width: 100% ;
    }
    .domestic-deal {
        font-size: 22px;
    }
    .scroll-main{
        flex-wrap: nowrap ;
        overflow-x: scroll ;
        padding-bottom: 10px ;
        .col-lg-3 , .col-lg-6 , .col-lg-4{
            width: 90% ;
        }
    }
    .car-dollar {
        opacity: 1 ;
        visibility: visible;
    }
    .callnow {
        opacity: 1 ;
        visibility: visible;
        button{
            font-size: 14px ;
        }
    }
    .choose-rental {
        font-size: 22px;
        margin-bottom: 5px ;
    }
    .inting {
        font-size: 12px;
        margin-bottom: 20px ;
    }
    .unbeatprice {
        font-size: 16px;
    }
    .established {
        font-size: 12px;
    }
    .dollar-img {
        img {
            min-width: 37px;
            max-width: 37px;
        }
    }
    .car-dollar {
        p {
            font-size: 16px;
        }
    }
    .cityname {
        .rentals {
            font-size: 12px;
        }
        .losangeles {
            font-size: 16px;
        }
    }
    .rental-name {
        padding: 10px;
    }
    .comefrom {
        font-size: 20px;
        margin-bottom: 5px ;
    }
    .smooth {
        font-size: 12px;
        margin-bottom: 5px ;
    }
    .booknow {
        font-size: 13px;
    }
    .cruise-txt {
        bottom: 0;
    }
    .cruie-call-btn {
        margin-top: 0px;
    }
    .cruisecountryname {
        font-size: 20px;
    }
    .cruise-price {
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
    span {
        font-size: 20px;
        font-weight: 600;
    }
    }
    .cruie-call-btn {
        button {
            width: 120px;
            height: 36px;
        }
    }
    .dest-dollar {
        p {
            font-size: 18px;
        }
    }
}