.header-title {
     margin-left: 2rem;
}
.row {
     display: flex;
     gap: 4vw;
}
.column {
     flex-basis: 50%;
     flex-shrink: 0;
}
.mainText{
     color: #ffffff;
     margin-left: 90px;
     margin-right: 50px;
     margin-top: 90px;
     margin-bottom: 40px;
     
}
.swiper {
     height: 50vw;
     width: 30vw;
     .swiper-slide {
          img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               object-position: 50% 20%;
          }
     }
     .swiper-button-next, 
     .swiper-button-prev {
          color: #0a0a0a(255,255,255,0.5);
          &:hover {
               color: #c40202;
          }
     }
     .swiper-pagination-bullet {
          height: 12px;
          width: 12px;   
     }
     .swiper-pagination-bullet-active {
          background: #c40202;
     }
}
body {
     margin: 0;
     font-family: "Arvo", serif;
     background-color: #0a0a0a;
}
.h2{
 margin-left: 800px;
 

}
.Head{
     &:hover{
          transform: translateY(-6px);
     }
}
header {
     
     background-color: #c40202;
     color: #ffffff;
     display: flex;
     padding: 1.3vw 10vw;
     align-items: center;
     .logo {
          font-size: 1.4rem;
     }
     nav {
          margin-left: auto;
          ul {
               list-style: none;
               padding: 0;
               margin: 0;
               display: flex;
               .nav-item {
                    margin-left: 2em;
                    a.nav-item-link {
                         color: #ffffff;
                         text-decoration: none;
                         &:hover {
                              color: #ffffff;  
                              text-decoration: underline;
                         }
                    }
                    &.has-submenu {
                         position: relative;
                         &:hover {
                              .sub-menu {
                                   display: block;
                              }
                         }
                         &:after {
                              content: '\203A';
                              display: block;
                              transform: rotate(90deg);
                              float: right;
                              margin-left: 0.7em;
                              font-size: 1.2rem;
                         }
                    }
               }
               .sub-menu {
                    display: none;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    background-color: #0a0a0a; 
                    .nav-item {
                         margin-left: 0;
                         a.nav-item-link {
                              padding: 0.55rem 1rem;
                              display: inline-block;
                         }
                    }
               }
          }
     }
}
.menu-toggle {
     display: none;
}

/* Newsletter Styles */
.Ordering-page {
     padding: 5vw 20vw;
     background-color: #0a0a0a;
     text-align: center;
}
a.button {
     background-color: #c40202;
     padding: 0.7em 1.5em;
     border-radius: 4px;
     border: none;
     cursor: pointer;
     transition: all 150ms;
     color: #ffffff;
     text-decoration: none;
     display: inline-block;
     &:hover {
          background-color: #c40202;
     }
}
.Ordering-dialog {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: 0a0a0a;
     color: #ffffff;
     padding: 3vw;
     width: 400px;
     border-radius: 4px;
     text-align: center;
     visibility: hidden;
     opacity: 0;
     transition: opacity 200ms;
     z-index: -1;
     &.visible {
          opacity: 1;
          visibility: visible;
          z-index: 10;
     }
     
     input {
          padding: 0.7em 1.5em;
          border-radius: 4px;
          border: none;  
     }
     .close-dialog {
          position: absolute;
          top: 10px;
          right: 14px;
          font-size: 1.2rem;
          cursor: pointer;
     }
}

/* Accordion Styles */
.main {
     padding: 6vw 20vw;
}
.accordion {
     border-bottom: 1px solid #0a0a0a;
     .accordion-header {
          cursor: pointer;
          &:hover {
               color: #c40202;
          }
          h3:after {
               content: '\002b';
               float: right;
               font-size: 1.4em;
               font-weight: 100;
          }
     }
     .accordion-panel {
          height: 0;
          overflow: hidden;
          transition: all 300ms;
     }
     &.open {
          .accordion-header {
               color:  #c40202;
               h3:after {
                    content: '\2013';
               }
          }
          .accordion-panel {
               height: auto;
               padding: 10px 0;
          }
     }
}



@media screen and (max-width: 992px) {
     .menu-toggle {
          display: block;
          font-size: 3rem;
          padding: 1px 5px 10px 5px;
          border: 1px solid #0a0a0a;
          border-radius: 3px;
          line-height: 0.5;
          margin-left: auto;
          position: relative;
          z-index: 11;
     }
     header {
          padding: 2vw;
          nav {
               display: none;
               position: absolute;
               z-index: 10;
               top: 0;
               left: 0;
               width: 100vw;
               height: 100vh;
               background-color: 0a0a0a;
               justify-content: center;
               align-items: center;
               margin: 0;
               ul {
                    display: block;
                    font-size: 1.5rem;
                    .nav-item {
                         margin-left: 0;
                         margin-bottom: 0.65em;
                         &.has-submenu:after {
                              display: none;
                         }
                    }
                    .sub-menu {
                         display: block;
                         position: static;
                         margin-left: 2em;
                         .nav-item {
                              margin: 0;
                              a.nav-item-link {
                                   font-size: 1.2rem;
                                   padding: 0;
                              }
                         }
                    }
               }
               &.visible {
                    display: flex;
               }
          }
     }
}