@charset "UTF-8";

:root {
  --variable-desktop: 1920;
  --variable-tablet-l: 1280;
  --variable-tablet-p: 768;
  --variable-mobile: 360;
  --viewport-unit: 100vw;
  --white: #fff;
  --grey: #888;
  --dark-grey: #444;
  --black: #000;
  --white-transparency-20: rgba(255, 255, 255, 0.2);
  --transparent: rgba(255, 255, 255, 0);
}

@font-face {
  font-family: Meranie;
  src: url(../fonts/Meranie.otf) format("opentype"),
       url(../fonts/Meranie.ttf) format("truetype");
}

@font-face {
  font-family: GothamBook;
  src: url(../fonts/Gotham-Book.ttf) format("truetype");
}

@font-face {
  font-family: Copperplate;
  src: url(../fonts/Copperplate.otf) format("opentype");
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #000;
}

::-webkit-scrollbar-thumb {
  background: #8a8a8a;
}

::-webkit-scrollbar-thumb:hover {
  background: #bb811e;
}

.scroll-down {
  position: absolute;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 1;
}

.scroll-down a {
  display: inline-block;
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-image: url(../images/scroll-arrow.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

.home_navbar {
  width: 100%;
  height: calc(112 / var(--variable-desktop) * var(--viewport-unit));
  padding-top: calc(38 / var(--variable-desktop) * var(--viewport-unit));
  background-color: var(--white);
}

.home_navbar_items {
  width: calc(1542 / var(--variable-desktop) * var(--viewport-unit));
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.home_navbar_items a {
  text-decoration: none;
}

.home_navbar_items_link {
  font-family: Copperplate;
  font-size: calc(24 / var(--variable-desktop) * var(--viewport-unit));
  color: var(--black);
}

.home_banner {
  width: 100%;
  height: calc(1300 / var(--variable-desktop) * var(--viewport-unit));
  position: relative;
  background-image: url(../img/home_banner.webp);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.home_logo {
  width: calc(142 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(183 / var(--variable-desktop) * var(--viewport-unit));
  position: absolute;
  top: calc(24 / var(--variable-desktop) * var(--viewport-unit));
  left: calc(190 / var(--variable-desktop) * var(--viewport-unit));
  background-image: url(../img/logo.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.slogan_banner {
  width: 100%;
  height: calc(1146 / var(--variable-desktop) * var(--viewport-unit));
  position: relative;
  background-image: url(../img/slogan_banner-min.jpg);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.slogan_banner_logo {
  width: calc(289 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(373 / var(--variable-desktop) * var(--viewport-unit));
  position: absolute;
  background-image: url(../img/logo_sarti.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  top: calc(164 / var(--variable-desktop) * var(--viewport-unit));
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.slogan_banner_text {
  position: absolute;
  top: calc(600 / var(--variable-desktop) * var(--viewport-unit));
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: Meranie;
  font-size: calc(112 / var(--variable-desktop) * var(--viewport-unit));
  color: var(--dark-grey);
}

.history_block {
  width: 100%;
  position: relative;
}

.history_block.first {
  height: calc(1232 / var(--variable-desktop) * var(--viewport-unit));
  margin-top: calc(106 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block.second {
  height: calc(1246 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block.third {
  height: calc(986 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block.fourth {
  height: calc(1156 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block_text_left-side {
  width: calc(540 / var(--variable-desktop) * var(--viewport-unit));
  left: calc(200 / var(--variable-desktop) * var(--viewport-unit));
  position: absolute;
  font-family: GothamBook;
  font-size: calc(30 / var(--variable-desktop) * var(--viewport-unit));
  line-height: 1.3;
  text-align: justify;
  white-space: normal;
  z-index: 9;
}

.first .history_block_text_left-side {
  top: calc(232 / var(--variable-desktop) * var(--viewport-unit));
}

.third .history_block_text_left-side {
  top: calc(50 / var(--variable-desktop) * var(--viewport-unit));
}

.fourth .history_block_text_left-side {
  top: calc(184 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block_text_right-side {
  width: calc(540 / var(--variable-desktop) * var(--viewport-unit));
  left: calc(1070 / var(--variable-desktop) * var(--viewport-unit));
  position: absolute;
  font-family: GothamBook;
  font-size: calc(30 / var(--variable-desktop) * var(--viewport-unit));
  line-height: 1.3;
  text-align: justify;
  white-space: normal;
  z-index: 9;
}

.second .history_block_text_right-side {
  top: calc(164 / var(--variable-desktop) * var(--viewport-unit));
}

.history_block_img_right-side {
  height: 100%;
  position: absolute;
  right: 0;
}

.history_block_img_left-side {
  width: auto;
  height: 100%;
  position: absolute;
  left: 0;
}

.history_block_img_left-side img,
.history_block_img_right-side img {
  width: 100%;
  height: 100%;
}

.history_block_side_bottle {
  width: calc(1430 / var(--variable-desktop) * var(--viewport-unit));
  position: absolute;
  top: calc(-304 / var(--variable-desktop) * var(--viewport-unit));
  z-index: 1;
}

.history_block_side_bottle img {
  width: 100%;
  height: 100%;
}

.wines_section {
  position: relative;
}

.wines_section_top {
  width: 100%;
  height: auto;
  padding: calc(80 / var(--variable-desktop) * var(--viewport-unit)) 0;
  font-family: Copperplate;
  font-size: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  text-align: center;
}

.wines_section_top_logo {
  width: calc(249 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(237 / var(--variable-desktop) * var(--viewport-unit));
  background-image: url(../img/wines_section-logo.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.wines_section_top_logo.first {
  position: absolute;
  top: calc(46 / var(--variable-desktop) * var(--viewport-unit));
  left: calc(96 / var(--variable-desktop) * var(--viewport-unit));
}

.wines_section_top_logo.second {
  position: absolute;
  top: calc(46 / var(--variable-desktop) * var(--viewport-unit));
  right: calc(96 / var(--variable-desktop) * var(--viewport-unit));
}

.wines_section_container {
  width: 100%;
  height: calc(1112 / var(--variable-desktop) * var(--viewport-unit));
  padding-top: calc(240 / var(--variable-desktop) * var(--viewport-unit));
  background-image: url(../img/wines_section_container-min.jpg);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.autoplay {
  width: calc(1144 / var(--variable-desktop) * var(--viewport-unit));
  margin: 0 auto;
}

.slide_item {
  width: calc(360 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(720 / var(--variable-desktop) * var(--viewport-unit)) !important;
  margin: 0 calc(16 / var(--variable-desktop) * var(--viewport-unit));
  padding-top: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  border-radius: calc(12 / var(--variable-desktop) * var(--viewport-unit));
  background-color: var(--white);
  display: flex !important;
  flex-direction: column;
}

.slide_item_bottle {
  width: calc(97 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(360 / var(--variable-desktop) * var(--viewport-unit));
  margin: 0 auto;
}

.slide_item_bottle img {
  width: calc(97 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(360 / var(--variable-desktop) * var(--viewport-unit));
}

.slide_item_title {
  margin: calc(40 / var(--variable-desktop) * var(--viewport-unit)) 0
          calc(12 / var(--variable-desktop) * var(--viewport-unit));
  font-size: calc(22 / var(--variable-desktop) * var(--viewport-unit));
  text-align: center;
}

.slide_item_subtitle {
  width: calc(292 / var(--variable-desktop) * var(--viewport-unit));
  margin: 0 auto;
  font-size: calc(18 / var(--variable-desktop) * var(--viewport-unit));
  color: var(--grey);
  text-align: center;
}

.slide_item_button {
  width: calc(150 / var(--variable-desktop) * var(--viewport-unit));
  height: calc(46 / var(--variable-desktop) * var(--viewport-unit));
  margin: calc(30 / var(--variable-desktop) * var(--viewport-unit)) auto;
  border-radius: calc(23 / var(--variable-desktop) * var(--viewport-unit));
  -webkit-box-shadow: 9px 11px 14px -7px #000;
  box-shadow: 9px 11px 14px -7px #000;
  position: absolute;
  bottom: calc(20 / var(--variable-desktop) * var(--viewport-unit));
  background-color: var(--grey);
  font-size: calc(16 / var(--variable-desktop) * var(--viewport-unit));
  line-height: calc(46 / var(--variable-desktop) * var(--viewport-unit));
  color: var(--white);
  text-align: center;
  align-self: center;
  cursor: pointer;
}

.slide_item a {
  text-decoration: none;
}

.pull-left {
  height: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  width: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  background-color: transparent;
  border: none;
  background-image: url(../img/arrow_left.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(260 / var(--variable-desktop) * var(--viewport-unit));
  left: calc(-70 / var(--variable-desktop) * var(--viewport-unit));
}

.pull-right {
  height: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  width: calc(80 / var(--variable-desktop) * var(--viewport-unit));
  border: none;
  background-color: transparent;
  background-image: url(../img/arrow_right.png);
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(260 / var(--variable-desktop) * var(--viewport-unit));
  right: calc(-70 / var(--variable-desktop) * var(--viewport-unit));
}


/* ======================================== */
/* Footer Styles - START */
/* ======================================== */

.footer {
  /* Remove fixed height - let content define it */
  width: 100%;
  padding: calc(60 / var(--variable-desktop) * var(--viewport-unit)) /* top/bottom */
           calc(40 / var(--variable-desktop) * var(--viewport-unit)); /* left/right */
  font-family: GothamBook, Arial, sans-serif; /* Added fallback fonts */
  color: var(--dark-grey);
  background-color: #ffffff; /* Assuming white background like screenshot */
  text-align: center;
  box-sizing: border-box; /* Include padding in width/height */
}

.footer-top {
  margin-bottom: calc(40 / var(--variable-desktop) * var(--viewport-unit));
  font-size: calc(18 / var(--variable-desktop) * var(--viewport-unit)); /* Adjusted size */
  line-height: 1.6;
}

.footer-top p {
  margin-bottom: calc(10 / var(--variable-desktop) * var(--viewport-unit)); /* Space between lines */
}

.footer-middle {
  display: flex; /* Use Flexbox for columns */
  justify-content: space-around; /* Distribute columns */
  align-items: flex-start; /* Align column tops */
  flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
  margin-bottom: calc(40 / var(--variable-desktop) * var(--viewport-unit));
  text-align: left; /* Align text left within columns */
}

.footer-column {
  flex: 1; /* Allow columns to share space */
  min-width: 180px; /* Minimum width before potentially wrapping */
  padding: 0 calc(20 / var(--variable-desktop) * var(--viewport-unit)); /* Padding inside columns */
  box-sizing: border-box;
  margin-bottom: calc(30 / var(--variable-desktop) * var(--viewport-unit)); /* Space below on mobile */
}

.footer-column h4 {
  font-family: Copperplate, serif; /* Added fallback font */
  font-size: calc(20 / var(--variable-desktop) * var(--viewport-unit)); /* Adjusted size */
  color: var(--black);
  margin-bottom: calc(15 / var(--variable-desktop) * var(--viewport-unit));
  text-align: center; /* Center column titles */
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* Center list items */
}

.footer-column ul li {
  font-size: calc(18 / var(--variable-desktop) * var(--viewport-unit)); /* Adjusted size */
  color: var(--grey);
  line-height: 1.5;
  margin-bottom: calc(8 / var(--variable-desktop) * var(--viewport-unit));
}

.footer-bottom {
  margin-top: calc(30 / var(--variable-desktop) * var(--viewport-unit));
  padding-top: calc(30 / var(--variable-desktop) * var(--viewport-unit));
  font-size: calc(16 / var(--variable-desktop) * var(--viewport-unit)); /* Adjusted size */
  color: var(--grey);
  border-top: 1px solid #e0e0e0; /* Light line separator */
}

/* --- Responsive Adjustments for Mobile --- */
/* Targetting typical mobile portrait screens and below */
@media (max-width: 767px) {

  .footer {
      /* Adjust padding for smaller screens */
      padding: calc(40 / var(--variable-mobile) * 100vw) /* top/bottom */
               calc(20 / var(--variable-mobile) * 100vw); /* left/right */
      /* Using mobile base variable for scaling */
  }

  .footer-top {
    margin-bottom: calc(30 / var(--variable-mobile) * 100vw);
    font-size: calc(14 / var(--variable-mobile) * 100vw); /* Smaller font on mobile */
  }

   .footer-top p {
     margin-bottom: calc(8 / var(--variable-mobile) * 100vw);
   }

  .footer-middle {
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center columns in the stack */
    margin-bottom: calc(20 / var(--variable-mobile) * 100vw);
  }

  .footer-column {
    flex-basis: 100%; /* Make columns take full width */
    min-width: auto; /* Reset min-width */
    text-align: center; /* Ensure text alignment is centered */
    padding: 0 calc(10 / var(--variable-mobile) * 100vw); /* Adjust padding */
    margin-bottom: calc(25 / var(--variable-mobile) * 100vw); /* Space between stacked columns */
  }

  /* Ensure last column doesn't have extra bottom margin */
  .footer-column:last-child {
     margin-bottom: 0;
  }


  .footer-column h4 {
    font-size: calc(16 / var(--variable-mobile) * 100vw); /* Smaller heading on mobile */
    margin-bottom: calc(10 / var(--variable-mobile) * 100vw);
  }

  .footer-column ul li {
    font-size: calc(14 / var(--variable-mobile) * 100vw); /* Smaller list item font */
     margin-bottom: calc(6 / var(--variable-mobile) * 100vw);
  }

  .footer-bottom {
    margin-top: calc(25 / var(--variable-mobile) * 100vw);
    padding-top: calc(25 / var(--variable-mobile) * 100vw);
    font-size: calc(12 / var(--variable-mobile) * 100vw); /* Smaller legal text */
  }
}

/* Optional: Adjustments for slightly larger mobile/tablet portrait */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-column h4 {
        font-size: calc(18 / var(--variable-tablet-p) * 100vw);
    }
    .footer-column ul li {
         font-size: calc(16 / var(--variable-tablet-p) * 100vw);
    }
     .footer-top {
        font-size: calc(16 / var(--variable-tablet-p) * 100vw);
     }
      .footer-bottom {
        font-size: calc(14 / var(--variable-tablet-p) * 100vw);
     }
}


/* ======================================== */
/* Footer Styles - END */
/* ======================================== */


.modal .modal-content {
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s;
}

.modal.show .modal-content {
  opacity: 1;
  transform: scale(1);
}

.modal-header {
  position: absolute;
  background-color: transparent;
  border: none;
  right: calc(24 / var(--variable-desktop) * var(--viewport-unit));
  z-index: 999;
}

.modal-body {
  padding: 0;
}

.modal-body img {
  width: 100%;
}

.hidden {
  display: none !important;
}

a {
  /* Consider moving the general 'a' styling before the footer */
  /* if you want footer links to inherit differently */
  color: black;
  text-decoration: none;
}

/* Video Section Styling */
.video_section {
  background-color: var(--white);
  padding: 3rem 0; /* Consider using calc() here too for consistency */
}

.video_wrapper {
  max-width: 960px; /* Consider making this responsive or using calc() */
  margin: 0 auto;
}

/* Removed the old footer styles that were here */