* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
      scroll-behavior: smooth;
      font-family: cursive;
      margin: 0;
      padding: 0;
      background-color: #fefefe;
      color: #222;
      
    }
    header {
      color: white;
      padding: 0.5rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position:fixed;
      width: 100%;
      z-index: 1000;
    }
    .kimex-logo {
     transition:transform 0.3s ease; 
    }
    .kimex-logo:hover {
      transform: scale(1.1);
    }

    .isnotscrolled{
      background-color: transparent;
      box-shadow: none;
    }
    .isscrolled{
      background-color: #fcfcfc;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    nav a {
      color: rgb(28, 27, 27);
      text-decoration: none;
      margin: 0 1rem;
      font-weight: 600;
      
    }
    nav a:hover {
      color: #ddd;
      text-decoration: underline;
    }
    .hero {
      position: relative;
      height:100px;
      padding: 5rem 2rem;
      padding-bottom: 0;
      text-align: center;
      color: white;
      background-color: #ffffff;
      background-image: url(/static/hdrbackground.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height:max-content;
    }
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    .hero > * {
      color: #222;
    }
    .section {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: auto;
     
    }

    .box{
      position: absolute;
      padding: 20px;
      border: hidden;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      background-color: #f9f9f9;
      z-index: 10;
    }

    .flexed {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .flexed > span {
      flex: 1;
      margin: 2rem;
      min-width: 300px;
    }

    /* the pop shadow style */
    .pop-shadow{
      box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
      background-image: url(/static/comm-img.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      width: 500px;
      height: 400px;
      padding: 3rem;
    }
    .slider-container{
      max-width: 100%;
      overflow-x: hidden;
    }
    .slider{
      display:flex;
      width:100vw;
      box-sizing: border-box;
      animation: autoslideshow 30s infinite linear forwards;
    }
    .slider:hover {
      animation-play-state: paused;
    }
    .slider img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }
    .slider img:nth-child(1) {
      animation-delay: 0s;
    } 
    .productbox{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
      border-radius: 12px;
      padding: 10rem;
      width: 500px;
      background-color: #f9f9f9;
      margin: 1.5rem;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .productbox:hover{
      box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 12px, rgba(0, 0, 0, 0.23) 0px 6px 12px;
      background: linear-gradient(90deg, rgba(0,0,0,0) 20%, rgba(27, 27, 27, 0.804) 48%);
      background-size: cover;
      background-repeat: no-repeat;
      transform: scale(1.05);
      transition: transform 0.3s ease-in-out;
    }
    .products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    .product-card {
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 1rem;
      text-align: center;
    }
    .product-card img {
      max-width: 100%;
      border-radius: 8px;
    }


    .retail-outlets{
      display: flex;
      flex-direction: column;
      justify-content:space-around;
      flex-wrap: wrap;
      margin: auto;
    }
    .retail-outlets .outlet-list:first-child{
      background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.886) 60%, rgba(0,0,0,0.689) 20%), url(/static/kimexInchicore.png);
      background: linear-gradient(90deg, rgba(7, 7, 7, 0.886) 60%, rgba(0,0,0,0.689) 20%), url(/static/kimexInchicore.png);
      background-size: cover;
      background-position: center;
      color: white;
    }
    .retail-outlets .outlet-list:nth-child(even){
      background: -webkit-linear-gradient(90deg, rgba(7, 7, 7, 0.886) 60%, rgba(0,0,0,0.689) 20%), url(/static/kimex-Blanch.jpg);
      background: linear-gradient(90deg, rgba(7, 7, 7, 0.886) 60%, rgba(0, 0, 0, 0.689) 20%), url(/static/kimex-Blanch.jpg);
      background-size: cover;
      background-position: center;
      color: white;
    }
    .image-container{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 30%;
      
    }
    .retail-image{
      width: 83%;
      height: 80%;
      object-fit: cover;
      border-radius: 50px;
    }
    .outlet-info{
      padding: 1rem;
      text-align: justify;
    }
    .outlet-info h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .outlet-list{
      border-radius:100px;
      height:400px;
      width:95%;
      border:solid 1px #ddd;
      overflow: hidden;
      margin: 1rem auto;
      height: max-content;
      box-sizing: content-box;
      padding: 1rem;
    }
    .readMore {
      color: white;
      max-width: max-content;
      border:solid 1px #f5f5f5;
      border-radius: 20px;
      background-color: transparent;
      padding: 1rem 2rem;
    }
    .email-collection {
      background-color: transparent;
      padding-left: 6px;
      text-align: justify;
    }
    .email-collection > * {
      color: white;
    } 
    footer {
      background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 20%, rgba(7, 7, 7, 0.75) 48%), url(/static/footer-background.jpg);
      background: linear-gradient(90deg, rgba(0,0,0,0) 20%, rgba(27, 27, 27, 0.804) 48%), url(/static/footer-background.jpg);
      background-size: cover;
      background-position: center;
      color: black;
      text-align: center;
      padding: 2rem;
      height: 400px;
      display: flex;
      justify-content: right;
    }

    input[type="email"] {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-bottom: 1rem;
    }

    button {
      background-color: transparent;
      color: white;
      border: thin white solid;
      padding: 0.5rem 1rem;
      border-radius: 7px;
      cursor: pointer;
      animation: reduceButton 0.3s ease-in-out forwards;
    }

    button:hover {
      background-color: #ddd;
      color: black;
      animation: widenButton 0.3s ease-in-out forwards;
    }

    @keyframes widenButton {
      from{
        padding: 0.5rem 1rem;
      }
      to{
        padding: 0.5rem 4rem;
      }
    }

    @keyframes reduceButton {
      from{
        padding: 0.5rem 4rem;
      }
      to{
        padding: 0.5rem 1rem;
      }
      
    }

    @keyframes autoslideshow {
      from{transform: translate(-50px);}
      to{transform: translate(calc(-50% - 0.5rem));}
  } 

    @keyframes fadeIn{
      from{
        opacity: 0.2;
      }
      to{}
    }
  
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }
      nav a {
        margin: 0.5rem 0;
      }
      .hero h1 {
        font-size: 2rem;
      }
      .section {
        padding: 2rem 1rem;
      }
      .flexed > span {
        margin: 1rem 0;
      }
      .productbox {
        width: 100%;
        padding: 5rem;
      }
    }