@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
	font-family: 'Inter', sans-serif;
	background: #FFF;
}

h1 {
	color: #000;
	font-family: 'Inter', sans-serif;
	font-size: 60px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

h2 {
	color: #000;
	font-family: 'Inter', sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding-bottom: 0;
}

h3 {
	font-family: 'Inter', sans-serif;
	color: #000;
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	padding-bottom: 0;
}

h4 {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding-bottom: 0px;
}

h5,
h6 {
	font-family: 'Inter', sans-serif;
}

p {
	font-family: 'Inter', sans-serif;
	color: #222222;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}

a {
	font-family: 'Inter', sans-serif;
}

/*bobba*/
.img-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.img-grid img {
  width: calc(25% - 15px); 
  object-fit: cover;
}

/* Mobile: 2×2 layout */
@media (max-width: 768px) {
  .img-grid img {
    width: calc(50% - 10px);
  }
  .logos{
      max-width:350px !important;
  }
}

/*en*/

/*fantasy*/
.kb-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6vw;
}

/* Generic pack wrapper */
.kb-pack-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.kb-pack {
  max-height: 480px;
  width: auto;
  display: block;
}

.kb-sku {
  margin: 0;
  font-size: 14px;
  color: #ffe6a8;
  text-align: center;
}

/* Right side: purple ribbon with text + pack overlapping it */
.kb-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.kb-ribbon {
  background: #5d3baf;
  padding: 56px 56px;
  border-radius: 0;
  min-width: 280px;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-left:20px;
}

.kb-pack-right {
  max-height: 420px;
  z-index: 2;
  margin-right: -60px; /* overlap onto ribbon but stay in same flex line */
}

.kb-title-gr {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: #ffe6a8;
  line-height: normal;
  text-align: left;
}

/* Mobile: same structure, just scaled down */
@media (max-width: 900px) {
  .kb-main {
    gap: 32px;
  }

  .kb-title-gr {
    font-size:16px;
  }

  .kb-pack {
    max-height: 380px;
  }

  .kb-ribbon {
    padding: 40px 32px;
  }

  .kb-pack-right {
    margin-right: -100px;
  }

}

@media (max-width: 480px) {
  .kb-pack {
    max-height: 120px;
  }

  .kb-title-gr {
    font-size: 10px;
  }

  .kb-sku {
    font-size: 8px;
  }

  .kb-ribbon {
    padding: 13px 0px 13px 57px;
  }

  .kb-pack-right {
    margin-right: -70px;
  }
}
/*end*/

/*merlin*/
.hp-main {
  display: flex;
  align-items: center;
  justify-content: center;   /* bag stays centered */
  gap: 7vw;                  /* space between bag and right text */
}

/* Pack + SKU underneath */
.hp-pack-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hp-pack {
  max-height: 480px;
  width: auto;
  display: block;
}


/* Right side text only */
.hp-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hp-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2c0b0b;
  line-height: 1.4;
}

.hp-line {
  display: block;
  width: 260px;
  height: 2px;
  background: #2c0b0b;
}

/* Mobile: same structure, just scaled down */
@media (max-width: 900px) {
  .hp-main {
    gap: 32px;           /* keep row, just tighter */
  }

  .hp-title {
    font-size: 18px;
  }

  .hp-line {
    width: 200px;
  }

  .hp-pack {
    max-height: 380px;
  }

}

@media (max-width: 480px) {
  .hp-pack {
    max-height: 320px;
  }

  .hp-title {
    font-size: 16px;
  }

  .hp-sku {
    font-size: 13px;
  }
}
/*end*/

.logo-link {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.logo-link:hover {
  transform: scale(1.07);
  opacity: 0.9;
  cursor: pointer;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;        
  flex-wrap: nowrap; 
}

.brand-row img {
  max-height: 160px;
  width: auto;
}

@media (max-width: 600px) {
  .brand-row {
    flex-direction: column;
    gap: 0;
  }

  .brand-row img {
    max-height: 150px;
  }
  .contain1{
      background-size:contain !important;
  }
}


@media(max-width:576px){
    h1{
        font-size:40px !important;
    }
    h2{
        font-size:16px !important;
    }
    p{
        font-size:10px !important;
    }
    .max-w{
        max-width:160px !important;
    }
    .max-w2{
        max-width:100px !important;
    }
    #app\ companyadmin\.webapp-page\.publish > div.is-section.is-box.is-section-60{
        height: 30% !important;
        min-height: 30vh !important;
    }
    #app\ companyadmin\.webapp-page\.publish > div.is-section.is-box.is-section-60 > div.is-overlay > div{
        background-size:contain !important;
    }
    .hp-bottom-left{
        max-width:120px !important;
    }
    .mob-col{
        flex-direction:row !important;
        margin-top:0 !important;
    }
    table td {
        padding: 5px !important;
    }
    table td > p{
        font-size: 8px !important;
        margin: 0 !important;
    }
}
@media(max-width:786px){
    .mob-col{
        flex-direction:row !important;
        margin-top:0 !important;
    }
    .horiz-scroll{
        display: block;
    }
}
/*pills*/
.nav-pills > li {
    padding:0 8px !important;
}
.active > .is-btn.is-pills-btn {
	border: 1px solid #a19159 !important;
	background:#a19159 !important;
	color:#fff !important;
}

.is-btn.is-pills-btn {
	color: #000 !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600 !important;
	line-height: normal;
	border-radius: 200px !important;
	border: 1px solid #a19159 ;
	background: #FFF !important;
	padding: 10px 15px !important;
	letter-spacing:0 !important;
}
.slick-initialized .slick-slide {
    padding: 8px;
}

.is-btn-ghost2, .is-btn-ghost1  {
	padding: 15px 20px !important;
	font-style: normal;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 22px !important;
	letter-spacing: 0 !important;

}

.form-control {
	border-bottom: 1px solid #000 !important;
	border-radius: 0 !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

.rendered-form .form-group>label {

	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 20px !important;
	color: #fff !important;
}

.rendered-form .form-control:focus {
	outline: 0;
	box-shadow: none !important;
	border-bottom: 1px solid #DB7043 !important;
	border-radius: 0 !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

.send-btn {
	padding: 15px 20px !important;
	border:0 !important;
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	border-radius:0 !important;
	background:#A19159 !important;
}

.navbar-nav>li>a{
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-transform:uppercase;
    color: #F73D47;
}
.image{
    max-width:200px !important;
}

.footer-text, .footer-text>a{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #333F55;
}