/*
Theme Name:   Landeseiten Design Child
Theme URI:    #
Description:  Child theme for Hello Elementor for Landeseiten Design projects.
Author:       Your Name
Author URI:   #
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  landeseiten-design-child
*/

/*----------------------------------------------------------------*/
/* Add your custom CSS below this line
/*----------------------------------------------------------------*/




html,body {
	
		overflow-x:clip !important;
	
	
}

body h2 i {
	font-family:"Newsreader" !important;
	font-weight:500 !important;
}


/*****************************************
 * LIBRARY STYLES FOR CIRCULAR CAROUSEL *
 **************************************/


.cs-gradient-border  {
    --border-width: 1px;
    border-radius: var(--radius);
    background: #FFFFFF;
    z-index: 1;
}

.cs-card-bg {
	background: linear-gradient(118deg, #FFFDFD 24.46%, rgba(255, 253, 253, 0.40) 94.21%);
	box-shadow: 0 0 30px 0 rgba(158, 201, 218, 0.50);
	backdrop-filter: blur(4px);
}

.cs-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0; 
    padding: var(--border-width); 
   

    background: linear-gradient(90deg, #006D98 0%, #35A1CF 49%, #C9F7FF 100%);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: -1;
}

/* 1. RING — Hidden until JS positions bullets (prevents FOUC) */
.cs-circular-slider__ring {
 
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cs-circular-slider__ring.cs-positioned {
  opacity: 1;
}

/* 2. BULLETS — Absolute positioning + GPU layer */
.cs-circular-slider__bullet {
  position: absolute;
  top: 0; 
  left: 0;
  z-index: 2;
  cursor: pointer;
  will-change: transform;
}

.cs-circular-slider__bullet.is-active {
  z-index: 3;
}

/* 3. SLIDES — Hide/show with fade */
.cs-circular-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.cs-circular-slider__slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

/* 4. TEXT CARDS — Stacked, only active one visible */
.cs-circular-slider__texts {
  position: relative;
}

.cs-circular-slider__texts.cs-height-set {
  overflow: hidden;
  transition: height 0.35s ease;
}

.cs-circular-slider__text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.cs-circular-slider__text.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
/*****************************************
 * CUSTOM  STYLES FOR CIRCULAR CAROUSEL *
 **************************************/

/* 3. SLIDES — Hide/show with fade */
/* Your project styles */
.cs-circular-slider__ring {
	position:absolute;
	inset:0;
	
}
.cs-circular-slider__bullet {
	--bullet-size:96px;
	width: var(--bullet-size); 
	height: var(--bullet-size); 
	border-radius: 50%; 
	background: #fff; 
	color:#4A95AF;
	border: 2px solid #65ABC430; 
	display:flex; 
	justify-content:center;
	align-items:center; 
	font-size:34px;
	font-weight:600;
	font-family:"DM Sans", Sans-serif;
}
.cs-circular-slider__bullet.is-active { 
	background: linear-gradient(to right, #4A95AF, #6BB0C8); 
	color: #fff; 
	box-shadow: 0 0 80px 0 #67ADC530;
}
.cs-circular-pagination__container{
	 position: relative;
    aspect-ratio: 1 / 1;
  
}

@media (max-width:1440px){
	.cs-circular-slider__bullet {
	--bullet-size:80px;

	font-size:28px;

}
	
	
@media (max-width:1024px){
	.cs-circular-slider {
		max-width:700px;
	}
	}
@media (max-width:768px){
	.cs-circular-slider {
		max-width:100%;
	}
	.cs-circular-slider__bullet {
	--bullet-size:52px;
	font-size:24px;
	}
}