@import url(https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap);
* {
  font-family: "El Messiri", sans-serif !important;
}
.main-nav-container.fixed-pinned .navbar-brand img,.navbar-brand img {
  max-height: 4rem
}
body.index .store-header {
    position: relative !important;
    top: 0;
    left: 0;
    width: 100%;
}
.h-full .text-center{
    width:50% ;
}
.h-full h1{
    line-height: 3.5rem;
}
section.h-\[85vh\].relative{
    height: 100vh;
}

section.h-\[85vh\].relative a {
   background: #767676;
background: linear-gradient(180deg, rgba(118, 118, 118, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
}
.category img {
    height: 100% !important;
}
.category .justify-between {
    justify-content: center;
    gap: 40px;
}
.category a{
    font-size:16px;
    font-weight:700;
}
.special-products h1 {
    color: #fff;
    margin-top: 2rem;
    font-size: 24px;
    z-index: 3;
    text-align: center;
    line-height: 50px
}

.special-products .overlay {
    row-gap: 2rem
}
.second-banner h1 {
  font-size: 29px!important;
  color: #fff
}

.second-banner .absolute {
  width: 100%;
  left: 0;
  top: 70%
}

.second-banner button {
  border-color: #fff
  background: #767676;
background: linear-gradient(180deg, rgba(118, 118, 118, 1) 0%, rgba(0, 0, 0, 1) 100%);
  width:100% !important;
}

.second-banner a {
  color: #fff
}



.about-us .bg-\[var\(--f-color\)\] {
  background: #767676;
background: linear-gradient(180deg, rgba(118, 118, 118, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.about-us p {
  color: #fff
}
footer .relative {
    background-color:#ffffff !important;
     width:100%;
}


footer .relative h3 , footer .relative p {
    color:#000000 !important
}

footer button{
    background: #767676;
background: linear-gradient(180deg, rgba(118, 118, 118, 1) 0%, rgba(0, 0, 0, 1) 100%);
    color:#ffffff !important;
}

footer button:hover{
    background-color:#ffffff !important;
    color:#ffffff !important;
}

@media(max-width: 768px) {
  .h-full .text-center{
    width:100%;
}
  section.h-\[85vh\].relative {
    height: 65vh !important;
}
  .h-full p{
    color:#ffffff !important;
}
.second-banner .absolute {
      top: 75%
  }

  .second-banner h1 {
      font-size: 16px!important;
      line-height: 30px
  }

.details-sec .grid>div:nth-child(2) {
  height: 360px;
}
.details-sec .grid>div:first-child{
  height: 250px;
}
.details-sec .grid {
  height: 94vh !important;
}
}