/*
****************************************************************
Styles to the first screen
****************************************************************
*/
/*--------------------------------------------------------------
=== FONTS ===
--------------------------------------------------------------*/
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Italic.eot');
  src: local('Poppins Italic'), local('Poppins-Italic'),
  url('../fonts/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-Italic.woff2') format('woff2'),
  url('../fonts/Poppins-Italic.woff') format('woff'),
  url('../fonts/Poppins-Italic.svg#Poppins-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-MediumItalic.eot');
  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
  url('../fonts/Poppins-MediumItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-MediumItalic.woff2') format('woff2'),
  url('../fonts/Poppins-MediumItalic.woff') format('woff'),
  url('../fonts/Poppins-MediumItalic.svg#Poppins-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBoldItalic.eot');
  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
  url('../fonts/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
  url('../fonts/Poppins-SemiBoldItalic.woff') format('woff'),
  url('../fonts/Poppins-SemiBoldItalic.svg#Poppins-SemiBoldItalic') format('svg');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.eot');
  src: local('Poppins Medium'), local('Poppins-Medium'),
  url('../fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-Medium.woff2') format('woff2'),
  url('../fonts/Poppins-Medium.woff') format('woff'),
  url('../fonts/Poppins-Medium.svg#Poppins-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.eot');
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
  url('../fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
  url('../fonts/Poppins-SemiBold.woff') format('woff'),
  url('../fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.eot');
  src: local('Poppins Regular'), local('Poppins-Regular'),
  url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Poppins-Regular.woff2') format('woff2'),
  url('../fonts/Poppins-Regular.woff') format('woff'),
  url('../fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/*--------------------------------------------------------------
=== GLOBAL VAR ===
--------------------------------------------------------------*/
:root {
  --dark-maroon:      #762C5F;
  --dark-teal:        #005470;
  --seafoam:          #A5D7DC;
  --pale-pink:        #FAD8D3;
  --light-blue:       #D8F0F1;
  --lightest-seafoam: #EFF9F9;

  --mb-base: 2rem;
  @media (min-width: 769px) {
    --mb-base: 1.4rem;
  }
}



/*--------------------------------------------------------------
=== GLOBAL RESET ===
--------------------------------------------------------------*/
* { margin:0; padding:0; box-sizing:border-box;}
.clearfix { zoom:1;}
.clearfix:after { content:" "; display:table; clear:both;}
header, footer, section, nav, article, aside, details, figcaption, figure, hgroup, main, menu, summary { display:block;}
button { cursor:pointer;}
:focus { outline:none;}
button::-moz-focus-inner { border: 0;}

.container { margin-left:auto; margin-right:auto; width: 100%;}
#page .container, footer .container { max-width: 1425px;}

img, table { border: 0;}
img { display: block; max-width: 100%; height: auto;}
ul { list-style: none;}
@media (max-width:768px) {
  .container { padding-left: 20px; padding-right: 20px;}
}
@media (min-width:769px) {
  .container { padding-left: 50px; padding-right: 50px;}
}
/*--------------------------------------------------------------
=== BASE LAYOUT ===
--------------------------------------------------------------*/
body { min-height: 100vh; display: flex; flex-direction: column; width: 100%;}
#page { flex-grow: 1;}
@media (max-width: 768px) {
  .section { padding: 8rem 0;}
}
@media (min-width: 769px) {
  .section { padding: 11rem 0;}
}

/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
html { font-size: 10px; background: #fff;}
body, td, th, input, select, textarea, button { font: 400 2.4rem/1.42em 'Poppins', Arial, Helvetica, sans-serif; color: var(--dark-teal);}
@media (max-width: 768px) {
  html { font-size: 6px;}
  body, td, th { font-size: 2.6rem;}
}
@media (min-width: 769px) and (max-width: 1514px) {
  html { font-size: calc(10px - 15%);}
}

h1, .h1, h2, .h2 { margin-bottom: calc(var(--mb-base) * 3); font-size: 4.2rem; line-height: 1.25; font-weight: 500; color: var(--dark-maroon);}

.dark-maroon { color: var(--dark-maroon);}

/*--------------------------------------------------------------
=== HEADER ===
--------------------------------------------------------------*/
header { z-index: 100; position: fixed; top: 0; width: 100%; border-top: 1.2rem solid var(--dark-teal); background: #fff;}
header:before { z-index: 100; content: "This website is intended for US audiences only."; position: absolute; top: -1.2rem; left:50%; transform: translateX(-50%); font-weight: 600; text-align: center; background: var(--lightest-seafoam);}
header .container { display: flex; align-items: center; justify-content: space-between; transition: .25s ease-in-out;}
#logo { z-index: 100; position: relative; width: 153px;}
@media (max-width: 768px) {
  body { padding-top: 141px;}
  header { padding: 12.5rem 0 4rem;}
  header:before { width: 295px; padding: .8rem 5rem 1rem; font-size: 2.5rem; border-radius: 0 0 3.5rem 3.5rem;}
}
@media (min-width: 769px) {
  body { padding-top: 19.3rem;}
  header { padding: 7.5rem 0 4rem;}
  header:before { padding: .8rem 5rem 1rem; font-size: 2rem; line-height: 1.2; border-radius: 0 0 2.5rem 2.5rem;}
  header .container { max-width: none;}
  #logo { width: 28.8rem;}
}
/*--------------------------------------------------------------
=== NAVIGATION ===
--------------------------------------------------------------*/
#nav {}
#main-nav { display: flex; justify-content: flex-end; align-items: center; }
#main-nav a:not(.btn) { display: block; font-size: 2rem; line-height: 1.2; color: var(--dark-teal); text-decoration: none; text-transform: uppercase;}
#main-nav a:hover, #main-nav a:focus { color: var(--dark-maroon); }

.nav-control { z-index: 100; position: absolute; right: 20px; margin-top: -25px; display: flex; gap: 6px; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; cursor:pointer;
  transform: rotate(0deg); transition: .5s ease-in-out;}
.nav-control > span { display:block; width: 100%; height: 4px; border-radius: 3px; background: var(--dark-teal); transform: rotate(0deg); transition: .25s ease-in-out;}


@media (max-width:1149px) {
  .menu-menu-container { max-height: 0; overflow: hidden; position: absolute; left: 0; right: 0; top: 1.2rem; border-radius: 0 0 55px 55px; background: #fff; transition: .25s ease-in-out;}
}
@media (min-width:1150px) {
  #main-nav li:not(:first-child) { /*padding-left: 2.2rem;*/ padding-left: calc(1rem + .7vw);}
  #main-nav li:not(:last-child) { /*padding-right: 2.2rem;*/ padding-right: calc(1rem + .7vw);}
  #main-nav li:nth-child(2) { white-space: nowrap;}

  .nav-control { display: none;}
}


/*--------------------------------------------------------------
=== BUTTONS & SEPARATORS & ANCHORS ===
--------------------------------------------------------------*/
.btn { display: inline-block; text-align: center; cursor: pointer; border: 0;}
.btn-info { /*height: 4.6rem;*/ line-height: 1.2; color: #fff!important; text-transform: uppercase; border-radius: 5rem; background: var(--dark-maroon);}
.btn-info:hover, .btn-info:focus { color: #fff!important; background: var(--dark-teal);}

@media (max-width:768px) {
  .btn-info { padding: 2.5rem 2.5rem; font-size: 2.4rem;}
}
@media (min-width:769px) {
  .btn-info { padding: 1.1rem 2.5rem; font-size: 2rem;}
}


/*--------------------------------------------------------------
=== Specific for FRONT page ===
--------------------------------------------------------------*/
.hero { position: relative; overflow: hidden; background-repeat: no-repeat;}
.hero .container { display: flex; flex-direction: column;}
.hero-head { color: var(--dark-maroon);}
.hero-head .line-1 { line-height: 1; font-weight: 600;}
.hero-head .line-2 { margin-top: 1rem; font-size: 4.4rem; line-height: 1.4; font-weight: 600;}
.hero-text { margin-top: 5rem; max-width: 66.2rem; font-size: 3rem; line-height: 1.33;}
@media (max-width:768px) {
  .hero { padding: 4rem 0 95vw; border-radius: 0 0 8.5rem 8.5rem; background-image: url("../img/hero-m.webp"); background-size: 100vw auto; background-position: center bottom;}
  .hero-head .line-1 { font-size: 8rem;}
}
@media (min-width:769px) {
  .hero { border-radius: 0 0 0 26rem; background-image: image-set("../img/hero.webp" 1x, "../img/hero@2x.webp" 2x); background-size: cover; background-position: center;}
  .hero .container { height: 67rem; justify-content: center;}
  .hero-head .line-1 { font-size: 9.9rem;}
}


/* --- section GLANCE */
.glance .list-group { padding-top: 1.5rem;}
.glance .list-group .row:not(:last-child) { margin-bottom: var(--mb-base);}
.glance .list-group .list-title { flex: 0 0 37.5%; font-weight: 600;}


/*--------------------------------------------------------------
=== PAGE HEADER ===
--------------------------------------------------------------*/
.page-header { border-radius: 0 0 3.5rem 3.5rem; background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image: image-set("../img/lotus-bg.webp" 1x, "../img/lotus-bg@2x.webp" 2x);}
.page-header .container { display: flex; flex-direction: column; justify-content: center; height: 38.8rem;}
@media (max-width:768px) {
}
@media (min-width:769px) {
  .page-header { border-radius: 0 0 0 26rem;}
}


/*--------------------------------------------------------------
=== CONTENT SECTION ===
--------------------------------------------------------------*/
.content-section .wp-block-heading { margin-bottom: var(--mb-base) !important;}
.content-section .wp-block-heading:not(:first-child) { margin-top: calc(var(--mb-base) * 3);}


/* FIX for laptops with scale screen 125% preset  */
@media (-webkit-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.8; }
}