@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan' , sans-serif;

}

  h1 
    { 
        font-size:50px;
        line-height: 64px;
        color: #222

    }

    h2
     {
        font-size:46px;
        line-height: 54px;
        color: #222

     }
     h4
     {
        font-size: 20px;
        color: #222

     }
     h6
     {
        font-weight: 700;
        font-size: 12px;

     }

     p
     {
        font-size: 16px;
        color: #465b52;
        margin: 15px 0 20px 0;
     }

     .section-p1 { padding: 40px 80px;}
     .section-m1 { margin: 40px 0;}


     body {

        width: 100%;
     }



     #header
     {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 80px;
        background-color: #FFDFEC;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
        z-index: 999;
    
        top: 0;
        left: 0;


     }



     #navbar
     {
        display: flex;
        align-items: center;
        justify-content: center;


     }
     #navbar li {
        list-style: none;
        padding: 0 20px;
        position: relative;
     }

     #navbar li a {
        text-decoration: none;
        font-size: 29px;
        font-weight: 600;
        color: #FF4A96;
        transition: 0.3s ease;
     }
     #navbar li a:hover,
     #navbar li a.active {
        color: #800036;

     }

     #navbar li a.active::after,
     #navbar li a:hover::after{
        content:"" ;
        width: 30%;
        height: 2px;
        background-color: #800036;
        position: absolute;
        bottom: -4px;
        left: 20px;
     }

     #mobile{
        display: none;
        align-items: center;
    }

    #close {
        display: none;
    }

     #hero{
        background-color:#FFDFEC ;
        padding: 0 80px;
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    
        

     }

     #hero h4{

        padding-bottom: 15px;

     }

    
     
     h1 {
       transition: color 0.5s ease;
    }



     #hero button{
        
        background-color: transparent;
        color: #FF4A96;
        border: 0;
        background-repeat: no-repeat;
        cursor: pointer;
        font-weight: 700;
        font-size: 15px;
      
     }



     #product1 {
        background-color: #FFDFEC;

        text-align: center;
     }

     #product1 .pro-container{
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        flex-wrap: wrap;
     }
     #product1 .pro {
        width: 20.5%;
        min-width: 250px;
        padding: 10px 12px;
        border: 1px solid #FF4A96;
        border-radius: 30px;
        cursor: pointer;
        box-shadow: 20px 20px 30px rgba(179, 34, 34, 0.582), 0.09);
        margin: 15px 0;
        transition: 0.2s ease;
        position: relative;
     }

     #product1 .pro:hover{
        box-shadow: 20px 20px 30px rgba(14, 13, 13, 0.212);
     }

     #product1 .pro img {

        width: 100%;
        border-radius: 25px;
     }

     #product1 .pro .des {
        text-align: start;
        padding: 10px 0;
     }
     #product1 .pro .des h5 {
        padding-top: 7px;
        font-size: 14px;
     }
     #product1 .pro .des h4 {
        padding-top: 7px;
        font-size: 15px;
        font-weight: 700;
        color: #FF4A96
     }
     #product1 .pro  .cart{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50px;
        background-color: #9e315d3b;
        font-weight: 500;
        color:#800036;
        border: 1px solid #9e315d46;
        position: absolute;
        bottom: 20px;
        right: 10px;
     }

     footer {
        display: flex;
        flex-wrap: wrap ;
        justify-content: space-between;
     }

     footer .col {
        display: flex;
        flex-direction: column;
       align-items: flex-start;
       margin-bottom: 20px;
     }

     footer .logo {
        margin-bottom: 30px;
     }
     footer h4{
        font-size: 14px;
        padding-bottom: 20px;
     }

     footer p{
        font-size: 13px;
       margin: 0 0 8px 0;
     }
     footer .follow {
        margin: 20px;
     }

     footer .follow i {
        color: #FF4A96;
        padding-right: 4px;
        cursor: pointer;
     }

     footer .follow i:hover{
        color: rgb(134, 6, 57);
     }

     footer .copyright{
        width: 100%;
        text-align: center
     }







     @media (max-width:477px){

        #header {
           
            padding: 5px 10px;
            background-color: #FFDFEC;
           
        }

        h2 {
            font-size: 32px;
           
        }
        h1 {
            font-size: 38px;
           
        }

        #hero {
            background-color: #FFDFEC;
            padding: 0 20px;
            background-position:55%;
        }

        #product1 .pro {
            width: 100%;
           
        }
        

        #navbar {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            position: fixed;
           
            top: 0;
            right: -200px;
            height: 100vh;
            width: 200px;
            background-color: #FFDFEC;
            box-shadow: 0 40px 60px rgb(0, 0, 0 , 0.01);
            padding: 80px 0 0 10px;
            transition: 0.3s;
        }

        #navbar.active{
            right: 0px;
        }

        #navbar li {
            margin-bottom: 25px;
            
        }
        #mobile{
            display: flex;
            align-items: center;
        }
        #mobile i {
            color: #222;
            font-size: 20px;
            padding-left: 18px;
        }
        #close{
            display: initial;
            position: absolute;
            top: 30px;
            left: 30px;
            color: #222;
            font-size: 24px;
        }

      

        
     }