@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
}

.jarrow-category-banner {
  display: grid;
  justify-items: center;
  font-family: 'Rubik', sans-serif;
  grid-template-rows: auto 1fr;
  padding-bottom: 10px;
}
/****************/
.adaptive {
	background: rgb(40, 158, 233);
    height: auto;
    min-height: 470px;
    margin-left: 0;
    margin-right: 0;
}
.adaptive h2 {
  line-height:1.2;
  margin:0px;
  font-weight:700;
  font-size: 4rem;
  margin-top:20px;
  margin-bottom:10px;
}

.adaptive h3 {
  line-height:1;
  margin:0px;
  margin-right:20px;
  font-size:2rem;
  font-weight:700;
  padding-top:10px;
  margin-bottom:15px;
}

.adaptive p {
    line-height: 1.75;
    margin: 0px;
    font-size: 1.2rem;
    font-weight: 500;
    max-width: 90%;
    padding-top: 10px;
    text-align: center;
}
.prebiotic-health-cb-pic {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/********************/
.title_baner {
  width: 100%;
  margin: 15px 0;
  text-align: center;
  font-size: 34px;
}

/* Layout */
.adaptive {
  width: 100vw;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 30px;
}

.adaptive > * {
  display: grid;
  align-items: center;
  justify-items: center;
  text-transform: uppercase;
  font-weight: 500;
}
.content_baner {
  grid-column: 1;
  position: relative;
}

@media (max-width: 1200px) {
  .adaptive {
    max-width: 1000px;
    min-height: 470px;
    grid-template-columns: 1fr 1fr;
  }
  .adaptive h2 {
    font-size: 3rem;
  }
  .prebiotic-health-cb-pic {
    max-width:480px;
    position:relative;
  }
  .title_baner {
      font-size: 34px;
  }
}
@media (max-width: 1000px) {
  .adaptive {
    max-width: 768px;
    min-height: 720px;
    grid-template-columns: 1fr;
  }
  .adaptive h2 {
    font-size: 3rem;
  }
  .prebiotic-health-cb-pic {
    max-width:480px;
    position:relative;
  }
  .title_baner {
      font-size: 28px;
  }
}
@media (max-width: 768px) {
  .title_baner {
    font-size: 4.5vw;
  }
  .adaptive {
    min-height: 730px;
  }
  .adaptive h2 {
    font-size: 2rem;
  }
  .adaptive {
    max-width: 480px;
  }
 /* .sidebar {
    grid-column: span 2;
  }*/
  .content_baner {
    grid-column: span 2;
  }
  .prebiotic-health-cb-pic {
    max-width:380px;
    position:relative;
  }
}
@media (max-width: 480px) {
  .jcb-left {
    width: 390px;
  }
  .adaptive {
    min-height: 780px;
  }
  .adaptive h2 {
    font-size: 2rem;
  }
  .title_baner {
    font-size: 5vw;
    padding-right: 85px;
  }
  .adaptive {
    width: 135vw;
    grid-template-columns: 1fr;
  }
  /*.sidebar {
    grid-column: span 2;
  }*/
  .content_baner {
    grid-column: span 2;
  }
  .prebiotic-health-cb-pic {
    max-width:400px;
    padding-right: 90px;
    border-radius: 0px;
  }
}


/* =====|| FONT HELPER CLASSES || ===== */
.raleway {
  font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
}
.font-bold {
  font-weight:600;
}

.font-normal {
  font-weight:400;
}

.adaptive h2,.adaptive h3 {
    color: white;
  	font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
}

/* =====|| HELPER CLASSES || ===== */
.caps-lock {
  text-transform: uppercase;
}

.sans-serif {
  font-family: sans-serif;
}

.border-top {
  border-top: 1px solid white;
}

.border-bottom {
  border-bottom: 1px solid white
}

.color-white {
  color:white; 
}
.size-40 {
  font-size: 4rem;
}
.size-60 {
  font-size: 6rem;
}


/* || PREBIOTICS SPECIFIC || */
.adaptive {
	  background: rgb(40, 158, 233);
    height: 470px;
    margin-left: 0;
    margin-right: 0;
}
.adaptive h2 {
  line-height:1.2;
  margin:0px;
  font-weight:700;
  margin-top:20px;
  margin-bottom:10px;
}

.adaptive h3 {
  line-height:1;
  margin:0px;
  margin-right:20px;
  font-size:2rem;
  font-weight:700;
  padding-top:10px;
  margin-bottom:15px;
}

.adaptive p {
    line-height: 1.75;
    margin: 0px;
    font-size: 1.2rem;
    font-weight: 500;
    max-width: 90%;
    padding-top: 10px;
    text-align: center;
}

/* Icon separator */

.jcb-left p {
  line-height: 1.75;
  margin: 0px;
  font-size: 1.2rem;
  font-weight: 500;
  max-width: 90%;
  padding-top: 30px;
  text-align: center;
}

.btn-sep {
	padding: 20px 50px 20px 50px;
}

.btn-sep:before {
	background: rgba(0,0,0,0.15);
}

/* a 1 */
.btn-1 {
	background: #3a5ef5;
	color: #fff;
}

.btn-1:hover {
	background: #2980b9;
	color: #fff;
}

.btn-1:active {
	background: #2980b9;
	top: 2px;
	color: #fff;
}

.btn-1:before {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 140%;
	width: 60px;
}