@media (max-width: 991px)
{    img {
    width: 50px;
    aspect-ratio: auto 50 / 30;
    height: 30px;
}
    h1{
        font-size: 14px;
    }
    html{
            font-size: 18%;
    } 
    .header{
        padding: -2rem;
    }
    section{
        padding: 2rem;
    }
    .hero{
        padding: 2rem;   
    }
    footer{
        padding: 2rem;
        margin: -1%;
    }  html 
    {
        width: 55%;
    }
    #menu-btn
    {
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 110%;
        right: -110%;
        width: 30rem;
        box-shadow: #000000;
        border-radius: .5rem;
        background: #fff;
    }
  
    video 
    {
        margin-left: -376px;
        margin-top: 9px;

    }
    .header .navbar a
    {
        font-size: 1.5rem;
        margin: 2rem 2.5rem;
        display: block;
    }

    .header .contact 
    {
        width: 40%;
    }
    footer{
        padding: 2rem;
        width: 110%;
    }
    .headline
    {
        font-size: 2rem;
        text-align: center;
        width: 110%;
        margin-left: 1rem;
    }
    .headline p 
    {
        margin: 5rem;
        padding: 2rem;

    }
    .headding
    {
        font-size: 2rem;
        text-align: center;
        width: 130%;
       
    }
    .headding p 
    {
        margin: 5rem;
        padding: 2rem;
        margin-left: 6rem;  
    }
    #hero{
        background-image: url("home-image3.avif");
      height:100vh;
      width:110%;
      background-size: cover;
      background-position: center;
      padding: 0 80px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
#hero .content
{ 
  text-align: center;
  margin-top: 500px;
  margin-left: 2px;

}

#hero .content h1{
    color:#fdfdfd;
    font-size: 5rem;

}
#hero .content h1 span1{
    color: #cce7d0;
}

#hero .content h1 span{
    color:#c029e1;
    font-size: 5rem;
}
#hero .content p{
    font-size: 2rem;
    color: rgb(255, 255, 255);
    
}
.our-products
{
    background: url(whole-image2.jpg);
    width: 100%;
}
.our-products .box-container
{
  /* border: 2px solid;  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
  gap: 1.2rem;
}

.our-products .box-container .box
{
    border: 0px solid red;
    padding: 3rem 2rem;
    background: rgb(255, 255, 255);
    outline: var(--outline);
    outline-offset: -1rem;
    text-align: center;
    box-shadow: var(--box-shadow);
}

.our-products .box-container .box:hover
{
    box-shadow: 1px 1px 10px 4px purple;
}

.our-products .box-container .box img
{
  margin: 1rem 0;
  width: 13rem;
  height: 13rem;
}
.our-products .box-container .box h3
{
    font-size: 2.5rem;
    line-height: 1.8;
    color: var(--black);
}

.our-products .box-container .box p
{
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--light-color);
    padding: 1rem 0;
}
.gifting
{
    /* background: url(whole-image2.jpg); */
    margin: -1px;
    background-size: 130%;
}
.gifting .content h1 {
    /* text-align: center; */
    font-size: 27px;
    line-height: 64px;
    color: #fc0b0b;
    font-weight: 700;
    animation: progress 1s infinite alternate;
    margin: 39px;
}
}


@media (max-width: 768px)
{
    html 
    {
        width: 93%;
    }
    #menu-btn
    {
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 110%;
        right: -110%;
        width: 30rem;
        box-shadow: #000000;
        border-radius: .5rem;
        background: #fff;
    }
    .header .navbar a
    {
        font-size: 1.5rem;
        margin: 2rem 2.5rem;
        display: block;
    }
    .header .contact 
    {
        width: 40%;
    }
    footer{
        padding: 2rem;
        width: 110%;
    }
    .headline
    {
        font-size: 2rem;
        text-align: center;
        width: 110%;
        margin-left: 1rem;
    }
    .headline p 
    {
        margin: 5rem;
        padding: 2rem;

    }
    .headding
    {
        font-size: 2rem;
        text-align: center;
        width: 130%;
       
    }
    .headding p 
    {
        margin: 5rem;
        padding: 2rem;
        margin-left: 6rem;  
    }
    #hero{
        background-image: url("home-image3.avif");
      height:100vh;
      width:110%;
      background-size: cover;
      background-position: center;
      padding: 0 80px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
#hero .content
{ 
  text-align: center;
  margin-top: 500px;
  margin-left: 2px;

}

#hero .content h1{
    color:#fdfdfd;
    font-size: 5rem;

}
#hero .content h1 span1{
    color: #cce7d0;
}

#hero .content h1 span{
    color:#c029e1;
    font-size: 5rem;
}
#hero .content p{
    font-size: 2rem;
    color: rgb(255, 255, 255);
    
}
.our-products
{
    background: url(whole-image2.jpg);
    /* width: 100%; */
    background-size: 100% 100%;
}
.our-products .box-container
{
  /* border: 2px solid;  */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
  gap: 1.2rem;
}

.our-products .box-container .box
{
    border: 0px solid red;
    padding: 3rem 2rem;
    background: rgb(255, 255, 255);
    outline: var(--outline);
    outline-offset: -1rem;
    text-align: center;
    box-shadow: var(--box-shadow);
}

.our-products .box-container .box:hover
{
    box-shadow: 1px 1px 10px 4px purple;
}

.our-products .box-container .box img
{
  margin: 1rem 0;
  width: 13rem;
  height: 13rem;
}
.our-products .box-container .box h3
{
    font-size: 2.5rem;
    line-height: 1.8;
    color: var(--black);
}

.our-products .box-container .box p
{
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--light-color);
    padding: 1rem 0;
}
/* our-products */
video 
    {
        margin-left: -376px;
        margin-top: 9px;

    }
    .gifting
{
    /* background: url(whole-image2.jpg); */
    margin: -1px;
    background-size: 130%;
}
.gifting .content h1 {
    /* text-align: center; */
    font-size: 27px;
    line-height: 64px;
    color: #fc0b0b;
    font-weight: 700;
    animation: progress 1s infinite alternate;
    margin: 39px;
}

}







@media (max-width: 450px)
{
    html{
        display: flex;
        font-size: 17%;
    } 
    footer{
        padding: 1rem;
    } 
    .header{
        font-size: 1.5rem;
    }
    
    .headline
    {
        font-size: 2rem;
    }
    #hero{
        background-image: url("home-image3.avif");
        background-size: 100% 100%;
      height:90vh;
      width:100%;
      background-size: cover;
      background-position: center;
      padding: 0 80px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
    #hero .content
{ 
  text-align: center;
  margin-top: 200px;
  margin-left: 1px;

}

#hero .content h1{
    color:#fdfdfd;
    font-size: 1rem;

}
#hero .content h1 span1{
    color: #cce7d0;
}

#hero .content h1 span{
    color:#c029e1;
    font-size: 1rem;
}
#hero .content p{
    font-size: 1rem;
    color: rgb(255, 255, 255);
    margin-bottom: 200rem;
}
.gifting .content h4 {
    color: rgb(255, 255, 255);
    line-height: 1.8;
    margin: 10px;
    padding: 0px;
}
h1{
    display: flex;
    font-size:13px;
}  
footer{

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #1a1a1a;
}

footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color:#cdd4f8;
 
}
footer .logo{
    margin-bottom: 4px;
}

footer .col h3{
    margin-left:2px ;
}

footer h3{
    font-size: 20px;
    padding-bottom: 20px;
}

footer p{
    font-size: 13px;
    
    
}
footer a{
    font-size: 13px;
    text-decoration: none;
    color: #fbfbfb;
    margin-bottom: 10px;
}
footer .follow {
    margin-top: 20px;
}

footer .icon a{
    color:#4df4ac;
    padding-right: 4px;
    cursor: pointer;
    font-size: 35px;
    margin: 4px;
}

footer .icon a:hover,
footer a:hover{
    color:#e74a4a
}

.icon{
    display: flex;
    
}
video 
    {
        margin-left: 6px;
        margin-top: 9px;

    }
.gifting
{
    /* background: url(whole-image2.jpg); */
    margin: -1px;
    background-size: 130%;
}
.gifting .content h1 {
    /* text-align: center; */
    font-size: 27px;
    line-height: 64px;
    color: #fc0b0b;
    font-weight: 700;
    animation: progress 1s infinite alternate;
    margin: 39px;
}
}