@font-face { font-family: RobotoRegular; src: url(/fonts/Roboto-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: RobotoBold; src: url(/fonts/Roboto-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap }
@font-face  { font-family: SarpanchRegular; src: url(/fonts/Sarpanch-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap }
@font-face  { font-family: SarpanchBold; src: url(/fonts/Sarpanch-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap }

:root {
  --color-main: #000;
  --color-light: #fff;
  --color-secondary: #0F1E4D;
  --color-secondary-over: #445385;
  --color-primary: #00F9F1;
  --color-primary-over: #75D6D2;
  --color-disabled: #303030;
  --bg-color-dark: #060D24;
  --text-color-disabled: #848484;
  --color-border: #AAA;
  --color-border: #AAA;

  --denominator-DesktopBig: ( (100vw - 1440px) / ( 1920 - 1440) );
  --denominator-Desktop: ( (100vw - 1240px) / ( 1440 - 1240) );
  --denominator-Tablet: ( (100vw - 680px) / ( 1239 - 680) );
  --denominator-Mobile: ( (100vw - 360px) / ( 680 - 360));
}

*, ::after, ::before { box-sizing: border-box; font-family: RobotoRegular; font-size:  inherit; color: inherit; line-height: inherit; text-align: inherit;  transition: all 0.5s ease-in-out; }
html { min-width: 360px; }
body { width: 100%; min-width: 360px; height: 100%; min-height: 100vh; display: flex; flex-direction: column; color: var(--color-main); font-weight: 400; background-color: var(--color-light); overflow-x: hidden; }
body, h1, h2, h3, h4, h5, h6, html, li, ol, p, ul { margin: 0; padding: 0; border: 0; font-size: 100%; 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; }

h1 { font-size: calc(56px + (80 - 56) * var(--denominator-DesktopBig)); line-height: 1.2; font-family: RobotoBold; position: relative; }
  h1 .argus {  font-family: SarpanchBold; }
h2 { font-size: calc(40px + (56 - 40) * var(--denominator-DesktopBig)); line-height: 1.2; font-family: RobotoBold; margin-bottom: calc(18px + (24 - 18) * var(--denominator-DesktopBig)); }
h3 { font-size: calc(32px + (48 - 32) * var(--denominator-DesktopBig)); line-height: 1.2; font-family: RobotoBold; margin-bottom: calc(16px + (22 - 16) * var(--denominator-DesktopBig)); }
h4 { font-size: calc(20px + (28 - 20) * var(--denominator-DesktopBig)); line-height: 1.2; font-family: RobotoBold; margin-bottom: calc(16px + (22 - 16) * var(--denominator-DesktopBig)); }

.argus { font-family: SarpanchRegular;}

.container { width: 90%; max-width: 1728px; margin: 0 auto; display: flex; position: relative; }

.navbar { background-color: #EFEFEF; position: sticky; top: 0px; padding: 18px 0; font-size: calc(16px + (24 - 16) * var(--denominator-DesktopBig)); line-height: calc(22px + (24 - 22) * var(--denominator-DesktopBig)); z-index: 10; overflow-x: hidden;}
  .navbar .container { gap: 56px; justify-content: space-between; align-items: center; }
  .navigation { display: flex; justify-content: flex-start; align-items: flex-end; gap:  calc(12px + (24 - 12) * var(--denominator-DesktopBig));  }
  .navigation a { display: block; }
  a.logo { display: flex; justify-content: flex-start; align-items: flex-end; gap: 4px; font-family: SarpanchRegular; margin-bottom: 1px; }
  a.logo:hover { text-decoration: none; }
  a.logo:hover span  { text-decoration: underline; }
  .logo span { display: block; font-family: SarpanchRegular;  font-size: calc(18px + (24 - 18) * var(--denominator-DesktopBig)); }
  .buttonsNavbar { display: flex; justify-content: flex-end; align-items: flex-end; gap: calc(16px + (24 - 16) * var(--denominator-DesktopBig)); margin-right: 48px; }
  .navbarClose { position: absolute; top: 0px; right: 0px; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; margin-top: -2px;  }
  .navbarClose:hover { cursor: pointer;}

.button { display: flex; justify-content: center; align-items: center; padding: 8px 20px; color: var(--color-secondary); border: solid 2px var(--color-secondary); border-radius: 6px; font-size: calc(16px + (22 - 16) * var(--denominator-DesktopBig));  line-height: calc(24px + (33 - 24) * var(--denominator-DesktopBig)); }
  a.button:hover, .button:hover { color: var(--color-secondary-over); border-color: var(--color-secondary-over); text-decoration: none;}
  .button:disabled { color: var(--color-disabled); border-color: var(--color-disabled);}
  
  .buttonSecondary { color: var(--color-light); background-color: var(--color-secondary);}
  a.buttonSecondary:hover, .buttonSecondary:hover { color: var(--color-light); border-color: var(--color-secondary-over); background-color: var(--color-secondary-over);}
  .buttonSecondary:disabled { border-color: var(--color-secondary-over); background-color: var(--color-secondary-over);}

  .buttonPrimary { color: var(--color-main); background-color: var(--color-primary);  border-color: var(--color-primary); padding: 12px calc(22px + (30 - 22) * var(--denominator-DesktopBig));}
  a.buttonPrimary:hover, .buttonPrimary:hover { color: var(--color-main); border-color: var(--color-primary-over); background-color: var(--color-primary-over);}
  .buttonPrimary:disabled { color: var(--text-color-disabled); border-color: var(--color-disabled); background-color: var(--color-disabled);}

  .buttonPrimaryBorder { color: var(--color-primary); background-color: var(--bg-color-dark);  border-color: var(--color-primary); padding: 12px  calc(22px + (30 - 22) * var(--denominator-DesktopBig));}
  a.buttonPrimaryBorder:hover, .buttonPrimaryBorder:hover { color: var(--color-primary-over); border-color: var(--color-primary-over); background-color: var(--bg-color-dark); }
  .buttonPrimaryBorder:disabled { color: var(--text-color-disabled); border-color: var(--color-disabled); background-color: var(--bg-color-dark); }

.header { width: 100%; display: flex; justify-content: center; background-color: var(--bg-color-dark); position: relative; font-size: calc(18px + (24 - 18) * var(--denominator-DesktopBig)); line-height: 1.46; color: var(--color-light); z-index: 2; overflow: hidden;  }
  .header .container { position: absolute; left: 5%; top: 0px; height: 100%; align-items: center; justify-content: space-between; } 
  .headerLeft { width: 48%; display: flex; gap: 20px; flex-direction: column; margin-bottom: 2%;} 
  .headerRight { width: 48%; display: flex; align-items: center; justify-content: flex-start;  } 
  .buttonsHeader { display: flex; gap: calc(16px + (24 - 16) * var(--denominator-DesktopBig)); padding-top: calc(0px + (20 - 0) * var(--denominator-DesktopBig)); }

  .bgHeadDesktopBig { width: 97.5%; margin-right: 2.5%; max-width: 1871px; height: auto; display: block; } 
  .bgHeadDesktop { display: none; width: 97.5%; margin-right: 2.5%; height: auto; }
  .bgHeadTablet { display: none; width: 97.5%; margin-right: 2.5%; height: auto; }
  .bgHeadMobile { display: none; width: 100%; height: auto; }

  .flowerDesktopBig { height: auto; width: 84%; display: block; margin-top: 5%;  }
  .flowerDesktop { height: auto; width: 93.5%; display: none; margin-top: 5%;  }
  .flowerTablet { height: auto; width: 100%; display: none; }
  .flowerMobile  { display: none; position: relative; width: 270px; height: auto; }
  .headerBotFigureMobile { display: none; width: 100%;  justify-content: center; }
  .headerBotFigureMobile svg { display: block; width: 320px; height: auto; }

.footer { width: 100%; display: flex; justify-content: center; background-color: var(--bg-color-dark); position: relative; font-size: calc(18px + (24 - 18) * var(--denominator-DesktopBig)); line-height: 1.46; color: var(--color-light); z-index: 2;  }
  .footer .container { position: absolute; left: 5%; top: 0px; height: 100%; align-items: flex-start; justify-content: space-between; padding-top: calc(112px + (176 - 112) * var(--denominator-DesktopBig)); } 
  .footer h2 { font-size: calc(48px + (64 - 48) * var(--denominator-DesktopBig));}
  .footer p { margin-bottom: 32px;}
  .footer p.details, .footer .details{ font-size: calc(16px + (20 - 16) * var(--denominator-DesktopBig)); color: var(--color-border);}
  .footerLeft  { width: 41%; position: relative; z-index: 2; }
  .footerRight  { width: 43%; position: relative; z-index: 2;}
  .footerCopy { position: absolute; left: 0px; right: 0px; bottom: calc(50px + (70 - 50) * var(--denominator-DesktopBig));  padding-top: calc(33px + (42 - 33) * var(--denominator-DesktopBig));  color: var(--color-light); border-top: solid 1px var(--color-border); display: flex; align-items: center; justify-content: space-between; font-size: calc(14px + (20 - 14) * var(--denominator-DesktopBig)); }
  .footerCopy span { gap: 36px; display: flex; }

  .footer_bg01 {  top: calc(0px + (10 - 0) * var(--denominator-DesktopBig)); right: 2%; width: 35%; height: auto; position: absolute; }
  .footer_bg02 { display: none; width: 70%; height: auto;}
  .footer_bg02_mobile { display: none; width: 80%; height: auto; margin-left: 10%; }
  .footer_bg03_mobile { display: none; width: 33.33%; height: auto; margin-left: -5.8%; position: absolute; }
  .footerFlowers { bottom: calc(124px + (169 - 124) * var(--denominator-DesktopBig)); right: 2%; width: 96%; height: auto; position: absolute;  font-size: calc(14px + (20 - 14) * var(--denominator-DesktopBig)); display: block; }
  .footerFlowersDesktop { display: none; }
  .footerFlowersTablet { display: none; }
  .footer_bg04_mobile { display: none; width: 100%; height: auto; left: 0px; position: absolute; }

  .footer .bgFooterDesktopBig { width: 100%; max-width: 1920px; height: auto; display: block; } 
  .footer .bgFooterDesktop { width: 100%; height: auto; display: none; }   
  .footer .bgFooterTablet { width: 100%; height: auto; display: none; }   
  .footer .bgFooterMobile { width: 95%; margin-right: 5%; height: auto; display: none; }   

  .logoFooterBox { position: absolute; width: 100%; left: 0px; right: 0px; display: flex; justify-content: center;}
  a.logoFooter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
  a.logoFooter:hover { text-decoration: none;}
  a.logoFooter:hover .logo span { text-decoration: underline; font-family: SarpanchRegular; }
  a.logoFooter:hover span.up { text-decoration: underline; font-family: RobotoBold; }
  a.logoFooter .logo { display: flex; flex-direction: row;  justify-content: center; align-items: center; gap: 12px;}
  a.logoFooter .logo span { white-space: nowrap; font-size: 18px; }

  a.logoFooter { gap: calc(28px + (32 - 28) * var(--denominator-DesktopBig)); }  
  .logoFooterBox { bottom: calc(225px + (275 - 225) * var(--denominator-DesktopBig)); font-size: 18px; }
  .logoFooterBox span.up { font-size: 16px; }  
  a.logoFooter .logo svg { width: 37px; height: 37px;}


.main { overflow: hidden; }
.content { display: flex; align-items: center; justify-content: space-between; position: relative; font-size: calc(18px + (24 - 18) * var(--denominator-DesktopBig)); line-height: 1.4; }
  .content .container { align-items: center; justify-content: space-between; position: relative; z-index: 2; padding: calc(112px + (150 - 112) * var(--denominator-DesktopBig)) 0; }
  .content .container .contentColumn {  width: 48%; position: relative; z-index: 3;}
  .content.content03 .container { padding-bottom: 0;}
  .content.content04 { padding-top: calc(108px + (143 - 108) * var(--denominator-DesktopBig)); padding-bottom: calc(80px + (110 - 80) * var(--denominator-DesktopBig));}
  .content.content04 .container { position: absolute; left: 5%; top: 0px; height: 100%;  padding: 0 0; justify-content: center; align-items: center; color: var(--color-light); text-align: center; display: flex; padding-top: calc(28px + (39 - 28) * var(--denominator-DesktopBig));}
  .contentColumnBox { display: flex; justify-content: space-between; width: 100%; font-size: calc(16px + (22 - 16) * var(--denominator-DesktopBig));} 
  .content.content05 .container { padding-top: 0;}
  .content.content06 .container { padding-top: calc(60px + (75 - 60) * var(--denominator-DesktopBig));}
  .content.content04 .contentColumn { width: 55%; }
  .content.content04 .contentColumn h2 { font-size: calc(48px + (64 - 48) * var(--denominator-DesktopBig)); }
  
  .content p { margin-bottom: calc(24px + (32 - 24) * var(--denominator-DesktopBig)); }
  .content p:last-child {margin-bottom: 0;}

  .content ul li { margin-bottom: calc(16px + (22 - 16) * var(--denominator-DesktopBig)); font-size: calc(16px + (22 - 16) * var(--denominator-DesktopBig)); position: relative; padding-left: 31px;}
  .content ul li::after { position: absolute; display: block; width: calc(15px + (21 - 15) * var(--denominator-DesktopBig)); height: calc(15px + (21 - 15) * var(--denominator-DesktopBig)); top: 5px; left: 0px; content: ''; background-image: url(../svg/liOne.svg); background-position: center center; background-repeat: no-repeat; background-size: 100%; }
  .content ul li:nth-child(2n)::after { background-image: url(../svg/liTwo.svg); }
  
  .imageContent { width: 100%; height: auto; display: block;}

  .bgBox  { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
  .bgDesktop { display: block; }
  .bgTablet { display: none; }
  .bgMobile { display: none; }  
  
    .article_bg { height: auto; position: absolute; }
    .article01_bg01 { top: 0; left: -3.5%; width: 98.5%; }
    .article01_bg01_tablet { top: -1px; left: -3.5%; width: 103%; }
    .article01_bg01_mobile { top: 0px; right: -5.8%; width: 90%; }
    .article01_bg02 { top: calc(100% - 260px - (350 - 260) * var(--denominator-DesktopBig)); left: -3%; width: 50%;  }
    .article01_bg02_tablet { left: 3%; width: 47%;  }
    .article01_bg02_mobile { width: 102%;   display: block; right: -1%;   height: auto; } 
    .article01_bg03 { top: calc(100% - 66px - (90 - 66) * var(--denominator-DesktopBig)); right: -5px; width: 51%;  } 
    .article01_bg03_tablet { right: -5.8%; width: 28%;  } 
    .article01_bg03_mobile { right: 5%; width: 70%; bottom: 100%;  } 

    .article02_bg01 { top: calc(100% - 250px - (350 - 250) * var(--denominator-DesktopBig)); left: -3.5%; width: 99%;  }
    .article02_bg01_tablet { left: 5%; width: 85%;  }
    .article02_bg02_tablet { bottom: 100%; right: 20%; width: 45%; }
    .article02_bg02_mobile { left: -3%; width: 102%;  }  
    .article02_bg03_mobile { right: -5.8%;  width: 40%; } 

    .article03_bg01_mobile { left: -5.8%; width: 20%; }

    .article04_bg01 { left: -3.5%; width: 107%; top: 0px; display: block;}
    .article04_bg01_desktop { left: -1.5%; width: 105.5%; top: 0px;  display: none;}
    .article04_bg01_tablet { left: -6%; width: 112%; top: 0px;  display: none;}    
    .article04_bg01_mobile { left: -2.5%; width: 102.5%; top: 0px;  display: none;}
    .article04_bg02 { left: -10%; width: 120%; display: none;}

    .article05_bg01 { top: calc(100% - 180px - (240 - 180) * var(--denominator-DesktopBig)); left: -2%; width: 105%;  }
    .article05_bg01_tablet { left: -3%; width: 99%;  }
    .article05_bg01_mobile { width: 102%; left: -2%; }
    .article05_bg03 { right: -3%; width: 41%; max-width: 200px; }

    .article06_bg01 { bottom: 0px; left: 0px; width: 94%; }
    .article06_bg01_tablet { left: -3%;  width: 103%; bottom: 0px; }
    .article06_bg01_mobile { right: 0px; width: 100%; max-width: 500px; }
    .article06_bg02 { bottom: 100%; right: 5%; width: 33%; max-width: 200px; display: none;}
 

.bgDark { background-color: var(--bg-color-dark); display: flex; justify-content: center; width: 100%; padding-bottom: calc(10px + (13 - 10) * var(--denominator-DesktopBig)); position: relative; z-index: 2; }
  .imageDark { width: 100%; height: auto; max-width: 1920px; display: block;}
  .imageDarkDesktop { width: 100%; height: auto; display: none;}
  .imageDarkTablet { width: 100%; height: auto; display: none;}
  .imageDarkMobile { width: 100%; height: auto; display: none;}
  

@media screen and (min-width: 1921px) {
  h1 { font-size: 80px; }
  h2 { font-size: 56px; margin-bottom: 24px; }
  h3 { font-size: 48px; margin-bottom: 22px; }
  h4 { font-size: 28px; margin-bottom: 22px; }
  
  .navbar { font-size: 24px; line-height: 24px; }
  .navigation { gap: 24px;  }
  .logo span { font-size: 24px; }
  .buttonsNavbar { gap: 24px;  }

  .button { font-size: 22px;  line-height: 33px; }
  .buttonPrimary, .buttonPrimaryBorder  { padding: 12px 30px;}
  
  .header { font-size: 24px; }
  .header .container { left: calc(50% - 864px); }
  .buttonsHeader { gap: 24px; padding-top: 30px; }

  .footer { font-size: 24px;  }
  .footer .container {  left: calc(50% - 864px); padding-top: 176px; } 
  .footer h2 { font-size: 64px;}
  .footer p.details, .footer .details{ font-size: 20px;}
  .footer_bg01 {  top: 10px; }
  .footerFlowers { bottom: 169px; font-size: 20px; }
  .footerCopy { bottom: 70px;  padding-top: 42px; font-size: 20px; }

  a.logoFooter { gap: 32px; }  
  .logoFooterBox { bottom: 275px; font-size: 18px; }
  .logoFooterBox span.up { font-size: 16px; }  
  a.logoFooter .logo svg { width: 37px; height: 37px;}
  

  .content { font-size: 24px; }
  .content .container { padding: 150px 0; }
  .content.content03 .container { padding-bottom: 0;}
  .content.content04 { padding: 144px 0 110px 0;}
  .content.content04 .container { padding-top: 39px; left: calc(50% - 864px);}
  .content.content04 .contentColumn h2 { font-size: 64px; }
  .contentColumnBox { font-size: 22px;}  
  .content p { margin-bottom: 32px; }
  
  .content ul li { margin-bottom: 22px; font-size: 22px; }
  .content ul li::after { width: 21px; height: 21px; }
  
  .article01_bg02 { top: calc(100% - 350px); }
  .article01_bg03 { top: calc(100% - 90px); }    
  .article02_bg01 { top: calc(100% - 350px); }
  .article05_bg01 { top: calc(100% - 240px); }
  .bgDark { padding-bottom: 13px; }
}

@media screen and  (max-width: 1441px) {
  h1 { font-size: calc(48px + (56 - 48) * var(--denominator-Desktop));}
  h2 { font-size: calc(29px + (40 - 29) * var(--denominator-Desktop)); margin-bottom:  calc(17px + (24 - 17) * var(--denominator-Desktop)); }
  h3 { font-size:  calc(23px + (32 - 23) * var(--denominator-Desktop)); margin-bottom: calc(12px + (16 - 12) * var(--denominator-Desktop)); }
  h4 { font-size: calc(18px + (20 - 18) * var(--denominator-Desktop)); margin-bottom: calc(12px + (16 - 12) * var(--denominator-Desktop)); }
  
  .navbar { font-size: 16px; line-height: 24px; }
  .navigation { gap: 12px;  }
  .logo span { font-size: 18px; }
  .buttonsNavbar { gap: 16px;  }

  .button { font-size: 16px;  line-height: 24px; }
  .buttonPrimary, .buttonPrimaryBorder  { padding: 8px 20px;}
  
  .header { font-size: 18px; }
  .buttonsHeader { gap: 16px; padding-top: calc(22px + (30 - 22) * var(--denominator-Desktop)); }

  .footer { font-size: 18px;  }
  .footer .container { padding-top: calc(88px + (112 - 88) * var(--denominator-Desktop)); } 
  .footerRight  { width: 47%; }
  .footer h2 { font-size:  calc(44px + (48 - 44) * var(--denominator-Desktop));}
  .footer p.details, .footer .details{ font-size: 16px;}
  .footer_bg01 {  top: 0px; }
  .footerFlowers { bottom: calc(122px + (160 - 122) * var(--denominator-Desktop)); right: 3%; width: 90%; }
  .footerCopy { bottom: calc(52px + (75 - 52) * var(--denominator-Desktop));  padding-top: calc(29px + (42 - 29) * var(--denominator-Desktop)); font-size: 14px; }
  .footerCopy span { gap: 24px; }  

  .content { font-size: 18px; }
  .content .container { padding:  calc(80px + (112 - 80) * var(--denominator-Desktop)) 0; }
  .content.content03 .container { padding-bottom: 0;}
  .content.content04 { padding-top: calc(92px + (108 - 92) * var(--denominator-Desktop)); padding-bottom: calc(57px + (80 - 57) * var(--denominator-Desktop));}
  .content.content04 .container { padding-top: calc(26px + (32 - 26) * var(--denominator-Desktop));}
  .content.content04 .contentColumn { width: 58%; }
  .content.content04 .contentColumn h2 { font-size:  calc(44px + (48 - 44) * var(--denominator-Desktop)); }  
  .content.content05 .container .contentColumn:first-child { width: 46%; margin-left: 2%; }
  .contentColumnBox { font-size: 16px;}  
  .content p { margin-bottom: 24px; }
  
  .content ul li { margin-bottom: 16px; font-size: 16px; }
  .content ul li::after { width: 15px; height: 15px; }
  
  .article01_bg02 { top:  calc(100% - 185px - (260 - 185) * var(--denominator-Desktop)); }
  .article01_bg03 { top: calc(100% - 47px - (66 - 47) * var(--denominator-Desktop)); }    
  .article02_bg01 { top: calc(100% - 220px - (250 - 220) * var(--denominator-Desktop)); }
  .article05_bg01 { top:calc(100% - 135px - (180 - 135) * var(--denominator-Desktop));  }

  .article04_bg01 { display: none;}
  .article04_bg01_desktop { display: block;}
  .bgDark { padding-bottom: 0px; }
  .imageDark { display: none;}
  .imageDarkDesktop { display: block;}

  .bgHeadDesktopBig { display: none;}
  .bgHeadDesktop { display: block;}

  .footer .bgFooterDesktopBig {display: none; } 
  .footer .bgFooterDesktop { display: block; } 
  .footer_bg01 {  top: 7px; width: 40%; }

  .flowerDesktopBig { display: none; }
  .flowerDesktop { display: block; }

  a.logoFooter { gap: calc(28px + (32 - 28) * var(--denominator-Desktop)); }  
  .logoFooterBox { bottom: calc(200px + (250 - 200) * var(--denominator-Desktop)); font-size: 18px; }
  .logoFooterBox span.up { font-size: 16px; }  
  a.logoFooter .logo svg { width: 37px; height: 37px;}
}

@media screen and (max-width: 1239px) {
  .bgDesktop { display: none; }
  .bgTablet { display: block; }
 
  h1 { font-size: calc(34px + (52 - 34) * var(--denominator-Tablet));}
  h2 { font-size:  calc(24px + (40 - 24) * var(--denominator-Tablet)); margin-bottom:  18px; }
  h3 { font-size: calc(20px + (32 - 20) * var(--denominator-Tablet)); margin-bottom: calc(12px + (16 - 12) * var(--denominator-Tablet)); }
  h4 { font-size:  calc(18px + (20 - 18) * var(--denominator-Tablet)); margin-bottom:  calc(8px + (10 - 8) * var(--denominator-Tablet)); }
  
  .navbar { font-size: 16px; line-height: 24px; }
  .navigation { gap: 12px;  }
  a.logo span { font-size: 18px; } 
  .buttonsNavbar { gap: 16px;  }

  .button { font-size: 16px;  line-height: 24px; }
  .buttonPrimary, .buttonPrimaryBorder  { padding: 8px 20px;}
  
  .header { font-size: calc(16px + (18 - 16) * var(--denominator-Tablet)); }
  .headerLeft { width: 57%; display: flex; gap: 20px; flex-direction: column; margin-bottom: 2%;} 
  .headerRight { width: 40%; display: flex; align-items: center; justify-content: flex-start;  }  
  .buttonsHeader { gap: 16px; padding-top: calc(10px + (22 - 10) * var(--denominator-Tablet)); }

  .footer { font-size: calc(14px + (18 - 14) * var(--denominator-Tablet));  }
  .footer .container { padding-top: calc(70px + (130 - 70) * var(--denominator-Tablet)); } 
  .footerRight  { width: 48%; }
  .footer h2 { font-size:  calc(28px + (48 - 28) * var(--denominator-Tablet)); }
  .footer p.details, .footer .details{ font-size:  calc(14px + (18 - 14) * var(--denominator-Tablet));}
  .footer_bg01 {  top: 0px; }
  .footerFlowers {display: none;}
  .footerFlowersDesktop { display: none; }
  .footerFlowersTablet { display: block; bottom: calc(82px + (145 - 82) * var(--denominator-Tablet)); left: 8%; width: 85%; height: auto; position: absolute; }
  .footerCopy { bottom: calc(20px + (48 - 20) * var(--denominator-Tablet));  padding-top: calc(20px + (40 - 20) * var(--denominator-Tablet)); font-size: calc(12px + (16 - 12) * var(--denominator-Tablet)); }
  .footerCopy span { gap: 24px; }
  .footer_bg02 { display: block; width: 90%;}
  

  .content { font-size: calc(16px + (18 - 16) * var(--denominator-Tablet)); }
  .content .container .contentColumn {  width: 49%; }
  .content .container .contentColumnImage { width: 42%; }  
  .contentColumnBox { flex-direction: column; gap: 16px; font-size: calc(16px + (18 - 16) * var(--denominator-Tablet));} 
  .content .container .contentColumnBox .contentColumn { width: 100%; }
  .content p { margin-bottom: calc(12px + (16 - 12) * var(--denominator-Tablet)); }
  .content ul li { margin-bottom: 10px; font-size: 16px; }
  .content ul li::after { width: 15px; height: 15px; }

  .content.content01 .container { padding-top:  calc(92px + ( 112 - 92) * var(--denominator-Tablet));  padding-bottom:  calc(66px + ( 88 - 66) * var(--denominator-Tablet));}
  .article01_bg02_tablet { top:  calc(100% - 66px - (88 - 66) * var(--denominator-Tablet)); }
  .article01_bg03_tablet { top:  calc(100% - 55px - (70 - 55) * var(--denominator-Tablet)); }

  .content.content02 .container { padding-top:  calc(66px + ( 88 - 66) * var(--denominator-Tablet)); padding-bottom:  calc(92px + ( 112 - 92) * var(--denominator-Tablet));}
  .article02_bg01_tablet { top: calc(100% - 100px - (142 - 100) * var(--denominator-Tablet));}

  .content.content03 .container { padding-top:  calc(76px + ( 145 - 76) * var(--denominator-Tablet)); padding-bottom: 10px;}
  
  .content.content04 { padding-top: calc(60px + (109 - 60) * var(--denominator-Tablet)); padding-bottom: 0;}
  .content.content04 .container { padding-top: calc(70px + (120 - 70) * var(--denominator-Tablet)); }
  .content.content04 .contentColumn { width: 70%; }
  .content.content04 .contentColumn h2 { font-size:  calc(30px + (48 - 30) * var(--denominator-Tablet)); }  

  .article04_bg01 { display: none;}
  .article04_bg01_desktop { display: none;}
  .article04_bg01_tablet { display: block;}
  .article04_bg01_mobile { display: none;}
  .bgDark { padding-bottom:  calc(0px + ( 0 - 0) * var(--denominator-Tablet)); }
  .imageDark { display: none;}
  .imageDarkDesktop { display: none;}
  .imageDarkTablet { display: block;}

  .content.content05 .container  { padding-top:  calc(70px + ( 160 - 70) * var(--denominator-Tablet)); padding-bottom:  calc(90px + ( 250 - 90) * var(--denominator-Tablet)); }
  .content.content05 .container .contentColumn:first-child { width: 44%; margin-left: 4%; }
  .content.content05 { font-size: 16px; }
  .article05_bg01_tablet { top: calc(100% - 130px - (220 - 130) * var(--denominator-Tablet)); }
  
  .content.content06 .container { padding-top:  0px; padding-bottom: calc(50px + (170 - 50) * var(--denominator-Tablet));}  

  .bgHeadDesktopBig { display: none;}
  .bgHeadDesktop { display: none; }
  .bgHeadTablet { display: block;}

  .footer .bgFooterDesktopBig {display: none; } 
  .footer .bgFooterDesktop { display: none; } 
  .footer .bgFooterTablet { display: block; } 
  .footer_bg01 {  display: none;}

  .flowerDesktopBig { display: none; }
  .flowerDesktop { display: none; }
  .flowerTablet { display: block; }

  a.logoFooter { gap: calc(0px + (20 - 0) * var(--denominator-Tablet)); }  
  .logoFooterBox { bottom: calc(105px + (200 - 105) * var(--denominator-Tablet)); font-size: 18px; }
  .logoFooterBox span.up { font-size: 16px; }  
  a.logoFooter .logo svg { width: 37px; height: 37px;}
}

@media screen  and (max-width: 750px) {
  .navbar { min-height: 64px; height: fit-content;}
  .buttonsNavbar { flex-basis: 100%; width: 100%; gap: 16px; margin-right: 0;}
  .logo span { font-size: 18px; } 
  .navigation { width: 100%; height: 64px; align-items: center;}
  .navigation  a { display: none;}
  .navigation  a.logo { display: flex;}
  .navbar .container { flex-direction: column; gap: 16px; justify-content: flex-start;}

  .buttonsHeader { gap: 16px;}
  .button { flex-basis: 50%; }
}

@media screen  and (max-width: 679px) {
  .bgTablet { display: none; }
  .bgMobile { display: block;}

  h1 { font-size: calc(40px + ( 80 - 40) * var(--denominator-Mobile)); }
  h2 { font-size: 32px; margin-bottom:  18px; }
  h3 { font-size: 20px; margin-bottom: 10px; }
  h4 { font-size: 18px; margin-bottom: 10px; }

  .header { font-size: calc(16px + ( 28 - 16) * var(--denominator-Mobile));  }
  .header .container { flex-direction: column; justify-content: center; align-items: flex-end; }
  .headerRight {display: none;}
  .headerLeft { width: 100%; gap:  calc(24px + ( 42 - 24) * var(--denominator-Mobile)); }

  .bgHeadTablet { display: none; }
  .bgHeadDesktopBig { display: none; }
  .bgHeadMobile { display: block; margin-top: calc(40px + ( 60 - 40) * var(--denominator-Mobile)); }

  
  .button { font-size: calc(16px + ( 24 - 16) * var(--denominator-Mobile));  padding: 12px 0; line-height: 24px;}
  
  .flowerTablet { display: none; }
  .flowerMobile { display: block; position: absolute; width: 62%; top: 2.5%; right: -1%;}
  .headerBotFigureMobile { position: absolute; bottom: -1%; display: flex;}
  .headerBotFigureMobile svg { width: 71%;}  
  
  .content .container { flex-direction: column; font-size: 16px;}
  .content ul li {font-size: 16px;}
  .content ul li::after { width: 15px; height: 15px; }
  .content .container .contentColumn { width: 100%;}
  .contentColumnBox { flex-direction: column; gap: 16px;  font-size: 16px; } 
  .content .container .contentColumnBox .contentColumn { width: 100%; }
  .content p { margin-bottom: 12px; }
  .content ul li { margin-bottom: 10px; font-size: 16px; }
  .content ul li::after { width: 15px; height: 15px; }
  
  .content.content01 .container {  padding-top: calc(64px + ( 110 - 64) * var(--denominator-Mobile)); padding-bottom: calc(125px + ( 230 - 125) * var(--denominator-Mobile)); gap: calc(45px + ( 100 - 45) * var(--denominator-Mobile)); }
  .content.content01 .container .contentColumn:first-child { width: 85%; margin-right: 15%;}
  .content.content01 .container .contentColumn:first-child h2 { max-width: 90%;}
  .article01_bg02_mobile {  top: calc(100% - (115px + ( 210 - 115) * var(--denominator-Mobile))); } 

  .content.content02 .container  { gap: calc(60px + ( 120 - 60) * var(--denominator-Mobile)); padding-bottom: calc(110px + ( 215 - 110) * var(--denominator-Mobile)); padding-top: 0px; } 
  .content.content02 .container ul li:last-child { width: 80%;}  
  .article02_bg02_mobile { top: calc(100% + 10px + ( 20 - 10) * var(--denominator-Mobile));  }  
  .article02_bg03_mobile { bottom: calc(-50px - (100 - 50) * var(--denominator-Mobile));} 

  .content.content03 .container  { gap: calc(40px + ( 70 - 40) * var(--denominator-Mobile)); padding-bottom: calc(10px + ( 20 - 10) * var(--denominator-Mobile)); padding-top: 0px;}  
  .article03_bg01_mobile  { display: block; bottom: calc(-25px - ( 50 - 25) * var(--denominator-Mobile)); }

  .content.content04 { padding-top: calc(30px + (57 - 30) * var(--denominator-Mobile)); padding-bottom: 0;}
  .content.content04 .contentColumn { width: 82%; }
  .content.content04 .container  { padding-top: calc(32px + (38 - 32) * var(--denominator-Mobile)); font-size: calc(16px + ( 22 - 16) * var(--denominator-Mobile)); }
  .content.content04 .contentColumn { width: 85%; }
  .content.content04 .contentColumn h2 { font-size: calc(30px + ( 50 - 30) * var(--denominator-Mobile)); } 


  .article04_bg01 { display: none;}
  .article04_bg01_desktop { display: none;}
  .article04_bg01_tablet { display: none;}
  .article04_bg01_mobile { display: block;}
  .article04_bg02 { display: none;  top: calc(100% - (70px + (176 - 70) * var(--denominator-Mobile)));  }
  
  .imageDark { display: none; }
  .imageDarkTablet { display: none;}
  .imageDarkMobile { display: block;}
  .article04_bg01_Tablet { display: none;}
  .bgDark { padding-bottom:  calc(6px + ( 15 - 6) * var(--denominator-Mobile)); }
  .bgDark { padding-bottom:  0px; }

  .content.content05 .container { padding-top:  calc(70px + ( 100 - 70) * var(--denominator-Mobile)); gap: calc(55px + ( 110 - 55) * var(--denominator-Mobile)); padding-bottom:  calc(105px + ( 255 - 105) * var(--denominator-Mobile)); }
  .content.content05 .container .contentColumn:first-child { width: 92%; margin-left: 8%; }
  .content.content05 .container .contentColumn:first-child p:last-child { width: 80%; }
  .article05_bg03 { bottom:  calc(-50px - ( 100 - 50) * var(--denominator-Mobile)); }
  .article05_bg01_mobile { bottom:  calc(-20px - ( 0 - 20) * var(--denominator-Mobile)); }

  .content.content06 .container { gap: calc(40px + ( 60 - 40) * var(--denominator-Mobile)); padding-top: 0; padding-bottom: calc(70px + (120 - 70) * var(--denominator-Mobile));}
  .article06_bg02  { display: block; }
  .content.content06 .bgDesktop { display: none;}

  .article06_bg03 { display: block; top: calc(100% - 80px); }

  .footer { font-size: calc(14px + (20 - 14) * var(--denominator-Mobile)); } 
  .footer .container { flex-direction: column; gap: 0px; justify-content: flex-start; padding-top:  calc(50px + ( 140 - 50) * var(--denominator-Mobile)); }
  .footer .container > div  { width: 100%;}
  .footer p.details, .footer .details { font-size: calc(14px + (20 - 14) * var(--denominator-Mobile)); }
  .footerCopy { flex-direction: column-reverse; gap: calc(22px + (48 - 22) * var(--denominator-Mobile)); text-align: center; bottom: calc(30px + (70 - 30) * var(--denominator-Mobile)); padding-top: calc(24px + (46 - 24) * var(--denominator-Mobile));  font-size: calc(14px + (20 - 14) * var(--denominator-Mobile)); }
  .footerCopy span { flex-direction: column; gap: calc(16px + (36 - 16) * var(--denominator-Mobile)); width: 100%; }
  .footerCopy span a { width: 100%; }
  .footer h2 { font-size: calc(32px + (64 - 32) * var(--denominator-Mobile)); margin-bottom: calc(18px + (36 - 18) * var(--denominator-Mobile)); }
  .footer p {margin-bottom: 18px; margin-bottom: calc(18px + (36 - 18) * var(--denominator-Mobile)); }

  .footer .bgFooterDesktopBig {display: none; } 
  .footer .bgFooterDesktop { display: none; } 
  .footer .bgFooterTablet { display: none;  } 
  .footer .bgFooterMobile { display: block; } 
  .footer .footerFlowersTablet  { display: none;  } 
  .footer .footerFlowers  { display: none;  } 
  .footer_bg01 {  display: none;}
  .footer_bg02 {  display: none;}
  .footer_bg02_mobile { display: block; }
  .footer_bg03_mobile { display: block; bottom: calc(210px + (400 - 210) * var(--denominator-Mobile)); }
  .footer_bg04_mobile { display: block; top: calc( -49px - (91 - 49) * var(--denominator-Mobile)); }
  
  a.logoFooter { gap: calc(28px + (32 - 28) * var(--denominator-Tablet)); }
  .logoFooterBox { bottom: calc(222px + (550 - 222) * var(--denominator-Mobile)); font-size: 18px; }
  .logoFooterBox span.up { font-size: 16px; }  
  a.logoFooter .logo svg {width: 37px; height: 37px;}
}
@media screen  and (max-width: 550px) {
  .buttonsNavbar { flex-direction: column; gap: 16px; }
  .buttonsNavbar .button {  width: 100%; }
  .content.content04 .contentColumn { width: 100%; }  
  .content.content05 .container .contentColumn:first-child p:last-child { width: 90%; }
}
@media screen  and (max-width: 400px) {
  h1 {max-width: 100%;}
  .content.content01 .container .contentColumn:first-child { width: 100%; margin-right: 0%;}
}