.elementor-23935 .elementor-element.elementor-element-66fd0e0{--display:flex;}.elementor-23935 .elementor-element.elementor-element-5d7d322{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23935 .elementor-element.elementor-element-5d7d322:not(.elementor-motion-effects-element-type-background), .elementor-23935 .elementor-element.elementor-element-5d7d322 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-23935 .elementor-element.elementor-element-5d7d322.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-23935 .elementor-element.elementor-element-5d7d322{--min-height:80vh;}}@media(min-width:768px){.elementor-23935 .elementor-element.elementor-element-5d7d322{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-9adeea0 *//* Slider container: responsive 80% width, up to 600px, 16:9 aspect ratio */
      .slider-wrapper {
        position: relative;
        width: 100vw;
        max-width: 100%;
        overflow: hidden;
        height: 100vh;
      }

      /* Each slide fills the wrapper */
      .hero_slide {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        overflow: hidden;
        /* Initially hidden; will animate in if first slide, or remain hidden until needed */
        visibility: hidden;
        opacity: 0;
      }
      
      .slider_overlay{ position: absolute;
        width: 100%;
        height: 100%; z-index:3; /*background-image: linear-gradient(32deg, rgba(1, 20, 77, 0.39) 31%, rgba(0, 38, 151, 0.5) 57%, rgba(0, 32, 121, 0.04) 89%) !important; */ background-color: rgba(0,0,0,0.3); }

      .slide_bg{ 
        position: absolute;
        width: 100%;
        height: 100%; 
        background-repeat: no-repeat;
        }

      .hero_slide:nth-child(1) .slide_bg {
        background-image: url(https://www.boldbusiness.com/wp-content/uploads/2025/06/sl1_bga.webp);
        background-size: 100% auto;
      }
      .hero_slide:nth-child(2) .slide_bg {
        background-image: url(https://www.boldbusiness.com/wp-content/uploads/2025/06/1-2-1-scaled.webp);
        background-size: auto 100vh;
      }
      .hero_slide:nth-child(3) .slide_bg {
        background-image: url(https://www.boldbusiness.com/wp-content/uploads/2025/06/ai-augmented.webp);
        background-size: 100% auto;
      }
      .hero_slide:nth-child(4) .slide_bg {
        background-image: url(https://www.boldbusiness.com/wp-content/uploads/2025/10/4th-Slide.webp);
        background-size: 100% auto;
        background-position: center center;
      }
      
        .slide_img{ z-index: 4; }

        /* Slide 1 */
        .sl1_img{ position: absolute; bottom: 0; left: 0; width: 100%; }

        /* Slide 2  */
        .sl2_img{ position: absolute; bottom: -200px; right: 200px; height: auto; width: 45%; }
    
        /* Slide 3 */
        .sl3_img2{ position: absolute; bottom: 100px; right: 100px; width: auto; height: auto; width: 40%; z-index: 4; }
        .sl3_img1{ position: absolute; bottom: 150px; right: 100px; width: 35%; height: auto; z-index:5; }
        
        /* Slide 4 */
        .sl4_img2{ position: absolute; bottom: 100px; right: 100px; width: auto; height: auto; width: 40%; z-index: 4; }
        .sl4_img1{ position: absolute; bottom: 150px; right: 100px; width: 35%; height: auto; z-index:5; }
      

      .hero_slide .text{ width: 100%; max-width: 800px; display: flex; gap: 20px; flex-direction: column; padding: 20px; opacity: 0; visibility: hidden; z-index: 5; }
      .hero_slide h1{ max-width: 600px; text-align: left; font-family: "Spline Sans", Sans-serif; font-size: 52px; line-height: 1.1; color: #FFF; margin: 0; }
      .hero_slide h1 span{ background: -webkit-linear-gradient(left, #002CA7, #06E5EC, #002CA7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
      .hero_slide p{ max-width: 700px; text-align: left; font-size: 20px; line-height: 1.5; font-weight: 400; font-family: "IBM Plex Sans", Sans-serif; color: #FFFFFF; text-shadow: 1px 1px #000000; margin: 0; }
      .hero_slide a.button1{ font-family: "IBM Plex Sans", Sans-serif; background-color: #003BDF; font-size: 17px; line-height: 1.2; padding: 15px 30px; color: #FFFFFF; text-decoration: none; border-radius: 40px; margin-top: 30px; align-self: flex-start; font-weight: 700; }
      .hero_slide a svg{ margin-bottom: -7px; }

      .hero_slide h2{ max-width: 700px; margin: 0; text-align: center; font-family: "Spline Sans", Sans-serif; font-size: 24px; line-height: 1.1; color: #FFF; }
      .hero_slide h2 span{ font-size: 48px; background: -webkit-linear-gradient(left, #002CA7, #06E5EC, #002CA7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
      

      .controls {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        z-index: 3;
        color: #06E5EC;
        font-family: "Spline Sans", Sans-serif;
      }
      .control_cont{ 
          width: 100%; 
          max-width: 1000px; 
          display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center; 
        padding: 0 100px; 
        margin: 0 auto;
      }
      .controls button {
        padding: 8px 16px;
        font-size: 1rem;
        cursor: pointer;
        background: transparent;
        color: #fff;
        border: none;
        transition: color 0.2s;
      }
      .controls button:hover {
        color: #06E5EC;
      }
      
    .slide-counter {
        font-family: sans-serif;
        font-size: 1rem;
        color: #FFF;
    }
    
    .circle-loader {
      z-index: 3;
    }
    
    #circleLoader circle {
      transition: stroke 0.3s ease;
    }

    @media only screen and (max-width: 1024px) {
        .hero_slide h1{ font-size: 46px; }
        .hero_slide h2{ font-size: 20px; }
        .hero_slide p{ font-size: 18px; }
        .hero_slide a.button1{ font-size: 16px; }
        .control_cont{ padding: 0 50px; }
    }
    @media only screen and (max-width: 767px) {
        .slide_bg{ background-size: cover !important; }
        .hero_slide h1{ font-size: 36px; }
        .hero_slide h2{ font-size: 16px; }
        .hero_slide p{ font-size: 16px; }
        .hero_slide a.button1{ font-size: 14px; }
        .control_cont{ padding: 0 20px; }
        
        /* Slide 2  */
        .sl2_img{ position: absolute; bottom: -100px; right: 50px; height: auto; width: 80%; }
        
        /* Slide 3 */
        .sl3_img2{ position: absolute; bottom: 200px; right: 0; width: auto; height: auto; width: 70%; z-index: 4; }
        .sl3_img1{ position: absolute; bottom: 150px; right: 0; width: 70%; height: auto; z-index:5; }
        
         /* Slide 4 */
        .sl4_img2{ position: absolute; bottom: 200px; right: 0; width: auto; height: auto; width: 70%; z-index: 4; }
        .sl4_img1{ position: absolute; bottom: 150px; right: 0; width: 70%; height: auto; z-index:5; }
    }/* End custom CSS */