@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Imperial+Script&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');
:root {
    --theme-color: #ff4136;
    --theme-color2: #FE8900;
    --theme-color3: #FFC000;
    --title-color: #1A1A1A;
    --body-color: #554B4B;
    --smoke-color: #F6F2F1;
    --smoke-color2: #F5F5F5;
    --black-color: #111827;
    --black-color2: #1B1B1B;
    --gray-color: #03060E;
    --gray-color2: #E4E4E5;
    --white-color: #ffffff;
    --light-color: #bdbdbd;
    --yellow-color: #FFB539;
    --success-color: #28a745;
    --error-color: #dc3545;
    --th-border-color: #D8DDE1;
    --th-border-color2: #303030;
    --dark-color: #021526;
    --title-font: "Plus Jakarta Sans", serif;
    --body-font: "Inter", serif;
    --icon-font: "Font Awesome 6 Pro";
    --main-container: 1620px;
    --container-gutters: 30px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s
}
.carouselBanner{
    position: relative;
    width: 100%;
    height: fit-content;
}
.carouselBanner .carouselBtn{
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: auto;
    
}
.bannerSec{
    width: 100%;
    height: 100vh;
    margin-bottom: 50px;
    transition: all 2s ease;
    background: rgb(0, 0, 0);
}

.banner-bx{
    position: absolute;
    width: 100%;
    height: 100vh;
    padding: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-content: center;
    transition: all 0.3s ease;
}

.banner-bx .textBx{
    position: relative;
    width:100%;
    align-content: center;
    z-index: 1;
    padding: 20px 30px;
    /* background: rgba(255, 255, 255, 0.274);
    backdrop-filter: blur(5px); */
    /* box-shadow: 10px 10px 30px rgba(0,0,0,0.2) ; */
    border-radius: 0px;
    background: linear-gradient(rgba(0, 0, 0, 0.44), #00000051);
    background: rgba(0, 0, 0, 0.6);
    
}
.banner-bx .textBx h1{
  position: relative;
    width: fit-content;
    font-size:3rem;
    text-transform: capitalize;
    z-index: 0;
    font-family: 'montserrat', sans-serif;
    margin-bottom: 20px;
    color:rgb(255, 173, 173);
    font-weight: 700;
}
.banner-bx .textBx h1 span{
  color: white;
  font-weight: 400;
}

.banner-bx .textBx h4{
    position: relative;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 400;
     color: white;
}
.banner-bx .textBx .btnBx{
    position: relative;
    display: flex;
    gap: 10px;
}
.banner-bx .textBx .btnBx a{
    position: relative;
    width: 50px;
    height: 50px;
    background: #00000024;
    color: white;
    text-decoration: none;
    border-radius: 100%;
    align-content: center;
    text-align: center;
    font-size: 1.4rem;
    border: 2px solid white;
}
.banner-bx .textBx .btnBx a:hover{
    transform: scale(1.04);
    color: black;
    background: white;
}
.banner-bx .textBx .btnBx button{
    position: relative;
    width: auto;
    padding: 10px 25px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: 2px solid white;
    border-radius: 100px;
    background: #00000036;
    backdrop-filter: blur(5px);
    color: white;
}
.banner-bx .textBx .btnBx button:hover{
    transform: scale(1.04);
    background: white;
    color: black;
}

.banner-bx img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carouselBanner .carouselBtn{
    position: absolute;
    width: fit-content;
    left: 10px;
    bottom: 10px;
    background: none;
    display: flex;
    gap: 10px;
}

.carouselBanner .carouselBtn button{
    position: relative;
    width: 100%;
    padding: 10px 20px;
    border: none;
    background: rgba(0, 0, 0, 0.44);
    color: white;
    cursor: pointer;
}
.carouselBanner .carouselBtn button:active{
    transform: scale(0.9);
}
.carouselBanner .carouselBtn button:hover{
    background: var(--theme-color);
   
}
@keyframes slide {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-200%);
    }
}