/* Global Styles */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: white;
    background-color: black;
}

.spacing{
    padding: 0 5%;
}

.vertical-spacing{
    margin: 2% 0;
}

a{
    text-decoration: none;
}

/* Navbar */
.navbar{
    background-color: black !important;
}

.navbar-nav > li > a{
    color: white !important;
}

.logo{
    max-width: 300px;
    max-height: 150px;
}

.hero-img-container


/* About */
.hero{
    background-color: black;
    max-height: 100vh;
}

.hero-about{
    font-size: x-large;
}

.about-img-container{
    max-width: 1080px;
    max-height: 1080px;
}

.about-img{
    width: 100%;
    height: 100%;
}

.hero-about{
    padding-bottom: 100px;
}

.hero-social i{
    font-size: xx-large;
}

/* Type Cooking slider Text */
@keyframes infiniteScroll {
    from {transform: translateX(0)}
    to {transform: translateX(-50%)}
  }
  .infinite-scroll {
    width: 100%;
    overflow-x: hidden;
  }
  .horizontal-scrolling-items {
    display: flex;
    font-size: 28px;
    animation-name: infiniteScroll;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .horizontal-scrolling-items__item {
    white-space: nowrap;
  }

/* services and online cooking lessons */
.container-card{
    padding: 100px 0;
}

.text-card{
    color: white;
    font-size: x-large;
    text-align: center;
}

.single-card{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 25px;
}

.card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-img:hover {
    transform-origin: center;
    animation: scale 1200ms ease-in-out forwards;
  }
  @keyframes scale {
    to {
      transform: scale(1.2);
    }
  }
  
  /* Shop container */
    .shop-container{
    padding: 100px;
    border-radius: 25px;
    width: 100%;
background: #ad1d1d;
background: radial-gradient(circle, rgba(173, 29, 29, 1) 0%, rgba(66, 10, 10, 1) 40%, rgba(32, 30, 30, 1) 100%);
  }

  /* Masterclass online card */
  .contact-masterclass-card{
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background: rgb(32,30,30);
    background: linear-gradient(90deg, rgba(32,30,30,1) 0%, rgba(51,46,46,1) 29%, rgba(66,10,10,1) 71%, rgba(32,30,30,1) 100%);
    overflow: hidden;
    padding: 20px;
  }

  /* Contact */
  .contact-container{
    padding: 100px;
    border-radius: 25px;
    width: 100%;
    background: rgb(32,30,30);
    background: linear-gradient(90deg, rgba(32,30,30,1) 0%, rgba(51,46,46,1) 29%, rgba(66,10,10,1) 71%, rgba(32,30,30,1) 100%);
  }
  
  .contact-container h2,
  .contact-container p {
    text-align: center;
  }


  .contact-btn{
    color: white;
    font-size: x-large;
    text-align: center;
    border-radius: 25px;
    border: none !important;
    background-color: black;
    margin: 1.8% 0;
    padding: 10px 30px;
  }

  .contact-btn:hover{
    animation: scale 0.4s ease-in-out forwards;
  }
  @keyframes scale {
    to {
      transform: scale(1.1);
    }
  }




  /* Footer */
  footer{
    background-color: rgb(20, 20, 20);
    padding: 20px 0;
    color: white;
  }

/* Media Queries */

@media screen and (max-width: 1441px) {
    .contact-btn{
        margin: 2.8% 0;
      }
  }

@media screen and (max-width: 1025px) {
    h1{
        font-size: xx-large;
    }
    .hero-about{
        font-size: medium;
    }
    .hero-social i{
        font-size: large;
    }
    .contact-container{
        padding: 50px 30px;
      }
  }

  @media screen and (max-width: 769px) {
    h1{
        font-size: x-large;
    }
    .hero-about{
        font-size: medium;
    }
    .hero-social i{
        font-size: large;
    }

    .contact-container{
        padding: 30px;
        text-align: center;
      }
      .logo{
        max-width: 200px;
        max-height: 100px;
    }
  }