/* Banner - Slider Section - Relative Style CSS Start */
.banner-slider-section{
    position: relative;
}
.banner-title{
    font-size: 37px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 500;
    font-family: Roboto-Bold;
    text-transform: uppercase;
}
.paragraph-text{
    font-size: 17px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-family: Roboto-Regular;
}
.banner-slider-section .paragraph-text{
    max-width: 580px;
}
.overlay-content-box{
    position: absolute;
    inset: 0px;
}
.overlay-content-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.btn-container{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.btn-container .btn-drive{
    margin-bottom: 10px;
}
.btn-container .btn-drive:not(:last-child){
    margin-right: 20px;
}
.banner-slider-section .btn-container{
    margin-top: 40px;
}
/* Banner - Owl Slider Relative Code Start */
.owl-full-height.owl-carousel .owl-stage-outer,
.owl-full-height.owl-carousel .owl-stage-outer .owl-stage,
.owl-full-height.owl-carousel .owl-stage-outer .owl-stage .owl-item,
.owl-full-height.owl-carousel .owl-stage-outer .owl-stage .owl-item .item{
    height: 100%;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage{
    display: flex;
    align-items: stretch;
}
.owl-carousel.banner-owl-slider .owl-stage-outer .owl-stage .owl-item .item{
    min-height: 515px;
    display: flex;
    align-items: center;
    padding: 70px 0px 100px;
}
.owl-carousel.banner-owl-slider.owl-theme .owl-dots .owl-dot:not(:last-child){
    margin-right: 10px;
}
.owl-carousel.banner-owl-slider.owl-theme .owl-nav.disabled+.owl-dots{
    margin-top: 0px;
    transform: translateY(-50px);
}
.owl-carousel.banner-owl-slider.owl-theme .owl-dots .owl-dot span{
    width: 15px;
    height: 15px;
    border-radius: 0px;
    margin: 0px;
    background-color: rgb(255,255,255,.3);
}
.owl-carousel.banner-owl-slider.owl-theme .owl-dots .owl-dot.active span{
    background-color: #ffffff;
}
/* Banner - Owl Slider Relative Code End */
/* Banner - Slider Section - Relative Style CSS End */





.container-menu-desktop {
    background-color: transparent;
  }
  
  .container-menu-desktop.fix-menu-desktop {
    background-color: white;
  }
  
  .container-menu-desktop .wrap-menu-desktop {
    background-color: transparent;
  }
  
  .container-menu-desktop.fix-menu-desktop .wrap-menu-desktop {
    background-color: white;
    height: 70px
  }
  
  .banner-slider-section {
    height: 100vh;
  }
  
  .banner-slider-section>div {
    height: 100%;
  }
  
  .banner-slider-section>div .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  
  }
  
  .paragraph-text {
    font-size: 22px;
    line-height: 35px;
    margin: 40px auto;
  }
  
  .banner-title {
    font-size: 60px;
    line-height: 70px;
    text-transform: unset;
    margin: 0;
  }
  
  .banner-slider-section .container {
    pointer-events: none;
  }
  
  .banner-slider-section .container .btn-container {
    justify-content: center;
  }
  
  .banner-slider-section .banner-title,
  .banner-slider-section .paragraph-text {
    text-align: center;
  }
  
  .banner-slider-section .cards_banner .animated-card .card-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .banner-slider-section .animated-card .card-content img {
    width: 50px;
    height: auto;
    pointer-events: none;
  }
  
  .banner-slider-section .container .btn-drive {
    pointer-events: visible;
  }
  
  .overlay-content-box {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0c1016;
    font-size: 20px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    overflow: hidden;
  }
  
  .cards_banner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px;
    width: 100%;
    padding: 1px;
    position: relative;
  }
  
  .cards_banner:hover .animated-card {
    background: radial-gradient(100rem circle at var(--xPos) var(--yPos),
    #c39834,
            transparent 15%);
  }
  
  .animated-card {
    width: 99px;
    height: 99px;
    background: radial-gradient(150rem circle at 0 0,
            rgba(0, 255, 241, 0),
            transparent 0%);
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.15s;
  }
  
  .animated-card:hover {
    /* transform: scale(0.97); */
  }
  
  .animated-card:hover::before {
    opacity: 1;
  }
  .animated-card .card-content {
    background-color: #0c1016;
    border-radius: inherit;
    transition: all 0.25s;
    height: calc(100% - 0.1rem);
    width: calc(100% - 0.1rem);
    transition: all 0.15s ease-in-out;
  }
  
  .animated-card .card-content:hover {
    border-radius: inherit;
    background: radial-gradient(60rem, #c39834, transparent 10%);
    transition: all 0.15s ease-in-out;
  }
  
  .banner-slider-section .bg-main {
    background-color: #c39834;
  }
  
  .new-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    width: 100px;
    height: 150px;
    background-color: #c39834;
    filter: blur(30px);
    animation: cardBlurAnimation 3s ease-in-out infinite;
  }
  
  .captchasolver span {
    background-color: white;
    color: black;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  
  .captchasolver {
    margin-bottom: 5px;
  }
  
  .slider-button, .slider-contact-box {
    pointer-events: visible;
  }

  
  @media only screen and (max-width: 776px) {
    .animated-card {
        width: 48px;
        height: 48px;
    }
  
    .banner-slider-section .item .animated-card .card-content img {
        width: 30px;
        height: auto;
    }
  
  }

  

  
  @media only screen and (max-width: 576px) {
    .banner-slider-section .owl-item .item .container .btn-drive {
        margin: 5px auto;
    }
  }
  
  @keyframes cardBlurAnimation {
    0% {
        transform: translateX(0);
        /* Start at the original position */
    }
  
    25% {
        transform: translateX(400px);
        /* Move to the right */
    }
  
    50% {
        transform: translateX(0);
        /* Move back to the original position */
    }
  
    75% {
        transform: translateX(-400px);
        /* Move to the left */
    }
  
    100% {
        transform: translateX(0);
        /* Return to the original position */
    }
  }

  @media (max-width: 768px) {
    .banner-buttons {
      flex-direction: column;
      gap: 4px !important; /* reduce gap if needed */
    }
    .contact-number{
      display: block;
    }

    .banner-slider-section .owl-item-content-box .slider-content h1{
      margin-top: 50px;
    }

    .slider-content h2{
      margin-top: 50px;
    }

    .banner-slider-section .owl-item-content-box .content h2 {
      font-size: 20px !important;
      line-height: 34px !important;
      width: 100% !important;
    }

    .content h1{
       font-size: 20px !important;
        line-height: 34px !important;
        width: 100% !important;
    }
    .content p{
      width: 94% !important;
    }
  }
  
  
  /* end banner */