:root{
    --green: #b5c623;
    --black: #444;
    --navy: #001737;
    --blue: #007db5;
    --lightblue: #8cc6ec;
        --lightnavy: #1a2f4c;
    --orange: #f47320;
    --purple: #8e44ad;
    --white: #fff;
    --bluegrey: #5f717b;
/*    --font-family_1:'Poppins', sans-serif;
    --font-family_2:'Poppins', sans-serif;*/


   --font-family_1: 'Noto Sans', sans-serif;
 --font-family_2: 'Open Sans', sans-serif;

    /*--font-family_1: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";*/
}



html{
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-family_2) !important;
    font-size: 15px;

h1, h2, h3, h4, p, span, a, ul li {
    font-family: var(--font-family_2) !important;
}

}

body, figure{
    margin: 0;
}

@media(min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media(min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media(min-width: 1024px) {
    .container {
        max-width:990px
    }
}

@media(min-width: 1280px) {
    .container {
        max-width:1024px
    }
}

@media(min-width: 1536px) {
    .container {
        max-width:1280px
    }
}


.bg-primary {
    background-color: var(--blue);
}

.bluetext {
   color: var(--blue);
}

.text-primary-foreground {
    color: var(--white);
}

.font-bold {
    font-weight: 700;
}

.rounded-full {
    border-radius: 9999px;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.flex {
    display: flex;
}

.-top-2 {
    top: -0.5rem;
}

.-right-2 {
    right: -0.5rem;
}

.absolute {
    position: absolute;
}

.bg-accent\/20 {
    background-color: var(--green);
    opacity: 0.2;
}

.bg-accent\/30 {
    background-color: var(--green);
    opacity: 0.3;
}

.bg-accent\/40 {
    background-color: var(--green);
    opacity: 0.4;
}
.bg-accent\/50 {
    background-color: var(--green);
    opacity: 0.5;
}
.bg-accent\/60 {
    background-color: var(--green);
    opacity: 0.6;
}
.bg-accent\/70 {
    background-color: var(--green);
    opacity: 0.7;
}

/********************/
/*** ********** *****/
/********************/

  .legherdlvbl_solutions_hero{
background: var(--navy);

             @media screen and (min-width:1024px) {
             padding: 9rem 0;   
             }
             @media screen and (max-width:1023px) {
                padding: 7rem 0;
             }

    .container{
        position: relative;
        margin: 0 auto;
        height: 100%;
        .flexholder{
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

                                         @media screen and (min-width:992px) {
                                            flex-direction: row;
                                         }
                                         @media screen and (max-width:991px) {
                                           flex-direction: column; 
                                         }
            
            
            .left_side, .right_side{
                
                             @media screen and (min-width:992px) {
                width: 50%;                
                             }
                             @media screen and (max-width:991px) {
                           width: 100%;     
                             }
                
            }

            .right_side{
                position: relative;
            }


            .holds_text{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-direction: column; 



                h1{
                    font-size: calc(3.5rem + 0.1vw);
                    font-weight: 700;
                    color: #fff;
                    margin: 0;
                    line-height: 1.15em;
                    margin-bottom: 1rem;
                    span{
                        background-color: var(--green);
                        border-radius: 5px;
                        color: var(--navy);
                        padding: 0 1rem;
                    }
                }
                p{
                    font-size: calc(1.15rem + 0.1vw);
                    font-weight: 300;
                    max-width: 82%;
                    color: #fff;
                    margin: 1em 0;
                }

.holds_check_tags{
margin-top: 2rem;
max-width: 90%;
}


            }
        }
    }

  .yt-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px; /* optional constraint */
    margin: 0 auto;
    background: #000;
    overflow: hidden;
    border-radius: 20px;
    border: 5px solid var(--lightnavy);
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }

  /* Use aspect-ratio where supported, fallback uses padding trick */
  .yt-embed {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  /* Fallback for older browsers */
  .yt-embed.fallback {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
  }

  /* Poster (thumbnail) fills the area */
  .yt-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlay that darkens slightly and contains the play button */
  .yt-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* allow clicks to pass to button */
    background: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08));
  }

  /* The actual clickable play button */
  .yt-play {
    pointer-events: auto; /* re-enable for this element */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .yt-play:focus {
    outline: 3px solid rgba(66,153,225,0.65);
    outline-offset: 4px;
  }

  .yt-play:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.38);
  }

  /* Play triangle */
  .yt-play svg {
    width: 88px;
    height: 88px;
    display: block;
  }

  /* Small screens: reduce button */
  @media (max-width: 420px) {
    .yt-play { width: 72px; height: 72px; }
    .yt-play svg { width: 34px; height: 34px; }
  }
    
  }



/********************/
/*** ********** *****/
/********************/

  .legherdvbl_three_benefits{

    .container{
        position: relative;
        margin: 0 auto;
        height: 100%;
        .flexholder{
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          

            .holds_benefits_box{
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-direction: column; 

            }
        }
    }
  }

.text-accent {
    color: var(--green);
}


/********************/
/*** ********** *****/
/********************/

.legherdlvbl_lists_left_image_right{

}

.legherdlvbl_simplify_cta_gradient {
background: linear-gradient(
    140deg,
    #b3c328,
    #b3c328,
    #007db3
);
}

/********************/
/*** ********** *****/
/********************/


.holds_two_buttons{
                display: flex;
                justify-content: space-between;
                align-items: center;
                &.legherdbutton:nth-child(1){
    margin-right: 1rem;
}

}



.legherdbutton{
    padding: .8rem 2.2rem;
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid var(--bluegrey);
    margin-right: 1rem;
    font-size: calc(.8rem + 0.1vw);
}

.legherdbutton_white{
    background: var(--white);
    color: var(--blue);
}

.legherdbutton_navy{
    background: var(--lightnavy);
    color: var(--white);

}



/********************/
/*** ********** *****/
/********************/

.greenaccentcircle{
    position: relative;
&:before{
    content:'';
    height: 100%;
    width: 100%;
        opacity: 0.2;
        position: absolute;
        border-radius: 50%;
            background-color: var(--green);
}
}

.greenicon{
    color:var(--green);
}




.blueaccentroundsquare{
    position: relative;
&:before{
        content:'';
        height: 100%;
        width: 100%;
        opacity: 0.2;
        position: absolute;
        border-radius: 10px;
        background-color: var(--blue);
        }
}

.blueicon{
    color:var(--blue);
}


/********************/
/*** ********** *****/
/********************/


.funbox{
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    background: #fff;
    padding: 0.75rem;
    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
     max-width: 9rem;
                    border-radius: 14px;
                    transform: scale(1.1);
    .flexo{
                            display: flex;
        justify-content: space-between;
        align-items: center;
                    font-size: calc(1.2rem + 0.1vw);
                     font-family: var(--font-family_2);
                    .emoji{
                        position: relative;
                        p{
                            position: relative;
                            background: #b5c62366;
                            height: 3rem;
                width: 3rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                margin: 0;
                        }
                    }
                    .stats{
                        line-height: 1em;
                        font-size: calc(1rem + 0.1vw);
                        padding-left: 0.35rem;
                        span{
                            color: var(--orange);
                            font-weight: 600;
                        }
                    }
    }
}



/********************/
/*** ********** *****/
/********************/

.holds_check_tags{
margin: 1rem 0;
            display: flex;
            justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .checktag{
         padding: .6rem 1rem;
    text-decoration: none;
    display: inline-block;
    border-radius: 99px;
    font-weight: 500;
    border: 1px solid var(--bluegrey);
    margin-right: 1rem;
    font-size: calc(.7rem + 0.1vw); 
    background: var(--lightnavy); 
        display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: 0.75rem;

    span.icon{
        display: block;
        .fa-regular{
            color: var(--green);
            height: 1rem;
            width: 1rem;
            margin-right: 0.6rem;
        }
        svg{
            color: var(--green);
            margin-right: 0.5rem;
        }
    } 
    span.title{
        display: block;
        color: var(--white);
    } 
    }

}



/************* testimonials **************/


  .greytext{
    color: #737373;
  }
  .bg-primary {
    background-color: #afc02a;
}


.filtration_button{
  background-color: #f5f5f5;
  color: #262626;
}

.filtration_button.activio{
     background-color: #afc02a;
     color: #fff; 
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.testimonial_hero{
  background: #fafafa;
}

.greenicon{
    color:#afc02a;
}
.greentext{
    color:#afc02a;
}

.whiteicon{
    color:#ffffff;
}

.bg-cta-navy{
  background: #001737;
}

.hover\:bg-card-hover:hover {
    background-color: #fafbee;
}

.filtercatters{
  display: none;
}

.filtercatters.shown{
  display: block;
}