@charset "UTF-8";
html,body{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}

body {
  color: #fff;
  font-family: "Montserrat", Sans-serif;
  font-weight: 300;
}

header {
  background-color: #aed687;
}

.masthead .btn {
  background-color: #49c8dc;
  border-color: #49c8dc;
  font-weight: 500;
}

section, footer {
  padding: 50px 20px 50px 20px;
}

header .masthead-heading,.masthead-subheading{
  margin-bottom: 20px;
}

header section h2 {
  color: #FFFFFF;
  font-family: "Bebas Neue", Sans-serif;
  font-size: 75px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2.6px;
}


.section-1 h2,.section-2 h2,.section-3 h2,.section-4 h2{
  font-family: "Montserrat", Sans-serif;
  font-size: 90px;
  text-transform: uppercase;
  letter-spacing: 10px;
  font-weight: 400;
}
.section-1 {
  background-color: #56CEE1;
}
.section-1 img {
  width: 52%;
  height: auto;
}


.section-2 {
  background-color: #F2ACC6;
}
.section-2 img {
  max-width: 65%;
  height: auto;
}
.section-2 p, .section-3 p {
  font-weight: 500;
}

.section-3 {
  background-color: #86A7D7;
}
.section-3 .text-center h2, .section-2 h2 {
  font-size: 80px;
}
.section-3 h2.pdesc {
  color: #FFFFFF;
  font-family: "Bebas Neue", Sans-serif;
  font-size: 75px;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 2.6px;
}
.section-3 .btn {
  font-weight: 500;
  background-color: #7983ce;
  border-color: #7983ce;
}

.section-4 {
  background-color: #fff;
  color: #000;
}
.section-4 h2 {
  font-size: 70px;
}
.section-4 .flavor-item {
  margin-bottom: 20px;
  cursor: pointer;
}

footer {
  background-color: #323232;
}

.mb-2hrem {
  margin-bottom: 2.5rem !important;
}

@media screen and (max-width: 991.5px) {
  .section-3 .spec{
    background: url('../assets/img/product-3-768x557.png') repeat-x;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 70%;
  }
}

@media only screen and (max-width: 600px) {
  section h2 {
  font-size: 20px !important;    
  }
}

@media only screen and (max-width: 768px) {
  .masthead h2, .pdesc {
    font-size: 45px !important;
  }

  .section-4 h2 {
    font-size: 25px !important;
    letter-spacing: 2px !important;
  }

  section h2 {
    font-size: 30px !important;
  }
}

@media only screen and (max-width: 992px) {
  .masthead h2, .pdesc {
    font-size: 50px !important;
  }

  .section-4 h2 {
    font-size: 40px !important;
    letter-spacing: 2px !important;
  }

  section h2 {
    font-size: 50px !important;
  }
}