#primary {
   padding-bottom: 0;
}

.container.page-404 {
   padding: 150px 0 150px 0;
}

.header ul.menu li.menu-contact a i {
   /* display:flex;
   justify-content: center;
   align-items: baseline; */
   color: var(--color-primary);
}

/* 
 * Menu logo
 *
 * ============================= */

.menu-bar .logo svg {
   width: 150px;
   /* height: 80px; */
   height: 100px;
   transition: height 0.55s ease-in-out;

}

.scrolled .menu-bar .logo svg {
   height: 60px;
   /* height: 200px; */
}


@media only screen and (max-width:600px) {
   .menu-bar .logo svg {
      width: 90px;
   }

}


.pre-header-slider {
   position: relative;
   width: 100%;
   background-color: var(--color-primary-dark);
   height: 3rem;
   z-index: 200;
}

.pre-header-slider .swiper-button-next::after,
.pre-header-slider .swiper-button-prev::after {
   font-size: 14px;
   color: var(--color-white);
}

.top-header-slider {
   display: flex;
   justify-content: center;
   align-items: center;
}

.top-header-slider .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
}

.top-header-slider .swiper-slide a {

   font-size: 14px;

   color: var(--color-white);
   text-decoration: none;

}



/* 
 * Footer
 *
 * ============================= */

footer {
   position: relative;
   /* background-color: #222928; */
   background-color: var(--color-secondary);
   color: var(--color-white);
   list-style: none;

   font-size: 14px;
   font-weight: 400;
   margin-top: 0;
}

footer a {
   color: rgba(var(--color-white-rgb), 0.7);
}

footer .contact-details li {
   color: rgba(var(--color-white-rgb), 0.7);
}


.footer-bottom,
.footer-main {
   padding: 40px 120px 80px 120px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   position: relative;
   gap: 20px;
}

.footer-main {
   /* margin-top: 28px; */
}




.footer-left {
   max-width: 50%;
}

.footer-logo-box {

   position: relative;
   width: 200px;
   height: 200px;
   padding: 0 0 38px 0;
   max-width: 100%;
}

/* .footer-logo-box img {
   width: 100%;
   height: 100%;
   object-fit: contain;
} */
.footer-logo-box svg {
   /* width: 200px; */
   width: 100%;
   height: auto;
   object-fit: contain;
}



.footer-bottom {
   padding: 10px 120px;
   background-color: var(--color-true-black);
}



ul.footer-slogan {

   list-style: none;
   font-size: 18px;
   font-weight: 500;
   line-height: 160%;
   /* 28.8px */
   letter-spacing: 1.26px;
}

.footer-socials {
   margin-top: 48px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 1rem;
}

.footer-socials a {
   text-decoration: none;
}

.footer-socials.small-screen {
   display: none;
}

.footer-socials a {
   font-size: 28px;
}

.footer-company-details {
   /* padding-top:34px; */
}

.footer-company-details p {
   color: var(--color-secondary);
   font-size: 20px;
   font-weight: 700;
   line-height: 160%;
   /* 32px */
   letter-spacing: 1.6px;
}

.footer-company-details ul {
   list-style: none;
   font-size: 18px;

   font-weight: 500;
   line-height: 160%;
   letter-spacing: 0.54px;
}

.footer-company-details ul li {
   margin-bottom: 0.8rem;
}

.contact-details a {
   text-decoration: none;
}

.contact-details .icon {
   display: inline-block;
   width: 20px;
   margin-right: 6px;
}

.contact-details i {
   color: var(--color-grey-50);


}

.footer-bottom p,
.footer-bottom ul {
   margin: 0;
}

.footer-bottom a {
   text-decoration: none;
}

.footer-bottom ul {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   list-style: none;

}

@media only screen and (max-width:930px) {
   .footer-main {
      padding: 40px 60px 80px 60px;
   }

   .footer-bottom {
      padding: 10px 60px;
   }

}

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

   .footer-main {
      flex-direction: column;
   }

   .footer-left {
      width: 100%;
      max-width: 100%;
   }

   .footer-right {
      margin-top: 18px;
   }

   .footer-socials.small-screen {
      display: block;
   }

   .footer-socials.large-screen {
      display: none;
   }

   .footer-bottom {
      padding: 10px 30px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
   }

   .footer-bottom nav {
      width: 100%;

   }

   .footer-bottom nav li {
      /* min-width: 150px; */
      text-align: center;

   }

}

@media only screen and (max-width:550px) {
   ul.footer-nav {
      flex-wrap: wrap;
      gap:unset;

   }

   ul.footer-nav li {
      width: 50%;
   }
}


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

   ul.footer-slogan,
   .footer-company-details ul {
      font-size: 16px;
   }

}

@media only screen and (max-width:460px) {
   .footer-main {
      padding: 40px 30px 60px 30px;
   }

   .footer-bottom {
      padding: 10px 30px;
   }
}

@media only screen and (max-width:390px) {
   .footer-main {
      padding: 40px 20px 60px 20px;
   }

   .footer-bottom {
      padding: 10px 20px;
   }
}

/* 
 * Footer Modal
 *
 * ============================= */
.global-modal {
   display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
   align-items: center;
   justify-content: center;
}

.global-modal.active-modal {
   display: flex !important;
}

.global-modal-content {
   background: var(--color-grey-00);
   padding: 2rem 2.5rem;
   border-radius: 1.5rem;
   max-width: 90vw;
   max-height: 80vh;
   overflow-y: auto;
   /* box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); */
   box-shadow: var(--box-shadow);
   position: relative;
   animation: modalIn 0.2s;
}

.global-modal-content h2 {
   color: var(--color-background-dark-darker);
}

#global-modal-inner {
   margin: 42px 0 20px 0;
}

@keyframes modalIn {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

button.global-modal-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   font-size: 2.5rem;
   color: var(--color-background-dark-darker);
   cursor: pointer;
   line-height: 1;
}

button.global-modal-close:hover {
   background-color: var(--color-background-dark-darker);
   color: var(--color-white);
}

/* Forms  */

.wpcf7-list-item-label {
   font-weight: 300;
}

@media only screen and (max-width:600px) {
   .wpcf7-list-item-label {
      font-size: 16px;
   }
}


/* 
 * Hero
 *
 * ============================= */
.section-hero {
   position: relative;
   height: 50rem;
   width: 100%;
   /* margin-top: 107px; */
   margin-top: 147px;
   overflow: hidden;
}

.section-hero video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

.video-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(var(--color-white-rgb), 0.5);
   z-index: 5;
}

.hero-inner {
   position: relative;
   display: flex;
   gap: 3rem;
   width: 100%;
   height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 4rem;
   text-align: center;
   z-index: 10;
}

.hero-inner h1 {
   color: var(--color-primary-dark);
   margin-bottom: 0;
}

.hero-inner p {
   margin-bottom: 0;
   font-size: 2.8rem;
}

.hero-inner #hero-button.button-open {
   border: 2px solid var(--color-primary);
   color: var(--color-primary);
   background-color: rgba(var(--color-white-rgb), 0.5);
}

.hero-inner #hero-button.button-open:hover {
   border: 2px solid var(--color-primary-dark);
   background-color: var(--color-primary-dark);
   color: var(--color-white);
}

@media only screen and (max-width:900px) {
   .section-hero {

      margin-top: 114px;

   }

}

@media only screen and (max-width:550px) {
   .section-hero {

      height: 40rem;
   }

   .hero-inner p {
      line-height: 1.2;
      margin-bottom: 1rem;
      font-size: 2.4rem;
   }

   .hero-inner {
      gap: 2rem;
   }

}


/*
 * Featured Products
 *
 */

.section-featured-products {
   padding: 6rem 0;

}

.section-featured-products h2 {
   width: 100%;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

ul.featured-products {
   margin: 0;
   width: 100%;
   gap: 2rem;
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

}

.woocommerce-page.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product,
li.featured-product-card {
   /* background-color: yellow; */
   padding: 2rem;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: fit-content;
   transition: background-color 250ms ease-in-out;
   align-items: center;
}

@media only screen and (max-width:1000px) {
   ul.featured-products {
      grid-template-columns: 1fr 1fr;
   }

}

@media only screen and (max-width:700px) {
   ul.featured-products {
      grid-template-columns: 1fr;
   }

}

.surf-grid .woocommerce-page.columns-3 ul.products li.product,
.surf-grid .woocommerce.columns-3 ul.products li.product,
.surf-grid li.featured-product-card,
ul.products li.featured-product-card {
   grid-column: span 4;
   width: 100%;
}

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

   .surf-grid .woocommerce-page.columns-3 ul.products li.product,
   .surf-grid .woocommerce.columns-3 ul.products li.product,
   .surf-grid li.featured-product-card,
   ul.products li.featured-product-card {
      grid-column: span 6;

   }
}

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

   .surf-grid .woocommerce-page.columns-3 ul.products li.product,
   .surf-grid .woocommerce.columns-3 ul.products li.product,
   .surf-grid li.featured-product-card,
   ul.products li.featured-product-card {
      grid-column: span 12;

   }
}

.woocommerce-page.columns-3 ul.products li.product:hover,
.woocommerce.columns-3 ul.products li.product:hover,
li.featured-product-card:hover {
   background-color: rgba(var(--color-primary-rgb), 0.05);

}


.fp-image-box {
   position: relative;
   width: 100%;
   height: 32rem;
}

.woocommerce ul.products li.product a img,
.fp-image-box img {
   /* height: unset!important;
   width: unset!important; */
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;

}

.fp-body-box {
   display: flex;
   width: 100%;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 2rem;

}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
.fp-body-box h3 {
   text-align: center;
   word-wrap: break-word;
   text-transform: none;
   letter-spacing: .05rem;
   white-space: normal;
   font-weight: 700;
   font-size: 2.2rem;
   line-height: 1.3;
}

.fp-body-box p {
   text-align: center;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
   display: inline-block;
   height: 42px;
   padding: 0 30px;
   font-size: 13px;
   font-weight: 490;
   line-height: 42px;
   border-width: 2px;
   border-radius: 6px;
   font-family: var(--font-text);
   text-transform: uppercase;
   letter-spacing: 0.14rem;
   transition: all 250ms ease-in-out;
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
   text-decoration: none !important;
   width: fit-content;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover {
   background-color: var(--color-primary-dark);
   color: var(--color-white);
   text-decoration: none;
   background-image: none;
   /* color: #515151; */
}




section.section-mid-hero {
   position: relative;
   height: auto;
   width: 100%;
   padding: 8rem 0;
}

.mid-hero-image-box {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.mid-hero-image-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mid-hero-card {
   position: relative;
   z-index: 5;
   background-color: var(--color-white);
   width: 400px;
   height: 400px;
   padding: 4.5rem 3.5rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

@media only screen and (max-width:500px) {
   .mid-hero-card {
      width: 100%;
   }

}

.mid-hero-card h3 {
   text-align: center;
}

.mid-hero-card p {
   text-align: center;
   font-size: 2rem;
}

section.section-shipment-info {
   position: relative;
   width: 100%;
   padding: 4rem 0;
   height: auto;

}

.shipment-info-inner {
   height: auto;
   display: flex;
   gap: 3rem;

}

@media only screen and (max-width: 700px) {
   .shipment-info-inner {
      flex-direction: column;
   }
}

.shipment-info-inner-left {
   width: 35%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}

.shipment-info-inner-left i {
   font-size: 18rem;
   color: var(--color-black);
}

.shipment-info-inner-right {
   width: 65%;
   padding: 6rem 3rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   /* flex-direction: column;
   justify-content: center;
   gap:3rem; */
}

.shipment-info-inner-right h2 {
   text-align: center;
}

.shipment-info-inner-right p {
   text-align: center;
   font-size: 2rem;
}

@media only screen and (max-width: 700px) {
   .shipment-info-inner {
      flex-direction: column;
      padding-top: 6rem;
   }

   .shipment-info-inner-left,
   .shipment-info-inner-right {
      width: 100%;
   }
}

section.section-signup-newsletter {
   position: relative;
   height: auto;
   width: 100%;
   background-color: var(--color-primary);
   padding: 8rem 0;
}

.signup-newsletter-form {
   width: 350px;
   max-width: 100%;

}

.section-email {
   position: relative;
   width: 100%;

}

.section-email i {
   position: absolute;
   top: 10px;
   right: 16px;
   color: rgba(var(--color-primary-rgb), 0.5);
}

.signup-newsletter-form input {
   position: relative;
   width: 100%;
}

section.section-signup-newsletter .container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   color: var(--color-white);
   gap: 3rem;
}

section.section-signup-newsletter .container h2,
section.section-signup-newsletter .container p,
section.section-signup-newsletter .container form {
   text-align: center;
   margin: 0;
   padding: 0;
}

section.section-photo-slider {
   width: 100%;
   height: 430px;
   position: relative;
}

section.section-photo-slider .homepage-swiper {
   position: relative;
   height: 100%;
   width: 100%;
}

section.section-photo-slider .swiper-slide {
   position: relative;
   height: 100%;
   width: 100%;
   z-index: 5;

   /* display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap:2rem;
   align-items: center;
   padding:8rem; */
}

section.section-photo-slider .swiper-slide .slide-body {
   position: relative;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2rem;
   align-items: center;
   padding: 8rem;
   z-index: 10;
   color: var(--color-white);
   background-color: rgba(var(--color-primary-rgb), 0.2);
   background-color: rgba(0, 0, 0, 0.2);

}

@media only screen and (max-width: 600px) {
   section.section-photo-slider .swiper-slide .slide-body {
      padding: 4rem;
   }

}

section.section-photo-slider .swiper-slide .slide-body h2 {
   text-align: center;
}

section.section-photo-slider .swiper-slide .slide-body .button {
   border-color: var(--color-white);
   color: var(--color-white);
}

section.section-photo-slider .swiper-slide img {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

/*
 * Page Blogs
 */

.container.posts-container {
   margin-bottom: 12rem;
}

ul.blog-grid {
   margin: 0;
   margin-bottom: 4rem;
   width: 100%;
   gap: 2rem;
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 600px) {
   ul.blog-grid {
      grid-template-columns: 1fr;
   }

}

ul.blog-grid li {

   width: 100%;

}

ul.blog-grid li a {
   text-decoration: none;
}

ul.blog-grid li .post-item-image-box {
   width: 100%;
   height: 250px;
   overflow: hidden;
}

ul.blog-grid li .post-item-image-box img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: transform 250ms ease-in-out;
}

ul.blog-grid li .post-item-image-box img:hover {
   transform: scale(1.05);
}

.post-item-title {
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   text-align: center;

}

.post-item-title:hover {
   text-decoration: underline;
}

.post-item-excerpt {
   text-align: center;
}

/*
 * About page 
 *
 */

#primary.about-main {
   padding: 0;
}

.section-about-text {
   padding: 8rem 0;
   text-align: center;
}

.section-about-proposition {
   width: 100%;

}

.section-about-proposition .container-wide {
   background-color: var(--color-primary-dark);
   padding: 4rem 0;

}

h2.h2-about-proposition {
   text-align: center;
   color: var(--color-white);
   margin-bottom: 0;
   font-weight: 800;

}

ul.proposition-list {
   margin-top: 6rem;
   list-style: none;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem
}

li.proposition-card {
   padding: 2rem;
   background-color: rgba(var(--color-primary-rgb), 0.1);
}

li.proposition-card p,
li.proposition-card h3 {
   text-align: center;
   width: 100%;
}

@media only screen and (max-width: 600px) {
   ul.proposition-list {
      grid-template-columns: 1fr;
   }

}

.section-about-cta {
   margin: 8rem 0;
   display: flex;
   justify-content: center;
   align-items: center;

}

/* 
 * Contact page 
 *
 */

.form-top-box {
   width: 100%;
   display: flex;
   gap: 2rem;
   justify-content: space-between;


}


.wpcf7-form p {
   margin-bottom: 0;
}

.form-top-box p {
   flex-grow: 1;
}

@media only screen and (max-width: 500px) {
   .form-top-box {
      flex-wrap: wrap
   }

   .form-top-box p {
      width: 100%;
   }
}

.wpcf7-form label,
.wpcf7-form input,
.wpcf7-form textarea {
   width: 100%;
}

/* Popup */

.sgpb-main-html-content-wrapper .signup-newsletter-form {
   width: 100%;
}