@font-face {
    font-family: 'playfair';
    src: url('../fonts/PlayfairDisplay.otf'); /* IE9 Compat Modes */ 
    src: url('../fonts/PlayfairDisplay.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/PlayfairDisplay.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/PlayfairDisplay.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-display: swap;     
  }
@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu.otf'); /* IE9 Compat Modes */ 
    src: url('../fonts/Ubuntu.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Ubuntu.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Ubuntu.ttf')  format('truetype'); /* Safari, Android, iOS */
    font-display: swap;     
  }

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; scroll-padding-top: 70px; }
body {
  font-family: var(--font-normal);
  color: var(--cl-txt);
  background: var(--white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
p, span, li, a, label, input, textarea, button {
  font-family: var(--font-normal);
}
p {font-size:18px;}
.title-h1, h1 {
  font-family: var(--font-special);
}
.title-h2, h2 {
  font-family: var(--font-special);
}

@media (max-width:737px) {p {font-size:16px;}}

/* ═══════════════════════════════════════════
   ROOT VARIABLES
═══════════════════════════════════════════ */
:root {
  --brand:       #009ee2;
  --brand-dark:  #1269b3;
  --brand-deep:  #0a4a7f;
  --brand-grey:  #d9d9d9;
  --cl-txt:      #1c1f24;
  --white:       #fff;
  --shadow-nav:  0 2px 6px rgba(40,40,40,0.3);
  --font-special: 'playfair', serif;
  --font-normal:'Ubuntu', sans-serif;

  /* Tinte derivate usate nei componenti */
  --brand-900:   #072a42;
  --brand-light: #dadada;
  --brand-50:    #f0f8ff;
  --brand-200:   #a8d4f5;
  --brand-400:   #4db0f0;
  --dark:        #7f7e7f;
  --dark-deep:   #6a696a;
  --dark-light:  #9a999a;
  --g700:        #3a3f47;
  --g500:        #6b7280;
  --g400:        #9ca3af;
  --g200:        #e5e7eb;
  --g100:        #f3f4f6;
  --g50:         #f9fafb;
  --bradius:     5px;
}

/* ═══════════════════════════════════════════
   NOISE / GRAIN BACKGROUND
═══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;  
  background-repeat: repeat;
  background-size: 300px 300px;  
}

/* ═══════════════════════════════════════════
   FADE-IN
═══════════════════════════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  .8s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1);
}
.fade-in.visible { opacity:1; transform:translateY(0); }

@media (max-width:768px){
  .fade-in{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ═══════════════════════════════════════════
   ICON SIZES
═══════════════════════════════════════════ */
.icon-sm { width:15px; height:15px; }
.icon-md { width:18px; height:18px; }
.icon-lg { width:32px; height:32px; }
.icon-xl { width:22px; height:22px; }

/* ═══════════════════════════════════════════
   BOX SHADOW UTILITY
═══════════════════════════════════════════ */
.box-shadow { box-shadow: var(--shadow-nav); }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  background: rgba(255,255,255,.92);
  transition: background .35s ease, box-shadow .35s ease;
}
.nav.scrolled {
  background: rgba(255,255,255,1);
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  max-width: 1700px; margin:0 auto;
   height: 80px;
  transition: height .35s ease;
}


.nav.scrolled .nav__inner { height: 66px; }

.nav__logo {
  display:flex;
  z-index: 1002;  
  width:fit-content;
  line-height: 0;
}

.logo-img { width:140px; transition: width .35s ease; display:block;}
.nav.scrolled .logo-img { width:120px; }
.nav__links { list-style:none; gap:0; }
.nav__link {
  padding: 8px 0; color: var(--brand-900);
  font-size: 18px; font-weight: 500;
  position: relative; cursor: pointer;
  transition: color .25s, font-size .35s;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width:1450px) and (min-width:1300px) {.nav__link {font-size:16px;}}
/* wrap-flex align-center gap5 */

.nav.scrolled .nav__link { font-size: 16px; }

.nav__link::after {
  content: '';
  position: absolute; bottom:2px; left:0; right:0;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover { color: var(--brand); }
.nav__link:hover::after { transform:scaleX(1); transform-origin:left; }
.nav__link i { font-size:14px; transition:transform .3s; }

/* Desktop dropdown */
.nav__item { position: relative; }
.nav__dropdown {
  position: absolute; top: calc(100% + 8px); left:0;
  min-width: 220px; background: var(--white);  
  padding: 10px 8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: all .28s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow: var(--shadow-nav);
}
.nav__item:hover .nav__dropdown,
.nav__item--open .nav__dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav__item:hover .nav__link i,
.nav__item--open .nav__link i { transform:rotate(180deg); }

.nav__dd-item {
  /* wrap-flex align-center gap8 */
  padding: 10px 12px; 
  color: var(--cl-txt); font-size:13px; font-weight:500;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.nav__dd-item:hover { background:var(--brand); color:#fff; }

.nav__dd-item:hover::before { opacity:1; }

.nav__cta {
  padding: 10px 22px; background: var(--brand); color:#fff;
  font-size:18px; font-weight:600; border-radius:100px;
  margin-left:16px;
  /* wrap-flex align-center gap7 */
  white-space: nowrap; text-decoration:none;
  transition: background .3s ease;
}
.nav__cta i { transition: transform .3s ease; }
.nav__cta:hover { background: var(--brand-dark); }
.nav__cta:hover i { transform: translateX(3px); }
.nav.scrolled .nav__cta { font-size:16px; padding:8px 18px; }



/* ═══════════════════════════════════════════
   HAMBURGER
═══════════════════════════════════════════ */
.hbg {
  display: none; width:42px; height:42px;
  border: none; background: transparent;
  border-radius:10px; cursor:pointer; 
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  position: relative; z-index:1002;
  padding: 0;
}
.hbg span {
  display: block; background: var(--brand-dark);
  border-radius:2px; height:2px;
  transition: all .4s cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
.hbg span:nth-child(1) { width:22px; }
.hbg span:nth-child(2) { width:14px; margin-left:-8px; }
.hbg span:nth-child(3) { width:22px; }

/* Hover: leggero movimento senza background */
.hbg:hover span:nth-child(1) { transform: translateX(3px); }
.hbg:hover span:nth-child(2) { width:22px; margin-left:0; }
.hbg:hover span:nth-child(3) { transform: translateX(-3px); }

/* Open state */
.hbg.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hbg.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hbg.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav.force-mobile .nav__links,
.nav.force-mobile .nav__cta { display:none !important; }
.nav.force-mobile .hbg { display:flex; }

/* ═══════════════════════════════════════════
   MOBILE OVERLAY + MENU
═══════════════════════════════════════════ */
.m-ov {
  position: fixed; inset:0;
  background: rgba(0,4,14,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index: 998; opacity:0; pointer-events:none; transition:opacity .4s;
}
.m-ov.is-open { opacity:1; pointer-events:all; }

.m-menu {
  position: fixed; top:0; right:0; bottom:0;
  width: min(360px,100vw);
  background: var(--brand-deep);
  z-index: 999;
  /* wrap-flex column */
  transform: translateX(102%);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.m-menu.is-open { transform: translateX(0); }

/* Riga luminosa sinistra */
.m-menu::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width:3px;
  background: linear-gradient(to bottom,
    transparent 5%, var(--brand) 40%,
    rgba(0,158,226,.4) 80%, transparent 100%);
  opacity:0; transition:opacity .5s .2s;
}
.m-menu.is-open::before { opacity:1; }

/* Accento geometrico decorativo in alto a destra */
.m-menu::after {
  content:''; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  
  pointer-events:none;
}

/* HEAD */
.m-head {
  flex-shrink:0; 
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:white;
}
.m-logo { 
  font-size:16px; font-weight:700; color:#fff;
}
.m-close i {  
  cursor:pointer; 
  color: var(--brand);
  opacity:0.7;
  font-size:20px;  
  transition: opacity .2s ease;
}
.m-close i:hover {
  opacity:1;
}

/* NAV */
.m-nav { flex:1; padding:16px 24px 0; overflow-y:auto; }



/* Link con accent slide */
.m-link,.m-toggle{
  position:relative; overflow: visible;
  color: #fff;font-size:17px;font-weight:400;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  
}
.m-link{display:inline-block; text-decoration:none; width:100%;}
.m-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}

/* Bar accent sinistra */

.m-link span, .m-link-inner,
.m-toggle > span {
  display: inline-block;
  transition: color .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.m-link:hover, .m-toggle:hover { color: var(--brand-400); }
.m-link:hover span, .m-link:hover .m-link-inner,
.m-toggle:hover > span,
.m-toggle:hover .m-ticon { transform: translateX(10px); }

/* Icona toggle */
.m-ticon i {
  flex-shrink:0; 
  font-size:10px; color: rgba(255,255,255,.7);
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.m-toggle.is-open .m-ticon i {  
  color:#fff; transform:rotate(180deg);
}

/* Submenu */
.m-sub {
  max-height:0; overflow:hidden; opacity:0; 
  transition:
    max-height .45s cubic-bezier(.22,1,.36,1),
    opacity .3s,
    padding .3s,
    border-color .3s;
}
.m-sub.is-open {
  max-height:300px; opacity:1;
  padding: 0;
  border-color: var(--brand);
}
.m-sub-item {
  /* wrap-flex align-center */
  gap:0; color: rgba(255,255,255,.75);
  
  
  font-size:14px; font-weight:500;
  padding: 9px;
  text-decoration:none;
  transition: color .25s, gap .25s, margin-left .25s;
  background:rgba(255,255,255,.15);
}
.m-sub-item i {
  font-size:11px; color: var(--brand-400);
  opacity:0; transform:translateX(-6px); width:0; overflow:hidden;
  transition: all .28s cubic-bezier(.22,1,.36,1);
}
.m-sub-item:hover { color:#fff; margin-left:4px; border-left: 4px solid var(--brand-400);}
.m-sub-item:hover i { opacity:1; transform:translateX(0); width:14px; margin-left:5px; }

/* Animazione entrata voci */
.m-anim {
  opacity:0; transform:translateX(16px);
  transition: opacity .4s, transform .4s;
}
.m-menu.is-open .m-anim { opacity:1; transform:translateX(0); }

/* CTA mobile */
.m-cta {
  flex-shrink:0; margin:14px 24px;
  padding:15px 28px;
  color: var(--brand); background:#fff;
  font-size:15px; font-weight:600; border-radius:100px;
  text-align:center; text-decoration:none;  
  display:block;
}
.m-cta i {transition: background .3s, transform .2s;}
.m-cta:hover i {transform:translateX(5px); }

/* Footer mobile menu */
.m-foot {
  flex-shrink:0; padding:14px 24px 28px;
  border-top: 1px solid rgba(255,255,255,.07);
  
  /* wrap-flex align-center gap8 */
}
.m-foot-lbl {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:white;
  margin-right:4px; white-space:nowrap;
  font-family: var(--font-normal);
}
.m-social {
  width:32px; height:32px; border-radius:var(--bradius);
  background: white;  
  /* wrap-flex align-center justify-c */
  color: var(--brand); font-size:12px;
  text-decoration:none;
  transition: background .3s;
  font-size:18px;
}
.m-social:hover {
  background: var(--brand);
  color: white;  
}

/* ═══════════════════════════════════════════
   BREAKPOINT MOBILE NAV
═══════════════════════════════════════════ */
@media (max-width: 1300px) {
  .nav:not(.scrolled) .nav__links,
  .nav:not(.scrolled) .nav__cta { display:none !important; }
  .nav:not(.scrolled) .hbg { display:flex; }
  .nav__inner { height:68px; }
}

@media (max-width: 1199px) {
  .nav__links, .nav__cta { display:none !important; }
  .hbg { display:flex; }
  .nav.scrolled .nav__inner { height:60px; }
}


/* ═══════════════════════════════════════════
   SEZIONI COMUNI
═══════════════════════════════════════════ */
.container {
  max-width: 1700px;
  margin: 0 auto;
  width: 100%;  
}

.pd-inline-gen { padding-inline: 0; }
.pd-block-gen  { padding-block:  100px; }

@media (max-width:1900px) {.pd-inline-gen { padding-inline: 80px; }}
@media (max-width:1350px) {.pd-inline-gen { padding-inline: 40px; }}
@media (max-width:1200px) {.pd-inline-gen { padding-inline: 80px; }}

@media (max-width: 900px) {
  .pd-inline-gen { padding-inline: 50px; }
  .pd-block-gen  { padding-block:  72px; }
}
@media (max-width: 737px) {
  .pd-inline-gen { padding-inline: 20px; }
  .pd-block-gen  { padding-block:  56px; }
}

.section__eyebrow {
  font-size:15px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--brand); margin-bottom:10px;
  font-family: var(--font-normal);
}
.section__title {
  font-family: var(--font-special);
  font-size: clamp(34px, 4.8vw, 50px);
  font-weight:400; line-height:1.15;
  color: var(--cl-txt); margin-bottom:16px; letter-spacing:-.01em;
}
.section__desc {  
  color: var(--g500); max-width:760px; margin-bottom:56px;
  font-family: var(--font-normal);
}
.section__title-maxw {max-width:760px;}

/* ═══════════════════════════════════════════
   BOTTONI GLOBALI
═══════════════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; background:#fff; color: var(--cl-txt);
  font-size:15px; font-weight:600; border-radius:100px;
  text-decoration:none; border:none; cursor:pointer;
  transition:all .3s; font-family: var(--font-normal);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.15); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; background:transparent; color:#fff;
  font-size:15px; font-weight:500; border-radius:100px;
  text-decoration:none; border:1px solid rgba(255,255,255,.22);
  cursor:pointer; transition:all .3s; font-family: var(--font-normal);
}
.btn-secondary:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.btn-secondary svg { flex-shrink:0; }

.btn-p {
  padding:14px 26px; background:var(--brand); color:#fff;
  font-size:14px; font-weight:600; border-radius:100px;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .3s; text-decoration:none;
  font-family:var(--font-normal);
}
.btn-p:hover { background:var(--brand-grey); transform:translateY(-2px); color:var(--brand); }

.btn-s {
  padding:14px 26px; background:transparent; color:rgba(255,255,255,.8);
  font-size:18px; font-weight:500; border-radius:100px;
  border:1px solid var(--brand-grey);
  display:inline-flex; align-items:center; gap:8px;
  transition:all .3s; text-decoration:none;
  font-family:var(--font-normal);
}
.btn-s:hover { border-color:white; color:#fff; }

.btn-blue {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; background:var(--brand); color:#fff;
  font-size:18px; font-weight:600; border-radius:100px;
  text-decoration:none; border:none; cursor:pointer;   
  font-family:var(--font-normal);
  transition: background .3s ease;
}


.btn-blue i {transition: transform .3s ease;}
.btn-blue:hover {
  background:var(--brand-dark); 
  box-shadow:0 12px 40px rgba(10,74,127,.2);
}
.btn-blue:hover i {transform:translateX(5px);}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  background: var(--cl-txt);  
  position: relative; z-index:1;
  padding-block: 30px;
}
.footer__inner {  
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:30px;
 
}
.footer__brand-name {
  font-family: var(--font-special);
  font-size:20px; color:var(--white); margin-bottom:20px;
  line-height: 1.4;
}
.footer p {
  font-size:16px; line-height:1.7;
  color:var(--white); max-width:280px;
  font-family: var(--font-normal);
}
.footer__col-title {
  font-size:18px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--white);
  margin-bottom:20px; font-family: var(--font-special);
}
.footer__link {
  display:block; font-size:16px;
  color:var(--white); text-decoration:none;
  margin-bottom:10px; transition:color .2s;
  font-family: var(--font-normal);
}
.footer__link:hover { color: var(--brand-400); }
.footer__bottom {
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  /* wrap-flex spc-btw align-center flexwrap gap16 */
}
.footer__copy {
  font-size:16px; color:var(--white);
  font-family: var(--font-normal);
}

.footer__legal a {
  font-size:16px; color:var(--white);
  text-decoration:none; transition:color .2s;
  font-family: var(--font-normal);
}
.footer__legal a:hover { color: var(--brand-400);  }
.footer__legal p {font-size:16px; margin:0; padding:0; color:var(--white);}

@media(max-width:900px) {  
  .footer__inner { grid-template-columns:1fr 1fr; gap:36px; }
  .margin-mobile {margin-top:35px;}
  .footer__bottom {text-align:center; justify-content: center !important;}
}
@media(max-width:737px) {
  .footer__inner { grid-template-columns:1fr; align-items:center; text-align:center; justify-content: center;}
  .mobile-align {text-align:center; align-items:center;justify-content: center;}
  .margin-mobile {margin-top:0;}
  .footer__brand-name {margin-bottom:50px;}
  .footer {padding-block:50px;} 
}

 #Back2top {
    display: none;
    position: fixed;
    bottom: 3%;
    right: 10px;
    z-index: 99;       
    outline: none;
    color:var(--brand);
    background-color:white;
    cursor: pointer;
    text-align:center;
    border-radius: 7px;
    border:2px solid var(--brand);
    padding:0;
    width:35px;
    height:35px;
    transition: filter ease-out 250ms; 
    font-size:20px;
  }

 #Back2top i {text-align:center; padding:5px 0;}   
#Back2top:hover { filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.4)); } 

/* ═══ POPUP FERIE ═══ */
.ferie-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 44, 83, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.ferie-overlay[hidden]{ display: none; }

.ferie-popup{
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 24px 70px rgba(4, 44, 83, .35);
  animation: feriePop .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes feriePop{
  from{ opacity: 0; transform: translateY(20px) scale(.97); }
  to{ opacity: 1; transform: none; }
}

.ferie-close{
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #042C53;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .2s;
}
.ferie-close:hover{ background: #fff; }

.ferie-img img{
  display: block;
  width: 100%;
  height: auto;
}

.ferie-body{
  padding: 22px 24px 26px;
  text-align: center;
}
.ferie-eyebrow{
  font-size: 18px;
  font-weight: 600;
  color: #185FA5;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.ferie-text{
  font-size: 15px;
  line-height: 1.6;
  color: #1a1d21;
  margin: 0 0 18px;
}

.ferie-btn {width:100%;}


@media (max-width: 400px){
  .ferie-popup{ max-width: 100%; }
  .ferie-body{ padding: 18px 18px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .ferie-popup{ animation: none; }
}

/* STILI GENERALI */

/* flex style */
.width100 {width:100%;}
.h100 {height:100vh;} 
.relative {position:relative;}
.wrap-flex {display:flex; }
.column {flex-direction:column;}
.wrap {flex-wrap: wrap;}
.center {align-items:center;justify-content: center;}
.flexwrap {flex-wrap: wrap;}
.spc-btw {justify-content: space-between;}
.justify-c {justify-content: center;}
.justify-r {justify-content: flex-end;}
.justify-s {justify-content: flex-start;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.flexwrap {flex-wrap: wrap;}
.fit {width:fit-content;}

/* gap style */
.gap5 {gap:5px;}
.gap10 {gap:10px;}
.gap16 {gap:16px;}
.gap20 {gap:20px;}
.gap30 {gap:30px;}
.gap50 {gap:50px;}
.gap100 {gap:100px;}

/* text style */
.txt-c {text-align:center;}
.txt-r {text-align:right;}
.txt-l {text-align: left;}
.txt-j {text-align: justify;}

.uppercase {text-transform: uppercase;}
.underline {text-decoration: underline;}
.fsize-gen {font-size:18px;}
@media (max-width:900px) {.fsize-gen {font-size:16px;}}
.line-h-p {line-height: 1.8;}
.bold {font-weight:600;}
.txt-w {color:var(--white);}
.txt-dark {color:var(--cl-txt);}
.txt-brand {color:var(--brand);}

/* margin style */
.m0 {margin:0;}
.ml-auto {margin-left:auto;}
.mr-auto {margin-right:auto;}
.m-auto {margin: 0 auto;}
.m-block0 {margin-block: 0;} /* top e bottom */
.m-inline0 {margin-inline: 0;} /* left e right */
.mt0 {margin-top:0;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt16 {margin-top:16px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}
.mt100 {margin-top:100px;}
.mb0 {margin-bottom:0;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb16 {margin-bottom:16px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb50 {margin-bottom:50px;}

/* padding style */
.p0 {padding:0;}
.p5 {padding: 5px;}
.p10 {padding:10px;}
.pt0 {padding-top:0;}
.pt10 {padding-top:10px;}
.pb0 {padding-bottom:0;}
.p-block0 {padding-block: 0;} /* top e bottom */
.p-inline0 {padding-inline: 0;} /* left e right */

/* link style */
.link-gen {color:var(--g500);}
.link-gen:hover {color:var(--brand);}
.link-brand {color:var(--brand-dark);}
.link-brand:hover {color:var(--brand);}

/* background style */
.bg-grey {background:var(--clgrey);}
.bg-dark {background:var(--cl-txt);}
.bg-white {background:var(--cl-white);}

/* general style */
.pointer {cursor:pointer;}
.bradius {border-radius:var(--bradius);}
.border-t {border-top:1px solid var(--cl-softgrey)}
.sticky {
  position:sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
}
.absolute {
  position:absolute;
  position: -webkit-absolute;
  position: -moz-absolute;
  position: -ms-absolute;
  position: -o-absolute;
}

.fixed {
  position:fixed;
  position: -webkit-fixed;
  position: -moz-fixed;
  position: -ms-fixed;
  position: -o-fixed;
}
.bkgr-image_cover {
  background-size: cover;
  -webkit-background-size:cover;
   -moz-background-size: cover;
   -o-background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height:100vh;
}
.hidden {
  display: none;
}