//image url
@url: "/lp_images/";

// global sizes
@size-lg: ~"(max-width: 1120px)";
@size-md: ~"(max-width: 992px)";
@size-sm: ~"(max-width: 768px)";
@size-xs: ~"(max-width: 480px)";

@size-md-min: ~"(min-width: 993px)";


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

//global colors
@clr-purple:#9e2896;// titles,links, btns, hover nav
@clr-green:#18837e;
@clr-blue: #1c6b99;

@clr-gray-back: #ebebeb; // background blog
@clr-gray-card: #efeeee; // card hover
@clr-gray-menu: #f0f0f0; // menu drop

@clr-black: #000; // text
@clr-white:#fff; // text footer

@clr-shadow:#121b25; //shadow color


//global containers
.container-box-md{
    width:100%;
    max-width: 1120px;
    margin:0px auto;
    box-sizing: border-box;
}

.container-box-m{
    width:100%;
    max-width: 900px;
    margin:0px auto;
    box-sizing: border-box;
}

.container-box-sm{
    width:100%;
    max-width: 680px;
    margin:0px auto;
    box-sizing: border-box;
}


//global spacing 
.spacing-x-01{
    padding-left:40px;
    padding-right:40px;
    @media @size-md{
        padding-left: 25px;
        padding-right: 25px;
    }

}

.spacing-x-02{
    padding-left:30px;
    padding-right:30px;
}

.spacing-y-01{
    padding-top:1rem;
    padding-bottom:1rem;
}

.spacing-y-02{
    padding-top:8rem;
    padding-bottom:8rem;
    @media @size-md{
        padding-top:4rem;
        padding-bottom:4rem;
    }
}
.spacing-y-03{
    padding-bottom:8rem;
    @media @size-md{
        padding-bottom:4rem;
    }
}


//global backgrounds
.style--background-01{
    background: url("@{url}back.png"), left top;
    background-size:cover;
}
.style-background-02{
    background:@clr-gray-back;
    filter:drop-shadow(1px 1px 20px fade(@clr-shadow,20%));
    .spacing-y-02;
    position:relative;
    &::before{
        content:'';
        display:block;
        position:absolute;
        width:100%;
        height:100%;
        z-index: -1;
        background: url("@{url}back-icon1.png") left top/auto 712px no-repeat,
            url("@{url}back-icon3.png") right center/ auto 992px no-repeat,
            url("@{url}back-icon2.png") left 85%/auto 712px no-repeat;
        @media @size-md{
            background:  url("@{url}back-icon1.png") left 0% / 20% auto no-repeat, url("@{url}back-icon3.png") right 10% / 20% auto no-repeat, url("@{url}back-icon2.png") left 30% / 20% auto no-repeat, url("@{url}back-icon3.png") right 50% / 20% auto no-repeat, url("@{url}back-icon2.png") left 70% / 20% auto no-repeat, url("@{url}back-icon3.png") right 90% / 20% auto no-repeat, url("@{url}back-icon2.png") left 95% / 20% auto no-repeat;
        }

    }
}

.style-heading-01{
    color:@clr-purple;
    font-size: 2.4rem;
    font-weight:400;
    margin:0px;
    padding-bottom: 3rem;
    text-align:center;
    @media @size-md{
        padding-bottom: 3rem;
    }
}


//global-decorations
.v861b4_deco{
    position:relative;
    @media @size-md-min{//desktop
        &-01-d-left{
            position:absolute;
            background: url("@{url}shape-01-desk-left.png") left top/auto  no-repeat;
            width:172px;
            height:259px;
            left:0px;
            top: -156px;
        }
        &-01-d-right{
            position:absolute;
            background: url("@{url}shape-01-desk-right.png") right top/auto  no-repeat;
            width:273px;
            height:412px;
            right: 0px;
            top:-243px;
        }

        &-02-d{
            position:relative;
            &::before{
                content:'';
                display:block;
                position:absolute;
                z-index: 1;
                background: url("@{url}shape-02-desk-left.png") left top/auto  no-repeat;
                width:116px;
                height:146px;
                left: 30px;
                top: -60px;
            }

            &::after{
                content:'';
                display:block;
                position:absolute;
                z-index: 1;
                background: url("@{url}shape-02-desk-right.png") right top/auto  no-repeat;
                width:99px;
                height:180px;
                right: 30px;
                bottom: -57px;
            }
        }
        &-03-d{
            position:relative;
            &::before{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-03-desk-left.png") left top/auto  no-repeat;
                width:106px;
                height:151px;
                left:30px;
                bottom: -20px;
            }
            &::after{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-03-desk-right.png") right top/auto  no-repeat;
                width:84px;
                height:99px;
                right:30px;
                bottom: -22px;
            }    
        }
        &-04-d{
            position:relative;
            &::before{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-04-desk-left.png") left top/auto  no-repeat;
                width:180px;
                height:203px;
                left:30px;
                top: 17%;
            }
            &::after{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-04-desk-right.png") right top/auto  no-repeat;
                width:172px;
                height:259px;
                right:30px;
                top: 45%;
            }
        }  
    }
    @media @size-md{
        &-01-m{
            position:relative;
            &::before{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-01-mob-left.png") left top/contain  no-repeat;
                width:7rem;
                height:191px;
                left:30px;
                bottom: 0px;
            }
            &::after{
                content:'';
                display:block;
                position:absolute;
                background: url("@{url}shape-01-mob-right.png") right top/contain  no-repeat;
                width:7rem;
                height:187px;
                right: 0px;
                top: -153px;
            } 
        } 

        &-02-m{
            position:relative;
            &::before{
                content:'';
                display:block;
                z-index: -1;
                position:absolute;
                background: url("@{url}shape-02-mob-left.png") left top/contain  no-repeat;
                width:5rem;
                height:108px;
                left:15px;
                top: 30%;

            }
            &::after{
                content:'';
                display:block;
                z-index: -1;
                position:absolute;
                background: url("@{url}shape-02-mob-right.png") right top/contain no-repeat;
                width:5rem;
                height:111px;
                right: 15px;
                bottom: 29%;
            }
        } 

        &-03-m{
            position:relative;
            &::before{
                content:'';
                display:block;
                z-index: -1;
                position:absolute;
                background: url("@{url}shape-03-mob-left.png") left top/contain  no-repeat;
                width:5rem;
                height:126px;
                left:30px;
                top: 32%;
            }
            &::after{
                content:'';
                display:block;
                z-index: -1;
                position:absolute;
                background: url("@{url}shape-03-mob-right.png") right top/contain  no-repeat;
                width:5rem;
                height:133px;
                right: 30px;
                bottom: 22%;
            } 
        } 
    }  
}



//global buttons & links
.btn-style{
    border-radius: 9px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
}

.btn-size-01{  //come learn 
    font-size:18px;
    padding:13px;
    @media @size-md{
        font-size:16px;  
    }
    @media @size-xs{
        font-size:1.2rem;  
        padding:1.2rem 1.3rem;
    }
}

.btn-size-02{ //join
    font-size:16px;
    font-weight:400;
    padding:5px 15px;
    @media @size-md{
        font-size:16px;  
    }
    @media @size-xs{
        font-size:1.2rem;  
    }
}

.btn-size-03{ //go to event
    font-size: 17px;
    font-weight: 600;
    padding: 10px 13px;
    @media @size-md{
        font-size: 1rem;
        padding: 0.8rem 1rem;
    }
}

.btn-style-01(@clr){ //purple btn filled
    color:@clr-white;
    background:@clr-purple;
    border:3px solid transparent;
    transition: color .1s ease-in-out,background .1s ease-in-out;

    &:hover{
        border-color:@clr-purple;
        background:transparent; 
        color:@clr;
    }
    
}


.btn-style-02{ //purple btn outline
    color:@clr-purple;
    background:transparent;
    border:1px solid @clr-purple;
    transition: color .1s ease-in-out,background .1s ease-in-out;

    &:hover{
        color:@clr-white;
        background:@clr-purple; 
    }
}

.link-style-01{ //learn more
    font-size: 1.25rem;
    font-weight:600;
    color:@clr-purple;
    display: inline-flex;
    align-items:center;
    text-decoration:none;
    position: relative;
    cursor:pointer;
    img{
        margin-left:5px;
        width:0.8rem;  
        display:inline-block; 
    }
    &:hover::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: @clr-purple;
            bottom: -0.3em;
            left: 0;
    }

}


.link-style-03{ //nav
    font-size:14px;
    color: @clr-white;
    position: relative;
    text-decoration: none;
    transition: color .1s ease-in-out;
    &:hover{
        color: @clr-purple;  
    }
    &:hover::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: @clr-purple;
            bottom: -0.3em;
            left: 0;
    
    }
}



//global elements
.v861b4_element-3-boxes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    justify-content: center;

    @media @size-md{
        gap:40px;
        grid-template-columns: 1fr;
    }

    @media @size-xs{
        width: 70%;
        margin: 0px auto;
    }
    &__item {
      
      text-align:left;
      @media @size-md{
        max-width:300px;
        margin: 0px auto;
        text-align:center;
      }
      img{
        width: 4.5rem;
        margin:0px auto;
        display:block;
        
      }
      &-title {
        display: block;
        font-weight: 600;
        font-size: 1.5rem;
        margin: 20px 0px;
      }
      
      &-text {
        font-size: 1.2rem;
        line-height: 1.4rem;
        margin-bottom: 18px;
        max-width: 305px;
        @media @size-md{
            margin-bottom: 5px;
        }
      }
      
      &-btn {
        &-link {
            .link-style-01;
        }
      }
    }
  }


//styles
html {
    font-family: "Bosch Sans", sans-serif;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    
    height: -webkit-fill-available;
    scroll-behavior: smooth;

    font-size: 16px;
    @media @size-xs{
        font-size:calc(16/480 * 100vw);
    }
}


//navbar
.v861b4_menu{
    box-sizing: border-box;
    .spacing-x-01;
    @media @size-md{
        padding-left: 20px;
        padding-right: 20px;
    }
    &.--active{
        background:@clr-white;
    }

    &.--scroll{
        @media @size-md{
            background:@clr-white;
        }
        
    }


    &__desktop{
        .container-box-md;        
        padding-top:3rem;
        @media @size-md{
            padding-top: 35px;
            padding-bottom: 35px;
        }

        &__row1{
            display: flex;
            align-items: center;
            justify-content: space-between;

            img:nth-child(1){
                width: 291px;
                @media @size-md{
                    max-width: 14rem;
                    width:100%;
                }
                @media @size-xs{
                    width:40vw;
                }
            }

            img:nth-child(2){
                width: 196px;
                margin-top: 10px;
                margin-left: 20px;
                @media @size-md{
                    max-width: 10rem;
                    width:100%;
                }
                @media @size-xs{
                    width: 30vw;
                }
            }
        }
    
        &__row2{
            padding: 50px 0px;
            @media @size-md{
                display:none;
                padding: 22px 0px;
            }
            .v861b4_menu__nav{
                list-style-type: none;
                padding: 0px;
                margin: 0px;

                @media @size-md{
                    display:none;
                }
                display:flex;
                justify-content: space-between;

                &-link{
                    display: inline;
                    a{
                        .link-style-03;
                    }
                }
            }

        }

    }



}



//hero
.v861b4_hero{
    padding-bottom: 100px;
    position:relative;


&:after{
    content:'';
    background: white;
    width: 100%;
    height: 50px;
    clip-path:polygon(0 0, 47% 0, 50% 50%, 53% 0, 100% 0, 100% 100%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
    -webkit-clip-path: polygon(0 0, 47% 0, 50% 50%, 53% 0, 100% 0, 100% 100%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
    margin-bottom: -7px;
    bottom: 0px;
    position: absolute;
    display: block;
    @media @size-md{
        clip-path:polygon(0 0, 30% 0, 50% 70%, 70% 0, 100% 0, 100% 100%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
        -webkit-clip-path: polygon(0 0, 30% 0, 50% 70%, 70% 0, 100% 0, 100% 100%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
        height: 55px;
        margin-bottom: -3px;
    }
}

    &__wrapper{
        .container-box-md;
        display:flex;
        justify-content:center;
        align-items: center;
        @media @size-md{
            flex-wrap: wrap;
        }
    }
    &__player{
        @media @size-md{
            width: 100%;
        }

        &__box{
            position:relative;
            @media @size-md{
                height: 32rem;
            }
            &-image{
                width:785px;
                @media @size-md{
                  width:100%;
                  height: 100%;
                  object-fit: cover;
                }
            }
            &-btn{
                background: url("@{url}icon-play.png"), left top;
                background-size:cover;
                border: 0px;
                outline: 0px;
                width: 6rem;
                height: 6rem;
                cursor:pointer;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
            &-overlay{
                position:absolute;
                top:0px;
                left:0px;
                width: 100%;
                height: 100%;
                background: -moz-linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                background: -webkit-linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

                @media @size-md{
                    background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
                }  
            }
        }
    }
    &__content{
        color:@clr-white;
        //min-width: 360px;
        margin-left: -10%;
        z-index: 2;
        .spacing-x-01;
        padding-left:0px;
        @media @size-md{
            .spacing-x-01;
            margin-left: 0;
            background: -moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
            background: -webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
            background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        }
      &__title{
        margin: 0px;
        font-size: 41px;
        line-height: 47px;
        @media @size-md-min{
            padding-right: 30px;
        }
        @media @size-md{
            font-size: 38px;
        }
        @media @size-xs{
            font-size: 2.3em;
            line-height: 2.5rem;
        }
      }  
      &__text{
        margin:0px;
        font-size:16px;
        line-height: 19px;
        padding:20px 0px;
        @media @size-xs{
            font-size: 1.4rem;
            line-height: 1.8rem;
            padding: 1.8rem 0px;
        }
      }  
      &__btn{
        &-link{
            .btn-style;
            .btn-size-01;
            .btn-style-01(@clr-white);
        }
      }  
    }
}
//catalogue slider
.v861b4_catalogue{
    .spacing-y-02;
    &__wrapper {
        .container-box-md;
        .spacing-x-01;
    }  
    &__title {
        .style-heading-01;
    } 
    &__slider{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap:20px;
        @media @size-md{
            grid-template-columns:1fr 1fr;
        }
        @media @size-xs{
            grid-template-columns:1fr;
        }


        .slick-slide {
            margin: 0 20px;
            img{
                @media @size-md{
                    width: 105px;
                }
                @media @size-xs{
                    width: 8em;
                }
            }
        }
        .slick-list {margin: 0 -20px;}

        margin: 0 auto;
        box-sizing: border-box;
        &__item{
            box-sizing: border-box;
            @media @size-md{
                max-width:420px;
            }
        }
    }
    &__box{
      box-sizing: border-box;
      padding: 22px 18px;
      border-radius:6px;
      text-align:center;
      background:@clr-white;
      transition: transform .4s ease-in-out,background .2s ease-in-out,filter .2s ease-in-out;
      filter:drop-shadow(1px 1px 10px fade(@clr-shadow,20%)); 
      @media @size-md-min{
        &:hover{
            background:@clr-gray-card;
            transform:scale(1.1);
            filter:drop-shadow(1px 1px 5px fade(@clr-shadow,20%)); 
        }

      } 
      @media @size-md{
        margin-top: 0px;
        margin-bottom: 0px;
        margin:0px auto;
        max-width:220px;
      }
        
        &-title{
            display:block;
            font-weight:600;
            font-size:20px;
            color: @clr-purple;
            min-height: 3em;
            @media @size-md{
                max-width: 170px;
                margin: 0px auto;
            }
            @media @size-xs{
                font-size:1.3em;
                min-height: 4rem;
                max-width: 15rem;
            }
        }
        &-img{
            margin: 0px auto 8px;
            @media @size-md{
                margin: 0px auto 15px;
                width: 8rem;
            }
        }
        &-btn{
            &-link{
                .btn-style;
                .btn-size-02;
                .btn-style-02;
            }
        }
    }
}

//champion section
.v861b4_champion {
    &__wrapper {
        .spacing-y-03;
    }  
    &__title {
      .style-heading-01;
      padding-bottom:4rem;
    }

    &__row{
        .style--background-01;
        margin-bottom: 10px;
        padding-top:43px;
        padding-bottom:35px;
        @column-gap:30px;

        @media @size-md{
            margin-top:130px;
        }
        @media @size-xs{
            margin-top: 13rem;
        }
        &-inner{
            .container-box-md;
            .spacing-x-01;
            display:flex;
            flex-wrap:nowrap;
            align-content:center;
            z-index: 6;
            position: relative;
            @media @size-md-min{
                .--left & {
                    flex-direction: row-reverse;
                }
            }
            @media @size-md{
                flex-wrap:wrap; 
                flex-direction: column-reverse; 
            }

 
        }

        &-col1{
            color:@clr-white;
            text-align:left;
            &--title{
                font-weight:400;
                font-size: 2.1rem;
            }
            &--text{
                font-size: 1rem;
                line-height: 1.2rem;
                margin-top: 2.2rem;
                margin-bottom: 1.6rem;
                @media @size-md{
                    margin-top: 1.3rem;
                    margin-bottom: 1.3rem;
                }
            }
            &--btn{
                &---link{
                    .link-style-01;
                }
            }
            .--right & {
                margin-right:@column-gap;
             }
        }
        &-col2{
            box-sizing: border-box;
            display: block;
            @media @size-md-min{
                .--left & {
                    margin-right:@column-gap;
                }
            }
            img{
                filter:drop-shadow(1px 1px 10px fade(@clr-shadow,20%));


                @media @size-md-min{
                    width:500px;
                    @margin:-80px;
                    .--right & {
                        margin-top:@margin;
                    }
                    .--left & {
                        margin-bottom:@margin;
                    }
                }
                @media @size-md{
                    width:100%;
                    max-width:385px;
                    margin-top:-160px;
                    margin-bottom: 15px;
                    margin-left: auto;
                    margin-right: auto;
                    box-sizing: border-box;
                    display: block;
                }
                @media @size-xs{
                    margin-top: -15rem;
                }
    


            } 

           

        }
    }
    
    
}



//guides section

.v861b4_guides {
    &__wrapper {
      .container-box-md;
      .spacing-x-01;
      .spacing-y-03;
    
    }  
    &__title {
      .style-heading-01;
    }
    &__boxes {
        .v861b4_element-3-boxes;
    }
}




//calendar slider
.v861b4_calendar{
    &__wrapper {
        .container-box-md;
        .spacing-x-01;
        .spacing-y-03;
    }  
    &__title {
        .style-heading-01;
    } 
    &__slider{

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        @media @size-md{
            grid-template-columns:1fr;
        }

        .slick-slide {margin: 0 10px;}
        .slick-list {margin: 0 -10px;}

      margin: 0 auto;
      box-sizing: border-box;
      &__item{
        box-sizing: border-box;
        @media @size-md{
            max-width:321px;
            margin: 0px auto;
        }

      }
    }
    &__box{
      border:1.5px solid @clr-black;
      box-sizing: border-box;
      background:@clr-white;


      &__row1{
        position:relative;
        img{width:100%;}
        &-text{
            position:absolute;
            bottom:0px;
            z-index: 2;
            color:@clr-white;
            display: flex;
            justify-content: space-between;
            align-items: end;
            width: 100%;
            padding: 11px 24px;
            box-sizing: border-box;
            @media @size-md{
                padding: 1rem 1.9rem;
            }
            &-col1{
                text-align: left;
                font-size: 1.4rem;
                i{
                    display:block;
                    font-style: normal;
                    font-size: 2.8em;
                    font-weight: 600;
                }
            }
            &-col2{
                display:flex;
                justify-content:center;
                align-items: center;
                gap: 8px;
                font-size: 1.1rem;
                i{
                    font-style: normal;
                    font-size: 1.8em;
                    font-weight: 600;
                }
                span{
                    text-align: center;
                    display:inline-block;
                    i{
                        display:block;
                        font-style: normal;
                    }
                }
            }
        }
      }
      &__row2{
        color:@clr-black;
        padding:30px 18px;
        @media @size-md{
            padding: 2rem 1.2rem;
        }
        &-title{
            display:block;
            font-size:23px;
            font-weight:600;
            @media @size-md{
                font-size: 1.5rem;
            }
        }
        &-text{
            display: block;
            font-size: 16px;
            line-height: 20px;
            font-weight: 400;
            padding: 23px 0px;
            @media @size-md{
                font-size:1.2rem;
                line-height:1.1rem;
                padding: 1.5rem 0px;
            }
        }
        &-btn{
            &-link{
                .btn-style;
                .btn-size-03;
                .btn-style-01(@clr-black);

            }
        }
      }
    }
}
  
//news section
.v861b4_news{
    &__wrapper {
        .container-box-md;
        .spacing-x-01;
        @media @size-sm{
            padding-left:0px;
            padding-right:0px;
        }
    }  
    &__title {
        .style-heading-01;
    }
    &__grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
        @media @size-md{
            grid-template-columns:1fr; 
            gap:0px;
        }
    
        &__col1,&__col2{
            box-sizing: border-box;
            @media @size-md-min{
                grid-row: span 2;
            }
        }
        &__item{
            @media @size-md{
                margin-bottom: 5rem;
            }
            .v861b4_news__grid__col1 & {
                @media @size-md-min{
                    height:100%;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                }

            }
            .v861b4_news__grid__col2 & {
                @media @size-md-min{
                    height:50%;
                    &:first-child{
                        margin-bottom:17px;
                    }
                }
                @media @size-md{
                    &:last-child{
                        margin-bottom:0px;
                    }
                }
                
            }

            &-img{
                width:100%;
                height:auto;
                object-fit:cover;
                @media @size-md{
                    max-height:260px;
                }

                .v861b4_news__grid__col1 & {
                    @media @size-md-min{
                        flex: 1;
                    }
                }
                .v861b4_news__grid__col2 & {
                    @media @size-md-min{
                        max-height:190px;
                    }
                }
            }
            &-cont{
                box-sizing: border-box;
                @media @size-sm{
                    .spacing-x-01;
                }
                &-title{
                    margin-top:6px;
                    display:block;
                    font-size:30px;
                    color:@clr-purple;
                    @media @size-md{
                        font-size: 2rem;
                        margin-top: 1rem;
                        width: 20rem;
                    }
                }
                &-text{
                    display:block;
                    font-weight:400;
                    font-size:1rem;
                    color:@clr-black;
                    padding: 15px 0px;
                    @media @size-md{
                        padding: 1.6rem 0px;
                    }
                }
                &-btn{
                    &-link{
                        .link-style-01;
                    }
                }
            }    
        }
    }

}

//faq section
.v861b4_faq {
    &__wrapper {
        .spacing-y-02;
    }  
    &__title {
      .style-heading-01;
    }

    &__row{
        .style--background-01;
        padding-top:40px;
        padding-bottom:40px;
        &-inner{
            .container-box-md;
            .spacing-x-01;
            display:flex;
            flex-wrap:nowrap;
            align-content:center;
            z-index: 6;
            position: relative;
            justify-content: center;
        }

        &-col{
            color:@clr-white;
            text-align:center;
            &--title{
                font-weight:400;
                font-size: 2.1rem;
                line-height: 2.5rem;
                display: block;
                max-width: 800px;
                margin: 0px auto 20px;
                @media @size-md{
                    max-width: 300px;
                }
                b{display:block;}
                @media @size-md{
                    font-size: 1.5rem;
                    line-height: 1.7rem;
                }
            }
            &--btn{
                &---link{
                    .btn-style;
                    .btn-size-01;
                    .btn-style-01(@clr-white);
                }
            }
        }

    }
    
    
}


//documents section

.v861b4_docs {
      &__wrapper {
        .container-box-md;
        .spacing-x-01;
        .spacing-y-03;
      }  
      &__title {
        .style-heading-01;
      }
      &__boxes {
        .v861b4_element-3-boxes;
      }
  }


//footer
.v861b4_footer {
    color:@clr-white;
    .style--background-01;
    &__top {

      &__inner {
        .container-box-md;
        .spacing-x-01;
        padding-top:75px;
        padding-bottom:95px;
      }
    }
    &__bottom {
        background: @clr-black;

        &__inner {
            .container-box-md;
            .spacing-x-01;
            padding-top: 17px;
            padding-bottom: 17px;
            display:flex;
            align-items: center;
            justify-content: space-between;
        }
        &::after{
            content:'';
            display:block;
            background: url("@{url}back-footer.png"), left top;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 20px;
            width: 100%;
        }
    }

    &__title {
        font-weight:300;
        font-size: 1.9rem;
        margin-bottom:80px;
        display:block;
        @media @size-md{
            text-align: center;
        }
    }
    &__teamboxgrid{
        display:flex;
        align-items: center;
        gap:4rem;
        @media @size-md{
            flex-wrap: wrap;
        }
    }
    &__teambox {
        display:flex;
        align-items: center;

        img {
            width: 100%;
            max-width: 8.5rem;
        }

        &-text {
            margin-left: 22px;
            span {
                font-weight:bold;
                font-size: 1.5rem;
            }
            p {
                margin:0px;
                margin-top: 25px;
                font-size: 1rem;
            }
        }
      }

    &__logo {
        img {
            @media @size-md{
                max-width: 24vw;
            }
        }
    }
    font-size: 0.8rem;
    &__links {
        text-align: right;
        a {
            text-decoration:none;
            color:@clr-white;
            font-size: 0.8rem;
            margin-left: 0.5rem;
            
            white-space: nowrap;
            @media @size-md{
                margin-bottom: 0.2rem;
                display: inline-block;
            }
        }
    }

  }