/*VARIABLE*/

:root {
  --primaryColor: #422f8b;
  --purpleBorder: #422f8b;
  --borderSize: 5px;
}

/*CSS RESET*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*include border inside width calculator*/
  /* border: 1px solid red; */
}

/*  
__    __     ______     __     __   __        ______     ______   __  __     __         ______     ______    
/\ "-./  \   /\  __ \   /\ \   /\ "-.\ \      /\  ___\   /\__  _\ /\ \_\ \   /\ \       /\  ___\   /\  ___\   
\ \ \-./\ \  \ \  __ \  \ \ \  \ \ \-.  \     \ \___  \  \/_/\ \/ \ \____ \  \ \ \____  \ \  __\   \ \___  \  
 \ \_\ \ \_\  \ \_\ \_\  \ \_\  \ \_\\"\_\     \/\_____\    \ \_\  \/\_____\  \ \_____\  \ \_____\  \/\_____\ 
  \/_/  \/_/   \/_/\/_/   \/_/   \/_/ \/_/      \/_____/     \/_/   \/_____/   \/_____/   \/_____/   \/_____/ 

*/
main {
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

nav {
  position: relative;
}

#index {
  background-image: url(../img/homebck.png);
  margin: 0;
}

#about {
  background-image: url(../img/homebck4.png);
  margin: 0;
}

#shopall {
  background-image: url(../img/homebck3.png);
  margin: 0;
}

#contact {
  background-image: url(../img/homebck3.png);
  margin: 0;
}

img {
  width: 100%;
}

/*CONTENT AT THE VERY TOP*/

#toptop {
  display: flex;
  width: 100%;
  height: 35px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #422f8b;
}

/*NAVIGATION*/

.flex-container-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 120px;
  background-color: #ffe6e6; /*APPLIED WHITE TO THE TOP BOX*/
  box-shadow: 0px 5px 5px rgb(135, 135, 135);
}
.nav-item {
  display: flex;
}

#nav-menu {
  width: 100px;
  justify-content: center;
  align-items: center;
}

#nav-logo {
  width: 250px;

  justify-content: center;
  align-items: center;
}

#nav-cart {
  width: 100px;
  justify-content: center;
  align-items: center;
}

#nav-cart img {
  width: 90px;
}

#nav-signin {
  width: 50px;
  margin-left: 20px;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
}

#nav-signin img {
  width: 55px;
}

#menu-links ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-image: linear-gradient(#ffe6e6, #422f8b);
}

#menu-links {
  position: absolute;
  z-index: 10;
  display: none;
  width: 100%;
}

#menu-links ul li {
  width: 400px;
  align-content: center;
  font-size: 30px;
  font-weight: 700;
  padding: 20px;
  text-align: center;
}

#menu-links ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
}
/*NAVIGATION HAMBURGUER MENU*/

/*INDEX PAGE*/
/*MAIN IMAGE + TXT ENDS WITH BUTTON*/

.flex-container-maini {
  display: flex;
}

#main-image {
  display: flex;
  background-image: url("../img/main1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  object-fit: cover;
}

.flex-button {
  justify-content: center;
  align-items: center;
}

.button_shop {
  text-align: center;
}

.button_shop button {
  width: 200px;
  padding: 10px;
  border: 5px solid #422f8b;
  border-radius: 40px;
  font-weight: bolder;
  font-size: large;
  color: white;
  background-color: #422f8b;
  transition-duration: 0.4s;
  margin-bottom: 30px;
}

.button_shop button:hover {
  background-color: white;
  border: 5px solid #422f8b;
  color: #422f8b;
}

.yaaas {
  display: flex;
  justify-content: center;
  color: #422f8b;
  font-weight: bolder;
  font-size: 40px;
  margin: 10px;
}

#yaaas-txt {
  display: flex;
  text-align: center;
  padding: 20px;
  font-weight: 700;
  font-size: 25px;
  color: #7469b6;
}

/*ICONS SECTION*/

.flex-container-midicons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #ad88c6;
}

.midicons img {
  width: 150px;
}

.midicons h3 {
  color: white;
}

/*TESTIMONIALS*/

.container-testi {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-testimonials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 50px;
}

/*CARL & TRUDY*/

.testi1 {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 475px;
  background-color: white;
  border: 5px solid #422f8b;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

/*CARRIE*/

.testi2 {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 475px;
  background-color: white;
  border: 5px solid #422f8b;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

#quotes {
  display: flex;
  align-self: center;
  width: 50px;
  margin-top: 20px;
}

#quotes2 {
  display: flex;
  rotate: 180deg;
  width: 50px;
  margin: 0 auto;
  margin-top: 20px;
}

.testitxt {
  text-align: center;
  margin: 20px;
}

.testitxt2 {
  text-align: center;
  margin: 30px;
}

.testitxt p {
  font-size: x-large;
  font-style: italic;
  color: #7469b6;
}

.testitxt2 p {
  font-size: x-large;
  font-style: italic;
  color: #7469b6;
}

.testitxt h3 {
  font-size: x-large;
  font-weight: 900;
  color: #422f8b;
  margin-top: 10px;
}

.testitxt2 h3 {
  font-size: x-large;
  font-weight: 900;
  color: #422f8b;
  margin-top: 10px;
}

.testitxt h6 {
  font-size: medium;
  font-weight: 200;
  color: #7469b6;
}

.testitxt2 h6 {
  font-size: medium;
  font-weight: 200;
  color: #7469b6;
}

#carl {
  display: flex;
  width: 150px;
  margin: 0 auto;
}

#carrie {
  display: flex;
  width: 150px;
  margin-left: 50px;
  margin: 0 auto;
  margin-top: 40px;
}

#trudy {
  display: flex;
  width: 150px;
  margin: 0 auto;
  padding-top: 20px;
}

/*FOOTER*/

.container-footer-main {
  display: flex;
  justify-content: center;
  background-color: #422f8b;
  padding: 50px;
}

#socialm {
  display: flex;
  justify-content: center;
  width: 200px;
  padding: 10px;
  justify-content: space-between;
}

.social-si {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#socialm img {
  width: 50px;
}

.si {
  text-align: center;
  color: #ffe6e6;
}

input[type="text"] {
  width: 300px;
  height: 50px;
  border: 5px solid #ffffff;
  border-radius: 40px;
  text-align: center;
  font-size: large;
  color: ligth grey;
  font-weight: 700;
}

.form input::placeholder {
  color: #7469b6;
  font-size: 20px;
}

.button_shop2 button {
  width: 300px;
  height: 50px;
  padding: 10px;
  border: 4px solid #ffffff;
  border-radius: 40px;
  font-weight: bolder;
  font-size: large;
  color: #422f8b;
  background-color: #ffffff;
  transition-duration: 0.4s;
  margin-top: 20px;
}

.button_shop2 button:hover {
  background-color: #7469b6;
  border: 4px solid #ffffff;
  color: #ffffff;
}

#bottlogo {
  width: 200px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 10px;
}

#edutxt {
  text-align: center;
  color: #ffe6e6;
  padding-top: 30px;
  padding-bottom: 10px;
}

/*SHOP ALL SECTION*/

/*FLAVOUR PART*/

.flex-container-bowls {
  display: block;
  background-color: #ad88c6;
  text-align: center;
}

.flex-container-bowls h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #422f8b;
  color: #ad88c6;
  padding-top: 20px;
}

.flavour {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #ad88c6;
  justify-content: space-evenly;
  padding-top: 20px;
  padding-bottom: 20px;
}

.bowls img {
  display: flex;
  width: 150px;
  padding-top: 20px;
}

.bowls h3 {
  color: #ffffff;
  text-align: center;
  padding: 5px;
}

/*RECEPIES MAIN CONTAINER*/

.container-recepies {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cookie {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 50px;
}

/*COOKIE MANGO*/

.mango {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 350px;
  background-color: #e1afd1;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 150px;
}

.mango h3 {
  font-size: 25px;
  color: #422f8b;
  padding-top: 10px;
}

.mango p {
  color: #ffffff;
  padding: 10px;
  font-weight: 500;
}

.mango img {
  display: flex;
  width: 200px;
  justify-content: center;
  align-items: center;
}

/*COOKIE DOUGH*/

.dough {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 350px;
  background-color: #7469b6;
  border-radius: 50px;
  margin: 0 auto;

  margin-bottom: 150px;
}

.dough h3 {
  font-size: 25px;
  color: #e1afd1;
  padding-top: 10px;
}

.dough p {
  color: #ffffff;
  padding: 10px;
  font-weight: 500;
}

.dough img {
  display: flex;
  width: 200px;
  justify-content: center;
  align-items: center;
}

/*COOKIE COCO*/

.coco {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 350px;
  background-color: #ffe6e6;
  border-radius: 50px;
  margin: 0 auto;

  margin-bottom: 150px;
}

.coco h3 {
  font-size: 25px;
  color: #422f8b;
  padding-top: 10px;
}

.coco p {
  color: #422f8b;
  padding: 10px;
  font-weight: 500;
}

.coco img {
  display: flex;
  width: 200px;
  justify-content: center;
  align-items: center;
}

/*COOKIE PEANUT*/

.peanut {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 350px;
  background-color: #ad88c6;
  border-radius: 50px;
  margin: 0 auto;
  margin-bottom: 150px;
}

.peanut h3 {
  font-size: 25px;
  color: #e1afd1;
  padding-top: 10px;
}

.peanut p {
  color: #ffffff;
  padding: 10px;
  font-weight: 500;
}

.peanut img {
  display: flex;
  width: 200px;
  justify-content: center;
  align-items: center;
}

/*COOKIE SECTION BUTTON*/

.flex-button {
  justify-content: center;
  align-items: center;
}

.button_recepies {
  text-align: center;
}

.button_recepies button {
  width: 200px;
  padding: 10px;
  border: 5px solid #422f8b;
  border-radius: 40px;
  font-weight: bolder;
  font-size: large;
  color: white;
  background-color: #422f8b;
  transition-duration: 0.4s;
  margin-top: 10px;
}

.button_recepies button:hover {
  background-color: white;
  border: 5px solid #422f8b;
  color: #422f8b;
}

/*ABOUT US SECTION*/

.founder-container {
  display: flex;
}

.founders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.founder-txt {
  width: 90%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.founder-txt h1 {
  display: flex;
  justify-content: center;
  font-weight: 900;
  font-size: 27px;
  color: #7469b6;
  padding-bottom: 10px;
}

.founder-txt p {
  text-align: center;
  font-weight: 400;
  font-size: larger;
  color: #422f8b;
  font-weight: 600;
  padding-bottom: 10px;
}

#founder {
  width: 80%;
  display: flex;
}

#maria {
  padding-top: 20px;
  color: #422f8b;
}

/*CONTACT SECTION*/

#mail a {
  text-decoration: none;
  color: #422f8b;
  padding: 5px;
}

.contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.hundred-container {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: center;
  background-color: #ffe6e6;
}

#cookie-bowl {
  display: flex;
  width: 85%;
}

.happy-woman,
.happy-man {
  width: 10%;
}

.hundred-txt h1 {
  font-size: 25px;
  font-weight: 800;
  color: #422f8b;
  padding-top: 20px;
}

.hundred-txt {
  text-align: center;
  color: #422f8b;
  font-weight: 1000;
  padding-bottom: 10px;
  z-index: 1;
}

.hundred-txt h6 {
  color: black;
  padding-bottom: 10px;
  font-weight: 200;
}

#mail a {
  color: black;
}

#cookierow img {
  display: flex;
  width: 100%;
}

/*SIGN IN PAGE*/

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 40px;
}

form {
  padding: 10px;
  border: 4px solid #422f8b;
  border-radius: 20px;
}

.wrapper h1 {
  font-size: 40px;
  font-weight: 800;
  color: #422f8b;
  text-align: center;
}

.wrapper .input-box {
  position: relative;
  margin: 30px;
  height: 50px;
}

.input-box {
  border: 5px #422f8b;
}

.input-box input::placeholder {
  color: #7469b6;
  font-size: 15px;
}

.input-box i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #422f8b;
  font-size: 20px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background-color: #ffff;
  border: 4px solid #422f8b;
  border-radius: 40px;
  padding: 20px;
}

.remember label-input {
  accent-color: #422f8b;
  margin-right: 3px;
}

.remember {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: -15px 0 15px;
}

.remember a {
  color: #422f8b;
  font-weight: 500;
  text-decoration: none;
}

.wrapper button {
  width: 100%;
  height: 50px;
  border: none;
  background-color: #422f8b;
  border-radius: 40px;
  cursor: pointer;
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
}

.wrapper button:hover {
  background-color: #ffe6e6;
  border: 4px solid #422f8b;
  color: #422f8b;
}

.wrapper .register-link {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
}

.register-link p a {
  color: #422f8b;
  text-decoration: none;
  font-weight: 600;
}

#yaascookies {
  display: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .midicons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 200px;
  }

  .container-testi {
    display: flex;
    flex-direction: column;
  }

  .nav-desk {
    display: none;
  }

  .happy-woman,
  .happy-man {
    width: 10%;
    display: none;
  }

  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .midicons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 200px;
  }

  .container-testi {
    display: flex;
    flex-direction: column;
  }

  .nav-desk {
    display: none;
  }

  .happy-woman,
  .happy-man {
    width: 10%;
    display: none;
  }

  #founder {
    width: 80%;
    display: flex;
  }

  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .flex-container-nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-desk li {
    display: flex;
    padding-right: 20px;
  }

  .flex-contmain {
    display: flex;
    background-image: url("../img/main1.png");
    height: 600px;
    width: 80%;
    margin-left: 10%;
    background-size: cover;
    background-position: center;
  }

  .flex-container-maini {
    display: flex;
  }

  .flexbox-left-main {
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
  }

  .midicons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 200px;
  }

  .container-testi {
    display: flex;
    flex-direction: row;
  }

  .container-testimonials {
    display: flex;
  }

  .container-footer {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
  }

  .social-si {
    display: flex;
  }

  .button_shop2 {
    display: flex;
    justify-content: center;
  }

  /*NEW NAVIGATION*/

  .nav-desk {
    display: inline;
    list-style-type: none;
  }

  .nav-desk ul {
    list-style-type: none;
  }

  .nav-desk ul li {
    display: inline;
    padding-left: 20px;
  }

  .nav-desk a:hover {
    color: #7469b6;
  }

  .nav-desk ul li a {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    font-size: x-large;
    font-weight: 600;
    color: #422f8b;
  }

  /*NEW NAVIGATION*/

  /*RECEPIES MAIN CONTAINER*/

  .flex-container-bowls h1 {
    font-size: 50px;
  }

  .container-recepies {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .bowls img {
    display: flex;
    width: 220px;
    padding-top: 10px;
  }

  .bowls h3 {
    display: none;
  }

  .cookie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 100px;
  }

  .mango {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 300px;
    height: 350px;
    background-color: #e1afd1;
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 150px;
  }

  .mango,
  .dough,
  .coco,
  .peanut {
    width: 220px;
  }

  .mango img,
  .dough img,
  .coco img,
  .peanut img {
    width: 80%;
  }

  #nav-menu {
    display: none;
  }

  #menu-links {
    display: none;
  }

  /*ABOUT US*/

  .founders {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 50px;
  }

  .founder-txt h1 {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: 30px;
    color: #7469b6;
    padding-bottom: 10px;
  }

  .founder-txt {
    width: 50%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .founder-txt p {
    display: flex;
    justify-content: center;
    font-weight: 400;
    font-size: x-large;
    color: #422f8b;
    padding-bottom: 10px;
  }

  #founder {
    width: 44%;
    display: flex;
  }

  #maria {
    display: flex;
    justify-content: right;
  }

  /*CONTACT SECTION*/

  .hundred-container {
    display: flex;
    height: 180px;
    align-items: center;
    justify-content: center;
    background-color: #ffe6e6;
  }

  .contact {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
    justify-content: center;
  }

  #cookie-bowl {
    width: 550px;
    padding: 10px;
    padding-bottom: 70px;
  }

  .happy-woman,
  .happy-man {
    display: flex;
    width: 15%;
  }

  .happy-woman img,
  .happy-man img {
    padding: 10px;
  }

  .hundred-txt h1 {
    font-size: 42px;
    font-weight: 800;
    color: #422f8b;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hundred-txt {
    text-align: center;
    color: #422f8b;
  }

  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}