/*** Spinner Start ***/



#spinner {



    opacity: 0;



    visibility: hidden;



    transition: opacity .8s ease-out, visibility 0s linear .5s;



    z-index: 99999;



 }







 #spinner.show {



     transition: opacity .8s ease-out, visibility 0s linear .0s;



     visibility: visible;



     opacity: 1;



 }



/*** Spinner End ***/











/*** Common CSS Start ***/



.back-to-top {



    position: fixed;



    right: 30px;



    bottom: 30px;



    display: flex;



    width: 45px;



    height: 45px;



    align-items: center;



    justify-content: center;



    transition: 0.5s;



    z-index: 99;



}







h1,



h2,



h3,



.h1,



.h2,



.h3 {



    font-weight: 200;



    font-family: 'Montserrat', sans-serif;



}







h4,



h5,



h6,



.h4,



.h5,



.h6 {



    font-weight: 600;



    font-family: 'Montserrat', sans-serif;



}







.display-1,



.display-2,



.display-3,



.display-4,



.display-5,



.display-6 {



    font-weight: 700;



    font-family: 'Gloria Hallelujah', sans-serif;



}







.display-4,



.display-5,



.display-6 {



    font-weight: 600;



}







.wow,



.animated {



    animation-duration: 2s !important;



}



/*** Common CSS End ***/











/*** Button Start ***/



.btn {



    font-weight: 600;



    transition: .5s;



}







.btn-square {



    width: 32px;



    height: 32px;



}







.btn-sm-square {



    width: 34px;



    height: 34px;



}







.btn-md-square {



    width: 44px;



    height: 44px;



}







.btn-lg-square {



    width: 56px;



    height: 56px;



}







.btn-square,



.btn-sm-square,



.btn-md-square,



.btn-lg-square {



    padding: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    font-weight: normal;



}







.btn.btn-primary {



    border: 0;



    color: #215f78;



}







.btn.btn-primary:hover {



 



}







.btn-border-radius {



    border-radius: 25% 10%;



}







.img-border-radius {



    border-radius: 50% 20% / 10% 40%;



}







.title-border-radius {



    border-radius: 10% 30%;



}



/*** Button End ***/











/*** Topbar Start ***/



.topbar .top-info {



    font-size: medium;



    font-weight: 400;



    font-family: 'Montserrat', sans-serif;



    letter-spacing: 1px;



    display: flex;



    align-items: center;



}







.topbar .top-link {



    display: flex;



    align-items: center;



    justify-content: center;



}







.topbar .top-link a {



    margin-right: 10px;



}







.topbar .top-link a:hover {



    background: var(--bs-secondary) !important;



}







.topbar .top-link a:hover i {



    color: var(--bs-primary) !important;



}



/*** Topbar End ***/











/*** Navbar Start ***/



.navbar {



    border-bottom: 1px solid rgba(255, 255, 255, .1);



}







.navbar .navbar-nav .nav-link {



    padding: 10px 12px;



    font-size: 16px;



    font-weight: 600;



    transition: .5s;



}







.navbar .navbar-nav .nav-link:hover,



.navbar .navbar-nav .nav-link.active,



.fixed-top.bg-white .navbar .navbar-nav .nav-link:hover,



.fixed-top.bg-white .navbar .navbar-nav .nav-link.active {



    color: var(--bs-primary);



}







.navbar .dropdown-toggle::after {



    border: none;



    content: "\f107";



    font-family: "Font Awesome 5 Free";



    font-weight: 700;



    vertical-align: middle;



    margin-left: 8px;



}







@media (min-width: 1200px) {



    .navbar .nav-item .dropdown-menu {



        display: block;



        visibility: hidden;



        top: 100%;



        font-weight: 400;



        font-family: 'Gloria Hallelujah', sans-serif;



        transform: rotateX(-75deg);



        transform-origin: 0% 0%;



        border: 0;



        transition: .5s;



        opacity: 0;



    }



}







.dropdown .dropdown-menu a:hover {



    background: var(--bs-secondary);



    color: var(--bs-primary);



}







.navbar .nav-item:hover .dropdown-menu {



    transform: rotateX(0deg);



    visibility: visible;



    background: var(--bs-light) !important;



    border-radius: 10px !important;



    transition: .5s;



    opacity: 1;



}







#searchModal .modal-content {



    background: rgba(255, 255, 255, .8);



}



/*** Navbar End ***/











/*** Hero Header ***/



.hero-header,



.page-header {



    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05)), url(../img/zelvicka-anicka-uvod.jpg);



    background-position: center center;



    background-repeat: no-repeat;



    background-size: cover;



}



/*** Hero Header ***/











/*** About Start ***/



















.about {



    background: linear-gradient(rgb(201, 160, 123, 0.5), rgb(255 255 255 / 5)), url(../img/background.jpg);



  



    background-repeat: no-repeat;



    background-size: cover;



}



/*** About End ***/











/*** service Start ***/



.service {



    background: linear-gradient(rgb(255 255 255 / 5%), rgb(201 160 123));



}







.service .service-item {



    box-shadow: 0 0 45px rgba(0, 0, 0, .1);



    width: 100%;



    height: 100%;



    transition: 0.5s;



    position: relative;



}







.service-content::after {



    position: absolute;



    content: "";



    width: 0;



    height: 100%;



    top: 0;



    left: 0;



    right: auto;



    background: transparent;



    transition: .5s;



}







.service-item:hover {



    border: 1px solid var(--bs-secondary) !important;



}







.service-item:hover .service-content::after {



    background: var(--bs-secondary);



    width: 100%;



    opacity: 1;



    z-index: 1;



}







.service-item .service-content .service-content-inner {



    position: relative;



    z-index: 2;



}







.service-item .service-content-inner i,



.service-item .service-content-inner p,



.service-item .service-content-inner a.h4 {



    transition: 0.5s;



}







.service-item:hover .service-content-inner i,



.service-item:hover .service-content-inner p {



    color: var(--bs-white) !important;



}



.service-item:hover .service-content-inner a.h4 {



    color: var(--bs-primary);



}







.service-item:hover .service-content-inner a.btn-primary {



    background: var(--bs-white) !important;



    color: var(--bs-primary) !important;



}







.service-item .service-content-inner a.btn-primary:hover {



    background: var(--bs-primary) !important;



    color: var(--bs-white) !important;



}



/*** Service End ***/











/*** Programs Start ***/



.program {



    background: linear-gradient(rgba(255, 72, 128, 0.1), rgba(255, 72, 128, 0.1));



}







.program .program-item .program-img .program-rate {



    position: absolute;



    width: 140px; 



    top: -20px; 



    left: 50%; 



    margin-left: -50px; 



    border-radius: 10% / 50%;



}







.program .program-item .program-text {



    padding-top: 150px; 



    margin-top: -125px;



}







.program .program-item .program-img img,



.program .program-item .program-teacher img,



.program .program-item:hover .program-text-inner a.h4 {



    transition: 0.5s;



}







.program .program-item:hover .program-img img,



.program .program-item:hover .program-teacher img {



    transform: scale(1.2);



}







.program .program-item:hover .program-text-inner a.h4 {



    color: var(--bs-primary) !important;



}



/*** Programs End ***/











/*** Events Start ***/



.events .events-item {



    width: 100%;



    height: 100%;



    border-radius: 30%;



    position: relative;



}







.events .events-item .events-inner .events-rate {



    position: absolute;



    width: 120px; 



    top: -20px; 



    left: 50%; 



    margin-left: -60px; 



    border-radius: 10% / 50%;



}







.events .events-item .events-inner .events-img .event-overlay {



    position: absolute;



    top: 50%; 



    left: 50%;



    transform: translate(-50%, -50%);



    transition: 0.5s;



    z-index: 1;



    opacity: 0;



}







.events .events-item .events-inner .events-img:hover .event-overlay {



    opacity: 1;



}







.events .events-item .events-img::after {



    position: absolute;



    content: "";



    width: 100%;



    height: 0;



    top: 0;



    left: 0;



    bottom: auto;



    background: rgba(77, 101, 249, .7);



    border-radius: 10px;



    transition: 0.5s;



}







.events .events-item:hover .events-img::after {



    height: 100%;



    opacity: 1;



}







.events .events-item .events-text a.h4,



.events .events-item .events-img img {



    transition: 0.5s;



}







.events .events-item:hover .events-text a.h4 {



    color: var(--bs-primary) !important;



}







.events .events-item:hover .events-img img {



    transform: scale(1.3);



}



/*** Events End ***/











/*** Blog Start ***/



.blog .blog-item .blog-img::after {



    position: absolute;



    content: "";



    width: 100%;



    height: 0;



    top: 0;



    left: 0;



    bottom: auto;



    background: rgba(77, 101, 249, .7);



    border-radius: 10px 10px 0 0;



    transition: 0.5s;



}







.blog .blog-item:hover .blog-img::after {



    height: 100%;



    opacity: 1;



}







.blog .blog-item .blog-date-comments {



    padding-top: 150px !important; 



    margin-top: -125px;



}







.blog .blog-item .blog-img img,



.blog .blog-item .blog-content img,



.blog .blog-item .blog-text-inner a.h4 {



    transition: 0.5s;



}







.blog .blog-item:hover .blog-img img {



    transform: scale(1.3);



}







.blog .blog-item:hover .blog-content img {



    transform: scale(1.3);



}







.blog .blog-item:hover .blog-text-inner a.h4 {



    color: var(--bs-primary);



}



/*** Blog End ***/















/*** Team Start ***/



.team .team-item {



    position: relative;



    width: 100%;



    height: 100%;



}







.team .team-item .team-icon {



    position: absolute;



    bottom: 120px;



    left: 50%;



    transform: translateX(-50%);



}







.team .team-item .team-icon a.share-link {



    opacity: 0;



    transition: 0.5s;



}







.team .team-item:hover .team-icon a.share-link {



    opacity: 1;



}







.team .team-item .team-content,



.team .team-item .team-content h4,



.team .team-item .team-content p {



    transition: 0.5s;



}







.team .team-item:hover .team-content {



    background: var(--bs-primary) !important;



    border-radius: 0 0 10px 10px;



}







.team .team-item:hover .team-content h4 {



    color: var(--bs-white) !important;



}







.team .team-item:hover .team-content p {



    color: var(--bs-dark) !important;



}



/*** Team end ***/











/*** testimonial Start ***/



.testimonial .testimonial-carousel {



    position: relative;



    



}







.testimonial .testimonial-carousel .owl-dots {



    margin-top: 30px;



    display: flex;



    align-items: center;



    justify-content: center;



}







.testimonial .testimonial-carousel .owl-dot {



    position: relative;



    display: inline-block;



    margin: 0 5px;



    width: 15px;



    height: 15px;



    background: var(--bs-primary);



    border-radius: 10px;



    transition: 0.5s;



}







.testimonial .testimonial-carousel .owl-dot.active {



    width: 30px;



    background: var(--bs-secondary);



}



/*** testimonial End ***/











/*** Footer Start ***/



.footer {



    background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 1)), url(../img/background.jpg);



    background-position: top center;



    background-repeat: no-repeat;



    background-size: cover;



}







.footer .footer-galary-img img {



    width: 100%;



    border-style: dotted; 



    border-color: var(--bs-primary);



    transition: 0.5s;



}







.footer .footer-galary-img img:hover {



    transform: scale(1.2);



}







.footer-item a.text-body:hover {



    color: var(--bs-secondary) !important;



}



/*** Footer End ***/











html { scroll-behavior: smooth; }











/* sticky navbar wrapper (obalující topbar + navbar) */



.sticky-nav {



position: sticky;



top: 0;



z-index: 1030; /* nad obsahem */







box-shadow: 0 2px 8px rgba(0,0,0,0.08);



}











/* CSS proměnná s výškou navbaru; JS ji dynamicky aktualizuje */



:root { --nav-height: 90px; }











/* třída pro sekce, které chceme správně zarovnat po kotvě */



.scroll-offset {



scroll-margin-top: calc(var(--nav-height) + 10px);



}











  /* --- Multi-slot theme variables (výchozí) --- */



  :root{



    --slot-primary: #c9a07b;   /* hlavní barva (buttons, bg-primary) */



    --slot-accent:  #215f78;   /* akcent (doplňky) */



    --slot-bg:      #ffffff;   /* pozadí emodulů / drobné plochy */



    --slot-text:    #1d5d76;   /* primární text barva */



    --slot-primary-dark: #e6c46a;



  }







  /* mapování na utilitky / elementy */



  .btn-primary {



    background-color: var(--slot-accent) !important;



    border-color: var(--slot-primary) !important;



    color: #fff !important;



  }



  .btn-primary:hover, .btn-primary:focus {



    background-color: #c9a07b !important;



    border-color: var(--slot-primary-dark) !important;



  }







  .bg-primary { background-color: var(--slot-primary) !important; color: white }



  .text-primary { color: var(--slot-primary) !important; }



  .border-primary { border-color: var(--slot-primary) !important; }







  /* akcentní třída pro speciální prvky */



  .accent { background: var(--slot-accent) !important; color: #fff !important; border-color: var(--slot-accent) !important; }



  .accent-text { color: var(--slot-accent) !important; }







  /* pozadí modulů / sekcí */



  .module-bg { background-color: var(--slot-bg) !important; }







  /* text color override */



  .theme-text { color: var(--slot-text) !important; }







  /* utility */



  .program-rate { background: var(--slot-primary) !important; }







  /* --- Color changer widget (multi-slot) --- */



  .color-changer {



    position: fixed;



    left: 16px;



    bottom: 16px;



    z-index: 2600;



    display:flex;



    gap:10px;



    align-items:center;



    font-family: inherit;



  }



  .cc-toggle {



    width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;



    box-shadow:0 8px 24px rgba(0,0,0,0.12);background:#fff;border:1px solid rgba(0,0,0,0.06);cursor:pointer;



  }



  .cc-panel {



    display:none; flex-direction:column; gap:10px; padding:10px; border-radius:12px;



    background: rgba(255,255,255,0.98); box-shadow:0 14px 40px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.04);



    min-width:240px;



  }



  .cc-panel.open { display:flex; }







  .cc-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }



  .cc-label { font-size:13px; min-width:72px; color:#333; }







  .cc-swatch { width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,0.06); cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,0.08); }



  .cc-swatch:focus { outline:3px solid rgba(0,0,0,0.06); transform:translateY(-2px); }



  .cc-swatch.active { box-shadow:0 0 0 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.12); transform:translateY(-2px); }







  .cc-actions { display:flex; gap:6px; margin-top:6px; }



  .cc-btn { padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:#fff; cursor:pointer; font-size:13px; }







  @media (max-width:480px){



    .color-changer { left:10px; bottom:10px; }



    .cc-panel { min-width:200px; }



  }







  .socials {







    color:#215f78;



  }







    /* default nav-height so page doesn't jump before JS runs */



          :root { --nav-height: 90px; }







          /* prevent horizontal overflow on small screens (quick fix) */



          html, body {



            overflow-x: hidden;



            /* reserve space for the fixed header so content is not hidden */



          }







          /* make the whole top wrapper fixed/sticky */



          .sticky-nav {



            position: fixed;



            top: 0;



            left: 0;



            right: 0;



            z-index: 1050; /* above page content */



            background: transparent; /* keep original backgrounds inside */



          }







          /* add a subtle shadow so header is distinct from content */



          .sticky-nav .container-fluid.border-bottom {



            box-shadow: 0 6px 24px rgba(0,0,0,0.08);



            background: rgba(255,255,255,0.98);



            backdrop-filter: blur(4px);



          }







          /* ensure images never cause overflow */



          img {



            max-width: 100%;



            height: auto;



          }







          /* keep headings wrapping on small screens */



          .hero-header h1, .hero-header h2 {



            word-break: break-word;



            white-space: normal;



          }







          /* navbar collapse: show as a full-width panel below the sticky top on mobile */



          @media (max-width: 1199.98px) {



            .navbar-collapse {



              position: absolute;



              top: var(--nav-height);



              left: 0;



              right: 0;



              background: #fff;



              z-index: 1050;



              padding: 1rem 1.25rem;



              box-shadow: 0 8px 20px rgba(0,0,0,0.08);



            }



            .navbar-nav { flex-direction: column; gap: .5rem; }



            .navbar-toggler { z-index: 1100; }







            /* make the brand remain above the collapse */



            .navbar-brand { z-index: 1100; position: relative; }



          }







          /* small defensive rule in case some third-party utility uses bad width */



          .container, .container-fluid { box-sizing: border-box; }







          /* spinner positioning cleanup */



          #spinner { inset: 0; }



          .sluzby {

            color:#c9a07b;

          }





.obchod {



background-color : #6bbcc2 !important;



}





  .video-wrapper {

    position: relative;

    width: 80%;

    padding-bottom: 56.25%; /* 16:9 */

    height: 0;

    overflow: hidden;

  }

  .video-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

  }

/* --- Responsivní posun hero obrázku --- */
/* Platí pro hero, který má nastavené background-image na .hero-header (běžné) */
.hero-header {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% center; /* výchozí */
}

/* jemné posuny podle šířky: upravuj % pokud chceš víc/míň posunout */
@media (max-width: 1200px) {
  .hero-header { background-position: 60% center; }
}
@media (max-width: 992px) {
  .hero-header { background-position: 70% center; }
}
@media (max-width: 768px) {
  .hero-header { background-position: 80% center; }
}
@media (max-width: 480px) {
  .hero-header { background-position: 90% center; } /* telefon: ukáže víc pravé části (děťátko) */
}

/* --- Pokud místo background-image používáš <img> v hero --- */
/* Přidej třídu .hero-img k obrázku v HTML a použij tohle */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
@media (max-width: 992px) { .hero-img { object-position: 70% center; } }
@media (max-width: 768px) { .hero-img { object-position: 80% center; } }
@media (max-width: 480px) { .hero-img { object-position: 90% center; } }

/* --- Zabránění přetékání textu v tlačítkách --- */
/* Umožní zalamování textu, omezení maximální šířky a hezké paddingy */
.btn-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;      /* povolit zalamování tlačítek na nový řádek */
}
.btn-row .btn {
  white-space: normal;  /* dovolit zalomení textu v tlačítku */
  word-break: keep-all; /* zachovat slova pokud možno, ale dovolit zalomění */
  hyphens: auto;
  padding: 0.6rem 1rem;
  min-width: 140px;     /* zabrání příliš úzkým tlačítkům */
  text-align: center;
  line-height: 1.15;
}

/* Na opravdu úzkých obrazovkách stohovat tlačítka (lepší UX) */
@media (max-width: 420px) {
  .btn-row { flex-direction: column; gap: 0.5rem; }
  .btn-row .btn { width: 100%; min-width: 0; }
}

/* --- Overlay přes hero: aktivní od 780px --- */
.hero-header {
  position: relative;   /* nutné pro pseudo-element */
  overflow: hidden;
}

/* výchozí: žádná clona nad  >780px */
.hero-header::before {
  content: "";
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  background: transparent;  /* výchozí průhledné */
  z-index: 1;               /* pod obsahem, nad backgroundem */
  pointer-events: none;     /* kliknutí projdou na tlačítka */
  transition: background 200ms ease;
}

/* obsah musí být nad clonu */
.hero-header > .container,
.hero-header .row,
.hero-header .btn-row,
.hero-header h1,
.hero-header h2,
.hero-header .display-1,
.hero-header .display-6 {
  position: relative;
  z-index: 2;
}

/* od 780px a méně: aktivní lehká clona */
@media (max-width: 780px) {
  .hero-header::before {
    background: rgba(0,0,0,0.38); /* uprav průhlednost podle potřeby (0.2 - 0.6) */
  }
}

/* pod 480px (telefony): clona silnější */
@media (max-width: 480px) {
  .hero-header::before {
    background: rgba(0,0,0,0.52);
  }
}

/* velmi úzké (volitelné): ještě tmavěji */
@media (max-width: 360px) {
  .hero-header::before {
    background: rgba(0,0,0,0.58);
  }
}


.video {

    position: relative;

    height: 100%;

    min-height: 400px;

    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(../img/zelvicka-anicka.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    border-radius: 10px;
}