:root {
  --sd-red-color: #d50513;
  --sd-link-on-red-bg: #ffc107;
  --hero-bottom-bg-size: 150px;
  --sd-blue-color: #51719e;
  
  --sd-dark-blue-color: #1e3a62;
  
  
  --zm-color-lila: #73004c;
  --zm-color-zold: #d9e054; /* zöld */
  --zm-color-sotetzold: #2a9e0f;
}

.bg-sdblue {
    background-color: var(--sd-blue-color);
}

.bg-sdred {
    background-color: var(--sd-red-color);
}


.color-sdblue {
    color: var(--sd-blue-color);
}


.bg-zmlila { background-color: var(--zm-color-lila) }
.color-zmlila { color: var(--zm-color-lila)  }

.bg-zm-zmzold { background-color: var(--zm-color-zold) }
.color-zmzold { color: var(--zm-color-zold)}


.color-sdblue-dark {
    color: var(--sd-dark-blue-color);
}

.bg-zm-green {
    background-color: var(--zm-color-sotetzold);
}
.color-zm-green {
    color: var(--zm-color-sotetzold);
}

.bg-light-zm-green {
    background-color: #d9e053;
}

.bg-zm-orange {
    background-color: #f6831f;
}

.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.4), 
        rgba(0,0,0,0.4)), 
        url('/media/img/zumba-fitness.jpg') 
        center/cover 
        no-repeat;
    /* height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    
    /*
    align-items: center;
    color: white;
    text-align: center;
    */
}

.sd-hero-title {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.sd-text-shadow{
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}


/* Dark overlay for readability */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Dark overlay */
}

.hero-content {
    position: relative;
    z-index: 1;
    display:flex;
    width: 100%;
}

#hero-top {
    color: #fff;
    text-align: center;
    flex: 2;
}

#hero-bottom {
    flex: 1;
}

/* not used */
/*
#hero-bottom.has-items.red {
    background-image: 
        linear-gradient(
            to top,
            var(--sd-red-color) var(--hero-bottom-bg-size),
            transparent var(--hero-bottom-bg-size)
        );
}
*/



#hero-bottom.has-items {
    background-image: 
        linear-gradient(
            to top,
            #2a9e0f var(--hero-bottom-bg-size),
            transparent var(--hero-bottom-bg-size)
        );
}


#hero-bottom.no-items {
    background-image: none;
}

.no-list-items {
    background-color: rgba(0, 0, 0, 0.5); 
}

.course-list-item {
/*    display: flex;
    justify-content: center;*/
}

.course-list-item .card {
    max-width: 350px;
}


/* BEGIN: rotating cards */ 
.rotating-card {
    position: relative;
    max-width: 350px; /* width: 100%;*/
    border: none;
    perspective: 1000px; /* This adds depth to the flip effect */
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
    /*
    aspect-ratio: 1;
    max-height: 256px;
    max-width: 256px;
    min-height: 196px;
    min-width: 196px;
    */
}


.rotating-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* Keep the 3D transformation */
    transition: transform 0.6s ease;
}

.rotating-card-contents {
    width: 100%;
    height: 100%;
    background: #fff;
}

.rotating-card-contents.front,
.rotating-card-contents.back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backface-visibility: hidden; /* Prevent showing the back when flipped */
}



.rotating-card-contents.back {
    transform: rotateY(180deg); /* The back is rotated */
}

.rotating-card:hover .rotating-card-inner {
    transform: rotateY(180deg); /* Flip the card */
}


/* END: rotating cards */ 



.sd-section {
    /*min-height: 100vh;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*position: relative; */
    padding: 60px 0;
}

/* not used */
/*
.sd-section.red {
    background-color: var(--sd-red-color) !important;
    color: white;
}
*/

.sd-section.dark { /* blue */
    color: white;
}


.sd-section.blue { /* blue */
    background-color: var(--sd-blue-color) !important;
}

.sd-section.green { /* blue */
    background-color: #2a9e0f !important;
}


.btn-zm-green {
  color: #fff;
  background-color: var(--zm-color-sotetzold);
  border-color: #207a0b;
}


.btn-zm-green:hover {
  background-color: #23860c;
  color: #fff;
  border-color: #207a0b;
}




.sd-section.red {
    background-color: var(--sd-red-color) !important;
}


.sd-section.light {
    background-color: white;
    color: var(--sd-red-color) !important;
}

.sd-normal-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}


#gyik-accordion h5 button {
    color: var(--sd-dark-blue-color) !important;
    font-weight: 600;
    padding:0;
    font-size: 18px;
    text-align: left;
     width:100%;
}

#gyik-accordion h5 button:hover {
    text-decoration: none;
}

#gyik-accordion h5 button:focus {
    outline: none !important;
    box-shadow: none !important;
}


#gyik-accordion .card-body {
    font-size: 18px;
}

#gyik-accordion .card-header {
    background-color: #d9e053;
}


#gyik-accordion .card {
    border: none;
}

.sd-h4 {
    font-size: 22px;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 0;
}

.sd-more-info {
    font-size: 16px;
}

.sd-more-info a {
    color: var(--sd-link-on-red-bg); 
}


.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--zm-color-sotetzold) !important; 
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}
.scroll-top:hover {
  background-color: var(--zm-color-zold) !important;
}

.py-more {
    padding: 60px 0;
}

.sd-features-icon {
    font-size: 2rem;
}

.sd-info-title {
    text-transform: uppercase;
    font-weight: bold;
}

.sd-info-text {
    color: white;
}

/*
.sd-features-text {
    display: flex; 
    align-items: center;
}
*/

.sd-features-icon-inner {
    font-size: 1.7rem;
}


.sd-call-to-action {
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
  background: #000;
}

.sd-call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.3;
}

.sd-call-to-action .container {
  position: relative;
  z-index: 3;
}


.sd-cta-btn {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid white;
  color: white;
  text-decoration: none;
}

.sd-cta-btn:hover {
  background: #f6831f; /* #ffc451;*/
  color: #000;
  border: 2px solid #f6831f; /* #ffc451; */
  text-decoration: none;
}


.h-40 { height: 40% !important; }
.h-60 { height: 60% !important; }