*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }
body{
    
    background-color: white;
    font-family: Helvetica, arial, sans-serif;
    box-sizing: border-box;
}

/* Toggle Button */
.toggle-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 24px;
    cursor: pointer;
  width: 0;
    border: none;
  

    color:  rgb(120, 161, 26);
    position: absolute; /* Allow precise positioning */
    top: 4rem; /* Distance from the top of the page */
    left: 10%; /* Distance from the left of the page */
    cursor: pointer;
    padding: 0;
  }

  /* Sidebar styles */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    height: 100vh;
    background-color: rgb(246, 246, 246);
    color: rgb(120, 161, 26);
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .close-btn {
    color: rgb(120, 161, 26);
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    margin-left: 80%;
  }

  .sidebar a {
    display: block;
    padding: 10px ;
    text-decoration: none;
  }
  .sidebar ul{
      text-decoration: none;
      list-style: none;
      padding-left: 0;
  }
#logo{
    width: 15em;
    /* margin: 2rem auto 3rem auto; */
    margin: 2rem auto;
    background-color: brown;


    cursor: pointer;
    margin-bottom: 1rem;
}

.i{
    /* background-color: black; */
    font-size: 1.7rem;
        /* float: right; */
   
}


#nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: relative;
    border-bottom: 1px solid  rgb(241, 238, 238);
  
}

.triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.rev{
    top: 0%;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
    border-top: 30px solid white;   position: absolute;
}

.normal {
    top: -30px; /* Move above the div */
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 30px solid #e2e2e2;
}


#sec1{
    position: relative; /* Enables positioning of text over the image */
   width:100%;
   min-height: 100%; 
    display: grid;
   flex-direction: column;
}
#img1{
    object-fit: cover;
    width: 100%;
}

.text-overlay{
    margin: 16% 0% 10% 10%;
    position:absolute;
    color: white;
    text-transform: none;
    text-align: left;
    width: 30%;
   padding: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
     display: flex;
    flex-direction: column; 
    line-height: 1.4;
}
.text-overlay h1{
    font-size: 3.5rem;
    margin-bottom: 16px;
    width: auto;
    word-wrap: break-word;
   font-weight: 900;
}

.text-overlay p{
vertical-align: inherit;
 font-size: 20px;
 
}
.btn{
    background-color: rgb(163, 218, 35);
    padding: 1rem 2rem;
    border-style: none;
    font-size: 16px;
    font-family: 'League Spartan', arial, helvetica, sans-serif;
    overflow-wrap: normal;
}
.text-overlay .unshared{
margin: 0;
object-fit: contain;
width: auto;

}
.btn:hover {
    cursor: pointer;
    background-color: rgb(175, 228, 53);
}

h1{
    font-size: 4rem;
}

.sec2 h2{
    margin-bottom: 2rem;
}


.storeInsight{
    height: auto;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    width: 80%;
    margin: 0;
    margin-left: 15%;
    padding: 0;
}

.front{
    width: 30%; /* Adjust this to 33.33% to make it a 3-column layout */
    margin: 0 auto;
    padding: 7px;
    display: block;
    top:0;
    /* left: 10%; */
    text-align: center;
}

p1{
    font-size: 1.5rem;
}

h2{
    text-align: center;
    margin: 3rem auto;
}
h3{
    text-align: left;
    padding-bottom: 3.5%;
    font-size: 28px;
    color:  rgb(120, 161, 26);
}
h1,h2,h3,h4{

}
.sec3,.sec2, .sec4,.sec5, .sec7, .sec9{
    width: 85%;
    max-width: 80rem;
    min-width: 80%;
    margin: 4rem auto;
}

.sec2{
    width: 100% ;
}

#image2{
    width: 50%;
    float: left;
    margin-right: 4rem;
    flex-grow: 1;
}

.sec3{
    box-sizing: border-box; /* Ensures padding/margins are included in width */
    overflow: hidden; /* Prevents overflow from floated elements */
    display: flex;

}

#mobileContent{
    display: flex;
    flex-direction: row;
    font-family: Helvetica, arial, sans-serif;
    line-height: 1.5;
    color: rgb(86, 86, 86);
    
    height: auto;
}
#mobile1{
    align-items: stretch;
}
 h2{
    color:  rgb(120, 161, 26);
    font-size: 2rem;
    text-align: center;
}
h4{
    font-size: 1.5rem;
}


p2{
    font-size: 22px;
    font-weight: 400;
}

.sec4 h2{
    margin: 1.5rem;
    padding: 0;
}

.sec4 p{
    display: block;
    text-align: center;
    font-size: 16px;
    width: 70%;
    overflow-wrap: break-word;
    margin: 0 auto;
    padding-top: 1rem;
    padding: 0;
    margin-bottom: 5%;
}

.sec5{
    text-align: center;
    margin-top: 12%;
}

.sec5 h2{
    margin: 0;
}


#insta-con{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin:0 ;
    margin: 5% 0 3% 0 ;
    padding: 0;
    justify-content: space-between;
}


.instaImages{
    width: 20%;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease-in-out;
}

.instaImages:hover{
  transform: scale(1.2);

  cursor: pointer;
}
.instagram-box{
    background-color: antiquewhite;
    padding: 0;
    margin: 0;
}

a{
    color: rgb(120, 161, 26);

}

.sec6{
    background-blend-mode: normal,normal;
    background-image: url("/images/shelfdisplay.jpeg");
    background-position-x :46.5253%, 46.5253%;
    background-position-y :10.8696%, 10.8696%;
    background-repeat: no-repeat, no-repeat;
    background-size:cover,cover;
    position: static;
    width: 100%;
    height: 100vh;
    background-color: aqua;
}
.sec6 h2{
    padding-top: 2%;
    color: white;
    font-size: 2.5rem;
}
.con2{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.con2 p{
    font-size: 20px;    
    color: white;
    margin-right: 4%;
}
.rholder{
    background-color: white;
    width: 30%;
    height: 50vh;;
}

.con6{
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
}

.food{
    width: 32%;
    padding: 5px;
}

.sec8{
margin-bottom: 20%;
}

.sec8 p{
    text-align: center;
}

input{
    width: 90%;
    margin: 0;
    margin-bottom: 26px;
    padding: 1rem;
}

input, textarea{
    border: none;
    border-bottom: 1px solid rgb(201, 196, 196);
}
#form1{
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 70%;
    border-style: none;

}



#form2 div{
    text-align: center;
}

textarea{
    width: 100%;
    padding: 1rem;
    min-height: 10vh;

}

.sec9{
  height: auto;
  margin-bottom: 10%;
}

#contact{
    margin: 0;
    height: auto;
  overflow: hidden;
    display: flex;
}

#contact .block{
    width: 50%;
    margin: 0;
}

#form2 .btn{
  
    margin-bottom: 10px;
   justify-content: center;
}
#contact .details{
    margin-left: 5%;
}
#contact .details h4{
    margin-top: 1rem;
}
#contact .block  p{
    text-align: center;
    font-size: 13px;
    margin-bottom: 16px;
}

#socialImages{
    text-align: center;
    justify-content: space-between;
    padding-bottom: 36px;
}

.socials{
    cursor: pointer;
}
.sec10 h2{
    margin-bottom: 2rem;
}
footer{
    width: 100%;
    height: auto;
    background-color:#e2e2e2;
    text-align: center;
    /* line-height: 100px; */
    position: relative;
    color: black;
    padding: 5% 0;

}

footer p{
    margin-bottom: 26px;
}
 
  #pages{
    display: flex;
    justify-content:center;
    padding-right: 20px;
  }
  .privacy{
    border-top: 1px solid black#333;
    width: 55%;
    margin: 0% auto;
    min-width: auto;
    line-height: 1.75;
    padding-bottom: 4rem;
  }
  .privacy p {
    display: block;
    margin:  0 ;
}
.privacy h2{
  margin: 3%;
  padding-top: 10%;
  
}
#pages a{
    margin-left: 16px;
}
.triangleFix{
    position: relative;
    margin-top: -0.5px;
    text-align: center;
}

.privacy  .nav{
    display: flex;
    flex-direction: column;
    background-color: palegreen;
    margin: 0;
}


#return h2{
    text-align: center;
    width: 100%;
}

#return #holder{
line-height: 1.75;
    padding: 3rem 3rem 7rem 5rem ;

}

  a{
    text-decoration: none;
  }


  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}


 
  @media screen and (max-width: 1024px){
    .test{
        display: flex;
        flex-direction: column;
      
    }
    #sec1{
        max-height: 70vh;
        min-height: 0;
      
    }
  .text-overlay {
    width: 40%;
   margin-top: 10%;
   height:60vh;
 
}
  .text-overlay p{
    display: block;
    overflow-wrap: break-word;
    min-width: 60%;

  
  }
  .text-overlay h1{
   width: auto;

  }
  .text-overlay .unshared{
    width: 80%;
  }
.unshared{
    text-wrap: wrap;
    flex-wrap: wrap; 
    overflow-wrap:break-word ;
  
}
  #image2{
    width: 100%;
    max-height: 90vh;
  }

.storeInsight{
    height: auto;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    width: 90%;
    margin-left:9%;
    grid-template-columns: repeat(2, 1fr);
}
.front{
    width: 45%;
    max-width: 45%;
    min-width: 40%;
    margin: 5;
}
  
  #mobileContent{
    margin-top: 5%;
    flex-direction: column;
  }

  #mobileContent #mobile1{
    margin-top: 3rem;
  }
  .sec4 p{
    min-width:85%;
  }
  .sec5{
    width: 100%;
  }
  #insta-con{
    display: flex;
    flex-wrap: wrap;  /* Allows items to wrap onto the next row */
    justify-content: space-evenly;
    flex-grow: 1;
    max-width:  100%;
  }

  .instaImages{
    width: 40%;
    padding: 0;
    margin: 0;
    padding: 6px 6px 18px 6px;
  }
  
  .con6{
    display: flex;
    flex-wrap: wrap;
  }

  .food{
    width: 48%;
    padding: 2px 5px 2px 0px;
  }

  #contact{
    display: flex;
    flex-direction: column;
  }
  #contact .details{
    margin-left: 0;
  }
  #contact .block{
    width: auto;
  }
  #contact .block #form2 input{
    width: 100%;
  }
  textarea{
    margin: 0;
    width: 100%;
  }
  .privacy{
    min-width: 80%;
  }
}

@media screen and (max-width: 760px){
    body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }

    .sidebar {
        width: 300px;
    }
    #return #holder{
        line-height: 1.75;
        padding: 10rem 3rem 7rem 2rem ;
        }
    #img1{
        height: 60vh;
    }

    #sec1{
       height: auto;
    }
    
    .privacy{
        width: 90%;
    }
    
    #pages{
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 0;
           
    }
    #pages a{
        padding-bottom: 5px;
    }
    #contact .block  p{
        margin: 2% 0 7% 0   ;
    }
 
    #sec1 .text-overlay {
        width: 80%;
        height: 20vh;
        text-align: center;
       align-items:center;
       margin-top:20%;
       object-fit: contain;
      }

      .text-overlay h1{
        width: 90%;
    }
        .text-overlay p{
          overflow-wrap: break-word;
          width: auto;
        }
        .text-overlay h1{
         width: auto;
         font-size: 2rem;
        }
        .text-overlay .unshared{
            width: 100%;
            padding: .75rem 3rem .75rem 3rem;
          }
  }

  @media screen and (max-width: 280px){

    i{
        width:  2%;
    }
    .text-overlay h1{
        margin: 0;
        padding: 0;
    }
    .text-overlay .unshared{
        width: 100%;
        padding: .5rem 1rem .5rem 1rem;
        color: antiquewhite;
      }
      .text-overlay {
        margin-top: 0%;
      }
  }