html,body{
margin:0;
padding:0;
overflow-x:hidden;
}



.b2bHeroSlider{
width:100vw;
height:100vh;
position:relative;
left:50%;
margin-left:-50vw;
overflow:hidden;
font-family:Montserrat,sans-serif;
}


.b2bHeroSlider .b2bHeroSlides{
display:flex;
height:100%;
transition:transform .8s ease;
}


.b2bHeroSlider .b2bHeroSlide{
min-width:100vw;
height:100vh;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

/* OVERLAY */
.b2bHeroSlider .b2bHeroSlide::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.35),
transparent);
}

/* BACKGROUNDS */
.b2bHeroSlideOne{
background-image:url("https://themazine.com/html/b2b/images/home/slide-1.jpg?1772450209086");
}
.b2bHeroSlideTwo{
background-image:url("https://images.unsplash.com/photo-1542744173-8e7e53415bb0");
}
.b2bHeroSlideThree{
background-image:url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab");
}

/* CONTENT */
.b2bHeroSlider .b2bHeroContent{
position:relative;
z-index:2;
max-width:1100px;
/*margin-left:8%;*/
color:#fff;
padding:20px;
}

/* LABEL */
.b2bHeroSlider .b2bHeroLabel{
color:#ffb700;
letter-spacing:1px;
font-weight:600;
margin-bottom:4px;
font-size: 40px;
}

/* TITLE */
.b2bHeroSlider .b2bHeroTitle{
font-size:50px;
font-weight:700;
line-height:1.2;
margin-bottom:45px;
}

.b2bHeroSlider .b2bHeroTitle span{
display:block;
color:#dae6f7;
font-size:20px;
padding: 20px 0px;
}

/* DESCRIPTION */
.b2bHeroSlider .b2bHeroDesc{
font-size:18px;
margin-bottom:30px;
}

/* BUTTONS */
.b2bHeroSlider .b2bHeroBtns{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.b2bHeroSlider .b2bHeroBtn{
padding:14px 36px;
text-decoration:none;
font-weight:600;
border-radius:5px;
transition:.3s;
}

.b2bHeroPrimary{
background:#ffb700;
border:2px solid #ffb700;
color:#000;
}

.b2bHeroPrimary:hover{
background:transparent;
color:#ffb700;
}

.b2bHeroOutline{
border:2px solid #fff;
color:#fff;
}

.b2bHeroOutline:hover{
background:#fff;
color:#000;
}

/* ARROWS */
.b2bHeroArrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.2);
color:#fff;
cursor:pointer;
z-index:10;
}

.b2bHeroArrowLeft{left:20px;}
.b2bHeroArrowRight{right:20px;}

.b2bHeroArrow:hover{
background:#ffb700;
color:#000;
}

/* DOTS */
.b2bHeroDots{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
}

.b2bHeroDot{
width:12px;
height:12px;
border-radius:50%;
background:rgba(255,255,255,.5);
cursor:pointer;
}

.b2bHeroDot.active{
background:#ffb700;
transform:scale(1.3);
}

/* ===============================
RESPONSIVE
================================*/

@media(max-width:1024px){

.b2bHeroTitle{
font-size:46px;
}

.b2bHeroTitle span{
font-size:34px;
}
}

@media(max-width:768px){

.b2bHeroSlider{
height:75vh;
}

.b2bHeroSlider .b2bHeroSlide {
    height: 72vh !important;
    }
    .b2bHeroSlider .b2bHeroTitle {
    font-size: 40px !important;
    font-weight:800!important;
    }

.b2bHeroContent{
margin-left:5%;
}

.b2bHeroTitle{
font-size:32px;
}

.b2bHeroTitle span{
font-size:24px;
}

.b2bHeroDesc{
font-size:15px;
}

.b2bHeroBtns{
flex-direction:column;
}

.b2bHeroArrow{
width:40px;
height:40px;
}
}