.elementor-kit-12{--e-global-color-primary:#77694D;--e-global-color-secondary:#FFF8EA;--e-global-color-text:#77694D;--e-global-color-accent:#A79671;--e-global-typography-primary-font-family:"Vonca";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Arial";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Arial";--e-global-typography-text-font-weight:100;--e-global-typography-accent-font-family:"Arial";--e-global-typography-accent-font-weight:500;background-color:#FFF8EA;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:400ms;}.elementor-kit-12 e-page-transition{background-color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1220px;}.e-con{--container-max-width:1220px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* DEFAULT: Site gutters (desktop/tablet). Mobile stays default (no changes). */
.elementor {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 1024px) {
  .elementor {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* MOBILE: keep Elementor default */
@media (max-width: 767px) {
  .elementor {
    padding-left: 0;
    padding-right: 0;
  }
}

/* WHEN YOU SET "FULL WIDTH / STRETCH" IN ELEMENTOR:
   Elementor adds .elementor-section-stretched (sections).
   This rule makes those sections truly full-bleed by canceling the wrapper padding. */
.elementor-section.elementor-section-stretched {
  margin-left: -40px;
  margin-right: -40px;
  width: calc(100% + 80px);
  max-width: none;
}

@media (max-width: 1024px) {
  .elementor-section.elementor-section-stretched {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
  }
}

@media (max-width: 767px) {
  .elementor-section.elementor-section-stretched {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}




/*TEXT EFFECT-------*/

#my-animated-text {
    /* Initial state */
    opacity: 0;
    transform: translateY(50px);

    /* Animation: Slower duration (2s) for fallback */
    animation: slideUpFade 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

    /* Trigger animation on scroll (Modern Browsers) */
    animation-timeline: view();
    /* 
       Expanded range to make it "slower" relative to scroll:
       Starts at 10% entry, finishes when 60% of viewport is covered (was 30%)
    */
    animation-range: entry 10% cover 60%;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
  

/*IMAGE REVEAL 1 ------*/


/*
    Image Animation - Smooth Appearance
    This CSS handles the animation of images when they enter the viewport.
*/

#my-animated-img {
    /* Initial state */
    opacity: 0;
    transform: translateY(40px);
    /* Start slightly lower for a lift effect */

    /* Animation definition */
    animation: imageFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

    /* 
       Trigger on Scroll 
       Browsers with support will use the scroll position to trigger the start.
    */
    animation-timeline: view();
    /* 
       Start animating when the top of the image entering the viewport (entry 0%)
       Finish the animation when it has covered 30% of the viewport or itself
    */
    animation-range: entry 10% cover 30%;
}

/* Reusable class version */
.reveal-img {
    opacity: 0;
    transform: translateY(40px);
    animation: imageFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* Ends at natural position */
    }
}


/*FONT-----------------*/

@font-face {
  font-family: "Vonca";
  src:
    url("https://cityhotelgl.ch/wp-content/uploads/2026/01/Vonca-Regular.woff2") format("woff2"),
    url("https://cityhotelgl.ch/wp-content/uploads/2026/01/Vonca-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Force Vonca on header everywhere */
header,
.elementor-location-header,
.elementor-header,
.site-header,
.elementor-nav-menu a,
.elementor-heading-title {
  font-family: "Vonca", Arial, sans-serif !important;
}


/*ICONS---------------*/

/* Position wrappers */
.elementor-form .elementor-field-group.elementor-field-type-date,
.elementor-form .elementor-field-group.elementor-field-type-time{
  position: relative;
}

/* Give room left for fake text + right for icons */
.elementor-form .elementor-field-group.elementor-field-type-date input,
.elementor-form .elementor-field-group.elementor-field-type-time input{
  padding-left: 56px !important;
  padding-right: 52px !important;
}

/* Fake placeholder text inside input area */
.elementor-form .elementor-field-group.elementor-field-type-date::before{
  content:"Date";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.55;
  pointer-events:none;
  z-index:6;
}

.elementor-form .elementor-field-group.elementor-field-type-time::before{
  content:"Time";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.55;
  pointer-events:none;
  z-index:6;
}

/* Icons (HTTPS only) */
.elementor-form .elementor-field-group.elementor-field-type-date::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  pointer-events:none;
  z-index:7;
  background:url("https://cityhotelgl.ch/wp-content/uploads/2026/01/calendar.svg") no-repeat center/contain;
}

.elementor-form .elementor-field-group.elementor-field-type-time::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  pointer-events:none;
  z-index:7;
  background:url("https://cityhotelgl.ch/wp-content/uploads/2026/01/clock.svg") no-repeat center/contain;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Vonca';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://cityhotelgl.ch/wp-content/uploads/2026/01/Vonca-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */