:root {
    --primary: #5bbd8a;
    --secondary: #f5c96a;
    --accent: #ff6f61;

    --text-dark: #111;
    --text-light: #666;

	--gradient-header: linear-gradient(0deg,#fff,#E3E3E3);
    --gradient-green: linear-gradient(135deg,#fff,#5EB878);
    --gradient-green2: linear-gradient(135deg,#fff,#60B97A);
    --gradient-yellow: linear-gradient(135deg,#fff,#F7CA4F);
    --gradient-footer: linear-gradient(180deg,rgba(255,255,255,0.5), rgba(94,184,120,0.5));

    --btn-radius: 8px;
    --shadow: 0 10px 20px rgba(0,0,0,0.08);

    --section-padding: 100px;
    --font: 'Quicksand', sans-serif;
}

body {
    font-family: var(--font);
    color: var(--text-dark);
	font-size:16px;
}
a.link{
	color:#F7CA4F;
	text-decoration:none;
	font-weight:bold;
    transition: text-decoration 0.3s ease;
	position:relative;
}
a.link::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 0%;
    height: 3px;
	border-radius:1.5px;
    background-color: #F7CA4F;
    transition: width 0.3s ease;
}
a.link:hover::after {
    width: 50px; /* adjust length of underline */ 
}

a.green-link{
	color:#5EB878;
	text-decoration:none;
	font-weight:bold;
    transition: text-decoration 0.3s ease;
	position:relative;
}
a.green-link::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 0%;
    height: 3px;
	border-radius:1.5px;
    background-color: #5EB878;
    transition: width 0.3s ease;
}
a.green-link:hover::after {
    width: 30px; /* adjust length of underline */
}

a.text-link{
	color:#111;
	text-decoration:none;
	font-weight:bold;
    transition: text-decoration 0.3s ease;
	position:relative;
	font-size:16px;
}
a.text-link::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 5px;
    width: 0%;
    height: 3px;
	border-radius:1.5px;
    background-color: #111;
    transition: width 0.3s ease;
}
a.text-link:hover::after {
    width: 30px; /* adjust length of underline */
}


/* NAVBAR */
.navbar {
    background: var(--gradient-header);
    padding: 15px 0;
}

.nav-link {
    margin: 0 10px;
    font-weight: 700;
	font-size:14px;
	color:#111;
	position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}
/* UNDERLINE (HIDDEN BY DEFAULT) */
.nav-link::after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 5px;
    width: 0%;
    height: 3px;
	border-radius:1.5px;
    background-color: #F7CA4F;
    transition: width 0.3s ease;
}

.offcanvas .navbar-nav .nav-link::after {
    left: 0px;
}

.nav-link:hover{
	color:#F7CA4F;
}

.nav-link:hover::after {
    width: 30px; /* adjust length of underline */
}
.dd:hover::after{width:0;}

.nav-link.live{
	color:#F7CA4F;
}

.nav-link.live::after {
    width: 30px;
}

.home-link{
	color:#111;
	text-decoration:none;
	font-size:14px;
	background:#F7CA4F;
	padding:8px 10px;
	border-radius:18px;
	transition: 350ms;
}

.home-link:hover{
    background: var(--primary);
	color:#fff;
}

.btn-main {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--btn-radius);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
	font-size:14px;
	/*min-width:120px;*/
	transition: background 200ms;
}

.btn-main:hover {
    background: white;
    color: var(--primary);
    border: 1px solid #dcdcdc;
    border-radius: var(--btn-radius);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
	font-size:14px;
	/*min-width:120px;*/
}

.btn-outline-custom {
	background:#fff;
    border-radius: var(--btn-radius);
    border: 1px solid #dcdcdc;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
	font-size:14px;
	/*min-width:120px;*/
	transition: color 200ms;
}

.btn-outline-custom:hover {
	background:#fff;
    border: 1px solid #dcdcdc;
    border-radius: var(--btn-radius);
    color: var(--primary);
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
    font-weight: 700;
	font-size:14px;
	/*min-width:120px;*/
}

.ico-link{
	font-size:14px;
	padding:6px 10px;
	border-radius:20px;
	transition: 350ms;
    box-shadow: none;
}
.ico-link:hover{
	padding:6px 10px;
	border-radius:20px;
    box-shadow: none;
}

/* LANGUAGE SELECTOR */
#langDropdown {
    display: flex;
    align-items: center;
    justify-content: center;
	text-align:center;
}
.langDropdown{
	min-width:39px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}

.dropdown-menu {
    padding: 5px;
    border-radius: 10px;
	margin-left:12px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
	
}

.dropdown-item {
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}

/* MOBILE LANGUAGE SELECTOR */
#mobileLangDropdown {
    padding: 8px 0;
	font-size:14px;
	font-weight:700;
	color:#111;
}

#mobileLangMenu {
    padding: 8px;
    border-radius: 10px;
	font-size:14px;
	font-weight:700;
}

#mobileLangMenu .dropdown-item {
	font-size:14px;
	font-weight:700;
	color:#111;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

#mobileLangMenu .dropdown-item:hover {
    background: rgba(0,0,0,0.05);
}


/* HERO */
.hero {
    background: var(--gradient-green);
    padding: var(--section-padding) 0;
}

.hero h1 {
    font-size: 2.8rem;
    line-height: 1.3;
}

.video-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}

.video-box img {
    width: 100%;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
	background:url('../img/play-btn.svg') no-repeat;
	background-size:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 20px;
    cursor:pointer;
}

.autoVideo {
	width: 100%;
	aspect-ratio: 5 / 4; 
	background: black; 
	object-fit: cover;
}

.sb-hero{
	position:absolute;
	background-image:url('../img/sb-hero.png');
	bottom:-70px;right:-70px;width:201px;height:198px;
}

.sb-intro{
	position:absolute;
	background-image:url('../img/sb-hero.png');
	bottom:-60px;left:-40px;width:141px;height:138px;
	background-size:100%;
}

.sb-norisk{
	position:absolute;
	background-image:url('../img/sb-norisk.png');
	bottom:-200px;right:-250px;width:547px;height:601px;
	background-size:100%;
}

.sb-sales{
	position:absolute;
	background-image:url('../img/sb-sales.png');
	bottom:-80px;left:-70px;width:206px;height:204px;
	background-size:100%;
}

.sb-partner{
	position:absolute;
	background-image:url('../img/sb-partner.png');
	bottom:-130px;right:-150px;width:368px;height:404px;
	background-size:100%;
}

.sb-contact{
	position:absolute;
	background-image:url('../img/sb-contact.png');
	bottom:-50px;left:-170px;width:513px;height:563px;
	background-size:100%;
}

.sb-howitworks{
	position:absolute;
	background-image:url('../img/sb-contact.png');
	bottom:-150px;left:-220px;width:435px;height:478px;
	background-size:100%;
}

.sb-zakaboompartner-1{
	position:absolute;
	background-image:url('../img/sb-zakaboompartner.png');
	bottom:-30px;right:-50px;width:141px;height:138px;
	background-size:100%;
}

.sb-zakaboompartner-2{
	position:absolute;
	background-image:url('../img/sb-zakaboompartner.png');
	bottom:-40px;left:-40px;width:141px;height:138px;
	background-size:100%;
}

.sb-whatyouget{
	position:absolute;
	background-image:url('../img/sb-whatyouget.png');
	bottom:-300px;left:-250px;width:795px;height:874px;
	background-size:100%;
}

.sb-zbpartner-card{
	position:absolute;
	background-image:url('../img/sb-zbpartner-card.png');
	top:5px;right:-15px;width:75px;height:82px;
	background-size:100%;
}

.sb-campaign-1{
	position:absolute;
	background-image:url('../img/sb-campaign-1.png');
	top:-50px;left:80px;width:117px;height:129px;
	background-size:100%;
}

.sb-campaign-2{
	position:absolute;
	background-image:url('../img/sb-campaign-2.png');
	top:-45px;right:90px;width:117px;height:129px;
	background-size:100%;
}

/* SECTION */
.section {
    padding: var(--section-padding) 0;
}

/* FEATURE GRID */
.feature-item {
    margin-bottom: 25px;
}

/* CARDS */
.sales-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}

.sales-card img {
    width: 100%;
}

.sales-overlay {
	width:100%;
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* CTA GRADIENT */
.gradient-yellow {
    background: var(--gradient-yellow);
}

.gradient-green2 {
    background: var(--gradient-green2);
}

/* PARTNERS */
.partner-logos img {
    height: 40px;
    opacity: 0.7;
}

.img-shadow{
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}

/* FORM */
.form-control {
    border-radius: var(--btn-radius);
	background:#efefef;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}
.form-control::placeholder{
	color:#949494;
	font-size:14px;
	font-weight:bold;
}

/* FOOTER */
.footer {
    background: var(--gradient-footer);
    padding: 80px 0 40px;
	font-size:12px;
}

.footer a{
	text-decoration:none;
	color:#111;
	font-size:12px;
}
.footer a:hover{
	text-decoration:underline;
	color:#333;
}

.footer h6 {
    font-weight: 600;
}

.footer .container .row .col-md-2{overflow:hidden;}

/* RESPONSIVE */
@media (max-width:1024px){
	.sb-hero, .sb-intro, .sb-norisk, .sb-partner, .sb-contact, .sb-sales, .sb-howitworks, .sb-zakaboompartner-1, .sb-zakaboompartner-2, .sb-whatyouget, .sb-zbpartner-card, .sb-campaign-2, .sb-campaign-1{display:none;}
}
@media (max-width:768px){
    .hero {
        text-align:center;
    }
    .hero h1 {
        font-size:2rem;
    }
	.sb-hero, .sb-intro, .sb-norisk, .sb-partner, .sb-contact, .sb-sales, .sb-howitworks, .sb-zakaboompartner-1, .sb-zakaboompartner-2, .sb-whatyouget, .sb-zbpartner-card, .sb-campaign-2, .sb-campaign-1{display:none;}
	.sales-card{margin-top:0 !important;}
	.yellow-border-right {
		border: none;
	}
	.sales-card {min-height:200px;}
	.sales-card img {
		width:160%;
	}
}
@media (min-width:480px) and (max-width:768px){
	.sales-card {min-height:200px;}
	.sales-card img {
		width:160%;
	}
}
@media (max-width:479px){
	.sales-card {min-height:250px;}
	.sales-card img {
		width:250%;
	}
}


/* ZAKABOOM Partners Page */

ul.green-dot {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.green-dot li {
  background: url('../img/greendot.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

ul.white-dot {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.white-dot li {
  background: url('../img/whitedot.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

ul.green-tick {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.green-tick li {
  background: url('../img/greentick.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

ul.white-tick {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.white-tick li {
  background: url('../img/whitetick.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

ul.yellow-tick {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.yellow-tick li {
  background: url('../img/yellowtick.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

ul.grey-tick {
  list-style: none; 
  padding: 0;
  margin: 0;
}
ul.grey-tick li {
  background: url('../img/greytick.png') no-repeat left center; 
  padding-left: 25px; 
  margin-bottom: 5px; 
  font-weight:600;
}

.zbpartner-card{
	border-radius:25px;
	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
}

/* PRICING Page */

.yellow-border-right {
    border-width: 2px; 
    border-style: solid;
    border-left: 0;
    border-top: 0;
    border-bottom: 0; 
    border-image: linear-gradient(to bottom, #fff, #F7CA4F, #fff) 1;
    border-image-slice: 1;
}