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

 :root{
       --bg-color:#F4F3F0;
       --chobani-sans-: "Chobani Sans";
       --chobani-serif: "Chobani Serif";
       --dark-slate-gary:#204949;
       --platinam:#ebe9e5;
 }

  @font-face {
    font-family: "Chobani Sans";
    src: url("/static/fonts/ChobaniSans-Regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/ChobaniSans-Regular.woff2") format("woff2"), url("/static/fonts/ChobaniSans-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
  }

  @font-face {
    font-family: "Chobani Serif";
    src: url("/static/fonts/ChobaniSerif-Regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/ChobaniSerif-Regular.woff2") format("woff2"), url("/static/fonts/ChobaniSerif-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
  }

  

  .navbar{
    width: 97% !important;
      color: black;
      transform: translateX(30px);
      z-index: auto;
      background-color: white;
      position: sticky;
    }

ul li{
    padding-left: 20px;
    padding-top: 30px;

}

ul li a{
    font-family:  Chobani Serif;
    font-size: 13px;
    color: black;
}

.nav-bar:hover{
    color: red;
}

.nav-bar img{
    margin-left: 200px;
    margin-right: 200px;
    margin-top: -15px;
}

.nav-bar h1:hover{
    color: black !important;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: -20px;
  border-radius: 1px;
  box-shadow: 2px 1px 5px black;
}

.dropdown-menu a:hover{
  color: red;
}

.list-group-item{
  border: none;
}

#searchbar
{
  position: relative;
  padding-left: 80px;
}

#searchbar #sliding-panel-outer
{
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 30px;
  width: 240px;
  transition: width 0.4s ease;
}

#searchbar #sliding-panel-inner
{
  width: 240px;
}

#searchbar .search-label
{
  width: 30px;
  height: 100px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
}

#searchbar .search-label .fa-times,
#searchbar.collapsed .search-label .fa-search
{
  display: inline-block;
}
#searchbar .search-label .fa-search,
#searchbar.collapsed .search-label .fa-times
{
  display: none;
}

#searchbar.collapsed #sliding-panel-outer
{
  width: 0px;
}

#search-input{
 height:5em;
 border: none;
}


.display-1 img{
       position: relative;
       top: -120px;
       z-index: -4;
       margin-bottom: -523px;
}

.intro{
  position: relative;
  top:-90px;
  margin-left: 80px;
  color: #eae8e1;
  font-family: var(--chobani-sans-);
  z-index: -1;
}

.intro h1{
  font-size: 60px;
}

.intro p{
  font-size: 22px;
  line-height: 33px;
  font-weight: 100;
}

.button{
  width: 115px;
  font-family: sans-serif;
  height: 46px;
  font-size: 16px;
  border: none;
  background-color: white;
  border-radius: 1px;
  transform: translateY(-50px);
  cursor: pointer;
}

.button:hover{
  background-color: #babdc1;
}

.container-fluid{
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: var(--bg-color);
}

.text{
  font-size: 13px;
  margin: 10px;
  padding: 10px;
  color: var(--dark-slate-gary);
  letter-spacing: 0.8px;
  text-align: center;
 position: relative;
 top: 0px;
 left: 0px;
}

.intro-new-products{
   margin-top: 100px;
   margin-bottom: 100px;
   color: var(--dark-slate-gary);
}

.intro-np-right{
  text-align: center;
  font-family: Chobani Serif ;
  position: relative;
  top: 50px;
  left: -50px;
}

.intro-np-right h2{
  font-size: 43px; 
}

.intro-np-right p{
  font-size: 14px;
  line-height: 22px;
  padding-top: 10px;
}

.intro-np-lf .img-fluid{
  position: relative;
  left: 180px;
}

.button-intro{
  width: 123px;
  height: 47px;
  font-size: 13px;
  border: none;
  font-family: sans-serif;
  margin-top: 15px;
  background-color: white;
  border-radius: 2px;
  color: var(--dark-slate-gary);
  cursor: pointer;
}

/*section-two---*/

.section-two{
  margin-top: 100px;
  margin-bottom: 100px;
  color: var(--dark-slate-gary);
}

.sec-lf{
 text-align: center;
 font-family: Chobani Serif ;
 position: relative;
 top: 90px;
 left: 50px;
}

.sec-lf h2{
 font-size: 43px;
 font-weight: 200; 
}

.sec-lf p{
 font-size: 14px;
  padding-top: 10px;
 line-height: 25px;
}

.sec-rgt .img-fluid{
 position: relative;
 left: 70px;
}

.button-sec-two{
 width: 140px;
 height: 50px;
 font-size: 14px;
 border: none;
 background-color: white;
 border-radius: 2px;
 font-family: sans-serif;
 color: var(--dark-slate-gary);
 cursor: pointer;
}



/*---section-3--*/

.section-three{
  position: relative;
  top: 25px;
  left: 20px;
  width: 95vw;
  height: 110vh;
  padding-top: 50px;
  background-color: var(--platinam);
}

.img-l{
  transform: translateX(85px);
}

.lv-p{
  padding: 50px;
  font-size: 16px;
  color: royalblue;
}

.lv-c{
  transform: translateY(-70px);
}

.lv-p-p{
  padding-top: 30px;
  font-family: var(--chobani-serif);
  line-height: 28px;
  font-size: 14px;
  color: #204949;
}

.loved-p{
  position: relative;
  top: 55px;
  left: -10px;
}

.button-sec-three{
  width: 120px;
  height: 50px;
  font-size: 13px;
  border: none;
  background-color: white;
  border-radius: 2px;
  font-family: sans-serif;
  color: var(--dark-slate-gary);
  cursor: pointer;
  position: relative;
  left: 550px; 
}

.button-sec-three:hover{
  background-color: #babdc1;
}


/*-----section-4--*/

.section-four{
  padding: 50px;
  margin: 50px;
}

.four-lf{
  position: relative;
  left: 60px;
}

.four-rgt{
  text-align: center;
  transform: translateY(100px);
  font-family: Chobani Serif ;
  color: #204949;
}
 .four-rgt h2{
  font-size: 42px;
  font-weight: 200; 
 }
 
 .four-rgt p{
  font-size: 14px;
  line-height: 25px;
 }

 .button-four{
  width: 120px;
  height: 50px;
  font-size: 13px;
  border: none;
  background-color: white;
  border-radius: 2px;
  font-family: sans-serif;
  color: var(--dark-slate-gary);
  cursor: pointer;
  position: relative;
 }




 /*----section-5--*/

 .section-fifth{
   width: 100wh;
   height: 100vh;
 }

.fifth-lf{
  text-align: center;
}

.fifth-lf{
  text-align: center;
  position: relative;
  top: 15px;
  left: 50px;
  font-family: Chobani Serif ;
  color: #1a3c34;
}
 .fifth-lf h2{
  font-size: 43px;
  font-weight: 200; 
  padding-top: 10px;
 }
 
 .fifth-lf p{
  font-size: 14px;
  line-height: 25px;
 }

 .img-rgt-fifth{
   padding-left: 50px;
 }

 .button-fifth{
  width: 120px;
  height: 50px;
  font-size: 13px;
  border: none;
  background-color: white;
  border-radius: 2px;
  font-family: sans-serif;
  color: var(--dark-slate-gary);
  cursor: pointer;
  position: relative; 
 }

 .button-fifth:hover{
  background-color: #babdc1;
}

/*bg img*/
 .bg-img{
  width: 100%;
  height: 9vh;
  position: relative;
  top: -200px;
  background-image: url(https://images.ctfassets.net/3s6ohrza3ily/7Co7LDRifeUQGcSYwOUKyA/8e0c565de33445ac8d1166bc812f56d2/infinite-scroll-separator.svg);
 
}

footer{
  width: 99% !important;
  height: auto;
  color: #ebe9e5;
  background-color: #1a3c34;
  transform: translateX(12px);  
}



.footer-link{
  text-decoration: none;
  color: #ebe9e5;
  margin: -16px;
  font-weight: 500;
  font-size: 14px;
  padding-top: 15px;
  transform: translateX(40px);
}

.footer-link:hover{
  color: #ebe9e5;
}

.chobani-svg{
  filter: invert(0%) sepia(0%) saturate(10%) hue-rotate(346deg) brightness(1111%) contrast(97%);
  display: block;
position: relative;
top: 60px;
left: 55px;
width: 162px;
padding-bottom: 26px;
}

.ft-search{
  border: 2px solid #386666;
  width: 280px;
  height: 47px;
  opacity: 0.5;
  padding-left: 10px;
  background: none;
  color: #ebe9e5;
}
.ft-b{
  width: 100px;
  height: 47px;
  opacity: 0.5;
  border: 2px solid #386666;
  background: none;
  transform: translateX(-5px);
  color: #ebe9e5;
}

.ft-b:hover{
  background-color: #ebe9e5;
  color: #204949;
}

.rgt p{
  font-family: var(--chobani-serif);
}

.ft-fm{
  padding-top: 40px;
}

.rgt-form{
  position: relative;
  top: -20px;
  left: -50px;
}
#ft-i{
  font-family: var(--chobani-sans-);
}


#age{
  margin-top: 20px;
  display:block;
}

label{
  display: block;
  padding-left: 29px;
  transform: translateY(-19px);
  font-size: 12px;
  color:#babdc1 ;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.width{
  width: 87.8%;
  height: 2px;
  background-color: #386666;
 position: relative;
 top: 27px;
 left: 75px;
}


.cp-width{
  display: inline-block;
  background-color:#bbc5ba;
  width: 1px;
  height: 9px;
  margin: 0px 15px 0px 17px;
}

.d-inline{
    font-size: 14px;
    font-family: sans-serif;
    padding: 30px;
    margin: 30px;
    color:#bbc5ba;
    position: relative;
    top: 20px;
    left: 60px;
}

.social-madia{
   margin-top: -270px; 
  float: right;
}

.social-madia li{
  margin: -20px;
}

.social-madia li a{
  margin: -4px;
}

.alq_al6{
  width: 24px;
  height: auto;
  position: relative;
  top: 240px;
  right: 86px;

}