body {
    margin: auto;
    background: #8ad2b0;
background-image: url("../media/background.webp");
background-repeat: no-repeat;
  background-size: cover;
    font-family: "gazzetta-variable", sans-serif;
font-variation-settings: "wght" 400;
color: #005640;
}
.max-width {
    display: flex;
    flex-direction: column;
    justify-self: center;
    max-width: 1200px;
}
.topWrittingDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.btn-yellow {
  border-radius: 15px;
  background-color: rgb(255, 250, 194);
  width: 195px;
  border: none;
  font-size: 3em;
  color: #005640;
}
.btn-yellow-discovery {
border-radius: 15px;
  background-color: rgb(255, 250, 194);
  border: none;
  color: #005640;
}
.headline {
    max-width: 1000px;
}
.bottlesImg {
    z-index: -1;
    position: absolute;
    top: 250px;
    max-width: 1800px;
    display: flex;
    justify-self: anchor-center;
}
.fs-3 {
    font-size: 2rem !important;
}
.f-small {
    font-size: 20px;
}
.hwt {
    font-family: "hwt-artz", sans-serif;
    font-weight: 500;
    font-style: normal;
    justify-self: center;
    font-size: 25pt;
}
.formDivPadding, .formDivPaddingSm {
    padding-top: 750px;
}
.shortTerms {
    text-align: center !important;
    display: flex;
    justify-content: center;
    justify-self: center;
    color: #005640;
}
.subTitle {
    letter-spacing: 0.2rem;
}
.fs-4, .f-small, .fs-5, .fs-3, .f-small {
    letter-spacing: 0.025rem;
}
.align {
    align-self: center;
}
.loseBox {
    justify-self: center;
}
.w-75 {
    width: 60% !important;
}
.fs-2 {
    font-size: 48px !important;
}
.fs-1 {
    font-size: 88px !important;
}
.bottles {
    width: 100%;
}
.w-50 {
    width: 60% !important;
}
.logo {
    width: 150px;
}
.subTitle {
    font-size: 60px;
    line-height: 50px;
}
.legalTitle {
    color:#fdf9d5;
    font-size: 75px;
}
.formDiv {
    background-color:#005640;
    border-color:#88ad85 !important;
    color: white !important;
    border-radius: 37px;
    justify-content: center;
    max-width: 650px;
}
input:focus, input:active, select:focus, select:active {
    background-color:#005640 !important;
    outline: none !important;
  box-shadow: none !important;
  border-radius: 0px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #005640;
    border-radius: 0px;
}
.transparent {
    background-color: transparent !important;
    border: none !important;
}
.buttons {
    border-radius: 15px;
  background-color: rgb(255, 250, 194);
  color: #005640;
}
.buttons:hover {
    border-radius: 15px;
  background-color: rgb(255, 250, 194);
  color: #005640;
}
.checkboxSize {
    width: 20px;
    height: 20px;
    border: rgb(255, 250, 194);
  }
  input[type="checkbox"]:focus, input[type="checkbox"]:active
  {
    background-color:#005640 !important;
  }
  .form-check-input[type=checkbox] {
    border-radius: 50% !important;
    border: rgb(255, 250, 194) solid 3px;
    background-color:#005640;
  }
  .modal-colour {
    background-color:#8ad2b0;
    border-radius: 30px;
  }
  .modalBtn {
    border-radius: 15px;
  background-color: rgb(255, 250, 194);
  color: #005640;
  }
  .modalBtn:hover {
    border-radius: 15px;
  background-color: rgb(255, 250, 194);
  color: #005640;
  }
  .mobileHeadline, .mobileBottles {
    display: none;
  }
@media screen and (max-width: 1600px) {
    .bottlesImg {
        top: 300px;
    }
    .formDivPadding {
        padding-top: 650px;
    }
}
@media screen and (max-width: 1400px) {
    .bottlesImg {
        top: 375px;
    }
    .formDivPadding {
        padding-top: 550px;
    }
    .formDivPaddingSm {
        padding-top: 650px;
    }
}
@media screen and (max-width: 1200px) {
    .bottlesImg {
        top: 425px;
    }
    .formDivPadding {
        padding-top: 500px;
    }
    .formDivPaddingSm {
        padding-top: 550px;
    }
}
@media screen and (max-width: 1100px) {
    .bottlesImg {
        top: 475px;
    }
    .formDivPadding {
        padding-top: 450px;
    }
}
@media screen and (max-width: 1000px) {
    .bottlesImg {
        top: 500px;
    }
    .formDivPadding {
        padding-top: 420px;
    }
}
@media screen and (max-width: 900px) {
    .formDivPaddingSm {
        padding-top: 500px;
    }
    .winHeadline {
        width: 100%;
    }
    .w-75 {
    width: 80% !important;
}
    .shortTerms {
        text-align: center !important;
        display: flex;
        justify-content: center;
    justify-self: center;
    }
}
@media screen and (max-width: 800px) {
    .formDivPadding {
        padding-top: 350px;
    }
    .formDivPaddingSm {
        padding-top: 400px;
    }
}
@media screen and (max-width: 650px) {
    .bottlesImg {
        top: 550px;
    }
    .formDivPadding {
        padding-top: 300px;
    }
}
@media screen and (max-width: 600px) {
    .imgDivSm {
        top: 300px !important;
    }
        .formDivPaddingSm {
        padding-top: 500px;
        }

.legal {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0px !important;
justify-items: center;
text-align: center;
}

.div1 { grid-area: 1 / 1 / 2 / 3; 
padding-left: 40px !important;}
.div2 { grid-area: 1 / 2 / 2 / 4;
padding-right: 40px !important; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 2 / 3 / 3 / 4; }
.div6 { grid-area: 3 / 1 / 3 / 4; 
    margin-top: 10px;
}




    .w-50 {
        width: 90% !important;
    }
    .bottlesImg {
        top: 500px;
    }
    .formDivPadding {
        padding-top: 450px;
    }
    .subtext {
        padding: 0px !important;
        padding-top: 1rem !important;
    }
    .mobileLogo {
        padding-bottom: 0px !important;
    }
    .w-75 {
    width: 90% !important;
}
      .mobileHeadline, .mobileBottles {
    display: block;
  }
  .headline, .desktopBottles {
    display: none;
  }
.fs-1 {
    font-size: 65px !important;
}
.formPadding {
    padding: 30px !important;
}
}
@media screen and (max-width: 500px) {
    .bottlesImg {
        top: 550px;
    }
    .formDivPadding {
        padding-top: 400px;
    }
     .imgDivSm {
        top: 300px !important;
    }
        .formDivPaddingSm {
        padding-top: 400px;
        }
}
@media screen and (max-width: 450px) {
    .bottlesImg {
        top: 600px;
    }
    .formDivPadding {
        padding-top: 320px;
    }
    .imgDivSm {
        top: 330px !important;
    }
        .formDivPaddingSm {
        padding-top: 370px;
        }
    
}
@media screen and (max-width: 375px) {
.bottlesImg {
        top: 655px;
    }
    .formDivPadding {
        padding-top: 300px;
    }
    .imgDivSm {
        top: 375px !important;
    }
        .formDivPaddingSm {
        padding-top: 320px;
        }
}
@media screen and (max-width: 350px) {
.mobileHeadline {
        width: 100%;
    }
}