@import url(normalize.min.css);
@import url(simple-lightbox.css);

/* ============================= */
/* THEME COLORS */
/* ============================= */
:root{
    /* background */
    --background_color:#fff; 
    --background_variant_color:#f7f7f7;
    /* font colors */
    --text_color:#545454;
    --brand_color:#202A5A;
    /* fonts */
    --main_font: sans-serif;
    --brand_font:"Playfair Display", serif;
    /* borders and dividers */
    --borders_and_dividers:#F1F1F1;
    --borders_and_dividers_dark:#CDCDCD;
}

/* ============================= */
/* GENERAL SETTING */
/* ============================= */
*{
	box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
}

html{
    font-size: 100%;
}


body{
    line-height: 1.6;
    color: var(--text_color);
    font-family: var(--main_font);
}

ul,
ol{
	margin:0;
	padding:0;
	list-style-type: none;
}

address{
    font-style: normal;
}

figure{
    margin:0
}

img{
    width: 100%;
}

/* ============================= */
/* TYPOGRAPHY */
/* ============================= */
h1{
    font-size: 2.5rem;
    line-height: 1.25em;
    font-family: var(--brand_font);
    font-weight: 600;
}

h2,
h3{
    font-family: var(--brand_font);
    color: var(--brand_color);
    font-weight: 600;
}

h2{
    font-size: 2.25rem;
    line-height: 2.75rem;
}

h3{
    font-size:1.75rem;
    line-height: 1.9rem;
}

p{
    text-align: justify;
}

.claim{
    color: var(--background_color);
    font-family: var(--main_font);
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing:2px;
    margin-top: 0.5rem;
    display: block;
}

h2 .claim{
    color: var(--brand_color);
}

h3 .claim{
    color: var(--brand_color);
    font-size: 1rem;
    line-height: 1.2rem;
}

.bold{
    font-weight: bold;
}

.underline{
    text-decoration: underline;
    font-weight: bold;
    text-transform: uppercase;
}

.heading{
    font-size:1.25rem;
    line-height: 1.9rem;
    display: block;
    font-family: var(--brand_font);
    color: var(--brand_color);
    font-weight: 600;
}

a{
    text-decoration:none;
    color: var( --text_color);
    outline:0!important;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

a:hover{
    opacity: 0.9;
}

/* ============================= */
/* LAYOUT */
/* ============================= */
.section_color{
    background: var(--background_variant_color);
}

.innerbox{
    padding:5rem 3rem;
    max-width: 80rem;
    margin:0 auto;
}

.innerbox_s{
    max-width: 60rem;
    text-align: center;
    margin: 0 auto;
}

.innerbox_s p{
    text-align: center;
}

/* grid layout*/
.grid{
  display: grid;
  gap: 3rem;
}

/* auto responsive column layout */
.grid_auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* fixed column layout */
.grid_2{
  grid-template-columns: repeat(2, 1fr);
}

.grid_3{
  grid-template-columns: repeat(3, 1fr);
}

.grid_4{
  grid-template-columns: repeat(4, 1fr);
}


/* layout_img */
.layout_img .grid_column{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layout_img .grid_column h2{
    margin-top: 0;
}

.layout_img .grid_column:first-child{
    padding-right: 5rem;
}

.layout_img .grid_column .btn{
    margin:3rem auto 0 0 ;
}

.layout_img .grid_column img{
    height: 50rem;
    object-fit: cover;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
    background: var(--brand_color);
}

/* layout_img_reverse */
.layout_img_reverse .grid_column:first-child{
    padding-right: 0rem;
}

.layout_img_reverse .grid_column:last-child{
    padding-left: 5rem;
}

/* template_subpage */
.hero_subpage{
    padding: 0;
    background: var(--brand_color);
    margin-top: 4.75rem;
}


.hero_subpage .hero_box h1{
    color: var(--background_color);
    text-shadow: none;
}



/* ============================= */
/* COMPONENTS */
/* ============================= */
/* buttons */
.btn{
    display: inline-block;
    border: solid 1px var(--brand_color);
    padding:0.62rem 3.4rem;  
    font-size:0.8rem;
    text-align: center;
    border-radius: 0.25rem; 
    font-weight: bold;
    letter-spacing: 0.2rem;
}

.btn:hover{
    opacity: 1;
}

.btn_light{
    border: solid 1px var(--brand_color);
}

.btn_light:hover{
   background: var(--brand_color);
   color:var(--background_color);
}

.btn_dark{
    background: var(--brand_color);
    color: var(--background_color);
}

.btn_dark:hover{
    background: var(--background_color);
    color: var(--brand_color);
}

#scroll_to_top{
    position:fixed;
    bottom:1.5rem;
    right: 1.5rem;
    opacity: 0;
    z-index:998;
    background: var(--brand_color);
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem; 
}

#scroll_to_top.active_btn{
    opacity: 1;
}

#scroll_to_top.active_btn:hover{
    opacity: 0.8;
}

/* icons */
.icon{
    display: block;
    width: 1.25rem;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

.bath{
    content: url(../img/icons/bath.svg);
}

.bed{
    content: url(../img/icons/bed.svg);
}

.bell{
    content: url(../img/icons/bell.svg);
}

.caret_down{
    content: url(../img/icons/caret_down.svg);
}

.calendar{
    content: url(../img/icons/calendar.svg);
}

.chevron_up{
    content: url(../img/icons/chevron_up.svg);
}

.house{
    content: url(../img/icons/house.svg);
}

.envelope{
    content: url(../img/icons/envelope.svg);
}

.instagram{
    content: url(../img/icons/instagram.svg);
}

.kitchen{
    content: url(../img/icons/kitchen.svg);
}

.language{
    content: url(../img/icons/language.svg);
}

.location{
    content: url(../img/icons/location.svg);
}

.quote_left{
    content: url(../img/icons/quote_left.svg);
}

.shower{
    content: url(../img/icons/shower.svg);
}

.snowflake{
    content: url(../img/icons/snowflake.svg);
}

.tree{
    content: url(../img/icons/tree.svg);
}

.umbrella_beach{
    content: url(../img/icons/umbrella_beach.svg);
}

.phone{
    content: url(../img/icons/phone.svg);
}

.vault{
    content: url(../img/icons/vault.svg);
}

.washing{
    content: url(../img/icons/washing.svg);
}

.wifi{
    content: url(../img/icons/wifi.svg);
}

/* icon_list */
.icon_list{
    display: flex;
    gap:0.5rem;
}

/* accordion */
.accordion_list{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

/* button accordion */
.accordion_trigger {
    cursor: pointer;
    border: none;
    display:flex;
    background: none;
    text-align: left;
    font-weight: bold;
    background: var(--background_variant_color);
    border: solid 1px rgba(0,0,0,0.04);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);  
    width: 100%;
    padding:1.25rem;
    border-radius: 0.25rem;
}	

.section_color .accordion_trigger{
    background: var(--background_color);
}


/* accordion + / - */
.accordion_trigger::before {
    content:"+";
    width: 20px;
    display: inline-block;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

/* accordion + / - activ */
.accordion_trigger.active_accordion::before {
    content:"-";
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
    -webkit-transition: max-height 1s ease;
    -moz-transition: max-height 1s ease;
    -ms-transition: max-height 1s ease;
    -o-transition: max-height 1s ease;
}

.panel p{
    text-align: justify;
    margin: 1.5rem 0 0 0;
}

/* gallery_grid */
.gallery_grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 12rem 12rem;
    gap: 2rem;
}

.gallery_item {
    overflow: hidden;
}

.gallery_item_large {
    grid-row: span 2;
}

.gallery_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--brand_color);
    color: var(--background_color);
}

/* lux_gallery */
.lux_gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.lux_gallery img{
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
}

/* BIG IMAGE STANDARD (left) */
.lux_big {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* REVERSE BLOCK */
.lux_gallery.reverse {
    grid-template-columns: 1fr 2fr;
    margin-bottom: 0;
}

/* Big im Reverse nach rechts */
.lux_gallery.reverse .lux_big {
    grid-column: 2 / 3;
}

/* Images */
.lux_gallery img {
    height: 100%;
    object-fit: cover;
    background: var(--brand_color);
    color: var(--background_variant_color);
}

/* customer_feedback */
.customer_feedback .grid_column{
    display: flex;
    flex-direction: column;
    background: var(--background_color);
    padding: 2.125rem;
    border: solid 1px rgba(0,0,0,0.04);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
    border-radius: 0.25rem;
}

.customer_feedback .grid_column .icon{
    width: 2rem;
    margin-bottom: 0.75rem;
}

.customer_feedback .grid_column .quote_author{
    color: var(--brand_color);
    font-weight: bold;
    display: block;
    margin-top: auto;
    padding-top: 1rem;
}

/* card_list */
.card_list {
    align-items: stretch;
}

.card {
    display: flex;
    background: var(--background_variant_color);
    border: solid 1px rgba(0,0,0,0.04);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
    border-radius: 0.25rem;
}

.section_color .card{
    background: var(--background_color);
}

.card figure {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card figure img {
    height: 12rem;
    object-fit: cover;
    background: var(--brand_color);
    border-radius: 0.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.card figure figcaption {
    display: flex;
    flex-direction: column;
    padding: 2.75rem 2.125rem;
    flex: 1;
    text-align: center;
}

.card figure figcaption p{
    text-align: center;
}

.card figure figcaption h3{
    margin-top: 0;
}

.card figure figcaption h3 .claim{
    margin-top: 0.75rem;
}

.card figure figcaption p:last-of-type{
    margin-bottom: 4rem;
}

.card figure figcaption .btn {
    margin: auto auto 0 auto;
}

.card_list_logo .card .box{
    background: var(--brand_color);
    height: 10rem;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card_list_logo .card .box img{
    height: 3rem;
    object-fit: contain;
    border-radius: 0;
}

/* ============================= */
/* NAVIGATION */
/* ============================= */
.main_h {
    position: fixed;
    top:0;
    z-index: 999;
    width: 100%;
    background: var(--background_color);
}

.main_h .innerbox{
    padding:1.25rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

.mobile_buttons{
    display: none;
}

#nav-icon{
    display: none;
}

/* logo */
.logo img{
    width: 3rem;
}

.logo_mobile{
    display: none;
}

.active_nav_a{
    text-decoration: underline;
}

.icon_text{
    display: flex;
    gap: 0.25rem;
    color: var(--brand_color);
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

.icon_text:hover{
    opacity: 0.9;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2rem 1.2rem;
    font-size:0.75rem ;
}

.main-nav ul li .caret_down{
    margin-top: -0.1rem;
}

.main-nav ul li a{
    padding: 5px;
    color: var(--brand_color);
}

.sticky{
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
    border-bottom: solid 1px rgba(0,0,0,0.04);
}

.sticky .innerbox{
    padding:0.5rem 3rem;
}

/* ============================= */
/* DROPDOWN DESKTOP */
/* ============================= */
.has_dropdown {
    position: relative;
}

ul.dropdown {
    position: absolute;
    margin: 0;
    top: 2rem;
    left: 0%;
    transform: translateY(0.5rem);
    background: var(--background_color); 
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);  
    border: solid 1px rgba(0,0,0,0.04);
    opacity: 0;
    visibility: hidden;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;  
    gap:0.5rem;
    padding:0.75rem;  
    border-radius: 0.25rem;   
    flex-direction: column;
    align-items: flex-start;
}


ul.dropdown li a {
    white-space: nowrap;
    color: var(--brand_color); 
}                             

.has_dropdown:hover > ul.dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* wissenswertes + language dropdown anpassen  */
.main-nav .has_dropdown:nth-child(7) .dropdown,
.dropdown.dropdown_language{
    top: 1.75rem;
}


.dropdown_toggel{
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    display: flex;
    gap: 0.2rem;
    color: var(--brand_color);
}

.dropdown_toggel:hover{
    opacity: 0.9;
}

.dissabled_lang{
    opacity: 0.4;
    color: var(--brand_color);
    padding: 5px;
}



/* ============================= */
/* HERO */
/* ============================= */
/* hero */
.hero{
    padding: 0;
    color: var(--background_color);
    text-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

.hero .innerbox{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.hero_box{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
}

.hero_box h1{ 
    margin-top: 0;
}

.hero_box img{
    width: 5rem;
}



/* hero_cta */
.hero.hero_cta{
    margin-top:0;
}

.hero_cta .hero_box h2,
.hero_cta .hero_box h2 .claim{
    color:var(--background_color);
}


/* ============================= */
/* hero-new */
/* ============================= */
.hero-new {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--background_color);
    margin-top: 50px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--brand_color);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 60%);
    z-index: 1;
    }

.hero-new .innerbox {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
}

                
.hero-title {
    font-family: var(--brand_font), serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}

.hero_title_box .hero-title-serif:last-of-type {
    display: block;
}

.hero-title-italic {
    font-style: italic ;
}

.hero-eyebrow {
    font-family: var(--brand_font), serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.hero-text {
    max-width: 50ch;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.btn-primary {
    background: var(--background_color);
    color: var(--text_color);
    border: none;
}

.btn-secondary {
    background: #546bd3;
    border: 1px solid #546bd3;
    color: var(--background_color);
}

.hero-badge {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    text-align: right;
    display: block;
    color: var(--background_color);
}

.hero-badge-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-badge-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
}

/* ============================= */
/* HOME */
/* ============================= */
#home .card_list{
    margin-top: 3rem;
}

#home .customer_feedback{
   margin-top: 3rem;
}


/* home hero_cta*/
#home .hero_cta{
     background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0.0) 75%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.0) 70%
    ),
    url("../img/home/bg/bg_home_hero_cta.jpg") center / cover no-repeat var(--brand_color);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#home #section_01 .btn{
    margin-top: 1.75rem;
}



#home #section_05 .card_list h3{
   min-height: 3.75rem;
   margin-bottom: 0;
} 

#home #section_05 .card_list .bold{
    display: block;
}

#home #section_05 .card_list .btn{
    max-width: 18rem;
}

/* nachträgöiche änderungen btn farbe  */
#home #section_05 .card_list .card .btn{
    background: var(--brand_color);
    color: var(--background_color);
}

#home #section_05 .card_list .card .btn:hover{
    background: var(--background_color);
    color: var(--text_color);
}

/* REVERSE BLOCK */
#home .lux_gallery.reverse {
    margin-bottom: 1.25rem;
}

/* ============================= */
/* ayurveda */
/* ============================= */
#ayurveda #section_01 .btn{
    margin-top: 1.75rem;
}

#ayurveda .card_list{
    margin-top: 3rem;
}

/* ============================= */
/* panchakarma */
/* ============================= */
#panchakarma #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* detox_regeneration */
/* ============================= */
#detox_regeneration #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* bournout */
/* ============================= */
#bournout #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* longevity */
/* ============================= */
#longevity #section_01 .btn{
    margin-top: 1.75rem;
}

#longevity #section_04 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* schedule */
/* ============================= */
.schedule_list{
    margin-top: 3rem;
}

.schedule_list li{
    border-bottom: solid 1px var(--borders_and_dividers_dark);
    padding: 2rem 0;
}

.schedule_list li:first-child{
    padding: 0 0 2rem 0;
}

.schedule_list li:last-child{
    border-bottom: none;
    padding: 2rem 0 0 0;
}

.sub_schedule_list li,
.sub_schedule_list li:first-child,
.sub_schedule_list li:last-child{
    padding: 0;
    border: none;
}

     
/* ============================= */
/* yoga */
/* ============================= */
#yoga #section_01 .btn{
    margin-top: 1.75rem;
}

#yoga .hero_cta{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0.0) 75%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.0) 70%
    ),
    url("../img/yoga-retreat-sri-lanka/bg/bg_yoga_hero_cta.jpg") center / cover no-repeat var(--brand_color);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

/* ============================= */
/* meditation */
/* ============================= */
#meditation #section_01 .btn{
    margin-top: 1.75rem;
}


/* ============================= */
/* yoga_studio */
/* ============================= */
#yoga_studio #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* yoga_groups */
/* ============================= */
#yoga_groups #section_01 .btn{
    margin-top: 1.75rem;
}

#yoga_groups #section_02 .card_list{
    margin-top: 3rem;
}



#yoga_groups #section_02 .card_list h3{
    min-height: 6.25rem;
    margin-bottom: 0;
}

/* ============================= */
/* ROOMS */
/* ============================= */
/* rooms hero_cta*/
#rooms .hero_cta{
     background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0.0) 75%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.0) 70%
    ),
    url("../img/rooms/bg/bg_rooms_cta.jpg") center / cover no-repeat  var(--brand_color);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#rooms #section_01 .btn_dark{
    margin-top: 1.75rem;
}

#rooms #section_01 .card_list{
    margin-top: 5rem;
}

/* nachträgöiche änderungen btn Farbe rooms  */
#rooms #section_01 .card_list .card .btn{
    background: var(--brand_color);
    color: var(--background_color);
}

#rooms #section_01 .card_list .card .btn:hover{
    background: var(--background_color);
    color: var(--text_color);
}


/* ============================= */
/* room_category */
/* ============================= */
.room_category .grid{
    margin-top: 1.5rem;
}

.room_category .grid .grid_column:first-of-type{
    grid-column: span 2;
    padding-right: 3rem;
}

.room_category .grid .grid_column:first-child .heading{
    margin-bottom:0.25rem ;
}


.room_category .grid .grid_column .btn{
    margin: 2.25rem 0;
}

.room_category .grid .grid_column:last-child{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.room_category .grid .grid_column:last-child .heading{
    margin: 0 0 0.75rem 0;
}


.room_facilities_list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0.5rem;
}

.room_facilities_list li{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}


/* ============================= */
/* resort */
/* ============================= */
#resort #section_01 .btn{
    margin-top: 1.75rem;
}

#resort #section_04 .btn{
    margin-top: 1.75rem;
}

#resort .hero_cta{
     background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0.0) 75%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.0) 70%
    ),
    url("../img/resort-sri-lanka/bg/bg_resort_cta.jpg") center / cover no-repeat var(--brand_color);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

/* ============================= */
/* tours_coulture */
/* ============================= */
#tours_coulture #section_01 .btn_dark{
    margin-top: 1.75rem;
}

#tours_coulture .card_list{
   margin-top: 5rem;
} 


#tours_coulture .card_list h3{
   min-height: 3.75rem;
   margin-bottom: 0;
} 



/* ============================= */
/* garden */
/* ============================= */
#garden #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* pool */
/* ============================= */
#pool #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* beach */
/* ============================= */
#beach #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* about_us */
/* ============================= */
#about_us #section_01 .btn{
    margin-top: 1.75rem;
}

#about_us #section_04 .card_list{
    margin-top: 3rem;
}

#about_us #section_04 .card_list .card h3{
    margin: 0 0 1rem 0;
}

#about_us #section_04 .card_list .card h3 .claim{
    margin-top: 0.5rem;
}

#about_us #section_04 .card_list .card figure img {
    height: auto;
    object-fit: fill;
}

#about_us .card figure figcaption p:last-of-type{
    margin-bottom: 0rem;
}


/* ============================= */
/* philosophy */
/* ============================= */
#philosophy #section_01 .btn{
    margin-top: 1.75rem;
}

.philosophy_list{
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
}

.philosophy_list li{
   display: flex;
   flex-direction: column;
} 

.philosophy_list li h3{
   min-height: 3.6rem;
   margin-bottom: 0;
} 

.philosophy_list li p{
   margin-bottom:auto ;
} 

/* ============================= */
/* team */
/* ============================= */
#team #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* knowledge */
/* ============================= */
/* ============================= */
/* travel_period */
/* ============================= */
#travel_period #section_01 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurvedic_kitchen */
/* ============================= */
#ayurvedic_kitchen #section_01 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* doshas */
/* ============================= */
#doshas #section_01 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_anti_aging */
/* ============================= */
#ayurveda_anti_aging #section_01 .btn,
#ayurveda_anti_aging #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_bei_chronischen_schmerzen */
/* ============================= */
#ayurveda_bei_chronischen_schmerzen #section_01 .btn,
#ayurveda_bei_chronischen_schmerzen #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_bei_hautproblemen */
/* ============================= */
#ayurveda_bei_hautproblemen #section_01 .btn,
#ayurveda_bei_hautproblemen #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_bei_kopfschmerzen */
/* ============================= */
#ayurveda_bei_kopfschmerzen #section_01 .btn,
#ayurveda_bei_kopfschmerzen #section_06 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_bei_nackenschmerzen */
/* ============================= */
#ayurveda_bei_nackenschmerzen #section_01 .btn,
#ayurveda_bei_nackenschmerzen #section_06 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_die_kraft_der_ruhe */
/* ============================= */
#ayurveda_die_kraft_der_ruhe #section_01 .btn,
#ayurveda_die_kraft_der_ruhe #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_fuer_mehr_lebensqualitaet */
/* ============================= */
#ayurveda_fuer_mehr_lebensqualitaet #section_01 .btn,
#ayurveda_fuer_mehr_lebensqualitaet #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_fuer_gesunden_schlaf */
/* ============================= */
#ayurveda_fuer_gesunden_schlaf #section_01 .btn,
#ayurveda_fuer_gesunden_schlaf #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_fuer_gesunden_schlaf */
/* ============================= */
#ayurveda_zur_gewichtsreduktion #section_01 .btn,
#ayurveda_zur_gewichtsreduktion #section_06 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

/* ============================= */
/* ayurveda_in_den_wechseljahren */
/* ============================= */
#ayurveda_in_den_wechseljahren #section_01 .btn,
#ayurveda_in_den_wechseljahren #section_07 .btn{
    margin: 1.75rem 0 1.5rem 0;
}


/* ============================= */
/* ayurveda_zur_staerkung_des_immunsystems */
/* ============================= */
#ayurveda_zur_staerkung_des_immunsystems #section_01 .btn,
#ayurveda_zur_staerkung_des_immunsystems .btn{
    margin: 1.75rem 0 1.5rem 0;
}


/* ============================= */
/* off_season */
/* ============================= */
#off_season #section_01 .btn{
    margin-top: 1.75rem;
}

#off_season #section_04 h2{
    text-align: center;
}

#off_season .card_list{
    margin-top: 3rem;
}

#off_season .hero_cta{
      background:linear-gradient(
      to bottom,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0.0) 75%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.0) 70%
    ),
    url("../img/nebensaison/bg/bg_nebensaison_hero_cta.jpg") center / cover no-repeat var(--brand_color);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

/* ============================= */
/* season_of_stillness */
/* ============================= */
#season_of_stillness #section_01 .btn{
    margin-top: 1.75rem;
}

/* ============================= */
/* oceans_stillness */
/* ============================= */
#oceans_stillness #section_01 .btn{
    margin-top: 1.75rem;
}


/* ============================= */
/* kontakt */
/* ============================= */
#contact #section_01 .btn{
    margin: 1.75rem 0 1.5rem 0;
}

#contact iframe{
    width:100%; 
    height:50vh;
    border: 0;
    display: block;
    margin: 0;
}


/* ============================= */
/* legal */
/* ============================= */
.legal h1{
    color: var(--brand_color);
    margin-top:2rem;
}

.legal .innerbox h2{
    font-size:1.75rem;
    line-height: 2.5rem;
}

.legal .innerbox h3{
    font-size:1.5rem;
    line-height: 2rem;
}


/* ============================= */
/* imprint */
/* ============================= */
#imprint section{
    min-height: 100vh;
}

/* ============================= */
/* terms_conditions */
/* ============================= */
#terms_conditions section{
    min-height: 100vh;
}

#terms_conditions section strong{
    color: var(--brand_color);
}


/* ============================= */
/* 404 fehler */
/* ============================= */
#error_404 section{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#error_404 h1{
    color: var(--brand_color);
}

#error_404 section p{
    text-align: center;
}

#error_404 section p:last-of-type{
    font-weight: bold;
}

#counter{
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  color:var(--brand_color);
}



/* ============================= */
/* glossary */
/* ============================= */

#glossary .accordion_list li ul{
    text-align: left;
    margin-top: 0.75rem;
}

.alphabet_list li:not(.accordion_list li){
    margin-bottom: 3rem;
}

.alphabet_list li:not(.accordion_list li):last-child{
    margin-bottom: 0;
}


.alphabet{
    display: block;
    color: var(--brand_color);
    font-family: var(--brand_font);
    font-size: 2.2rem;
    border-bottom: 2px var(--borders_and_dividers) solid;
    text-align: left;
}


.glossar_box{ 
    position: sticky;
    max-width: 25rem;
    margin: 0 auto;
    top:50px;
}

#glossarSearch{
    outline:none; 
    border:solid 2px var(--borders_and_dividers);
    padding:0.75rem;
    width: 100%;
    margin: 1rem 0 2rem 0;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
}

#glossarSearch:focus{
    outline:none;
    border:solid 2px var(--brand_color)
}

.glossar_highlight {
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    background: var(--brand_color);
    color: var(--background_color);
}

#glossarResults{
    background: var(--background_color);  
    position: absolute;
    top:63px;    
    width: 100%;
    padding:0 0.75rem;
    text-align: left;
    overflow: auto;
    max-height:75vh;
      box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); 
}

/* ginks für glossarsuche verstecken */
#hiddenGlossarLinks{
    display: none;
}

/* ============================= */
/* FOOTER */
/* ============================= */
footer{
    border-top: solid 1px var(--borders_and_dividers);
    color: var(--brand_color);
    font-size:0.8rem ;
    line-height: 1.75rem;
}

footer .innerbox .grid .grid_column a{
    color: var(--brand_color);
    padding: 5px 5px 5px 0;
}

footer .innerbox .grid .grid_column strong{
    display: block;
    font-size: 1.3rem;
    line-height: 1.9rem;
    margin-bottom: 1.25rem;
    font-family: var(--brand_font);
    font-weight: 600;
}


footer .innerbox .grid .grid_column img{
    width: 13rem;
    margin-top: 3px;
    display: block;
}

footer .innerbox .grid .grid_column .btn{
    width: 13rem;
    color: var(--background_color);
    margin-top: 2.25rem;
}

footer .innerbox .grid .grid_column .btn:hover{
    color: var(--brand_color);
}

footer .icon_list{
    margin-top: 0.5rem;
}

#copyright{
    display: block;
    text-align: center;
    padding: 5rem;
    font-size: 0.6rem;
    border-top: solid 1px var(--borders_and_dividers);
}


/* ============================= */
/* MEDIAQUERIES 77rem  */
/* ============================= */
@media only screen and (max-width:77rem) {
    /* grid_3 */
    .grid_3{
         grid-template-columns: repeat(2, 1fr);
    }

    /* navigation mobil*/
      .no-scroll {
        overflow: hidden;
    } 

    .main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap:1rem;
        margin:0;
        font-weight: bold;
    }

    .main-nav ul li a{
        padding-left:0;
    }


    /* ============================= */
    /* DROPDOWN Mobile */
    /* ============================= */
    /* dropdown */
    .dropdown_toggel .icon{
        display: none;
    }

    ul.dropdown:not(.dropdown_language_switch){
        margin-top:0.6rem;
        gap: 1rem;
        top: 100%;
        left: 0%;
        transform: translateY(0rem);
        opacity: 1;
        visibility: visible;
        position: static;
        background: none;
        padding: 0;
        font-weight: normal;
        box-shadow: none;
        border: none;
    }

    /* language dropdown anpassen  */
    ul.dropdown.dropdown_language,
    .main-nav .has_dropdown:nth-child(7) .dropdown{
        margin-top: 1rem;
    }

    .dissabled_lang{
        padding-left: 0;
    }

    /* formatierung menu fullscreen */
    #menu {
        top:0;
        bottom:0;
        left: -100%;
        width: 100%;
        background:rgb(247, 247, 247, 0.9);
        position: fixed;
        transition: all 1s ease; 
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        z-index: 1100;
    }

    /* menu wenn geöffnet */
    #menu.open {
        left:0
    }

    /* navigationsmenu  */
    .main-nav_box{
        height: 100%;
        width: 75%;
        padding: 0 0 1.25rem 1.5rem;
        overflow: auto;
        background: var(--background_color);
    }

    .logo_mobile{
        display: inherit;
        margin: 1.25rem 0 1rem 0;
    }

    .sticky .logo_mobile{
        margin: 0.7rem 0 1rem 0;
    }


    .mobile_buttons{
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-top: -0.3rem;
    }

    /* language_switch */
     .mobile_buttons  .language_switch .icon_text{
        flex-direction: column;
        align-items: center;
        gap: 0;
        font-size: 0.6rem;
        line-height: 0.75rem;
    }

    .mobile_buttons .dropdown_language_switch{
        font-size: 0.75rem;
        margin-top:0.25rem;
    }


    /* mobile toggle */
    #nav-icon{
        padding: 20px;
        margin: 0px -10px -20px 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
          transition:all .5s ease-in-out;
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -ms-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        cursor: pointer;
        display:inherit;
        z-index: 1101;
        order:1;
    }

    #nav-icon span {
        display: block;
        position: absolute;
        height:2px;
        width: 25px;
        background:var(--brand_color);
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
        border-radius: 5px;
    }

    #nav-icon span:nth-child(1) {
        top: 0px;
    }

    #nav-icon span:nth-child(2),
    #nav-icon span:nth-child(3) {
        top: 8px;
    }

    #nav-icon span:nth-child(4) {
        top: 16px;
    }

    #nav-icon.open span{
        background: var(--brand_color);
    }

    #nav-icon.open span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    #nav-icon.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #nav-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #nav-icon.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    /* glossary */
    .glossar_box{ 
        top:55px;
    }
    
    #glossarResults{
        top:67px;    
    }
}


/* ============================= */
/* MEDIAQUERIES 55.5rem */
/* ============================= */
@media only screen and (max-width:55.5rem) {
    /* general settings */
    .innerbox{
        padding:5rem 1.5rem;
    }


    /* hero-new */
    .hero-new .innerbox {
        padding: 1.25rem;
        text-align: left;
    }

    .hero-badge {
        position: static;
        margin-top: 2rem;
        text-align: left;
    }

    /* layout_img */
    .layout_img{
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .layout_img .grid_column:first-child,
    .layout_img .grid_column:last-child{
        padding: 0;
    }

    .layout_img .grid_column .btn{
        margin-bottom: 4rem;
    }

    .layout_img .grid_column img{
        height: 20rem;
    }

    /* layout_reverse */
    .layout_img_reverse figure.grid_column{
        grid-row: 2; 
    }

    /* navigation */
    .main_h .innerbox{
        padding:1.25rem 1.5rem;
    }

    .sticky .innerbox{
        padding:0.7rem 1.5rem;
    }


    /* hero_cta */
    .hero_cta .innerbox{
        padding:5rem 1.5rem;
    }

    /* gallery */
    .gallery_grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 1.5rem;
    }

    .gallery_item_large {
        grid-column: span 2;
        grid-row: span 1;
    }


}

/* ============================= */
/* MEDIAQUERIES 46.9rem */
/* ============================= */
@media only screen and (max-width:46.9rem) {
    /* general settings */
    p{
        text-align: left;
    }

    /* accordeon */
    .panel p{
        text-align: left;
    }

    /* fixed column layout */
    .grid{
        gap: 1.5rem;
    }

    .grid_2,
    .grid_3{
        grid-template-columns: 1fr;
    }


    /* lux_gallery */
    .lux_gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .lux_gallery.reverse{
        grid-template-columns: 1fr;
    }

    .lux_gallery.reverse .lux_big {
        grid-column: auto;
    }

    
    .lux_gallery li {
        height: 16rem;
    }

    /* room_category */
    .room_category .grid .grid_column:first-of-type{
        padding-right: 0;
    }

    
    /* philosophy_list */
    .philosophy_list{
        gap: 1.5rem;
        grid-template-columns: 1fr;
    }

}


/* ============================= */
/* MEDIAQUERIES 34.4rem */
/* ============================= */
@media only screen and (max-width:34.4rem) {
    
    /* footer */
    footer{
        text-align: center;
    }

    footer .grid_auto {
        grid-template-columns: 1fr;
    }


    footer .innerbox .grid .grid_column img{
        margin:0 auto
    }

    footer .innerbox .grid .grid_column .btn{
        margin:1rem auto;
    }

    
    footer .innerbox .grid .grid_column strong{
        margin:0 auto 0.75rem;
    }

    footer .icon_list{
        justify-content: center;
    }

}


/* ============================= */
/* fonts */
/* ============================= */

/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* playfair-display-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2');
}