@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Margarine&family=Roboto:ital,wght@0,100..900;1,100..900&family=Satisfy&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}


@keyframes flame {
  0% {
    text-shadow: 0 0 5px rgba(255, 195, 36, 0.1),
                 0 -5px 10px rgba(255, 195, 36, 0.1),
                 0 -5px 20px rgba(255, 195, 36, 0.2),
                 0 -5px 30px rgba(255, 195, 36, 0.3),
                 0 -5px 40px rgba(255, 195, 36, 0.4),
                 0 -5px 50px rgba(255, 195, 36, 0.5),
                 0 -5px 60px rgba(255, 195, 36, 0.6),
                 0 -5px 70px rgba(255, 195, 36, 0.7),
                 0 -5px 80px rgba(255, 195, 36, 0.8);
  }
  25% {
    text-shadow: 0 0 5px rgba(255, 195, 36, 0.2),
                 0 -5px 10px rgba(255, 195, 36, 0.3),
                 0 -5px 15px rgba(255, 195, 36, 0.4),
                 0 -5px 20px rgba(255, 195, 36, 0.5),
                 0 -5px 30px rgba(255, 195, 36, 0.6),
                 0 -5px 40px rgba(255, 195, 36, 0.7),
                 0 -5px 50px rgba(255, 195, 36, 0.8);
  }
  50% {
    text-shadow: 0 0 5px rgba(255, 195, 36, 0.3),
                 0 -5px 15px rgba(255, 195, 36, 0.4),
                 0 -5px 20px rgba(255, 195, 36, 0.5),
                 0 -5px 30px rgba(255, 195, 36, 0.6),
                 0 -5px 40px rgba(255, 195, 36, 0.7),
                 0 -5px 45px rgba(255, 195, 36, 0.8),
                 0 -5px 60px rgba(255, 195, 36, 0.6);
  }
  75% {
    text-shadow: 0 0 5px rgba(255, 195, 36, 0.4),
                 0 -5px 20px rgba(255, 195, 36, 0.5),
                 0 -5px 30px rgba(255, 195, 36, 0.6),
                 0 -5px 40px rgba(255, 195, 36, 0.7),
                 0 -5px 45px rgba(255, 195, 36, 0.8),
                 0 -5px 60px rgba(255, 195, 36, 0.6),
                 0 -5px 80px rgba(255, 195, 36, 0.2);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 195, 36, 0.1),
                 0 -5px 10px rgba(255, 195, 36, 0.2),
                 0 -5px 20px rgba(255, 195, 36, 0.3),
                 0 -5px 30px rgba(255, 195, 36, 0.4),
                 0 -5px 40px rgba(255, 195, 36, 0.5),
                 0 -5px 45px rgba(255, 195, 36, 0.6),
                 0 -5px 60px rgba(255, 195, 36, 0.7),
                 0 -5px 80px rgba(255, 195, 36, 0.2);
  }
}





:root{
    --ff-primary : "Roboto",sans-serif;
    --ff-secondary :"Inter" ,sans-serif;
    --ff-design :"Satisfy" ,cursive;
    --ff-brand :"Margarine",sans-serif;

   --clr-white: #fff;
    --clr-dark: #2c2c2c;       /* Deep neutral for text */
    --clr-grey-1: #3a3a3a;     /* Dark grey for headings */
    --clr-grey-2: #7a7a7a;     /* Medium grey for subtext */
    --clr-grey-3: #f9f9f9;     /* Light background shade */
    
    /* Mango Theme */
    --clr-primary: #FFC324;        /* Mango Yellow (main brand color) */
    --clr-primary-light: #FFD768;  /* Lighter Mango for highlights */
    --clr-secondary: #FF8C42;  
    --transition: all 0.5s linear;
     
}

body{
    font-size: 0.5rem;
    background-color: white;
    color:var(--clr-grey-1);
    font-family: var(--ff-primary);
    line-height: 1.5;
}


/*--------------Anchor tag ---------------*/

.a-btn{
    background-color: var(--clr-primary);
    color:white;
    padding: 0.375rem 0.75rem;
    letter-spacing: 0.5px;
    display: inline-block;
    border-radius: 1000px;
    font-weight: 400;
    cursor: pointer;
    font-size: 0.875rem;
    transition: var(--transition);
}

.a-btn:hover{
    background-color: var(--clr-white);
    color:var(--clr-primary);
    border:1px double brown ;

}

.clearfix::after,
.clearfix::before {
    content:"";
    clear:both;
    display:table;
}





a{
    text-decoration: none;
}

img{
    width:100%;
    display: block;
}
h1,h2,h3,h4{
    text-transform: capitalize;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}
.nav-btn svg{
        fill:var(--clr-primary);
        position: fixed;
        top:5%;
        left:5%;
        cursor: pointer;
        z-index:1;
    }

 #nav-check{
    display: none;
 }


   #nav-check:checked~.navbar{
    transform:translateX(0);
   }  
       

    .navbar{
        position: fixed;

            background: url("about.jpg") ;
            background-size: cover;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        transform:translateX(-100%);
        transition:var(--transition);
        z-index:3;
      

    }


 
    .navbar h3{
        padding:1rem;
        color:transparent;
        background-image: linear-gradient(180deg,var(--clr-primary)25%,var(--clr-secondary));
        background-clip: text;
        font-size: 1.5rem;
        text-align: center;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: -1rem;


    }

    .navbar img {
        width:100px;
        margin:0 auto;

    }

    .navbar-header{
        position: relative;
    }

    .nav-close{
        position: absolute;
        right:0;
        top: 5px;
        
    }

    .nav-close svg{
        fill: var(--clr-dark);
        cursor: pointer;
    }
    
    .nav-close:hover svg{
        fill: var(--clr-white);
        transition: var(--transition);
    }

    .nav-item{
        list-style-type:none;

    }
 
     .nav-link{
        display: block;
        color:var(--clr-white);
        text-transform: uppercase;
        font-size: 1.2rem;
        padding: 0.75rem 1rem;
        letter-spacing: 0.5px;
     }

     .nav-link:hover{
        transition: var(--transition);
        background-color: var(--clr-primary-light);
        padding-left: 1.5rem;
        border-left: 0.5rem solid yellow;
     }

     @media screen and (min-width:768px) {
        .navbar{
            width:35%;
            max-width: 25rem;
        }
     }

     .header{
        min-height:100vh;
        background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.6)),url("j1.jpg") center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;

    }

     .banner{
        text-align: center;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

     .banner h2{
        font-family: var(--ff-design);
        color:transparent;
        background-image: linear-gradient(180deg,var(--clr-primary) , var(--clr-secondary));
        background-clip: text;
        font-size: 1rem;

    }

    .banner h1{
        font-family: var(--ff-brand);
        color:white;
        margin-top:1.2rem;
        margin-bottom: 1.6rem;
        font: weight 400px;
        text-shadow: 2px 5px 5px var(--clr-primary);
        animation: flame 1s infinite;
    }




      .content-divider{
        height: 0.5rem;
        background-image: linear-gradient(to left, var(--clr-primary), var(--clr-secondary) , var(--clr-primary));
      }








    .features{
        background-color: var(--clr-grey-3);
        cursor: pointer;
    }
    
    .feature{
        padding:2.5rem 0;
        text-align: center;
        transition:var(--transition);
    }
    
    .feature svg{
        transition:var(--transition);
    }

    .feature titel{
        text-transform: uppercase;

    }

    .feature text{
        color:var(--clr-grey-2);
        max-width: 17rem;
        margin:0 auto;
    }

    .feature:hover{
        background-color: var(--clr-white);
        box-shadow: 0 2px var(--clr-primary);
    }

    .feature:hover .feature:titel{
        color:var(--clr-primary);

    }
    

    .feature:hover .feature-icon svg{

        fill :var(--clr-primary);
        transform:translateY(-5px);
    }


    @media screen and (min-width:576px) {
        .feature{
            width:50%;
            float:left;
        }
    }
   
    @media screen and (min-width:1200px) {
        .feature{
            width:25%;
            float:left;
        }
    }










    .section-center{
        padding:4rem 0;
        width:85vw;
        margin:0 auto;
        max-width: 1170px;

    }

    .section-title h3{
        font-family: var(--ff-design);
        color:var(--clr-primary);
        font-size: 2rem;
    }

   .section-title h2{
          font-family: var(--ff-brand);
          color: #e9b949;
          margin-bottom:0.8rem;


   }

    .section-title{
        margin-bottom:1rem;
        font-size: 0.8rem;
    }

    
     @media screen and(min-width:992px) {
        .section-center{
            width:95%;
            padding:rem 1rem;
        }
     }



             /*About area */





    .about-img,.about-info{
        padding:2rem 0;
    }
    .about-picture-container{
        max-width: 30rem;
        box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        border-radius:  4px;
        overflow: hidden;
        background-color: var(--clr-primary);

    }

    .about-picture{
        transition:var(--transition);

    }
    .about-picture-container:hover .about-picture{
       opacity: 0.5;
    }

    .about-text{
        max-width: 26rem;
        color: var(--clr-grey-2);
        margin-bottom: 1rem;
        font-size: 0.8rem;
    }

    @media screen and (min-width:992px){
        .about-img,.about-info{
            float:left;
            width:50%;
        }
        .about-info{
            padding: left 2rem;
        }
    }




    /* products area */


    .products{
        background-color: var(--clr-grey-3);

    }

    .products .product-info{
        padding:2rem 0;
    }

    .product-title{
        font-size: 1.02rem;

    }

    .product-price{
        color: var(--clr-primary);
        font-size: 1.01rem;

    }

       .product-text{
        color: var(--clr-grey-2);
        max-width: 26rem;
    }


    @media screen and (min-width:768px){
       .product {
        float:left;
        width: 50%;
        padding-right: 2rem;
       }
        }


        @media screen and (min-width:992px){
                .product{
                    width:33.33%;

                }

        }

        
        @media screen and (min-width:1200px){
                .product-info{
                    float:left;
                    width:30%;

                }
                .product-collections{
                    float: left;
                    width:70%;

                }

                .product{
                    margin:0;
                    padding:0 1rem;
                     
                }

        }




    .product-img{
        border-radius: 5px;
        height: 17rem;
        object-fit: cover;
        margin-bottom: 2rem;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
        transition: var(--transition);
        
    }

    .product-img:hover{
        box-shadow: 0px 6px 3px rgba(0,0,0,0.3);
        transform: translateY(-2px)
    }



    /* contact us */

    .contact{
        background-color: var(--clr-grey-3);
    }

    .contact-form,.contact-info{
        margin: 1rem 0;

    }

    .contact-title{
        font-weight: 500;
        display: flex;
        align-items: center;
        margin-bottom: -0.05rem;


    }
 
    .contact-text ,.contact-title svg{
        color: var(--clr-grey-2);
        fill: var(--clr-grey-1);

    }

    .contact-item{
        margin-bottom: 1.25rem;
    }

    .contact-form{
        background-color: white;
        padding: 1.3rem;
        max-width: 35rem;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     
    }

    .contact-form{
        font-family: var(--ff-design);
        text-align: center;
        color: var(--clr-primary);
        font-size: 1.74rem;

    }



    .form-group{
        height: 35px;
        margin-bottom: 40px;
        position: relative;


    }

    .form-control{
        width: 100%;
        height: 100%;
        background: none;
        border: 3px solid var(--clr-grey-2);
        outline:none;
        padding:16px;
        border-radius: 3px ;
        position: absolute;
        top:0;
        left:0;
        z-index: 1;

    }

    textarea.form-control{
        height: 100px;
    }

    .form-label{
        position: absolute;
        left: 7px;
        top:7px;
        color: var(--clr-grey-2);
        background-color:var(--clr-white);
        padding: 0 6px;
        font-size: 14px;
        transition: var(--transition);

    }

    .form-control:focus + .form-label{
        top: -10px;
        color: var(--clr-primary);
        z-index: 3;
    }

    .form-control:focus{
        border:1px solid var(--clr-primary)
    }

    .form-control:not(:focus):valid+label{
        top: -10px;
        z-index: 6;
    }

    .submit-btn{
        padding: 0.7rem 1rem;
        margin-top: 3.5rem;

    }

    @media screen and (min-width:992px) {
        .contact-form,.contact-info{
            float: left;
            width: 50%;
        }
    }

 
    .footer{
         background-color: var(--clr-dark);
         text-align: center;
    }

    .social-icon svg{
        height:32px;
        width:32px;
        fill:var(--clr-white);
        margin-right: 1rem;
        transition: var(--transition);
    }


    .social-icon:hover svg{
        fill:var(--clr-primary);

    }

    .footer-text{
            color:var(--clr-white);
            margin-top:1.25rem;
            text-transform: capitalize;
            font-weight: 400;
    }

    .company{
        color: var(--clr-primary);
    }

    .create{
        padding-bottom: 0.8rem;
        font-family: var(--ff-design);
        color: aliceblue;
    }

    .contact-info{
        font-size: 1rem;
    }

    .features{
          font-size: .8rem;
    }


    .banner h2{
        font-size: 1.9rem;
        padding-bottom: 6px;;
    }
    .banner h1{
        font-size: 2.6rem;
        padding-bottom: 6px;

    }

    .footer{
        background-color: #554825;
    }

.navbar h3{
    font-family: var(--ff-design);
    padding-bottom: 2rem;
}