/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

html,body
{
    max-width:100vw;
    /* height: 100%; */
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
    /* overflow-x: hidden; 
    position:absolute; */
}
/* html{
     border:5px solid blue;
} */
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
overflow-x:hidden;
    /* border: 3px solid red; */
    /* position: fixed; */
    /* position: absolute; */
    max-width:100%;
    /* position:relative; */
}
.container{
    /* border:2px solid black;   */
    /* padding:10px; */
   /* width:100%; */
   overflow:hidden;
   position: relative;
}
.header{
    /* border:2px solid rgb(255, 179, 0); */
    width:100%;
    padding:.5em .5em;
}
.header-color-change{
    background: aliceblue;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    /* border:2px solid blue; */
    width:90%;
    margin:auto;
}
.site-title{
  /* border: 2px solid red; */
  margin-left: 2em;
  font-size:2.8em;
  font-weight:600;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
nav{
    /* border:2px solid magenta; */
    margin-right:2%;
    /* align-self: flex-end; */
    /* width:45%; */
    font-size: 1em;
}
nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
nav ul li{
  padding-left:2em ;
}
nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}
.responsive-nav ul{
 display: block;
}
.responsive-nav ul li {
    padding-left: 3.5em;
    padding-top:6px;
}
.responsive-nav ul li a{
    display:block;
    padding:.4em .4em;
}

/* GO AND DO IT IN JS */
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding: 4px 12px;
}
.hero{
    /* border:2px solid red; */
    height:36vh;
    /* height:100%;  for mobile view*/
    font-family: poppins;
    /* overflow: hidden; */
    
    
}
.hero-wrapper{
    /* border: 2px solid hotpink; */
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* flex-direction: column; */
    flex-shrink: 0; 
    align-items:center;
    font-size: 1em;

}
.site-info{
        /* position: relative;
        top: 155px;
        left: 10.9em; */
        display: inline-block;
        width: 25em;
        line-height: 28px;
        opacity: 0;
     transform: translateY(20px);
     transition:2.5s;
        /* border: 2px solid rebeccapurple; */
}
.site-info-appear{
    opacity: 1;
    transform: translateY(0px);

}

.site-info-heading{
    font-size:3em;
    /* border: 2px solid rebeccapurple; */

}
.site-info-text{
  font-size: 1.5625em;
  font-weight: 600;
  margin-top: 6px;
  /* border: 2px solid rebeccapurple; */

}
.site-info-btn{
    font-size:1.3em;
    border-radius:50px;
    padding:.3em .5em;
    border:none;
    background-color: #33BC00;
    color:white;
    margin-top: 19px;
    cursor: pointer;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    /* right: 1em;  */
    /* display:inline-block; */
    width:300px;
    height:300px;
    /* border: 2px solid rebeccapurple; */


}
svg{
    /* border:2px solid red; */
     width:155%;
     height:25em;
     float:left;
     /* margin-left:0; */
    /* display:inline-block; */
    position:static;
    top:0px;
    left:0;
    /* background:burlywood; */
    /* overflow: hidden; */
    
    /* float: right; */

}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
    transform:translateY(px);
    position:absolute;
}
.beehive-piece,.bee{
    transition: .7s ;

}
.gate-keeper-bee,#beehive-gate{
    transition: 2s ;

}
.newCreatedBee{
    transition: 8s linear ;
    cursor:url("spatula/spatula\ 1.svg");
}
.newCreatedBeeComingFromHive{
    transition: 8s linear;
    transform-origin:center;
    cursor:grab;
    /* position:absolute; */
    /* transform: sc; */
}
#leftBee{
    cursor:pointer;
}
#theBee{
    cursor:pointer;
}
.forest-container{
    background-image:url("forest\ 1.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center ;
    /* border:5px solid black; */
    width:100%;
    height:1050px;
    /* border:10px solid purple; */
    display: grid;
    align-items: center;

}
.forest{
  border:2px solid red;
  width:100%;    
}

.forest-items{
    /* border:2px solid gold; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}
.forest-beehive{
    display: inline-block;
    width: 500px;
    opacity:0;
    transition:1s;
    transform: translateX(-150px);
    
}
.forest-beehive-appear{
    opacity:1;
    transform: translateX(0);
}
.forest-info{
    /* border: 5px solid honeydew; */
    width:30%;
    margin-right: 8em;
    font-family: poppins;
    /* display: inline-block; */
    /* float: right; */
    opacity:0;
    transition:1s;
    transform: translateX(150px);
    
}
.forest-info-appear{
    opacity:1;
    transform: translateX(0);
}
.forest-headline{
    font-size: 4em;
}
.forest-text{
    font-size: 1.5em;
    color: white;
}
.benificial-info{
    opacity:0;
    transition:1s;
    transform: translateX(-150px);
}
.benificial-info-appear{
    opacity:1;
    transform: translateX(0);
}

.honeyJar{
    opacity:0;
    transition:1s;
    transform: translateX(150px);
}
.honeyJar-appear{
    opacity:1;
    transform: translateX(0);
}

.benefits-container{
    /* border:2px solid green; */
    position: relative;
    /* margin-top:8em; */
    height:100%;
    display: grid;
    place-items: center;
    padding:8em 0;
}
.playingBees{
    position:absolute;
    width: 154px;
    left: 59px;
    top: 56px;
    z-index: -2
    
}
.honey-flower{
    /* border:2px solid orange;  */
    position:absolute;
    width:250px;
    opacity: 1;
    z-index:-1;
    /* transform: translate(0px,0px); */
    /* transform: translate(-580px,40px);
     */
     /* transform: translate(-740px,150px); */
     transform: translateY(150px);
    left: -100px;
    }

.beneficial-sub-container{
    /* border:2px solid red; */
    width:90%;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.benificial-info{
  /* border:2px solid red; */
  width:500px;
  margin-left:3em;
}
.b-heading{
    font-size:3em;
}
.b-text{
    font-size: 1.5em;
    color: #585858;
}
.benefits-text-container{
    width:80%;
    margin:0 auto;
    margin-top: 120px;
    font-family: poppins;
    opacity:0;
    transition:1s;
    transform: translateY(150px);
    /* border:2px solid red; */

}
.benefits-text-container-appear{
    opacity:1;
    transform: translateY(0px);

}
.benefits-heading{
    font-size: 2.5em;
    /* border-top: 5px solid green;border-bottom: 5px solid green; */
    text-align: center;
}
.benefits-text-container ul{
    /* width:80%; */
    /* border:2px solid magenta; */
    line-height: 50px;
    width: 100%;
    margin:0 auto;
    margin-top:3em;
}
.benefits-text-container ul li{
    font-size:1.625em;
    color:#2a2a2a;
    list-style: none;
    margin-bottom: 1em;

    /* margin-left: 25px; */
}
.benefits-text-container ul li::first-letter{
    font-size: 1.5em;
}
.whyBuy{
    width: 100%;
    background-color: #FFD748;
    padding:2em 0;
}
.whyBuy > h3{
  font-size:2.5em;
  text-align:center;
  margin-bottom:1em;
  color: #2a2a2a;
  font-family:poppins;
  
}
.whyBuyHeading{
    transition: 1s;
    opacity: 0;
    transform: translateY(100px);
}
.whyBuyHeading-appear{
    opacity: 1;
    transform: translateY(0px);
}
.cos-container{
    opacity:0;
    transition: 1s;
}
.cos-container-appear{
    opacity: 1;
}
.why-buy-wrapper{
    width: 85%;
    /* background: #FFCC48; */
    background:  #FFD748;

    margin:0 auto;
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:50px;
    /* border-radius:15px; */
}
.buy-sec-img{
    width:65%;
    display: block;
  margin-left: auto;
  margin-right: auto;
}
.buy-text{
    color:white;
    font-family: poppins;
    font-size:1.5em;
    text-align: center;
}
.buy-info-container{
    /* border:2px solid white; */
    width: 320px;
    border-radius: 15px;
    padding:1em;
    background: #FFCC48;
}
.aparist{
    opacity:0;
    transform: translateX(-150px);
    transition:1s;
}
.aparist-appear{
    opacity:1;
    transform: translateX(0px);
}
.extraction{
    opacity:0;
    transform: translateY(150px);
    transition:1s;
}
.extraction-appear{
    opacity:1;
    transform: translateY(0px);
}
.packging{
    opacity:0;
    transform: translateX(150px);
    transition:1s;
}
.packging-appear{
    opacity:1;
    transform: translateX(0px);
    transition:1s;
}

.sec-costumers{
    /* border:2px solid red; */
    position: relative;
    height: 100vh;
    display:grid;
    align-items: center;
}
.c-hive{
    /* border:2px solid magenta; */
    position: absolute;
    width: 23%;
    top:0;
}
.cos-container{
    /* border:2px solid orangered; */
    padding: 5px;

}
.costumers-comments-container{
    /* border:2px solid yellow; */
    padding: 2em;
    border-radius: 15px;
    width:60%;
    margin: auto;
    background: #FAFAFA;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}
.personal{
    /* border: 2px solid brown; */
    padding: 5px;
    display: flex;
    align-items:center;
}
.c-img{
    width: 50px;
}
.c-name{
    margin-left: 20px;
    font-size: 1.5em;
}
.comment{
    margin: 18px 0px 20px 0px;
    font-size:1.4em;
}
.last-sec-svg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    object-fit: contain;
    z-index: -1;
    background-size: cover;
    background-position: center center ; 
}
.wanna-listen{
    background-image:url("last sec image/background image.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center ;
    width:100%;
    height:100vh;
    display: grid;
    place-items:center;
    position:relative;
    
}
.get-email-container{
    width:480px;
    padding:16px;
    border-radius: 15px;
    background:#FFD748;
}
.get-email-container h3{
 font-size: 1.8em;
 text-align: center;
 margin-bottom: 12px;
}
input[type="email"]{
    width:100%;
    font-size:1.2em;
    border-radius: 25px;
    padding:8px;
    border:none;
    background: #EEEEEE;
}
button[type="submit"]{
  font-size: 1.2em;
  background:#4B4B4B;
  color:white;
  border-radius:25px;
  cursor: pointer;
  padding:4px 10px;
  margin-left:40%;
  margin-top:12px;
}
button[type="submit"]:focus{
    outline: none;
    border: none;

}
img[src="clouds/cloud 1.svg"]{
    position:absolute;
    top:0;
    left:300px;
    width:200px;
}
img[src="clouds/cloud 2.svg"]{
    position:absolute;
    left:35px;
    top:10px;
    width:230px;
}
img[src="clouds/cloud 3.svg"]{
    position:absolute;
    right:25px;
    top:10px;
    width:250px;
}




.footer{
    width:100%;
    text-align: center;
    background: #2DAD42;
    color: white;
    height:60px;
    display: grid;
    place-items: center;
}
.footer p{
    font-size: 1.4em;
}
.newbee1{
    /* border:2px solid blue; */
  /*   display:inline-block; */
  /*   display:block; */
    height:40px;
    width:70px;
      transform:translateX(1000px);
    transition:25s;
    /* z-index:-1; */
    position:absolute;
    top:50px;
    right:50px;
    
  }
  .newbee2{
    /* border:2px solid blue; */
  /*   display:inline-block; */
  /*   display:block; */
    height:40px;
    width:70px;
      transform:translateX(1000px);
    transition:25s;
    /* z-index:-1; */
    position:absolute;
    top:50px;
    right:50px;
    
  }
.newbeeFromLeft{
    /* border:2px solid blue; */
  /*   display:inline-block; */
  /*   display:block; */
    height:40px;
    width:70px;
      /* transform:translateX(-100px) scaleX(-1); */
      transform: translateX(-80px);
      /* transform:scaleX(-1); */
      /* transform: translateX(-100); */
    transition:25s;
    /* z-index:-1; */
    position:absolute;
    top:50px;
    left:50px;
    
  }
  

/* .top-piece{
    background: url("triangular top.svg");
    width:100%;
    height:610px;
    border:2px solid red;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center center ;
} */







/* HONEY BEE WINGS FLYING ANIM */
.small-wing{
    /* anim`ation: small-wing 2s infinite alternate ; */
     animation: check .09s infinite alternate ;
     /* animation-name: check;
     animation-duration: 1s;
     animation-iteration-count: infinite; */
     /* transform: rotate(10deg); */
      
}
.large-wing{
    animation: check .09s infinite alternate ;
    
}
/* @keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-.4deg);

    }
    100%{
        transform: rotate(.4deg);

    }
} */
/* .small-wing{
    
     animation: check .09s infinite alternate ;
    transform-origin: center;
      
}
.large-wing{
    animation: check .09s infinite alternate ;
    transform-origin: center;
    
} */
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-2.5deg);
    transform-origin: center;


    }
    100%{
        transform: rotate(2.5deg);

    } 

}

/* @media screen and (max-width:1140px) {
    .nav{
        font-size:15px;
    }
    .site-title{
        font-size:2.2em;
    }

} */
/* @media screen and (max-width:960px) {
    .nav{
        font-size:15.5px;
    }
    .site-title{
        font-size:2.2em;
    }
    .hero-wrapper{
        font-size:15px;

    }
} */


/* For Extra large screens */
@media screen and (max-width:1200px) {
    .why-buy-wrapper{
    justify-content: space-around;
    }
}

@media screen and (max-width:1150px) {
    .header-wrapper{
        width:95%;
    }
}

.menu-btn {
    height: 55px;
    width: 55px;
    display:none;
    cursor: pointer;
    transition:.5s linear;
}
.menu-btn img{
    width:100%;
}
.menu-btn-rotate{
    transform: rotate(45deg);
}
.responsive-nav{
    display:none;
    width:100%;
    position:absolute;
    padding-right:12px;
    z-index: 100;
    left:0;
    background: aliceblue;
    padding-bottom:12px;
}
.responsive-nav-appear{
 display:block;
 
}

/* For Large screens */
@media screen and (max-width:992px) {
    body{
     font-size:15px;       
    }
    .forest-beehive{
        width:27em;
    }
    .c-hive{
        width:18em;
        z-index: -1;
    }
    .hero-wrapper{
        justify-content: center;
        text-align: center;
        gap:50px;
    }
    .forest-info{
        width: 90%; 
        margin: 0 auto;
        text-align: center;
        order: -1;
        color:#eee;
    }
    .forest-headline{
        color:black;
    }
    .forest-text{
        color:black;
    }
    .responsive-nav ul li{
        padding-left: 7%;
    }
    .beneficial-sub-container{
        justify-content: center;
        gap:65px;
        text-align: center;
    }
}
/* Hiding the Nav bar */
@media screen and (max-width:950px) {
    .nav-desktop{
        display:none;
    }
    .site-title {
        margin-left: 7%;
    }
    .menu-btn{
        display: block;
    }
}


/* For medium screens  */
@media screen and (max-width:768px) {
    body{
        font-size:14px;       
    }
    .costumers-comments-container{
        width:90%;
        padding:1.5em;
    }
}
@media screen and (max-width:285px) {
 .forest-beehive{
     width:100%;
 }
}

/* For small  screens */
@media screen and (max-width:576px) {
    body{
     font-size:13px;    
     /* position:absolute;
     z-index: -999;           */
    }
    .benefits-container{
        display: block;
    }
    .menu-btn{
        width:50px;
        height: 50px;
    }
    .get-email-container{
        width:90%;
    }   
    .costumers-comments-container{
        width:95%;
        padding:1.3em;
    } 
    .hero-wrapper{
        margin-top:90px;
    }
    .benificial-info {
    margin-left: 0;
    }
    .site-title{
        margin-left: 2%;
    }
    .playingBees{
        display: none;
    }
    
}
@media screen and (max-width:280px) {
    .site-title {
        font-size: 2.4em;
    }
    .menu-btn {
        width: 40px;
        height: 40px;
    }
    
}

.prompts{
    font-size:10em;
    font-family: bangers;
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    /* display:none; */
    opacity: 0;
    transition: 1s;
    pointer-events: none;
    z-index: 999;
}
.prompt-appear{
    /* display:block; */
    opacity: 1;


}