*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
  background:#fff;
}
.popup{
    font-family: "Inter", sans-serif;
    background-color: #ffffff;
    width: 470px;
    padding: 3rem 4rem;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 110%;
    border-radius: .8rem;
    display: none;
    text-align: left;
    z-index: 4;
}
.popup h2{
  font-weight: 800;
  font-size:4.8rem ;
}
.popup button{
    display: block;
    margin:  0 0 2rem auto;
    background-color: transparent;
    color: #000;
    font-weight: bold;
    font-size: 3.2rem;
    border: none;
    outline: none;
    cursor: pointer;
}
.popup p{
    font-size: 3.6rem;
    margin: 2rem 0;
    line-height: 4rem;
}
/* sticky nav code */
.associates-nav{
  position: fixed;
  top: 0;
  width: 100vw;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  background-color: #111111;
  z-index: 3;
padding: 1.3rem 3rem;
}
.menu{
  font-family: "Inter", sans-serif;
  font-size: 3.2rem;
}
.associates-nav li a{
  font-family: "Inter", sans-serif;
  color: #fff;
  text-decoration: none;
}
.associates-nav li:first-child{
  font-weight: bold;
}
.associates-nav li:nth-of-type(2) {
  font-weight: 300;
  font-style: italic;
}
h1{
  font-family: "Inria Serif", serif;
  font-size: 12.8rem ;
  font-weight: bold;
  color: #000000;
  text-transform: uppercase;
}

.first-flex>div>a{
    text-decoration: underline;
    margin-right:2rem;
    color: #111111;
    padding: .5rem 0; 
}
.modal-images{
  display: none;
}

.fieldset{
  text-align: left;
}
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    border: none;
    outline: none;
    background: none;
    width: 220px;
    border-bottom: .1rem solid #ccc;
    padding-bottom: 1rem; 
    margin-bottom: 1rem; 
  }
  input:focus:invalid {
    padding: 1rem;
    border: .1rem solid red; 
  }

input:focus:invalid + .invalid {
    display: block;
    text-align: left;    
}
.invalid {
  display: none;
  color: red;
}

/* ?privacy policy */
.privacy-policy{
  font-family: "Inter", sans-serif;
  color: #ffffff;
   background: url(../img/privacy-moon-1920.webp)  center / cover no-repeat fixed ;
}
.privacy-policy p{
  margin-left: 1rem;
    text-align: left;
    font-size: 2.4rem;
}

.sticky-button{
    position: fixed;
    right: -10%;
    bottom: 2%;
    transform: translateX(-50%);
    background-color: #6178A6;
    padding: 1rem;
    border: .2rem solid #ffffff;
    border-radius: 1rem ;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: bold;
}

  input[type=submit] {
    padding: 1rem 2rem;
    margin: 2rem auto 0 auto;
    background-color: #6178A6;
    border: none;
    border-radius: .5rem;
    color: #ffffff ;
    
}
.modal-end p:nth-of-type(1) , .modal-end a{
  font-size: 2.4rem;
  }
.modal-end p:nth-of-type(2){
font-weight: bold;
font-size: 3.2rem;
}
.modal-end a{
  color: black;
  text-decoration: underline;
}
.modal-end a:nth-of-type(1){
  margin-right: 2rem;
}
  .sale-banner{
    background-color: #00000040;
    margin-bottom: 2rem;
    color: #fff;
    padding-bottom: 2rem;
   }
   .text{
    padding: 0 3rem;
    font-family: "Inria Sans", sans-serif;
     font-style: normal;
   }
   .sale-banner .text p:first-of-type{
    text-transform: uppercase;
    font-size: 20rem;
   }
   .sale-banner .text p:nth-of-type(2) {
    font-size: 4.8rem;
    text-align: center;
    line-height: 6rem;
   }
.smiles div:nth-of-type(1){
  margin-bottom: -1rem;
}
   .flex-container , .associates-nav{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.flexed-nav{
  background-color: #fff;
 padding-top: 9rem;
  padding-bottom: 2rem;
  flex-shrink: 0;
}

.menu {
    flex-direction: column;
}
header section {
    padding: 1rem;
}

.toggle-btn {
    background-color: #ffffff00;
    border: none;
    outline: none;
}
.toggle-btn:hover {
    cursor: pointer;
}
ul a {
    text-transform: uppercase;
    padding: 1rem;
    display: block;
    text-decoration: none;
    color: #000;
}

.menu {
    position: absolute;
    top: 37%;
    left:60%;
    background-color: #161a17db;
    width: 200px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out ;
}

.dropdown {
    margin-left: 3rem;
}

li span {
    display: none;
}

.show-nav {
    max-height: 100vh;
}

.scroll-wrapper{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 5rem;
  overflow-x: scroll;
  width: 320px;
  margin: 0 auto;
}
section{
  text-align: left;
}
.card section{
  margin: 0 auto;
  width: 150px;
}
.card{
 margin: 2rem 1rem;
 font-family: "Inter", sans-serif;
}
.card h3{
  padding-top: 1rem;
  font-size: 1.6rem;
}
.card img{
  width: 100%;
}
.card-deck{
  margin-bottom: 4rem;
}
main h2 ,.shop-division p{
  font-family: "Inria Sans", sans-serif;
  font-size: 4.8rem;
  text-align: center;
  line-height: 6rem;
}

.scroll-wrapper::-webkit-scrollbar{
  width: 0.2rem;
  height: 1rem;
  /* background-color: grey; */
  scrollbar-width: thin;

}
.scroll-wrapper::-webkit-scrollbar-thumb{
  width: 0.2rem;
  border-radius: 2rem;
  background-color: black;
  
}

/* shop by division.. */
 .smiles{
  padding-bottom: 3rem;
}

.card-deck-2 .card p{
  text-align: left;
  width: 7ch;
}

/* promo-grid styles */
.promo-grid {
  display: flex;
  flex-direction: column;
  padding-top:4rem;
}
.promo-grid button{
  width: 25rem;
  margin: 0 auto;
  padding: 1.6rem 1.3rem 1.5rem 2.0rem ;
  background-color:  #413F3F;
  color: #fff;
  border: none;
  font-weight: bold;
  text-align: left;
}

.promo-grid button {
  margin-bottom: 1rem; 
}

/* footer-mini */
footer h4,
footer ul {
  text-align: center;
  font-size: 2.4rem;
}
footer h4{
  font-weight: bolder;
}
footer ul a{
  text-decoration: none;
  text-transform: capitalize;
  color: #000000;
  padding: 0rem;
  line-height: 3rem;
}
footer {
  font-family: "Inter", sans-serif;
  margin-top: 3rem;
  padding-top: 3rem;
}
footer section{
  margin-bottom: 4rem;
}

/* sub-footer */
.sub-footer {
  display: flex;
  justify-content: center; 
  align-items: center; 
  background-color: #000000;
  padding: 2rem ;
  color: #fff;
  font-size: 1.2rem;
}
.sub-footer a {
  text-decoration: none;
  margin-right: 1rem; 
  color: #fff;
  margin-left: 1rem;
}
.bg-img {
  background: url(../img/fashon-banner.webp) center / cover no-repeat ;
  color: #ffffff;
  width: 100%;
height: 270px;

}
/* MEDIA QUERIES */
@media screen and (min-width:520px){
  .privacy-policy p{
    width: 30ch;
  }
}
@media screen and (min-width:530px){
  .sticky-button{
  bottom: 5%;
  padding: 2rem 5rem ;
  }
}

@media screen and (min-width: 560px) {

  .fieldset{
    text-align: left;
  }
  }
    @media screen and (min-width: 620px) {
      .sticky-button {
       margin-left:5rem;
      }
    
    }
    @media screen and (min-width: 700px) {
      .sticky-button {
       margin-left:7rem;
      }
     
    }
    @media screen and (min-width: 800px) {
      .sticky-button {
       margin-left:7rem;
      }
    }
    @media screen and (min-width: 1000px) {
      
      input[type="text"],
      input[type="email"],
      input[type="password"] {
      width: 520px;
    } 
   
      .sticky-button {
       margin-left:15rem;
      }
      .modal-images{
        display: block;
      }
      .popup{
      top: 65%;
      width: 100%;
  
      }
      .first-flex{
        display: flex;
        flex-direction: row;
        gap: 5rem;
        padding: 0 10px;
        justify-content: space-around;
      } 
    .modal-images img {
      width: 100%;
    }
}
.big-img{
  display: none;
}
@media screen and (min-width: 520px) {
  .small-img{
    display: none;
  }
  .big-img{
    display: block;
  }
 header {
          background-color: #fff;
          width: 100%;
          margin: 0 auto;
          border-radius: 4rem;    
  }
  .flexed-nav, .associates-nav{
    display: flex;
    justify-content: space-around;
    align-items: center ;
  }
  
  .menu {
    flex-direction: row;
  }
  .toggle-btn {
          display: none;
      }
  .menu { 
          position: static;  
          width: auto;
          max-height: unset;
          overflow: visible;
          background-color: #fff;
          margin-right: 4rem;
      }
  .menu ul.flex-container {
          flex-direction: row;
      }
  .flex-container, .menu {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
  li span {
          display: inline-block;
      }
  .menu li  {
      position: relative;
  }
  }
  
@media screen and (min-width: 520px) {
  main h2{
    text-align: left;
  }
  .foot-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: row;
  }



}
/* smiles */
@media screen and (min-width: 520px) {
  .smiles ,  .card-deck-2{
   display: flex;
   flex-direction: row;
 }
 .smiles{
   margin-top: 2rem;
 }
 .card-deck-2 .card:last-child {
   order: -1; 
 }
 h2 {
   text-align: left;
 }
 }
 
 @media screen and (min-width: 650px) {
   .card-deck-2{
     min-width: 600px;
     margin: 0 auto;
   }
 }
@media screen and (min-width: 1024px) {
  .associates-nav{
    width: 1000px;
  }
}
@media screen and (min-width:520px){
  .associates-nav{
    justify-content: left;
    width: 100%;
  }
.scroll-wrapper{
  width: 500px;
}
}

@media screen and (min-width:650px){
.bg-img{
position: absolute;
width: 100%;
height: 620px;
z-index: 1;
 }
 .text{
  position: relative;
  top: 22rem;
  left: 0;
  background-color: #80808082;
  padding: 3rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 2rem;
 }
 .sale-banner{
  margin-bottom: 38rem;
  
 }
 .scroll-wrapper{
  width: 680px;
 }
 .promo-grid{
  flex-direction: row;
  gap: 2rem;
 }
 .promo-grid button{
  width: 90rem;
}
}
@media screen and (min-width:820px){
  .scroll-wrapper{
    width: 820px;
   }
}
@media screen and (min-width:1200px){
.promo-grid{
 max-width: 1024px;
 margin: 0 auto;
}
  .foot-container {
    max-width: 1024px;
    margin: 0 auto;
  }
  .foot-container section:nth-of-type(1) ul {
    text-align: left;
  }
  .foot-container section:nth-of-type(3) ul {
    text-align: right;
  }
    .card-deck-2 {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  
  
}
@media screen and (min-width:1600px){
  .promo-grid{
   max-width: 1440px;
   margin: 0 auto;
  }
  }