@font-face { font-family: PlayfairDisplayRegular; src: url(../fonts/PlayfairDisplay-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: SnellRoundhand; src: url(../fonts/SnellRoundhand.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap }

:root {
  --bp-min-width: 360px;
  --bp-moblie: 679px;
  --bp-tablet: 899px;
  --bp-laptop: 1299px;
  --bp-desktop: 1919px;
  --bp-min-width-num: 360;
  --bp-moblie-num: 680;
  --bp-tablet-num: 900;
  --bp-laptop-num: 1300;
  --bp-desktop-num: 1920;

  --line-height-default: 100%;
  --font-weight-default: 400;
  --font-size-default: 18px;
  --letter-spacing-default: 3%;
    
  --color-background: #000;
  --color-light: #fff;
  --color-text-default: #EAC96B;

  --main-gap: 120px;

  --transition-default: all .3s ease;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  --button-size-social: 44px;
  --button-size-social-icon: 28px;
  --advantages-size-icon: 32px;

  --border-radius-social: 8px;
  --border-radius-block: 32px;
}

@media screen and (max-width: 1919px) {
    :root {
        --denominator: ( (100vw - var(--bp-laptop)) / (var(--bp-desktop-num) - var(--bp-laptop-num)));        
    }
}
@media screen and (max-width: 1299px) {
    :root {
        --denominator: ( (100vw - var(--bp-tablet)) / (var(--bp-laptop-num) - var(--bp-tablet-num)) );
        --main-gap: 100px;
        --border-radius-block: 26px;
    }
}
@media screen and (max-width: 899px) {
     :root {
        --denominator: ( (100vw - var(--bp-moblie)) / (var(--bp-tablet-num) - var(--bp-moblie-num)) );
        --main-gap: 80px;
        --font-size-default: 16px;
        --advantages-size-icon: 28px;
        --border-radius-block: 20px;
    }
}
@media screen and (max-width: 679px) {
        :root {  
            --denominator: ( (100vw - var(--bp-min-width)) / ( var(--bp-moblie-num) - var(--bp-min-width-num)) );
            --main-gap: 60px;
            --font-size-default: 14px;
            --border-radius-block: 16px;
        }
}

*, ::after, ::before { box-sizing: border-box; font-family: PlayfairDisplayRegular; font-size:  inherit; color: inherit; line-height: inherit; text-align: inherit; transition: var(--transition-default);   }
html { min-width: 360px; scrollbar-gutter: stable; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; height: 100%; min-height: 100vh; min-width: 360px; display: flex; flex-direction: column; color: var(--color-text-default); font-size: var(--font-size-default); letter-spacing: var(--letter-spacing-default); line-height: var(--line-height-default); font-weight: var(--font-weight-default); background-color: var(--color-background); background-image: url('../image/bottom.png'); background-repeat: no-repeat; background-size: auto 379px; background-position: bottom center; overflow-x: hidden; }
body, h1, h2, h3, h4, h5, h6, html, li, ol, p, ul { margin: 0; padding: 0; border: 0; font-size: var(--font-size-default); vertical-align: baseline; }
ol, ul { list-style: none; }
button, input { padding: 0; font-family: inherit; font-size: inherit; border: none; border-radius: 0; appearance: none; outline: 0; color: inherit; background-color: transparent; }
button { cursor: pointer; }
:active, :focus, :hover { outline: 0; outline-offset: 0; }
a { text-decoration: none; outline: 0; }
a:hover { text-decoration: underline; }


.container { width: calc(100% - 32px); max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; position: relative; align-items: center; }

.navbar { position: sticky; top: 0px; height: 64px; display: flex; align-items: center; font-size: 18px; background-color: var(--color-background); z-index: 10; }

  .navbar .container { gap: 56px; flex-direction: row; justify-content: space-between; align-items: center; }
  .navigation { display: flex; justify-content: flex-start;  align-items: center; gap:  16px;  }
  .navigation a { display: block; padding: 8px 12px; }

  .buttonMenuMobile { display: none; }

  .social { display: flex; justify-content: flex-end;  align-items: center; gap:  8px;  }
  .socialLink { display:flex; justify-content: center; align-items: center; width: var(--button-size-social); height: var(--button-size-social); border-radius: var(--border-radius-social);  }
  .socialLink:hover, .socialLink:focus, .socialLink:active { border: 1px solid rgba(234, 201, 107, 0.12);  background: linear-gradient(146.58deg, rgba(234, 201, 107, 0.16) 4.97%, rgba(234, 201, 107, 0.08) 100.29%); backdrop-filter: blur(23px); }
  .socialLink svg { display:flex; justify-content: center; align-items: center; width: var(--button-size-social-icon); height: var(--button-size-social-icon); fill: var(--color-text-default)  }

.section { display: flex; justify-content: center; align-items: start; padding: 100px 0 20px 0; width: 100%; overflow: hidden;  }
  .section .container { height: 100%; position: relative; z-index: 2; }
  .section h2 { font-family: SnellRoundhand; font-weight: 400; font-size: 48px; color: var(--color-light); line-height: 100%; opacity: 0.9; }
  .sectionInfo { display: flex; flex-direction: column; gap: 60px; justify-content: center; align-items: center; max-width: 830px;}
  .sectionInfoItem { display: flex; gap: 20px; flex-direction: column; justify-content: center; align-items: center; line-height: 140%; }
  .sectionInfo p {  text-align: center; }


.about { height: calc(100dvh - 64px); padding-top: 0;  }
  .about .container { justify-content: space-between; } 
  .aboutImage { display: none; }

  .logo { width: 39%; height: auto; margin: 0 auto; }
  .advantages { display: flex; gap: 80px; padding-bottom: 40px; }
  .advantagesItem { display: flex; gap: 12px; flex-direction: column; align-items: center; justify-content: start; }
  .advantagesItem p { text-align: center; max-width: 250px;}
  .advantagesItem svg { width: 28px; height: 28px; fill: var(--color-text-default); width: var(--advantages-size-icon); height: var(--advantages-size-icon); }

  .bgAboutSmokeLeft { position: absolute; top: 0; left: 0; width: auto; height: 130%; z-index: 1; }
  .bgAboutSmokeRight { position: absolute; top: 0; right: 0; width: auto; height: 130%;  z-index: 1; }
  .bgAboutCenter { position: absolute; top: 84px; left: 50%; transform: translateX(-54%); width: auto; height: calc(100dvh - 84px); z-index: 0; }

.contacts { background: url('../image/contacts.png') no-repeat; background-size: 100% auto; background-position: top 60px center; height: fit-content;  }
  .contacts .container { justify-content: space-between; gap: var(--main-gap); }
  .contactsInfoPhone { display: flex; row-gap: 8px; column-gap: 12px; flex-wrap: wrap;  }
  .contactsInfoPhone span { display: flex;  }
  .contactsInfoPhone span.contactsInfoPhoneTitle { justify-content: end; opacity: 0.7; width: calc(50% - 26px);  }
  .contactsInfoPhone span.contactsInfoPhoneNumber { justify-content: start;  width: calc(50% + 14px); }
  .contactsInfoSocial { display: flex; gap: 12px; justify-content: center; align-items: center; }
  .contactsInfoSocial .socialLink { border: 1px solid rgba(234, 201, 107, 0.12);  backdrop-filter: blur(23px); background: linear-gradient(146.58deg, rgba(234, 201, 107, 0.16) 4.97%, rgba(234, 201, 107, 0.08) 100.29%);   }
  .contactsMap {max-width: 960px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
  .contactsMap img { width: 100%; height: auto; border-radius: var(--border-radius-block); border: 2px solid rgba(234, 201, 107, 0.2); }

.philosophy { background-image: url('../image/philosophy_01.png'), url('../image/philosophy_02.png'); background-repeat: no-repeat, no-repeat; background-size: 37% auto, 48% auto; background-position: top 104px left, bottom right; height: fit-content;  }
  .philosophy .container { justify-content: space-between; gap: var(--main-gap); }  

  .philosophySlider { width: 100%; max-width: 960px; padding-bottom: 48px; }
  .philosophySlider .slick-list { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--border-radius-block); background: rgba(21, 21, 21, 1); border: 2px solid rgba(234, 201, 107, 0.2); }
  .philosophySlider .slick-slide { aspect-ratio: 16 / 9; height: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; }
  .philosophySlider .philosophySliderItem { aspect-ratio: 16 / 9; height: 100%; max-height: 100%; display: flex !important; justify-content: center; align-items: center; overflow: hidden;}
  .philosophySliderItem img { height: 100%; max-height: 100%; width: auto; }
  .philosophySliderItem video { height: 100%; max-height: 100%; width: auto; }

.brands { height: fit-content; padding-bottom: 240px; }
.brands .container { justify-content: space-between; gap: 60px; max-width: calc(100% - 32px); height: fit-content; }
.brandsSlider { width: 100%; }
  .brandsSlider .slick-list { width: 100%; height: 178px; }
  .brandsSlider .slick-slide { height: 178px; display: flex !important; justify-content: center; align-items: center;}
  .brandsSlider .brandsSliderItem { height: 178px; display: flex !important; justify-content: center; align-items: center;}
  .brandsSliderItem img { max-height: 100%; width: auto; max-width: 85%;  }

@media screen and (max-width: 1050px) {
    .philosophySlider { width: calc(100% - 64px); }
    .section h2 { font-size: 42px; }
    .sectionInfo { gap: 55px; }
    .philosophySlider { padding-bottom: 42px;}
}

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

  .section { padding: 80px 0 20px 0; }
  .section h2 { font-size: 38px; }
  
  .about { height: fit-content; background-image: none; padding-top: 0;  padding-bottom: 0;   }
  .about .container { justify-content: normal; width: 100dvw; max-width:  100dvw;  } 
  .aboutImage { display: block; width: 100%; max-width: 100%; height: auto; }
  .bgAboutCenter, .bgAboutSmokeLeft , .bgAboutSmokeRight { display: none;}

  .advantages { flex-direction: column; width: 100%; gap: 60px; margin-top: -50px; padding-top: 50px; background-image: url('../image/smokeLeft.png'), url('../image/smokeRight.png'); background-repeat: no-repeat, no-repeat; background-size: 20% auto, 20% auto; background-position: top left, top right; }
  .advantagesItem { display: flex; gap: 12px; flex-direction: column; align-items: center; justify-content: start; }
  .advantagesItem p { text-align: center; max-width: 250px;}
  .advantagesItem svg { width: 28px; height: 28px; fill: var(--color-text-default); width: var(--advantages-size-icon); height: var(--advantages-size-icon); }

  .bgAboutSmokeLeft { top: 50%; left: 0; width: 25%; height: auto; }
  .bgAboutSmokeRight { top: 50%; right: 0; width: 25%; height: auto; }
  .bgAboutCenter { position: absolute; top: 34px; left: 50%; transform: translateX(-52%); width: 102%; height: auto; }

  .philosophySlider { padding-bottom: 36px;}
   .sectionInfo { gap: 50px; }

   .brands .container { gap: 40px; }   
}

@media screen and (max-width: 679px) {
    .section { padding: 60px 0 20px 0; }
    .section h2 { font-size: 32px; }
    .about { padding-top: 20px;  }
    .logo { width: 55%; }
    .bgAboutCenter { top: 0;}
    .advantages { gap: 24px; padding-bottom: 0; }
    .advantagesItem { gap: 8px; }

    .contacts { background-image: url('../image/contactsMobile.png'); background-repeat: no-repeat;  background-size: 60% auto;   background-position: top -50px left 20px; }
    .sectionInfo { gap: 40px; }
    .contactsInfoPhone { row-gap: 4px; column-gap: 8px; }

    .philosophy { background-image: url('../image/philosophyMobile_01.png'), url('../image/philosophyMobile_02.png'); background-repeat: no-repeat, no-repeat; background-size: 50% auto, 40% auto; background-position: top -120px right, bottom left; padding-bottom: 80px;}

    .philosophySlider { width: 100%; padding-bottom: 30px;}

    .brands { padding-bottom: 100px; padding-top: 0; margin-top: -20px; }
    .brands .container { gap: 10px; max-width: 100%; }   
    
    .navbar { position: fixed; bottom: 20px; left: 20px; right: 20px; top: auto; height: 76px; z-index: 100; background: #FFFFFF03; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); mix-blend-mode: normal; border-radius: 24px; display: flex; justify-content: space-between; align-items: end; border: solid 1px #EAC96B33; transition: var(--transition-default); }
    .navbar.openMenu { height: 228px; transition: var(--transition-default); }
    .navbar .container { flex-wrap: wrap; gap: 0; padding-bottom: 16px; }


    .navigation { width: 100%; height: 0px; overflow: hidden; flex-direction: column; gap: 16px;}
    .navigationLink { width: 100%;}
    .navigation.open { height: 152px; padding: 16px 0; }

    .buttonMenuMobile { display: flex; justify-content: center; align-items: center; width: var(--button-size-social); height: var(--button-size-social); background-color: transparent; border: none; outline: none; }
    .burgerMenu { position: relative; width: 20px; height: 2px; background-color: #EAC96B; border-radius: 12px; transition: var(--transition-default); display: block; }
    .burgerMenu::before { content: ''; position: absolute; top: -5px; left: 0; height: 2px; width: 20px; display: block; transition: var(--transition-default); background-color: var(--color-text-default); border-radius: 12px; }
    .burgerMenu::after { content: ''; position: absolute; bottom: -5px; left: 0; height: 2px; width: 20px; display: block; transition: var(--transition-default); background-color: var(--color-text-default); border-radius: 12px; }
    .buttonMenuMobile.active { 
      & .burgerMenu { background-color: transparent; }
      & .burgerMenu::before { transform: translate(-2px, 6px) rotate(45deg); }
      & .burgerMenu::after { transform: translate(-2px, -4px) rotate(-45deg); }
    }
}