/*-----------------------------------------------------------------------------------

    Template Name: Swimmer-Swimming School HTML Template
    Template URI: http://bootexperts.com
    Description: This is html5 template
    Author: BootExperts
    Author URI: http://bootexperts.com
    Version: 1.2

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	1.  Class Area
    2.  Appointment Area
    3.  Our Classes Area
    4.  Insturction Area
    5.  Testimonial CSS
    6.  Gallery CSS
    7.  Pricing CSS
    8.  Fun CSS
    9.  Blog CSS
   10.  Contact CSS
   11.  Start CSS
   12.  Welcome CSS
   13.  Newsletter CSS
   14.  Touch CSS
   15.  Contact CSS
   16.  Register CSS
   17.  Category CSS
   
-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1.  Class Area
/*----------------------------------------*/

.custom-row {
    margin-left: -12px;
    margin-right: -12px;
}

.custom-col {
    padding: 0 12px;
}

.single-class {
    border: 5px solid #1c9dec;
    height: 308px;
    position: relative;
    border-width: 5px;
    border-style: solid;
    margin-top: 75px;
}

.single-class.picton-border {
    border-color: #1c9dec;
}

.single-class.cobalt-border {
    border-color: #0148BC;
}

.single-class.cinnabar-border {
    border-color: #EA4335;
}

.class-hover {
    opacity: 0;
}

.class-content {
    height: 100%;
    left: 0;
    padding-bottom: 50px;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 100%;
    text-align: center;
}

.class-content h3 {
    bottom: 55%;
    color: #0148bc;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    left: 0;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    transition: all 0.5s ease 0s;
}

.class-content h6 {
    bottom: 43%;
    color: #0148bc;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    left: 0;
    position: absolute;
    right: 0;
    transition: all 0.5s ease 0s;
}

.class-content a.btn {
    color: #fff;
    position: relative;
    transition: all 0.5s ease 0s;
}

.class-area .class-content a.btn {
    border: none;
}

.read-more.btn>span {
    position: relative;
    z-index: 999;
}

.appoint-content a.read-more,
.class-left button,
.read-more,
.table-body>button {
    background: #0148BC;
    border: 1px solid transparent;
    margin-bottom: 30px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.two .single-category .read-more {
    margin-bottom: 0
}

.appoint-content .class-button {
    position: inherit;
}

.appoint-content a.read-more:hover,
.class-left button:hover,
.read-more:hover,
.table-body>button:hover {
    background: transparent;
    /*    border: 1px solid #0148BC;*/
    color: #0148BC;
}

.table-body>button {
    color: #0148BC;
}

.class-content a.btn::before,
.appoint-content a.read-more::before,
.class-left button::before,
.read-more::before,
.table-body>button::before {
    background-color: #0148BC;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

.start-area .read-more::before,
.single-category .read-more:before {
    background-color: #fff;
}

.table-body>button::before {
    background-color: #F4F4F4
}

.table-body>button.active::before {
    background-color: #0148BC
}

.class-content a.btn::after,
.appoint-content a.read-more::after,
.class-left button::after,
.start-area .read-more::after,
.read-more::after,
.table-body>button::after {
    border: 1px solid rgba(255, 255, 255, 0.9);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(1.2, 1.2);
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

.single-category .class-button .read-more::after,
.start-area .read-more::after {
    border: 1px solid transparent
}

.start-area .read-more {
    border: 1px solid #fff
}

.our-classes-area .class-button {
    position: inherit;
    float: left;
    margin-top: 5px
}

.appoint-content a.read-more::after,
.our-classes-area button::after {
    border: 1px solid #0148BC
}

.table-body>button::after {
    border: 1px solid transparent
}

.class-content a.btn:hover::before,
.appoint-content a.read-more:hover::before,
.class-left button:hover::before,
.read-more:hover::before,
.table-body>button:hover::before {
    opacity: 0;
    transform: scale(0.5, 0.5);
}

.class-content a.btn:hover::after,
.appoint-content a.read-more:hover::after,
.class-left button:hover::after,
.read-more:hover::after,
.table-body>button:hover::after,
.our-classes-area button:hover::after {
    opacity: 1;
    transform: scale(1, 1);
}

.class-content a.btn:hover,
.appoint-content a.read-more:hover,
.class-left button:hover,
.read-more:hover {
    background: transparent;
}

.table-body>button {
    background: #F4F4F4
}

.table-body>button:hover,
.table-body>button.active {
    background: #0148BC;
    color: #fff
}

.class-left span,
.read-more>span,
.table-body span {
    position: relative;
    z-index: 99;
}

.table-body>button {
    margin-bottom: 30px;
    margin-top: 10px;
}

.class-button {
    bottom: 7%;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    transition: all 0.7s ease 0s;
}

.class-icon {
    background: #f6f6f6 none repeat scroll 0 0;
    border-radius: 50%;
    height: 150px;
    left: 50%;
    margin-left: -75px;
    position: absolute;
    transform: translatey(-50%);
    width: 150px;
    z-index: 1;
}

.class-icon h2 {
    font-size: 36px;
    color: #0148bc;
    text-align: center;
    line-height: 145px;
}

p.hover {
    font-size: 14px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    padding: 0 18px;
    opacity: 0;
    line-height: 22px;
    position: absolute;
    bottom: 14%;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
}

.class-icon img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.single-class:hover .class-content {
    background: #1C9DEC;
    -webkit-transition: all 0 ease 0s;
    -o-transition: all 0 ease 0s;
    transition: all 0 ease 0s;
}

.single-class:hover .class-content h3,
.single-class:hover .class-content h6 {
    color: #fff;
}

.single-class:hover .class-content h3 {
    bottom: 63%;
    ;
}

.single-class:hover .class-content h6 {
    bottom: 54%;
}

.single-class:hover p.hover {
    opacity: 1;
    bottom: 23%;
    transition-delay: .10s;
}

.single-class:hover .class-button {
    bottom: 0;
    transition-delay: .0s;
}

/*----------------------------------------*/
/*  2.  Appointment Area
/*----------------------------------------*/
.appoint-left {
    position: relative;
    height: 100%;
}

.appoint-right {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
}

.appoint-right h6 {
    font-size: 18px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    text-transform: lowercase;
    margin-bottom: 10px;
}

.appoint-right h2 {
    text-transform: none;
    font-size: 40px;
    color: #444444;
}

.game {
    position: relative;
    height: 100%;
}

.game a {
    display: block;
    height: 100%;
}

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

.game:after {
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0 padding-box content-box;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: all 0.5s ease 0s;
    width: 100%;
}

.appoint-left:hover .game::after,
.appoint-left.active .game::after {
    opacity: 1;
    transform: scale(1);
}

.appoint-right h3 {
    color: #444444;
    font-size: 31px;
    margin-bottom: 15px;
    text-transform: none;
}

.appoint-right p {
    font-size: 14px;
    color: #333333;
    line-height: 22px;
}

.video-icon i {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    margin-top: -30px;
    opacity: 0;
    transform: scale(2);
    transition: all 0.5s ease 0s;
    z-index: 9;
    color: #0148bc;
    font-size: 50px;
    text-align: center;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.appoint-content a.read-more {
    margin-top: 0;
    margin-bottom: 20px;
}

.video-icon i:hover {
    color: #1C9DEC;
}

.appoint-left:hover .video-icon i,
.appoint-left.active .video-icon i {
    transform: scale(1);
    opacity: 1;
}

/*----------------------------------------*/
/*  3.  Our Classes Area
/*----------------------------------------*/

.ship-new-address-info {
    margin-top: 20px;
}

.area-padding {
    margin-bottom: 50px;
}

.accordion {
    margin: 0;
    padding-bottom: 29px;
}

.accordion .card {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border: none;
}

.accordion .card-header {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 20px;
}

.accordion .card-header h4 {
    font: 14px/20px Lato, sans-serif;
}

.accordion .card-header .btn-link {
    background: #F6F6F6;
    border: 1px solid transparent;
    outline: none;
    color: #0148BC;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    padding: 10px 30px 10px 30px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.accordion .card-header .btn-link:hover,
.accordion .card-header .btn-link:focus {
    border-color: #F6F6F6;
    outline-color: #F6F6F6;
}

.accordion .card-header .card-left {
    font-size: 14px;
}

.accordion .card-header .card-left img {
    margin-right: 10px;
}

.accordion .card-header .card-middle {
    text-align: center;
    color: #0148bc;
    font-size: 18px;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
}

.accordion .card-header .card-right i {
    font-size: 18px;
    color: #0148bc;
    border: 1px solid #0148bc;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 29px;
    position: relative;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.accordion .card-header .card-right i.hover {
    opacity: 0;
    position: absolute;
    right: 30px;
    top: 10px;
}

.accordion .card-header .btn-link.collapsed .card-right i.hover {
    opacity: 1;
}

.accordion .card-body {
    border-top-color: #f6f6f6;
    margin-bottom: 20px;
    border: 1px solid #F6F6F6;
    padding: 0;
    border-bottom: 10px solid #016EC7;
    background: #fff;
}

.class-left {
    padding: 36px 0 0 30px
}

.heading-p {
    color: #444444;
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 0;
}

.class-left>button {
    margin-top: 22px;
    cursor: pointer;
}

.class-left p.main {
    margin-top: 12px;
    margin-bottom: 10px;
    line-height: 22px;
}

.login-title {
    color: #444444;
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 8px;
}

/*----------------------------------------*/
/*  4.  Insturction Area
/*----------------------------------------*/
.inst-img {
    position: relative
}

.inst-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 22%;
    background: #42A5F5;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-instructor.blue .inst-content {
    background: #0148BC
}

.single-instructor.red .inst-content {
    background: #EA4335
}

.blue .inst-content ul li:hover a {
    color: #EA4335
}

.slick-list {
    padding-top: 8px !important;
}

.instructor-area .section-title h2 {
    margin-bottom: 65px;
}

.single-instructor {
    overflow: hidden;
}

.inst-content h5,
.inst-content h6,
.inst-content p {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 10px;
}

.inst-content h6 {
    text-transform: capitalize;
    margin-bottom: 26px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.inst-content p {
    margin-top: 10px;
    line-height: 22px;
    text-transform: none;
}

.inst-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.inst-content ul li {
    display: inline-block;
    margin: 0 10px;
}

.inst-content ul li a {
    display: block;
    font-size: 15px;
    color: #fff;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.inst-content ul li:hover a {
    color: #0148BC;
}

.single-instructor:hover .inst-content {
    height: 49%;
}

.single-instructor:hover .inst-content h6 {
    margin-bottom: 15px;
}

.slick-slide.slick-current .single-instructor {
    box-shadow: 0 4px 12px 0 #dddddd;
}

.inst-img>img {
    width: 100%;
}

.slider-nav {
    overflow: hidden;
    position: relative;
}

.slick-prev,
.slick-next {
    font-size: 0;
    padding: 0;
}

.slick-arrow {
    background: transparent;
    border: 0 none;
    height: 100%;
    left: -40px;
    position: absolute;
    top: 0;
    width: 30px;
    z-index: 9;
    cursor: pointer;
}

.slick-arrow:focus {
    outline: none;
}

.slick-next {
    left: auto;
    right: -40px;
}

.slick-prev::before,
.slick-next::before {
    color: #0277bd;
    content: "\f2fa";
    font-family: "Material-Design-Iconic-Font";
    font-size: 40px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease 0s;
    width: 16px;
}

.slick-next::before {
    content: "\f2fb";
}

/*----------------------------------------*/
/*  5.  Testimonial Css
/*----------------------------------------*/
.testimonial-content {
    background: url(../images/testimonial/1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 0px 12px 0px #ddd;
    padding-left: 170px;
    padding-right: 170px;
}

.testimonial-content h3 {
    font-size: 24px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
    margin-bottom: 18px;
}

.testimonial-content i {
    font-size: 40px;
    color: #999999;
}

.testimonial-content p {
    margin-top: 10px;
}

.testimonial-content i.first {
    transform: rotate(180deg)
}

.testimonial-owl.owl-carousel .owl-controls .owl-dots .owl-dot.active {
    background-color: #0277BD;
    height: 3px;
    width: 20px;
}

.testimonial-owl.owl-carousel .owl-controls .owl-dots .owl-dot {
    background-color: #0148BC;
    display: inline-block;
    height: 2px;
    margin-right: 5px;
    width: 10px;
    z-index: 999;
    margin-bottom: 50px;
}

.testimonial-owl .owl-controls {
    bottom: 149px;
    height: 1px;
    left: 12px;
    position: absolute;
    right: 0;
    text-align: center;
}

/*----------------------------------------*/
/*  6. Gallery CSS
/*----------------------------------------*/
.grid {
    margin-left: -15px;
    margin-right: -15px
}

.grid-item {
    width: 20%;
    padding: 15px;
}

.portfolio-img {
    position: relative;
}

.portfolio-hover-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    opacity: 0;
    text-align: center;
    transform: scale(0);
    padding: 10px;
    background-clip: content-box;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.grid-item:hover .portfolio-hover-wrapper {
    opacity: 1;
    transform: scale(1);
}

.grid-item:nth-child(3) {
    width: 40%
}

/* .grid-item:nth-child(2),
.grid-item:nth-child(3) {
    margin-bottom: 30px
} */

.portfolio-hover {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 20px;
}

.hover-content {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.portfolio-hover i {
    font-size: 40px;
    color: #0148bc;
    margin-bottom: 8px;
}

.portfolio-hover h4 {
    font-size: 18px;
    color: #444444;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 8px;
    font-weight: 700;
}

.portfolio-hover p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #444444;
}

/*----------------------------------------*/
/*  7.  Pricing CSS
/*----------------------------------------*/
.single-price {
    background: #FAFAFA;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-price:hover .table-head,
.single-price:hover .table-body,
.single-price.offer .table-head,
.single-price.offer .table-body {
    background: #fff
}

.single-price:hover,
.single-price.offer {
    box-shadow: 0 0 12px 4px #d0d0d0;
}

.single-price:hover .price-icon img {
    animation: 800ms ease-in-out 0s normal none 1 running flipInY;
}

.table-head {
    padding: 30px 0;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.table-head h4 {
    font-size: 14px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 30px;
}

.price-icon {
    background: #F4F4F4;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    text-align: center;
    display: inline-table;
}

.price-icon span {
    vertical-align: middle;
    display: table-cell;
}

.table-body {
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.table-body h2 {
    background: #0148BC;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Roboto', sans-serif;
}

.table-body h2 span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

.table-body ul {
    margin: 0;
    padding-top: 15px;
    list-style: none;
}

.table-body ul li {
    display: block;
    color: #333333;
    font-size: 14px;
    padding: 8px 0;
}

/*----------------------------------------*/
/*  8.  Fun CSS
/*----------------------------------------*/
.fun-area {
    background: url(../images/fun/bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.fun-area:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    content: "";
}

.single-fun {
    position: relative;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.fun-content {
    padding-left: 15px;
    text-align: left;
}

.fun-img {
    background: #fff;
    flex-basis: 80px;
    max-width: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
}

.fun-content h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 10px;
}

.fun-content h5 {
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
}

/*----------------------------------------*/
/*  9.  Blog CSS
/*----------------------------------------*/
.blog-area {
    background: #fff
}

.blog-img,
.post-img {
    position: relative
}

.blog-img:after,
.post-img:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    padding: 10px;
    transform: scale(0);
    background-clip: content-box;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-blog:hover .blog-img:after,
.post-img:hover:after {
    opacity: 1;
    transform: scale(1);
}

.single-blog,
.post-img {
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-blog:hover {
    box-shadow: 0 0 12px 4px #E7E7E7;
}

.blog-img i,
.post-img i {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #0148bc;
    font-size: 50px;
    z-index: 9;
    margin-top: -22px;
    cursor: pointer;
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.post-img i {
    font-size: 12px;
    margin-top: -5px
}

.single-blog:hover .blog-img i,
.post-img:hover i {
    opacity: 1;
    transform: scale(1);
}

.date {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    color: #0148bc;
    text-transform: capitalize;
    margin-bottom: 20px;
    display: block;
    background: #F6F6F6;
    padding: 24px 20px 32px;
    text-align: center;
    z-index: 9;
}

.date span {
    font-size: 21px;
    font-family: 'Roboto', sans-serif;
    font-size: 45px;
    display: block;
    margin-top: 15px;
}

.blog-content {
    padding: 15px 20px 0px;
    background: #F8F8F8
}

.blog-content h3 {
    margin-bottom: 12px;
}

.blog-content h3 a {
    color: #444444;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
    font-weight: 700;
}

.blog-content p {
    color: #333;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0;
}

.blog-content>a {
    display: inline-block;
    padding: 7px 30px 8px;
    background: #0148BC;
    font-size: 14px;
    color: #fff;
    margin-top: 25px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.blog-content a.read-more:hover {
    color: #0148BC;
    background: #fff;
}

.blog-content a:hover {
    color: #0148BC;
    background: inherit;
}

/*----------------------------------------*/
/*  10.  Contact CSS
/*----------------------------------------*/
.single-contact {
    padding: 45px 0;
}

.contact-area .col-md-4:first-child .single-contact {
    background: #0148BC;
}

.contact-area .col-md-4 .single-contact {
    background: #1C9DEC;
}

.contact-area .col-md-4:last-child .single-contact {
    background: #EA4335;
}

.single-contact i {
    color: #fff;
    font-size: 60px;
    margin-bottom: 10px;
}

.contact-info h5 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;
}

.contact-info p {
    color: #fff;
    font-size: 15px;
    margin-bottom: 0px;
}

/*----------------------------------------*/
/*  11.  Start CSS
/*----------------------------------------*/
.start-area {
    padding: 135px 0 140px;
    background: url(../images/start/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    background-attachment: fixed;
}

.start-area:after,
.welcome-area:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.5);
}

.start-content,
.welcome-content {
    z-index: 9;
    position: relative
}

.start-content h2 {
    font-size: 36px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.start-content a {
    background: #FFFFFF;
    color: #0148bc;
    text-transform: capitalize;
    font-weight: 700;
}

.start-content a:hover {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
}

/*----------------------------------------*/
/*  12.  Welcome CSS
/*----------------------------------------*/
.welcome-area {
    background: url(../images/welcome/1.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 75px 0 80px;
    position: relative;
}

.welcome-area:after {
    background: rgba(0, 0, 0, 0.6);
}

.welcome-content h2,
.welcome-content h3 {
    font-size: 50px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    text-transform: none;
}

.welcome-content h3 {
    font-size: 36px;
    margin-bottom: 25px;
}

.welcome-content p {
    color: #fff;
    font-size: 14px;
}

.welcome-content a {
    background: #0148BC;
}

.welcome-content a:hover {
    color: #fff;
    background: transparent;
}

/*----------------------------------------*/
/*  13.  Newsletter CSS
/*----------------------------------------*/
.newsletter-area {
    background: url(../images/newsletter/1.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 155px 0 160px;
    position: relative;
}

.newsletter-area:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.5);
}

.mailchimp-alerts {
    color: #ffffff;
}

.news-content {
    position: relative;
    z-index: 9;
}

.news-content h2 {
    color: #fff;
    font-size: 24px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.news-content p {
    color: #fff;
    font-size: 14px;
    margin-bottom: 25px;
}

.subscribe-form input {
    background: #fff;
    border: none;
    border-radius: 5px;
    height: 40px;
    padding: 0 20px;
    position: relative;
    float: left;
    margin-right: 10px;
    width: 430px;
}

.subscribe-form input:focus {
    background: #fff;
}

.subscribe-form input:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "\f15a";
    color: #0148BC;
    font-family: "materialdesignicon";
    font-size: 15px;
}

.subscribe-form button {
    width: 120px;
    height: 40px;
    border-radius: 5px;
    color: #fff;
    float: right;
    background: #0148BC;
    position: relative;
    font-size: 12px;
    padding: 0 20px;
    text-align: left;
}

.subscribe-form button:hover {
    background: #fff;
    color: #0148BC;
}

.subscribe-form button i {
    font-size: 15px;
    color: #fff;
    margin-left: 15px;
    position: absolute;
    right: 15px;
    top: 12px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.subscribe-form button:hover i {
    color: #0148BC;
}

/*----------------------------------------*/
/*  14.  Touch CSS
/*----------------------------------------*/
.about-area .section-title p {
    font-weight: 700
}

.contact-left h2,
.contact-left p {
    font-size: 24px;
    color: #333333;
    font-family: 'Roboto', sans-serif;
}

.contact-left p {
    font-size: 14px;
    margin-bottom: 30px;
}

.about-area .section-title h2 {
    margin-bottom: 60px;
}

.about-content p {
    color: #444444;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    margin-top: 45px;
    margin-bottom: 0;
}

.contact-left-wrapper {
    display: inline-table;
    width: 40%;
    float: left;
    height: 600px;
    padding-right: 30px;
}

.contact-left {
    display: table-cell;
    vertical-align: middle;
    height: 600px;
}

.contact-left h2 {
    font-size: 24px;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 5px;
}

.contact-left p {
    color: #333333;
    font-size: 14px;
    line-height: 22px;
}

.contact-right {
    box-shadow: 0px 0px 12px 0px #ddd;
    display: inline-block;
    width: 60%;
    padding: 45px 50px 5px;
}

.contact-right h3 {
    font-size: 24px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 80px;
}

.contact-right h3:after {
    position: absolute;
    left: 50%;
    bottom: -30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='143' height='15' viewBox='0 0 143 15'%3E%3Cline x1='0' y1='7.5' x2='57' y2='7.5' stroke='%230148bc' stroke-width='2'/%3E%3Cline x1='86' y1='7.5' x2='143' y2='7.5' stroke='%230148bc' stroke-width='2'/%3E%3Ccircle cx='71.5' cy='7.5' r='5.5' fill='none' stroke='%230148bc' stroke-width='2'/%3E%3Ccircle cx='71.5' cy='7.5' r='2' fill='%230148bc'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    width: 143px;
    height: 15px;
    margin-left: -71.5px;
    content: "";
}

.form-box input,
.form-box textarea {
    height: 40px;
    background: #F6F6F6;
    border: none;
    font-size: 12px;
    color: #666666;
    font-family: 'Roboto', sans-serif;
}

.form-box input:focus,
.form-box textarea:focus {
    background: #F6F6F6;
    box-shadow: 0px 0px 6px 0px #ddd;
    color: #0148bc;
}

#contact-form input::-moz-placeholder {
    color: #666666;
    opacity: 9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=900)";
}

#contact-form input:hover::-moz-placeholder,
#contact-form textarea:hover::-moz-placeholder {
    color: #0148bc;
    opacity: 9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=900)";
}

#contact-form input[type="email"]::-webkit-input-placeholder {
    color: #666666;
}

.form-box textarea {
    height: 115px;
}

.form-box button {
    background: #0148BC;
    height: 40px;
    width: 100px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-top: 48px;
    text-align: center;
    right: 0;
    font-family: 'Roboto', sans-serif;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.form-box button:hover {
    color: #0148BC;
    border: 1px solid #0148BC;
    background: transparent;
}

/*----------------------------------------*/
/*  15.  Contact CSS
/*----------------------------------------*/
.banner-area.contact {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background: url(../images/banner/2.jpg);
}

.banner-area.contact::after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}

.contact-us-area .contact-right {
    width: 100%;
    background: #F6F6F6;
}

.contact-us-area .contact-right {
    z-index: 9;
    position: relative
}

.contact-us-area .contact-right input,
.contact-us-area .contact-right textarea {
    background: #E7E9EE;
}

.contact-us-area .contact-right textarea {
    height: 150px
}

.contact-us-area .contact-right .form-box input:focus,
.contact-us-area .contact-right .form-box textarea:focus {
    box-shadow: 0px 0px 6px 0px #b5b4b4;
}

.contact-us-area {
    margin-bottom: 0;
}

/*----------------------------------------*/
/*  16.  Register CSS
/*----------------------------------------*/
.register-area {
    /* Dřív tu byl register/bg.jpg – šedý placeholder ze šablony.
       Teď stejný světlý vzor jako v uvítacím bloku na hlavní straně.
       Dlaždicuje se bez švů, proto repeat místo roztahování na cover. */
    background: url(../images/appointment/1.jpg) repeat center top;
}

.register-form {
    background: #fff;
    padding: 100px;
    box-shadow: 0px 0px 6px 0px #b5b4b4;
}

.register-field {
    margin-bottom: 15px
}

.register-field label {
    font-size: 14px;
    color: #333333;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: left;
    display: block;
}

.register-field input,
.register-field select {
    width: 100%;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    height: 46px;
    padding: 0 15px;
    background: #fff;
    color: #333333;
    -webkit-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}

.register-field input::placeholder {
    color: #9a9a9a;
}

.register-field input:focus,
.register-field select:focus {
    outline: none;
    border-color: #0148BC;
    box-shadow: 0 0 0 3px rgba(1, 72, 188, 0.12);
}

.register-subtitle {
    text-align: left;
    font-size: 18px;
    color: #0148BC;
    font-weight: 700;
    margin: 10px 0 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eceff8;
}

.register-subtitle:first-child {
    margin-top: 0;
}

.req {
    color: #e53935;
}

.register-checks {
    text-align: left;
    margin-top: 20px;
}

.register-submit-wrap {
    text-align: center;
}

.remind>input {
    display: inline-block;
    height: 20px;
    width: 20px;
    font-size: 12px;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    margin-right: 5px;
    margin-top: 2px;
}

.remind {
    text-align: left;
    margin-top: 12px;
    display: flex;
    align-items: center;
}

.remind label {
    margin-bottom: 0;
}

.register-form .submit {
    display: inline-block;
    height: 40px;
    border-radius: 5px;
    width: 320px;
    background: #0148BC;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    line-height: 40px;
    margin-top: 25px;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.register-form .submit:hover {
    background: transparent;
    color: #0148BC;
    border: 1px solid #0148BC;
}

/*----------------------------------------*/
/*  17.  Category CSS
/*----------------------------------------*/
.category-hover {
    position: absolute;
    text-align: center;
    opacity: 0;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 9;
    margin-top: -44px;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.category-hover h3 {
    font-weight: 700;
    color: #444444;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 15px;
}

.category-hover span {
    background: #0148BC;
    height: 50px;
    width: 50px;
    color: #fff;
    font-size: 24px;
    border-radius: 50%;
    display: inline-block;
    line-height: 50px;
}

.category-img {
    position: relative;
}
.category-img img{
    width: 100%;
}

.category-img:after {
    position: absolute;
}

.category-content {
    background: #F1F1F1;
    padding: 20px;
    text-align: center;
}

.category-content h6 {
    color: #666666;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 10px;
}

.category-content p {
    color: #444444;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.single-category .class-button {
    position: inherit;
    display: inline-block;
}

.single-category .class-button a {
    margin-top: 2px;
    background: #fff;
    color: #0148BC;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.single-category .class-button:hover a {
    background: #0148BC;
    color: #fff;
    border: 1px solid #0148BC;
}

.single-category:hover .category-img::after {
    opacity: 1;
    transform: scale(1);
}

.category-img::after {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0 padding-box content-box;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition: all 0.5s ease 0s;
    width: 100%;
}

.single-category:hover .category-hover {
    opacity: 1;
    transform: scale(1);
}

.categories {
    margin-left: -15px;
    margin-right: -15px;
}

.cat-item {
    padding: 15px;
}

@media (min-width: 768px) {
    .cat-md-6 {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .cat-lg-4 {
        width: 33.333333%;
    }
}

#googleMap {
    width: 100%;
    height: 800px;
}

.map-title {
    font-size: 20px;
    font-weight: 700;
    color: #0148BC;
    margin-bottom: 4px;
}

.map-address {
    font-size: 15px;
    color: #606060;
    margin-bottom: 15px;
}

.map-frame {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 6px 0px #b5b4b4;
    line-height: 0;
}

/*************************
    FAQ – Nejčastější otázky
    Vzhled podle grafického návrhu (documentation/ChatGPT Image ....png)
*************************/
.faq-area {
    background: #ffffff;
}

/* ---- Levý sloupec: nadpis, popis, fotka ---- */
.faq-intro {
    padding-right: 30px;
}

.faq-intro h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #0d2a52;
    margin: 0 0 20px;
    text-transform: none;
}

.faq-intro > p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #737b8a;
    margin: 0 0 38px;
    max-width: 315px;
}

.faq-photo {
    position: relative;
    max-width: 420px;
}

/* Fotka je vypodložená, aby výšku určoval sloupec a ne poměr stran
   snímku – jinak by obrázek na výšku celý blok natáhl. */
.faq-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Miminka jsou v dolní polovině snímku, ořez proto vedeme níž. */
    object-position: center 55%;
    border-radius: 44% 56% 46% 54% / 52% 50% 50% 48%;
}

/* ---- Pravý sloupec: rozbalovací otázky ---- */
.faq-accordion .faq-item {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(13, 42, 82, 0.08);
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

.faq-accordion .faq-item:hover {
    box-shadow: 0 4px 16px rgba(13, 42, 82, 0.13);
}

.faq-accordion .faq-item:last-child {
    margin-bottom: 0;
}

.faq-accordion .faq-question {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.faq-accordion .faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 20px 26px;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    text-align: left;
    text-transform: none;
    color: #0d2a52;
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
    transition: color 0.25s ease;
}

.faq-accordion .faq-toggle:hover {
    color: #0148bc;
}

.faq-accordion .faq-toggle:focus-visible {
    outline: 2px solid #0148bc;
    outline-offset: -3px;
}

.faq-accordion .faq-text {
    flex: 1 1 auto;
}

/* Znaménko + / − */
.faq-accordion .faq-sign {
    flex: 0 0 auto;
    color: #0148bc;
    font-size: 22px;
    line-height: 1;
    transition: color 0.25s ease;
}

.faq-accordion .faq-toggle:not(.collapsed) .faq-sign {
    color: #51bbd5;
}

.faq-accordion .faq-sign .zmdi-minus {
    display: none;
}

.faq-accordion .faq-toggle:not(.collapsed) .faq-sign .zmdi-plus {
    display: none;
}

.faq-accordion .faq-toggle:not(.collapsed) .faq-sign .zmdi-minus {
    display: block;
}

/* Odpověď – světle modrý panel pod otázkou */
.faq-accordion .faq-answer {
    background: #e9f4f9;
    padding: 22px 26px 24px;
}

.faq-accordion .faq-answer p {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.85;
    color: #44546f;
    margin: 0 0 14px;
    overflow-wrap: break-word;
}

.faq-accordion .faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-accordion .faq-answer .zelvuska-hint {
    color: #64748b;
}

/* ---- Tlačítko pod otázkami ---- */
.faq-more {
    text-align: center;
    margin-top: 34px;
}

a.faq-contact-btn {
    display: inline-block;
    background: #51bbd5;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 17px 34px;
    border-radius: 0;
    box-shadow: 0 6px 16px rgba(81, 187, 213, 0.32);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

a.faq-contact-btn i {
    margin-left: 8px;
    font-size: 17px;
    vertical-align: -1px;
}

a.faq-contact-btn:hover,
a.faq-contact-btn:focus {
    background: #3fa9cd;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(63, 169, 205, 0.4);
}

/* ---- Menší displeje ---- */
@media only screen and (max-width: 991px) {
    .faq-intro {
        padding-right: 0;
        text-align: center;
        margin-bottom: 45px;
    }
    .faq-intro > p {
        margin-left: auto;
        margin-right: auto;
    }
    .faq-photo {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 767px) {
    .faq-intro h2 {
        font-size: 28px;
    }
    .faq-photo img {
        height: 260px;
    }
    .faq-photo-badge {
        width: 60px;
        height: 60px;
        font-size: 26px;
        right: 0;
    }
    .faq-accordion .faq-toggle {
        padding: 16px 18px;
        font-size: 15px;
    }
    .faq-accordion .faq-answer {
        padding: 18px 18px 20px;
    }
    a.faq-contact-btn {
        display: block;
        text-align: center;
        white-space: nowrap;
        font-size: 13.5px;
        padding: 16px 10px;
    }
    a.faq-contact-btn i {
        margin-left: 6px;
        font-size: 15px;
    }
}

/*************************
    Formuláře – hlášky a ochrana proti spamu
*************************/

/* Skryté pole, které vyplní jen robot. Nesmí být display:none –
   část robotů takové pole pozná a přeskočí. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hláška u kontaktního formuláře (vypisuje assets/js/ajax-mail.js) */
.form-messege {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: break-word;
    margin-top: 16px;
    margin-bottom: 0;
    padding: 0;
}

.form-messege:empty {
    display: none;
}

.form-messege.success {
    color: #1f6b2e;
    background: #eaf6ec;
    border-left: 3px solid #2e9e4a;
    padding: 14px 18px;
}

.form-messege.error {
    color: #a32219;
    background: #fdeceb;
    border-left: 3px solid #ea4335;
    padding: 14px 18px;
}

/* Hláška po odeslání přihlášky (register.html) */
.form-status {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: break-word;
    text-align: left;
    padding: 20px 24px;
    margin-bottom: 32px;
    border-radius: 4px;
}

.form-status:focus {
    outline: none;
}

.form-status.success {
    color: #1f6b2e;
    background: #eaf6ec;
    border-left: 4px solid #2e9e4a;
}

.form-status.error {
    color: #a32219;
    background: #fdeceb;
    border-left: 4px solid #ea4335;
}

/* Přihláška na menších displejích – bez tohoto zbývá na telefonu
   z formuláře jen úzký proužek (.register-form má padding 100px). */
@media only screen and (max-width: 991px) {
    .register-form {
        padding: 50px 40px;
    }
}

@media only screen and (max-width: 767px) {
    .register-form {
        padding: 30px 20px;
    }
    .register-form .submit {
        width: 100%;
    }
}

/*************************
    Odkazy do rezervačního systému Želvuška
    (kojenecké kurzy se přihlašují mimo tento web)
*************************/
.zelvuska-hint {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: #666666;
    margin-top: 14px;
    margin-bottom: 0;
    overflow-wrap: break-word;
}

.zelvuska-hint a {
    color: #0148bc;
    border-bottom: 1px solid rgba(1, 72, 188, 0.35);
}

.zelvuska-hint a:hover {
    color: #0277bd;
    border-bottom-color: #0277bd;
}

.zelvuska-btn {
    display: inline-block;
}

/* Panel místo formuláře na register.html */
.zelvuska-panel {
    text-align: left;
    background: #f6f8fc;
    border: 1px solid #d5e0f2;
    border-radius: 4px;
    padding: 28px 30px;
    margin-top: 8px;
}

.zelvuska-panel h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0148bc;
    margin: 0 0 14px;
}

.zelvuska-panel p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #444444;
    margin: 0 0 18px;
}

.zelvuska-panel .zelvuska-hint {
    margin: 14px 0 0;
}

/* Tlačítko do Želvušky */
a.zelvuska-cta {
    display: inline-block;
    background: #0148bc;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 13px 26px;
    border-radius: 4px;
    border: 0;
    transition: background 0.25s ease;
}

a.zelvuska-cta:hover,
a.zelvuska-cta:focus {
    background: #0277bd;
    color: #ffffff;
}

a.zelvuska-cta:after {
    content: " \2197";
}

@media only screen and (max-width: 767px) {
    .zelvuska-panel {
        padding: 22px 18px;
    }
    a.zelvuska-cta {
        display: block;
        text-align: center;
    }
}

/*************************
    Blok „O nás" s videem na hlavní straně – kompaktnější
    (původně zabíral přes 750 px, tedy skoro celou obrazovku)
*************************/
.appoint-content h2 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 4px;
}

.appoint-content h3 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.appoint-content p {
    margin-bottom: 22px;
}

/* Globální .read-more má margin-bottom 30px – tady jen odsazuje dno bloku. */
.appoint-content .class-button .read-more {
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .appoint-right.pt-45.pb-45.pr-70.pl-70 {
        padding: 35px 25px;
    }
    .appoint-content h2 {
        font-size: 26px;
    }
    .appoint-content h3 {
        font-size: 19px;
    }
}

/*************************
    Logo – rozumná velikost v hlavičce i patičce
*************************/
.logo img {
    max-width: 260px;
    height: auto;
}

.footer-widget > a > img {
    max-width: 190px;
    height: auto;
    margin-bottom: 18px;
}

/*************************
    Hlavní menu – ikona nad popiskem
    Podle předlohy documentation/záhlaví.png
*************************/
.main-menu ul.navigation-menu > li {
    padding: 14px 0;
}

.main-menu ul.navigation-menu > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    padding: 12px 14px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    color: #12336e;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.2;
    text-transform: uppercase;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Obrysové ikony – tloušťku a barvu řídí CSS */
.nav-ico,
.nav-ico-sm {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-ico {
    width: 30px;
    height: 30px;
}

.nav-ico-sm {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
}

/* Původní šablona barvila položky na modro s plným pozadím – tady stačí rámeček. */
.main-menu ul.navigation-menu > li:hover > a,
.main-menu ul.navigation-menu > li > a:focus-visible {
    background: transparent;
    color: #0148bc;
    border-color: #35abd0;
    border-radius: 0;
}

.main-menu ul.navigation-menu > li > a:focus-visible {
    outline: none;
}

/* ---- Rozbalovací nabídka ---- */
.main-menu ul.navigation-menu > li > ul.submenu {
    left: 50%;
    transform: translateX(-50%);
    min-width: 232px;
    padding: 10px 8px;
    background: #ffffff;
    border: 1px solid #35abd0;
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(18, 51, 110, 0.12);
}

.main-menu ul.navigation-menu > li > ul.submenu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 0;
    color: #12336e;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.main-menu ul.navigation-menu > li > ul.submenu > li:hover > a {
    background: #eef7fb;
    color: #0148bc;
}

/* ---- Menší displeje: menu se rozbaluje pod hlavičkou ---- */
@media only screen and (max-width: 991px) {
    .main-menu ul.navigation-menu > li {
        display: block;
        padding: 0;
    }
    .main-menu ul.navigation-menu > li > a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
        padding: 4px 12px;
        border-radius: 0;
        font-size: 12px;
    }
    .nav-ico {
        width: 24px;
        height: 24px;
    }
    .main-menu ul.navigation-menu > li > ul.submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        margin: 0 0 6px 46px;
        padding: 4px 0;
        border: 0;
        border-left: 1px solid #cfe6f1;
        border-radius: 0;
        box-shadow: none;
    }
    .main-menu ul.navigation-menu > li > ul.submenu > li > a {
        padding: 9px 14px;
    }
}

/*************************
    Menu na telefonech a tabletech
    – panel ve světlé barvě webu (šablona ho měla černý)
    – rozbalovací nabídka Kurzy je rovnou rozbalená
    – tlačítko menu se už nepřekrývá s logem
*************************/
@media only screen and (max-width: 991px) {
    /* Tlačítko menu vpravo, mimo logo */
    .main-header {
        position: relative;
    }
    .main-header .navbar-toggle {
        position: absolute;
        top: 28px;
        right: 12px;
        z-index: 5;
    }
    .logo img {
        max-width: 210px;
    }

    /* Menu jako plovoucí karta pod tlačítkem – neroztahuje stránku,
       takže se po jeho otevření nikam neposouvá obsah.
       Pozor na specifičnost: responsive.css se načítá po tomto souboru
       a stejně silné pravidlo by vyhrálo, proto předřazujeme .header-area. */
    .header-area #navigation.main-menu {
        position: absolute;
        top: 100%;
        right: 12px;
        left: auto;
        width: 232px;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        padding: 4px;
        background-color: #ffffff;
        border: 1px solid #35abd0;
        border-top: 1px solid #35abd0;
        border-bottom: 1px solid #35abd0;
        border-radius: 0;
        box-shadow: 0 14px 30px rgba(18, 51, 110, 0.16);
        z-index: 999;
    }
    .header-area #navigation.main-menu ul li a {
        color: #12336e;
        gap: 12px;
        padding: 4px 12px;
        border-radius: 0;
        font-size: 12px;
        line-height: 1.1;
    }
    /* Šablona přidávala pod každou položku 1 px mezeru navíc. */
    .header-area #navigation.main-menu ul.navigation-menu > li {
        margin-bottom: 0;
    }
    .header-area #navigation.main-menu ul.navigation-menu > li + li {
        border-top: 1px solid #eef4f9;
    }
    .header-area #navigation.main-menu ul li a:hover {
        background: #eef7fb;
        color: #0148bc;
    }
    .header-area #navigation.main-menu .nav-ico {
        width: 20px;
        height: 20px;
    }
    .header-area #navigation.main-menu .nav-ico-sm {
        width: 17px;
        height: 17px;
    }

    /* Podnabídka je na dotyku hůř dostupná, tak ať je rovnou vidět */
    .main-menu ul.navigation-menu > li > ul.submenu {
        display: block;
        margin: 0 0 0 26px;
        padding: 0;
    }
    .header-area #navigation.main-menu ul.navigation-menu > li > ul.submenu > li > a {
        color: #4a5f85;
        padding: 3px 10px;
        font-size: 11.5px;
        line-height: 1.1;
    }
}

/*************************
    Bílý pruh hlavičky – nižší
    Ikony i velikost popisků zůstávají, ubírá se jen odsazení kolem nich.
    Omezeno na velké displeje – na telefonu má hlavička vlastní pravidla výše
    (menší logo, aby se nekrylo s tlačítkem menu).
*************************/
@media only screen and (min-width: 992px) {
    .logo {
        padding: 8px 15px;
    }

    .logo img {
        max-width: 235px;
    }

    .main-menu ul.navigation-menu > li {
        padding: 8px 0;
    }

    .main-menu ul.navigation-menu > li > a {
        gap: 6px;
        padding: 7px 14px;
    }
}

/*************************
    Kontakt – formulář a mapy vedle sebe
*************************/
.contact-us-area .contact-right,
.contact-us-area .map-column {
    height: 100%;
    padding: 40px 34px 24px;
    background: #f6f6f6;
    box-shadow: 0 0 12px 0 #dddddd;
}

/* Nadpis nad mapami vypadá stejně jako nadpis nad formulářem. */
.map-column h3 {
    font-size: 24px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 80px;
}

.map-column h3:after {
    position: absolute;
    left: 50%;
    bottom: -30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='143' height='15' viewBox='0 0 143 15'%3E%3Cline x1='0' y1='7.5' x2='57' y2='7.5' stroke='%230148bc' stroke-width='2'/%3E%3Cline x1='86' y1='7.5' x2='143' y2='7.5' stroke='%230148bc' stroke-width='2'/%3E%3Ccircle cx='71.5' cy='7.5' r='5.5' fill='none' stroke='%230148bc' stroke-width='2'/%3E%3Ccircle cx='71.5' cy='7.5' r='2' fill='%230148bc'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    width: 143px;
    height: 15px;
    margin-left: -71.5px;
    content: "";
}

.map-item + .map-item {
    margin-top: 26px;
}

/* V polovině šířky by dvě pole na řádek byla moc úzká. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .contact-us-area .contact-right .form-box + .form-box,
    .contact-us-area .contact-right .row > [class*="col-lg-6"] {
        width: 100%;
    }
}

@media only screen and (max-width: 991px) {
    .contact-us-area .contact-right,
    .contact-us-area .map-column {
        padding: 32px 20px 20px;
    }
    .map-column h3,
    .contact-us-area .contact-right h3 {
        font-size: 21px;
    }
}

/* Čeština nepíše velká písmena u každého slova – capitalize ze šablony
   dělal z "Napište nám" → "Napište Nám". */
.contact-us-area .contact-right h3,
.map-column h3 {
    text-transform: none;
}

/* Aby byly oba sloupce zhruba stejně vysoké: vyšší pole na zprávu
   a o něco nižší mapy. */
.contact-us-area .contact-right textarea {
    height: 458px;
}

.map-frame iframe {
    height: 220px;
}

.contact-us-area .contact-right .submit-btn {
    display: block;
    margin: 0 auto;
    min-width: 170px;
}

/*************************
    Kontakt – nadpisy výš, víc místa na mapy a psaní
*************************/
.contact-us-area .contact-right,
.contact-us-area .map-column {
    padding-top: 26px;
}

/* 80px pod nadpisem bylo hlavně kvůli ozdobné lince (visí 30 px pod textem).
   52 px jí nechá dost místa a zbytek se rozdá obsahu. */
.contact-us-area .contact-right h3,
.map-column h3 {
    margin-bottom: 52px;
}

/* Pole na zprávu bylo vysoké 458 px, aby se sloupec vyrovnal mapám.
   Kvůli tomu se muselo k tlačítku Odeslat rolovat. Teď má výšku, do
   které se pohodlně vejde běžný dotaz, a delší text si pole naroluje
   samo. */
.contact-us-area .contact-right textarea {
    height: 190px;
}

/* Sloupec s formulářem se už nenatahuje na výšku map – jinak by pod
   tlačítkem zůstal prázdný bílý pruh. Končí tam, kde končí obsah.
   (Starší pravidlo v tomhle souboru mu dává height: 100 %, proto ta
   výslovná změna na auto.) */
@media only screen and (min-width: 992px) {
    .contact-us-area .contact-right {
        height: auto;
        align-self: flex-start;
    }
}

.map-frame iframe {
    height: 268px;
}

/* Roletka s předmětem má vypadat jako ostatní pole formuláře. */
.contact-us-area .contact-right select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #E7E9EE;
    border: none;
    border-radius: 0;
    font-size: 12px;
    color: #666666;
    font-family: 'Roboto', sans-serif;
}

.contact-us-area .contact-right select:focus {
    outline: 1px solid #0148bc;
}

/*************************
    Kde plaveme – název bazénu a adresa na jednom řádku
    Písma i barvy zůstávají: název modře a výrazně, adresa šedě a menší.
    Ušetřená výška jde do map.
*************************/
.map-item .map-title,
.map-item .map-address {
    display: inline;
    margin-bottom: 0;
}

.map-item .map-address {
    margin-left: 10px;
}

/* Řádek s popiskem drží pohromadě a odděluje se od mapy jednou mezerou. */
.map-item .map-title {
    line-height: 1.4;
}

.map-item .map-frame {
    margin-top: 12px;
}

.map-frame iframe {
    height: 300px;
}

/* Karta přihlášky měla ze šablony padding 100px dokola – nahoře tím vznikalo
   přes sto pixelů prázdna nad prvním nadpisem.
   Jen pro velké displeje: na telefonu má karta vlastní, mnohem menší
   odsazení výše v tomto souboru a to se nesmí přebít. */
@media only screen and (min-width: 992px) {
    .register-form {
        padding: 55px 100px 60px;
    }
}

/*************************
    Stránka Pro rodiče
    Podle návrhu documentation/ProRodiče.png
*************************/

/* Obrysové ikony – tvar kreslí SVG, barvu a tloušťku řídí tenhle blok. */
.pr-ico,
.pr-ico-sm,
.pr-ico-velka {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pr-ico {
    width: 34px;
    height: 34px;
}

.pr-ico-sm {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.pr-ico-velka {
    width: 48px;
    height: 48px;
    stroke-width: 1.4;
}

/* ---------- 1. Úvodní blok ---------- */
.pr-hero {
    position: relative;
    background: linear-gradient(180deg, #e8f4fb 0%, #d3e9f6 100%);
    padding: 60px 0 96px;
    overflow: hidden;
}

.pr-hero-text h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.18;
    color: #0d2a5e;
    margin: 0 0 20px;
    text-transform: none;
}

.pr-hero-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #26456f;
    margin: 0;
    max-width: 420px;
}

.pr-hero-foto img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(13, 42, 94, 0.18);
}

/* „Scrolluj dolů" pod úvodním blokem */
.pr-scroll {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0d5eaa;
}

.pr-scroll:hover {
    color: #0148bc;
}

.pr-scroll-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-style: italic;
}

.pr-scroll-kolecko {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 42, 94, 0.15);
}

/* ---------- Společné pro sekce ---------- */
.pr-sekce {
    padding: 62px 0;
    background: #ffffff;
}

.pr-sekce-svetla {
    background: #f9fafc;
}

.pr-nadpis {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 38px;
}

/* ---------- 2. Rychlá navigace ---------- */
.pr-navigace {
    background: #ffffff;
    padding: 42px 0 46px;
}

.pr-navigace .pr-nadpis {
    margin-bottom: 30px;
}

.pr-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pr-nav-list > li {
    flex: 1 1 0;
    min-width: 130px;
    border-left: 1px solid #e2ebf3;
}

.pr-nav-list > li:first-child {
    border-left: 0;
}

.pr-nav-list > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    color: #1b6eb7;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: color 0.25s ease, transform 0.25s ease;
}

.pr-nav-list > li > a:hover {
    color: #0148bc;
    transform: translateY(-3px);
}

/* ---------- 3. Články ---------- */
.pr-clanek {
    height: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(13, 42, 94, 0.09);
    transition: box-shadow 0.25s ease;
}

.pr-clanek:hover {
    box-shadow: 0 8px 22px rgba(13, 42, 94, 0.15);
}

.pr-clanek-foto {
    position: relative;
    line-height: 0;
}

.pr-clanek-foto img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.pr-stitek {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 5px 12px;
    background: #00adc6;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    line-height: 1.4;
}

.pr-clanek-text {
    padding: 22px 22px 26px;
}

.pr-clanek-text h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: #0d2a5e;
    margin: 0 0 12px;
}

.pr-clanek-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #5a6a86;
    margin: 0;
}

/* ---------- 4. Hry do vody ---------- */
.pr-hry > [class*="col-"] {
    border-left: 1px solid #e6edf5;
}

.pr-hry > [class*="col-"]:first-child {
    border-left: 0;
}

.pr-hra {
    text-align: center;
    padding: 0 12px;
}

.pr-hra .pr-ico-velka {
    margin: 0 auto 18px;
    color: #1b6eb7;
}

.pr-hra h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #0d2a5e;
    margin: 0 0 8px;
}

.pr-vek {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #5a6a86;
    margin: 0 0 12px;
}

.pr-popis {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: #5a6a86;
    margin: 0;
}

/* ---------- 5. Básničky a říkanky do vody ----------
   Sekce je jeden blok na vzorovaném pozadí a uvnitř má každá říkanka
   vlastní ohraničený blok. Všechno s ostrými rohy, ikona nad textem
   a blok vysoký přesně podle délky říkanky. */
.pr-basnicky-sekce {
    /* Světlý vzor se dlaždicuje bez švů, proto repeat místo cover. */
    background: url(../images/appointment/1.jpg) repeat center top;
}

.pr-basnicky-blok {
    background: #ffffff;
    border: 1px solid #e2eefb;
    border-radius: 0;
    padding: 46px 40px 40px;
    box-shadow: 0 8px 28px rgba(13, 42, 94, 0.08);
}

.pr-nadpis-stred {
    text-align: center;
}

/* Vyšší váha než pozdější .pr-uvodni-text, jinak by přebilo margin
   a odstavec by se posunul doleva. */
.pr-basnicky-blok .pr-uvodni-text {
    text-align: center;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Sloupce se nenatahují na stejnou výšku – blok kopíruje délku říkanky. */
.pr-basnicky > [class*="col-"] {
    align-self: flex-start;
}

.pr-basnicka {
    height: auto;
    text-align: center;
    background: #f8fbff;
    border: 1px solid #e2eefb;
    border-radius: 0;
    padding: 26px 20px 22px;
}

/* Kolečko s ikonou zůstává kulaté – hranatí se jen bloky. */
.pr-basnicka-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e4f0fb;
    color: #1b6eb7;
}

.pr-basnicka-ikona .pr-ico {
    width: 34px;
    height: 34px;
}

.pr-basnicka h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
    margin: 0 0 10px;
}

.pr-basnicka p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #2f5c8f;
    margin: 0;
}

/* Vlnka uzavírá blok s říkankou. */
.pr-vlnka {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 12px;
    margin: 18px auto 0;
    fill: none;
    stroke: #8ec6ee;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* ---------- 6. Rychlé tipy ---------- */
.pr-tip {
    height: 100%;
    text-align: center;
    padding: 26px 20px 24px;
    background: #f7fbfe;
    border: 1px solid #e2eef7;
    border-radius: 12px;
}

.pr-tip .pr-ico-velka {
    margin: 0 auto 16px;
    color: #1b6eb7;
}

.pr-tip p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #44546f;
    margin: 0;
}

/* ---------- 7. Bezpečnost ---------- */
.pr-pravidlo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    background: #ffffff;
    /* Výstražná červená jako u kurzu pro dospělé – bezpečnostní pravidla
       mají být na první pohled odlišená od zbytku stránky. Silnější tah
       než u ostatních rámečků na webu, ať je varování znát. */
    border: 3px solid #ea4335;
}

.pr-pravidlo .pr-ico-sm {
    margin-top: 0;
    /* Stejná červená jako rám – ikona i rámeček drží pohromadě.
       Větší a silněji tažená než ostatní ikony na stránce, ať je
       varování znát na první pohled stejně jako silný rámeček. */
    width: 30px;
    height: 30px;
    stroke-width: 2.2;
    color: #ea4335;
}

.pr-pravidlo p {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #44546f;
    margin: 0;
}

/* ---------- 8. Newsletter ---------- */
.pr-newsletter {
    background: #ffffff;
    padding: 0 0 60px;
}

.pr-newsletter-box {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 26px 30px;
    background: #dbecf7;
    border-radius: 16px;
}

.pr-newsletter-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
    color: #0d5eaa;
}

.pr-newsletter-text {
    flex: 1 1 260px;
}

.pr-newsletter-text h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 6px;
}

.pr-newsletter-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    color: #3d5b85;
    margin: 0;
}

.pr-newsletter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

.pr-newsletter-form input[type="email"] {
    height: 44px;
    width: 210px;
    padding: 0 14px;
    border: 1px solid #b9d6ea;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #26456f;
}

.pr-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #0d5eaa;
}

.pr-newsletter-form button {
    height: 44px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    background: #0d5eaa;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.25s ease;
}

.pr-newsletter-form button:hover {
    background: #0148bc;
}

.pr-newsletter-form .form-messege {
    flex: 1 1 100%;
    margin-top: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Menší displeje ---------- */
@media only screen and (max-width: 991px) {
    .pr-hero {
        padding: 40px 0 84px;
        text-align: center;
    }
    .pr-hero-text h1 {
        font-size: 34px;
    }
    .pr-hero-text p {
        margin: 0 auto 30px;
    }
    .pr-hero-foto img {
        height: 260px;
    }
    .pr-nav-list > li {
        flex: 0 0 33.333%;
        min-width: 0;
        border-left: 0;
    }
    .pr-hry > [class*="col-"] {
        border-left: 0;
    }
    .pr-sekce {
        padding: 46px 0;
    }
    .pr-nadpis {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .pr-newsletter-box {
        text-align: center;
        justify-content: center;
    }
    .pr-newsletter-form {
        justify-content: center;
        width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .pr-hero-text h1 {
        font-size: 28px;
    }
    .pr-nav-list > li {
        flex: 0 0 50%;
    }
    .pr-basnicky-blok {
        padding: 32px 20px 26px;
    }
    .pr-newsletter-form input[type="email"],
    .pr-newsletter-form button {
        width: 100%;
    }
}

/* Tlačítko odběru dědilo ze šablony capitalize → „Přihlásit Se". */
.pr-newsletter-form button {
    text-transform: none;
}

/* Kotvy z rychlé navigace – ať cíl nezmizí pod lepivou hlavičkou.
   Web má globálně scroll-behavior: smooth, takže skok je plynulý sám o sobě. */

/*************************
    Pro rodiče – úprava po odebrání odkazu „Scrolluj dolů"
    Úvodní panel je nižší, dole už není potřeba místo na odkaz.
*************************/
.pr-hero {
    padding: 40px 0 44px;
}

.pr-hero-text h1 {
    font-size: 38px;
    margin-bottom: 16px;
}

.pr-hero-text p {
    font-size: 16px;
}

.pr-hero-foto img {
    height: 280px;
}

/* ---------- Ke stažení ---------- */
.pr-uvodni-text {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #5a6a86;
    margin: -22px 0 30px;
}

.pr-dokument {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    padding: 20px 22px;
    background: #f7fbfe;
    border: 1px solid #dceaf5;
    color: #0d2a5e;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

/* Barevné dlaždice nad patičkou stojí těsně nad ní – šablonových 80 px
   pod nimi dělalo prázdný pruh, ve kterém nic nebylo. Třídu pb-80 v HTML
   necháváme, používají ji i jiné sekce. */
.contact-area {
    padding-bottom: 34px;
}

/* Poznámka vedle poslední dlaždice – vypadá stejně, ale nic nestahuje,
   takže nemá ikonu ani najetí myší. */
.pr-dokument-pozn {
    cursor: default;
    background: #ffffff;
    border-style: dashed;
}

.pr-dokument-pozn .pr-dokument-nazev {
    color: #0d2a5e;
}

a.pr-dokument:hover,
a.pr-dokument:focus {
    color: #0148bc;
    border-color: #9ccbe6;
    box-shadow: 0 6px 18px rgba(13, 42, 94, 0.1);
}

.pr-dokument .pr-ico-velka {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: #1b6eb7;
}

.pr-dokument .pr-ico-sm {
    flex: 0 0 auto;
    color: #00adc6;
}

.pr-dokument-text {
    flex: 1 1 auto;
}

.pr-dokument-nazev {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 4px;
}

.pr-dokument-popis {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    color: #5a6a86;
}

@media only screen and (max-width: 991px) {
    .pr-hero {
        padding: 34px 0 38px;
    }
    .pr-hero-text h1 {
        font-size: 30px;
    }
    .pr-hero-foto img {
        height: 230px;
    }
    .pr-uvodni-text {
        margin-top: -16px;
    }
}

/*************************
    Stránka kurzů (Bazén Mohelnice) – bloky a fotky bez zaoblení
    Omezeno na tuto stránku přes třídu na <body>, jinde zaoblení zůstává.
*************************/
/* Kolečka pod ikonami kurzů zůstávají kulatá – hranatí se jen bloky. */
.stranka-kurzy .pr-tip,
.stranka-kurzy .single-class,
.stranka-kurzy .single-contact,
.stranka-kurzy .start-content {
    border-radius: 0;
}

/* Pro rodiče – úvodní fotka a dlaždice článků bez zaoblených rohů. */
.pr-hero-foto img,
.pr-clanek {
    border-radius: 0;
}

/* Úvodní panel Pro rodiče je přesně tak vysoký jako fotka –
   ta tak vyplní celou jeho výšku. Na mobilu se sloupce skládají
   pod sebe, tam odsazení zůstává, jinak by text lepil na hlavičku. */
@media only screen and (min-width: 992px) {
    .pr-hero {
        padding: 0;
    }
}

/* Nadpisy sekcí na Pro rodiče a Kurzy používají stejný .section-title
   jako „Naše lekce" na hlavní straně. Zbývá doladit odstavec pod nadpisem –
   ozdobná linka zasahuje 25 px pod nadpis, proto ten záporný horní okraj. */
.section-title p.pr-uvodni-text {
    /* Vodorovně auto, ne 0 – u odstavce s omezenou šířkou (básničky mají
       max-width 620 px) by ho nula přilepila doleva místo na střed. */
    margin: -28px auto 34px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .section-title p.pr-uvodni-text {
        margin: -24px auto 28px;
    }
}

/*----------------------------------------*/
/*  Registrace – nová podoba podle documentation/registrace.png
/*----------------------------------------*/

/* Vzorované pozadí zůstává, jen formulář už není jedna bílá krabice. */
/* Formulář začíná stejně vysoko jako přehled kurzů na courses.html –
   tam je nad obsahem 40 px. Dřív tu bylo 60 px a blok visel níž. */
.register-area {
    padding: 40px 0 90px;
}

/* ---------- levý sloupec: formulář ---------- */
.reg-formular {
    background: #ffffff;
    border: 1px solid #e2eefb;
    padding: 34px 34px 30px;
    box-shadow: 0 8px 28px rgba(13, 42, 94, 0.08);
}

.reg-krok {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #eef4fb;
}

.reg-krok-posledni {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.reg-krok-nadpis {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 18px;
}

.reg-cislo {
    color: #1b6eb7;
}

/* Nadpis a přepínač dítě/dospělý na jedné lince. */
.reg-krok-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.reg-krok-hlava .reg-krok-nadpis {
    margin: 0;
}

/* ---------- dlaždice kurzů ---------- */
.reg-kurz {
    display: block;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* Přepínač schováme, ale ne před klávesnicí ani odečítačkou. */
.reg-kurz input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.reg-kurz-obsah {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px 16px 22px;
    background: #ffffff;
    border: 1px solid #dfeaf6;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Při najetí myší se podbarví celá dlaždice – světleji, než když
   je vybraná, ať se ty dva stavy nepletou. */
.reg-kurz:hover .reg-kurz-obsah {
    border-color: #9ccdf0;
    background: #f7fcff;
}

/* Vybraná dlaždice si drží svůj odstín i pod myší. */
.reg-kurz input:checked + .reg-kurz-obsah,
.reg-kurz:hover input:checked + .reg-kurz-obsah {
    background: #f2f9fe;
}

.reg-kurz input:checked + .reg-kurz-obsah {
    border-color: #29a3e0;
    background: #f2f9fe;
    box-shadow: 0 0 0 1px #29a3e0;
}

.reg-kurz input:focus-visible + .reg-kurz-obsah {
    outline: 2px solid #0148bc;
    outline-offset: 2px;
}

/* Modré kolečko s fajfkou v rohu vybrané dlaždice. */
.reg-kurz-fajfka {
    position: absolute;
    top: -12px;
    right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1b6eb7;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.reg-kurz input:checked + .reg-kurz-obsah .reg-kurz-fajfka {
    opacity: 1;
    transform: scale(1);
}

.reg-kurz-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #e4f0fb;
    color: #1b6eb7;
}

.reg-kurz-nazev {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0d2a5e;
    margin-bottom: 6px;
}

.reg-kurz-popis {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #5a6a86;
}

/* ---------- barevné odlišení kurzů ----------
   Stejné odstíny jako karty kurzů na hlavní straně, aby si je návštěvník
   spojil dohromady: picton = Želvuška, cobalt = děti, cinnabar = dospělí.
   Barva je vidět hned, nejen po vybrání – dlaždice tak nese stejné
   znamení jako karta, ze které sem člověk přišel. */
.reg-kurz-picton .reg-kurz-obsah {
    border-color: #1c9dec;
}

.reg-kurz-picton .reg-kurz-ikona {
    background: #e8f5fe;
    color: #1c9dec;
}

.reg-kurz-picton .reg-kurz-fajfka {
    background: #1c9dec;
}

.reg-kurz-picton:hover .reg-kurz-obsah,
.reg-kurz-picton input:checked + .reg-kurz-obsah,
.reg-kurz-picton:hover input:checked + .reg-kurz-obsah {
    border-color: #1c9dec;
    background: #f2f9fe;
}

.reg-kurz-picton input:checked + .reg-kurz-obsah {
    box-shadow: 0 0 0 1px #1c9dec;
}

.reg-kurz-picton input:focus-visible + .reg-kurz-obsah {
    outline-color: #1c9dec;
}

.reg-kurz-cobalt .reg-kurz-obsah {
    border-color: #0148bc;
}

.reg-kurz-cobalt .reg-kurz-ikona {
    background: #e6eefa;
    color: #0148bc;
}

.reg-kurz-cobalt .reg-kurz-fajfka {
    background: #0148bc;
}

.reg-kurz-cobalt:hover .reg-kurz-obsah,
.reg-kurz-cobalt input:checked + .reg-kurz-obsah,
.reg-kurz-cobalt:hover input:checked + .reg-kurz-obsah {
    border-color: #0148bc;
    background: #f1f5fc;
}

.reg-kurz-cobalt input:checked + .reg-kurz-obsah {
    box-shadow: 0 0 0 1px #0148bc;
}

.reg-kurz-cobalt input:focus-visible + .reg-kurz-obsah {
    outline-color: #0148bc;
}

.reg-kurz-cinnabar .reg-kurz-obsah {
    border-color: #ea4335;
}

.reg-kurz-cinnabar .reg-kurz-ikona {
    background: #fdecea;
    color: #ea4335;
}

.reg-kurz-cinnabar .reg-kurz-fajfka {
    background: #ea4335;
}

.reg-kurz-cinnabar:hover .reg-kurz-obsah,
.reg-kurz-cinnabar input:checked + .reg-kurz-obsah,
.reg-kurz-cinnabar:hover input:checked + .reg-kurz-obsah {
    border-color: #ea4335;
    background: #fdf4f3;
}

.reg-kurz-cinnabar input:checked + .reg-kurz-obsah {
    box-shadow: 0 0 0 1px #ea4335;
}

.reg-kurz-cinnabar input:focus-visible + .reg-kurz-obsah {
    outline-color: #ea4335;
}

/* ---------- pole formuláře ---------- */
.reg-pole {
    margin-bottom: 16px;
}

.reg-krok .row .reg-pole:last-child {
    margin-bottom: 0;
}

.reg-pole label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #44546f;
    margin-bottom: 7px;
    text-transform: none;
}

.req {
    color: #d0342c;
}

.reg-pole input,
.reg-pole select,
.reg-pole textarea {
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #24344f;
    background: #ffffff;
    border: 1px solid #dfeaf6;
    border-radius: 0;
    padding: 11px 14px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reg-pole textarea {
    min-height: 96px;
    resize: vertical;
}

.reg-pole input::placeholder,
.reg-pole textarea::placeholder {
    color: #93a2b8;
}

.reg-pole input:focus,
.reg-pole select:focus,
.reg-pole textarea:focus {
    border-color: #29a3e0;
    box-shadow: 0 0 0 3px rgba(41, 163, 224, 0.16);
    outline: none;
}

/* Rozbalovačka s vlastní šipkou – výchozí vzhled se mezi prohlížeči liší. */
.reg-select {
    position: relative;
}

.reg-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.reg-select::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid #5a6a86;
    border-bottom: 2px solid #5a6a86;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Ikonka kalendáře uvnitř pole – text pak musí začít dál. */
.reg-ico-pole {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 19px;
    height: 19px;
    margin-top: -9.5px;
    color: #1b6eb7;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.reg-select .reg-ico-pole ~ select {
    padding-left: 44px;
}

.reg-termin {
    max-width: 560px;
    margin-top: 22px;
}

.reg-poznamka {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    color: #5a6a86;
    margin: 8px 0 0;
}

/* ---------- přepínač dítě / dospělý ---------- */
.reg-prepinac {
    display: flex;
    gap: 18px;
}

.reg-prepinac label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    color: #44546f;
    cursor: pointer;
}

.reg-prepinac input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #c3d6ea;
    border-radius: 50%;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.reg-prepinac input:checked {
    border-color: #1b6eb7;
    border-width: 5px;
}

.reg-prepinac input:focus-visible {
    outline: 2px solid #0148bc;
    outline-offset: 2px;
}

/* ---------- souhlas a odeslání ---------- */
.reg-souhlas {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 22px;
    cursor: pointer;
}

.reg-souhlas input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.reg-souhlas-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #c3d6ea;
    background: #ffffff;
    color: #ffffff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.reg-souhlas-box .reg-ico-mini {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.reg-souhlas input:checked + .reg-souhlas-box {
    background: #1b6eb7;
    border-color: #1b6eb7;
}

.reg-souhlas input:checked + .reg-souhlas-box .reg-ico-mini {
    opacity: 1;
}

.reg-souhlas input:focus-visible + .reg-souhlas-box {
    outline: 2px solid #0148bc;
    outline-offset: 2px;
}

.reg-souhlas-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #44546f;
}

.reg-souhlas-text a {
    color: #1b6eb7;
    text-decoration: underline;
}

.reg-tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 330px;
    padding: 15px 26px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: #1266c8;
    border: 0;
    border-radius: 0;
    text-transform: none;
    transition: background 0.2s ease;
}

.reg-tlacitko:hover,
.reg-tlacitko:focus {
    background: #0d4f9e;
    color: #ffffff;
}

.reg-bezpeci {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    color: #7b8aa3;
    margin: 14px 0 0;
}

/* ---------- panel Želvušky ---------- */
.reg-zelvuska {
    text-align: center;
    background: #f2f9fe;
    border: 1px solid #cbe6f8;
    padding: 34px 28px 30px;
    margin-bottom: 26px;
}

.reg-zelvuska-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #ffffff;
    color: #1b6eb7;
}

.reg-zelvuska h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 10px;
}

.reg-zelvuska p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #44546f;
    max-width: 520px;
    margin: 0 auto 20px;
}

.reg-tlacitko-odkaz {
    width: auto;
    max-width: none;
}

.reg-zelvuska-hint {
    font-size: 13.5px !important;
    color: #7b8aa3 !important;
    margin: 18px auto 0 !important;
}

/* ---------- pravý sloupec: shrnutí a pomoc ---------- */
.reg-panel {
    position: sticky;
    top: 100px;
}

.reg-shrnuti {
    background: #eaf4fc;
    border: 1px solid #cfe6f8;
    margin-bottom: 24px;
}

.reg-shrnuti-nadpis {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0d2a5e;
    text-transform: none;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid #d8e9f8;
}

.reg-shrnuti-nadpis .reg-ico {
    color: #1b6eb7;
}

.reg-shrnuti-telo {
    background: #f6fbff;
    padding: 20px 22px 22px;
}

.reg-shrnuti-seznam {
    margin: 0;
}

.reg-shrnuti-seznam dt {
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #7b8aa3;
    margin-bottom: 3px;
}

.reg-shrnuti-seznam dd {
    /* Adresa i cena za lekci přicházejí na druhém řádku – zalomení
       necháme na obsahu, proto pre-line místo dvou prvků. */
    white-space: pre-line;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #24344f;
    margin: 0 0 16px;
}

.reg-shrnuti-seznam dd:last-child {
    margin-bottom: 0;
}

.reg-shrnuti-prazdne {
    color: #93a2b8;
    font-style: italic;
}

.reg-shrnuti-pozn {
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    color: #7b8aa3;
    margin: 16px 0 0;
}

.reg-shrnuti-info {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #dfeefb;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #44546f;
}

.reg-shrnuti-info-ikona {
    flex: 0 0 auto;
    color: #1b6eb7;
}

.reg-pomoc {
    background: #eaf4fc;
    border: 1px solid #cfe6f8;
    padding: 24px 22px;
}

.reg-pomoc h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 4px;
}

.reg-pomoc-podnadpis {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    color: #7b8aa3;
    margin: 0 0 18px;
}

.reg-kontakt-radek {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1266c8;
    margin-bottom: 12px;
    word-break: break-word;
}

.reg-kontakt-radek:hover {
    color: #0d4f9e;
}

.reg-kontakt-ikona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #1b6eb7;
}

.reg-prednost {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
}

.reg-prednost-ikona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #1b6eb7;
}

.reg-prednost-text strong {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0d2a5e;
    margin-bottom: 2px;
}

.reg-prednost-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: #5a6a86;
}

/* ---------- ikony ---------- */
.reg-ico,
.reg-ico-velka,
.reg-ico-mini {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reg-ico {
    width: 20px;
    height: 20px;
}

.reg-ico-velka {
    width: 32px;
    height: 32px;
}

.reg-ico-mini {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

/* ---------- menší obrazovky ---------- */
@media only screen and (max-width: 991px) {
    .reg-panel {
        position: static;
    }
    .register-area {
        padding: 40px 0 60px;
    }
}

@media only screen and (max-width: 767px) {
    .reg-formular {
        padding: 24px 18px 22px;
    }
    .reg-krok-nadpis {
        font-size: 17px;
    }
    .reg-tlacitko {
        max-width: none;
    }
    .reg-krok-hlava {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Pruh pod hlavičkou ukazoval šedý obrázek „1920x320" – nevyměněnou
   výplň ze šablony. Dáváme skutečnou fotku. Zkratka background:
   v šabloně navíc mazala size/position uvedené před ní, proto je tu
   pořadí obrácené. Zbyl už jen na instructor.html, ostatní stránky
   mají úvodní panel ve stylu Pro rodiče. */
.banner-area {
    background: url(../images/slider/2.jpg) no-repeat center center;
    background-size: cover;
}

/* Přes fotku byl 80% černý závoj, po kterém z ní nic nezbylo. */
.banner-area::after {
    background: rgba(6, 24, 51, 0.62) none repeat scroll 0 0;
}

/* Úvodní panel na Pro rodiče i na Registraci – jeden rozměr pro obě
   stránky. Výšku panelu určuje fotka, proto stačí měnit ji. */
.pr-hero-foto img {
    height: 200px;
}

.pr-hero-text h1 {
    font-size: 38px;
    margin-bottom: 14px;
}

.pr-hero-text p {
    font-size: 16px;
    max-width: 460px;
}

@media only screen and (max-width: 991px) {
    .pr-hero-text h1 {
        font-size: 32px;
    }
    .pr-hero-foto img {
        height: 190px;
    }
}

/*----------------------------------------*/
/*  Kontakt ve stylu Registrace
/*  Bílé bloky na vzorovaném pozadí, stejné barvy polí i tlačítka.
/*----------------------------------------*/
.contact-us-area {
    /* Stejný světlý vzor jako pod přihláškou, dlaždicuje se bez švů. */
    background: url(../images/appointment/1.jpg) repeat center top;
    /* 40 px nahoře stejně jako přehled kurzů na courses.html. */
    padding: 40px 0 90px;
}

.contact-us-area .contact-right,
.contact-us-area .map-column {
    background: #ffffff;
    border: 1px solid #e2eefb;
    border-radius: 0;
    padding: 34px 34px 30px;
    box-shadow: 0 8px 28px rgba(13, 42, 94, 0.08);
}

/* Pole vypadají stejně jako v přihlášce – bílá s tenkým modrým rámem. */
.contact-us-area .contact-right input,
.contact-us-area .contact-right select,
.contact-us-area .contact-right textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dfeaf6;
    border-radius: 0;
    padding: 11px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #24344f;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-us-area .contact-right input::placeholder,
.contact-us-area .contact-right textarea::placeholder {
    color: #93a2b8;
}

.contact-us-area .contact-right input:focus,
.contact-us-area .contact-right select:focus,
.contact-us-area .contact-right textarea:focus,
.contact-us-area .contact-right .form-box input:focus,
.contact-us-area .contact-right .form-box textarea:focus {
    border-color: #29a3e0;
    box-shadow: 0 0 0 3px rgba(41, 163, 224, 0.16);
    outline: none;
}

/* Tlačítko stejné jako „Odeslat přihlášku". */
.contact-us-area .submit-btn {
    width: 100%;
    max-width: 330px;
    padding: 15px 26px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    background: #1266c8;
    border: 0;
    border-radius: 0;
    text-transform: none;
}

.contact-us-area .submit-btn:hover,
.contact-us-area .submit-btn:focus {
    background: #0d4f9e;
    color: #ffffff;
}

/* Bazén a adresa na jednom řádku v barvách přihlášky, rámeček mapy
   bez zaoblení a stínu – ten teď nese celý bílý blok. */
.map-title {
    color: #1266c8;
}

.map-address {
    color: #7b8aa3;
}

.map-frame {
    border: 1px solid #e2eefb;
    border-radius: 0;
    box-shadow: none;
}

@media only screen and (max-width: 991px) {
    .contact-us-area {
        padding: 40px 0 60px;
    }
    .contact-us-area .contact-right,
    .contact-us-area .map-column {
        padding: 24px 18px 22px;
    }
    .contact-us-area .submit-btn {
        max-width: none;
    }
}

/*----------------------------------------*/
/*  Kurzy na hlavní straně
/*  Stejné provedení jako kurzy na courses.html: silný barevný
/*  rám, ostré rohy a šedé kolečko s ikonou přesahující přes horní
/*  hranu. Text i odrážky na střed.
/*----------------------------------------*/
.kurzy-area {
    background: linear-gradient(180deg, #ffffff 0%, #f4fafe 100%);
}

/* Nabídka kurzů má navazovat hned na úvodní panel, ne až po velké
   mezeře. Horní odsazení je proto menší než u ostatních sekcí; s
   místem, které si nad kartami bere přesahující kolečko s ikonou
   (řádek níž), vychází odstup od panelu na 54 px. */
.class-area.kurzy-area {
    padding-top: 30px;
}

/* Kolečko přesahuje 70 px nad kartu, řádek proto potřebuje místo. */
.kurzy-area .row {
    margin-top: 70px;
}

.kurzy-area .row > [class*="col-"] {
    display: flex;
}

.kurz-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 95px 26px 30px;
    background: #ffffff;
    border: 5px solid #1c9dec;
    border-radius: 0;
    text-align: center;
}

/* Šedé kolečko s ikonou, stejné jako na stránce Kurzy. */
.kurz-odznak {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #f6f6f6;
}

.kurz-odznak img {
    width: 62px;
    height: auto;
}

.kurz-karta h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: #0148bc;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.kurz-podnadpis {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #0148bc;
    margin: 0 0 16px;
}

.kurz-popis {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.72;
    color: #333333;
    margin: 0 0 18px;
}

/* Odrážky na střed – celý seznam i jednotlivé řádky. */
/* Seznam je jako celek na střed (řeší align-items u karty), ale uvnitř
   zarovnaný doleva – jinak by každá fajfka začínala jinde. */
.kurz-body {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}

.kurz-body li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 9px;
}

.kurz-body li:last-child {
    margin-bottom: 0;
}

.kurz-fajfka {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    fill: none;
    stroke: #1c9dec;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Plné tlačítko jako u kurzů na druhé stránce. */
.kurz-odkaz {
    margin-top: auto;
    padding: 13px 26px;
    background: #1c9dec;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    transition: background 0.25s ease;
}

.kurz-odkaz:hover,
.kurz-odkaz:focus {
    background: #1580c4;
    color: #ffffff;
}

/* Barevné odlišení kurzů – odstíny z původních karet. */
.kurz-cobalt {
    border-color: #0148bc;
}

.kurz-cobalt .kurz-fajfka {
    stroke: #0148bc;
}

.kurz-cobalt .kurz-odkaz {
    background: #0148bc;
}

.kurz-cobalt .kurz-odkaz:hover,
.kurz-cobalt .kurz-odkaz:focus {
    background: #013a9a;
}

.kurz-cinnabar {
    border-color: #ea4335;
}

.kurz-cinnabar .kurz-fajfka {
    stroke: #ea4335;
}

.kurz-cinnabar .kurz-odkaz {
    background: #ea4335;
}

.kurz-cinnabar .kurz-odkaz:hover,
.kurz-cinnabar .kurz-odkaz:focus {
    background: #cf3527;
}

@media only screen and (max-width: 991px) {
    .kurz-karta {
        padding: 88px 20px 26px;
    }
    .kurz-odznak {
        width: 132px;
        height: 132px;
        top: -62px;
    }
    .kurz-odznak img {
        width: 54px;
    }
}

/* ---------- Ztráty a nálezy ----------
   Dvě dlaždice vedle sebe – nálezy se zveřejňují na dvou místech
   podle toho, o jaký kurz jde. Celá dlaždice je odkaz. */
.pr-ztraty {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.pr-ztraty-odkaz {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e2eefb;
    border-radius: 0;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(13, 42, 94, 0.08);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pr-ztraty-odkaz:hover,
.pr-ztraty-odkaz:focus {
    border-color: #1877f2;
    background: #f7fbff;
    transform: translateY(-2px);
}

/* Kolečko s logem sítě zůstává kulaté – hranatá je jen dlaždice. */
.pr-ztraty-ikona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* Firemní modrá Facebooku, ať je hned jasné, kam odkaz vede. */
    background: #1877f2;
    color: #ffffff;
}

.pr-ztraty-ikona .pr-ico {
    width: 26px;
    height: 26px;
}

.pr-ztraty-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pr-ztraty-nazev {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #0d2a5e;
}

.pr-ztraty-popis {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #5a6a86;
    margin-top: 3px;
}

.pr-ztraty-sipka {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: #1877f2;
    transition: transform 0.2s ease;
}

.pr-ztraty-odkaz:hover .pr-ztraty-sipka {
    transform: translateX(4px);
}

.pr-ztraty-pozn {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: #7b8aa3;
    text-align: center;
    margin: 22px 0 0;
}

.pr-ztraty-pozn a {
    color: #1266c8;
}

@media only screen and (max-width: 767px) {
    .pr-ztraty {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .pr-ztraty-odkaz {
        padding: 18px 18px;
        gap: 14px;
    }
}

/*----------------------------------------*/
/*  Přehled kurzů (courses.html)
/*  Vzhled podle documentation/Přehled.png – u každého kurzu číslo,
/*  popis, řádek s údaji, pruh s cenou a fotka vpravo.
/*----------------------------------------*/
.prehled-area {
    background: #ffffff;
    text-align: left;
}

.prehled-kurz {
    display: flex;
    gap: 34px;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #e2eefb;
    border-left: 4px solid #1c9dec;
    box-shadow: 0 8px 28px rgba(13, 42, 94, 0.08);
    padding: 30px;
    margin-bottom: 26px;
}

.prehled-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.prehled-hlavicka {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px;
}

/* Pořadové číslo v barevném čtverci, jako v návrhu. */
.prehled-cislo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #1c9dec;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
}

.prehled-kurz h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 5px;
}

.prehled-instruktorka {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1c9dec;
    margin: 0;
}

.prehled-popis {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.75;
    color: #333333;
    margin: 0 0 20px;
}

/* Tři údaje vedle sebe, oddělené svislou linkou. */
.prehled-udaje {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.prehled-udaj {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 22px;
    border-left: 1px solid #e6edf5;
}

.prehled-udaj:first-child {
    padding-left: 0;
    border-left: 0;
}

.prehled-ico {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #1c9dec;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prehled-udaj-text {
    display: flex;
    flex-direction: column;
}

.prehled-udaj-nazev {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
}

.prehled-udaj-hodnota {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #5a6a86;
}

/* Šedý pruh s cenou. */
.prehled-cena {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4f7fb;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.prehled-cena-popisek {
    flex: 0 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1c9dec;
    padding-right: 16px;
    border-right: 1px solid #dbe6f2;
}

.prehled-cena-hodnota {
    display: flex;
    flex-direction: column;
}

/* Kurz pro děti běží ve dvou bazénech a každý má svou cenu. Mřížka je
   drží ve dvou sloupcích – názvy bazénů vlevo, částky pod sebou vpravo,
   ať jdou porovnat na první pohled. Řádkování dává mezi ně vzduch. */
.prehled-cena-bazeny {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 22px;
    row-gap: 9px;
}

/* Na telefonu se dva sloupce nevejdou a částka by se lámala uprostřed.
   Přejdeme proto na jeden sloupec – název bazénu a pod ním jeho cena. */
@media only screen and (max-width: 575px) {
    .prehled-cena-bazeny {
        grid-template-columns: auto;
        row-gap: 2px;
    }
    .prehled-cena-bazeny strong:nth-child(odd) {
        margin-top: 12px;
    }
    .prehled-cena-bazeny strong:first-child {
        margin-top: 0;
    }
}

.prehled-cena-hodnota strong {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #0d2a5e;
}

.prehled-cena-hodnota span {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #5a6a86;
}

.prehled-tlacitko {
    align-self: flex-start;
    margin-top: auto;
    padding: 13px 30px;
    background: #1c9dec;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    transition: background 0.25s ease;
}

.prehled-tlacitko:hover,
.prehled-tlacitko:focus {
    background: #1580c4;
    color: #ffffff;
}

/* Fotka vyplní sloupec bez ohledu na to, jestli je na výšku nebo
   na šířku – proto je vypodložená absolutně. Kdyby zůstala v toku,
   snímek na výšku by celou kartu natáhl. */
.prehled-foto {
    position: relative;
    flex: 0 0 40%;
    max-width: 40%;
    min-height: 250px;
    line-height: 0;
    overflow: hidden;
}

.prehled-foto img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Tváře bývají v horní části snímku, ořez proto posuneme nahoru. */
    object-position: center 30%;
}

/* Barevné odlišení kurzů – stejné odstíny jako jinde na webu. */
.prehled-cobalt {
    border-left-color: #0148bc;
}

.prehled-cobalt .prehled-cislo,
.prehled-cobalt .prehled-tlacitko {
    background: #0148bc;
}

.prehled-cobalt .prehled-instruktorka,
.prehled-cobalt .prehled-cena-popisek {
    color: #0148bc;
}

.prehled-cobalt .prehled-ico {
    stroke: #0148bc;
}

.prehled-cobalt .prehled-tlacitko:hover,
.prehled-cobalt .prehled-tlacitko:focus {
    background: #013a9a;
}

.prehled-cinnabar {
    border-left-color: #ea4335;
}

.prehled-cinnabar .prehled-cislo,
.prehled-cinnabar .prehled-tlacitko {
    background: #ea4335;
}

.prehled-cinnabar .prehled-instruktorka,
.prehled-cinnabar .prehled-cena-popisek {
    color: #d4392c;
}

.prehled-cinnabar .prehled-ico {
    stroke: #ea4335;
}

.prehled-cinnabar .prehled-tlacitko:hover,
.prehled-cinnabar .prehled-tlacitko:focus {
    background: #cf3527;
}

/* Řádek o platbě pod pruhem s cenou. */
.prehled-platba {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5a6a86;
    margin: -8px 0 18px;
}

/* Co platí pro všechny kurzy – tři krátké body pod výpisem. */
.prehled-spolecne {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    background: #f4f7fb;
    padding: 26px 28px;
    margin-bottom: 30px;
}

.prehled-spolecne-polozka {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.prehled-spolecne-polozka h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
    text-transform: none;
    margin: 0 0 4px;
}

.prehled-spolecne-polozka p {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.65;
    color: #5a6a86;
    margin: 0;
}

.prehled-spolecne-polozka a {
    color: #1266c8;
    text-decoration: underline;
}

.prehled-spolecne-polozka .prehled-ico {
    margin-top: 2px;
}

@media only screen and (max-width: 991px) {
    .prehled-spolecne {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 22px 20px;
    }
}

@media only screen and (max-width: 991px) {
    .prehled-kurz {
        flex-direction: column;
        gap: 22px;
    }
    .prehled-kurz {
        padding: 24px 20px;
    }
    .prehled-foto {
        flex: 1 1 auto;
        max-width: none;
        order: -1;
    }
    .prehled-foto {
        min-height: 0;
        height: 220px;
    }
}

@media only screen and (max-width: 575px) {
    /* Údaje pod sebou – vedle sebe by se na telefon nevešly. */
    .prehled-udaje {
        flex-direction: column;
        gap: 12px;
    }
    .prehled-udaj {
        padding: 0;
        border-left: 0;
    }
    .prehled-cena {
        flex-wrap: wrap;
    }
    .prehled-cena-popisek {
        border-right: 0;
    }
    .prehled-tlacitko {
        width: 100%;
        text-align: center;
    }
}

/* Fotka u FAQ dorůstá přesně k dolní hraně poslední zabalené otázky:
   levý sloupec se roztáhne na výšku harmoniky a fotka zabere zbytek. */
.faq-intro {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.faq-photo {
    position: relative;
    flex: 1 1 0;
    min-height: 260px;
    /* Pravý sloupec je o tlačítko „Máte další otázku" (51 px + 34 px
       odsazení) a o spodní výplň harmoniky (29 px) vyšší než poslední
       otázka. O těch 114 px fotku povytáhneme, aby končily zároveň. */
    margin-bottom: 114px;
}

/* Poslední otázka bez spodního odsazení – jinak by harmonika sahala
   o 14 px níž než její poslední rámeček a fotka by přečnívala. */
.faq-accordion .faq-item:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    /* Ve sloupci pod sebou už nemá co dorovnávat, vrátíme pevnou výšku. */
    .faq-photo {
        flex: 0 0 auto;
        height: 320px;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    /* Starší pravidlo drží obrázek na 260 px, ať mu sedí i rámeček. */
    .faq-photo {
        height: 260px;
    }
}

/* Výběr termínu přepínači – bazén i den jsou vidět bez rozklikávání. */
.reg-popisek {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #24344f;
    margin-bottom: 8px;
}

.reg-terminy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.reg-termin-volba {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* Přepínač schováme, ale ne před klávesnicí ani odečítačkou. */
.reg-termin-volba input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.reg-termin-obsah {
    position: relative;
    display: block;
    height: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #dfeaf6;
    border-radius: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.reg-termin-volba input:checked + .reg-termin-obsah {
    border-color: #29a3e0;
    background: #f2f9fe;
    box-shadow: 0 0 0 1px #29a3e0;
}

.reg-termin-volba input:focus-visible + .reg-termin-obsah {
    outline: 2px solid #0148bc;
    outline-offset: 2px;
}

.reg-termin-fajfka {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #29a3e0;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.reg-termin-volba input:checked + .reg-termin-obsah .reg-termin-fajfka {
    opacity: 1;
    transform: scale(1);
}

.reg-termin-den {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
    padding-right: 26px;
}

.reg-termin-bazen {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1266c8;
    margin-top: 2px;
}

.reg-termin-detail {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #7b8aa3;
    margin-top: 6px;
}

@media only screen and (max-width: 575px) {
    .reg-terminy {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dlaždice termínu se pod myší chová stejně jako výběr kurzu. */
.reg-termin-volba:hover .reg-termin-obsah {
    border-color: #9ccdf0;
    background: #f7fcff;
}

.reg-termin-volba:hover input:checked + .reg-termin-obsah {
    background: #f2f9fe;
}

/* Poznámka byla vyšší než pole vedle ní a natahovala celý formulář.
   Pravý sloupec proto necháme roztáhnout a poznámka doplní přesně
   tolik místa, aby oba sloupce končily zároveň. */
@media only screen and (min-width: 992px) {
    #kontakt-blok .row > [class*="col-lg-6"]:last-child {
        display: flex;
        flex-direction: column;
    }

    #kontakt-blok .row > [class*="col-lg-6"]:last-child .reg-pole:last-child {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        /* Spodní okraj necháváme stejný jako u ostatních polí, jinak by
           poznámka končila níž než e-mail vedle ní. */
    }

    /* Základ 0 – textarea tak nediktuje výšku sloupce svými třemi
       řádky, ale doplní jen zbytek do výšky sloupce vedle. */
    #kontakt-blok textarea {
        flex: 1 1 0;
        min-height: 0;
        height: 0;
        /* Táhlo pro zvětšení by proti flexu nefungovalo, radši ho skryjeme. */
        resize: none;
    }
}

/* Kroužek u FAQ je o něco větší: ubereme mezeru nad ním, spodní hrana
   se nehne, protože ji drží zarovnání s poslední otázkou. */
@media only screen and (min-width: 992px) {
    .faq-intro > p {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 991px) {
    /* Fotka je vypodložená, takže rámečku sama šířku nedá – starší
       pravidlo s margin: 0 auto by ho jinak srazilo na nulu. */
    .faq-photo {
        width: 100%;
    }
}

/* Témata nad nejčastějšími otázkami – ukazuje se vždy jen jedna skupina. */
.faq-temata {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.faq-tema {
    padding: 9px 18px;
    background: #ffffff;
    border: 1px solid #dbe6f2;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #24344f;
    text-transform: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-tema:hover {
    border-color: #9ccdf0;
    background: #f7fcff;
}

.faq-tema.je-vybrane {
    background: #0148bc;
    border-color: #0148bc;
    color: #ffffff;
}

.faq-tema:focus-visible {
    outline: 2px solid #0148bc;
    outline-offset: 2px;
}

@media only screen and (max-width: 575px) {
    .faq-tema {
        flex: 1 1 100%;
        text-align: center;
    }
}

/*----------------------------------------*/
/*  Kotvy sekcí – kam má stránka doskočit
/*----------------------------------------*/
/*
   Odkazy z nabídky míří na konkrétní sekce (index.html#faq,
   courses.html#kojenci …). Po skoku překrývá horní okraj stránky
   přilepená hlavička, takže nadpis musí začínat až pod ní – jinak se
   pod ní schová.

   Hodnota = výška přilepené hlavičky + 18 px mezery. Naměřeno pro každý
   zlom zvlášť:

       displej         přilepená hlavička   odsazení
       ≥ 992 px               83 px          101 px
       768–991 px            114 px          132 px
       576–767 px             99 px          117 px
       ≤ 575 px               99 px          117 px

   S posunem stránky při přilepení hlavičky se počítat nemusí – od toho
   je mezera .hlavicka-mezera o kousek výš v tomhle souboru.
*/
#prihlaska,
#uvod,
#navigace,
#clanky,
#hry,
#basnicky,
#tipy,
#bezpecnost,
#ke-stazeni,
#ztraty,
#nase-lekce,
#kurzy,
#o-nas,
#instruktorky,
#galerie,
#faq,
#kojenci,
#deti,
#dospeli {
    scroll-margin-top: 101px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #prihlaska,
    #uvod,
    #navigace,
    #clanky,
    #hry,
    #basnicky,
    #tipy,
    #bezpecnost,
    #ke-stazeni,
    #ztraty,
    #nase-lekce,
    #kurzy,
    #o-nas,
    #instruktorky,
    #galerie,
    #faq,
    #kojenci,
    #deti,
    #dospeli {
        scroll-margin-top: 132px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    #prihlaska,
    #uvod,
    #navigace,
    #clanky,
    #hry,
    #basnicky,
    #tipy,
    #bezpecnost,
    #ke-stazeni,
    #ztraty,
    #nase-lekce,
    #kurzy,
    #o-nas,
    #instruktorky,
    #galerie,
    #faq,
    #kojenci,
    #deti,
    #dospeli {
        scroll-margin-top: 117px;
    }
}

@media only screen and (max-width: 575px) {
    #prihlaska,
    #uvod,
    #navigace,
    #clanky,
    #hry,
    #basnicky,
    #tipy,
    #bezpecnost,
    #ke-stazeni,
    #ztraty,
    #nase-lekce,
    #kurzy,
    #o-nas,
    #instruktorky,
    #galerie,
    #faq,
    #kojenci,
    #deti,
    #dospeli {
        scroll-margin-top: 117px;
    }
}

/* Hlavička přilepená hned při načtení stránky (skok na kotvu) nemá
   přilétat shora – animace patří k odrolování, ne k příchodu na stránku.
   Třídu nasazuje a po načtení zase snímá assets/js/skok-bez-animace.js. */
.header-area.stick.bez-prichodu {
    -webkit-animation: none;
    animation: none;
}

/*----------------------------------------*/
/*  Místo po přilepené hlavičce
/*----------------------------------------*/
/*
   Když se hlavička po odrolování přilepí nahoru (třída .stick), dostane
   position: fixed a tím opustí tok stránky – všechen obsah pod ní v tu
   chvíli vyskočí o její výšku vzhůru. Návštěvník to vidí jako škubnutí
   při rolování a komplikovalo to i skoky na kotvy.

   Prázdný <div class="hlavicka-mezera"> hned za hlavičkou proto v tu
   chvíli zabere přesně tolik místa, kolik hlavička v toku měla. Nic se
   pak neposune. Výška odpovídá hlavičce v jednotlivých zlomech.
*/
.hlavicka-mezera {
    display: none;
}

.header-area.stick + .hlavicka-mezera {
    display: block;
    height: 132px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area.stick + .hlavicka-mezera {
        height: 188px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-area.stick + .hlavicka-mezera {
        height: 192px;
    }
}

@media only screen and (max-width: 575px) {
    .header-area.stick + .hlavicka-mezera {
        height: 226px;
    }
}

/*----------------------------------------*/
/*  Patička
/*----------------------------------------*/
/*
   Tři sloupce oddělené svislou linkou: kontakt, logo s odkazem na
   Facebook a rychlé odkazy. Obsah generuje /tmp/build_paticka.py, tady
   je jen vzhled.
*/
/* Stejné podbarvení jako mají úvodní panely na ostatních stránkách –
   patička tím rámuje web shora i zdola stejnou barvou. */
.footer-area {
    background: linear-gradient(180deg, #e8f4fb 0%, #d3e9f6 100%);
}

.main-footer.pat-hlavni {
    padding-top: 34px;
    padding-bottom: 30px;
}

.pat-sloupec h3 {
    color: #0d2a5e;
    font-size: 21px;
}

/* Svislé linky mezi sloupci. Jen na širokém displeji – jakmile se
   sloupce zalomí pod sebe, linka by visela ve vzduchu. */
@media only screen and (min-width: 992px) {
    /* Patička se roztáhne přes celou šířku okna, ne jen přes obsahový
       pruh. Sloupce jsou pak přesně po třetinách a dělicí čáry padnou
       na 1/3 a 2/3 stránky. Obsah drží od kraje vnitřní odsazení. */
    .pat-hlavni > .container {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    .pat-mrizka {
        margin-left: 0;
        margin-right: 0;
    }
    .pat-mrizka > [class*="col-"] {
        padding-left: 52px;
        padding-right: 52px;
    }
    .pat-mrizka > [class*="col-"] + [class*="col-"] {
        border-left: 1px solid #b6d6ea;
    }
    /* Rychlé odkazy stojí na ose své třetiny – včetně nadpisu a jeho
       podtržení. Plovoucí tlačítko „nahoru" (#scrollUp sedí 50 px od
       okraje okna) je díky tomu mimo ně samo od sebe. */
    .pat-mrizka > [class*="col-"]:last-child .pat-sloupec {
        text-align: center;
    }
    .pat-mrizka > [class*="col-"]:last-child .pat-sloupec h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    /* Celý seznam se scvrkne na šířku nejdelší položky a jako blok se
       vystředí; uvnitř jsou řádky zarovnané doleva, takže šipky stojí
       přesně pod sebou jako odrážky. */
    .pat-mrizka > [class*="col-"]:last-child .pat-odkazy {
        display: inline-block;
        text-align: left;
    }
    .pat-odkazy a {
        justify-content: flex-start;
    }
}

.pat-sloupec h3 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 10px;
}

.pat-sloupec h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    background: #0148bc;
}

.main-footer .pat-sloupec p {
    margin-top: 0;
}

/* Šablonové pravidlo .footer-widget p nuluje spodní mezeru a je silnější,
   proto i tady delší selektor. */
.main-footer .pat-sloupec .pat-uvod {
    margin-bottom: 16px;
}

/* ---------- Levý sloupec: údaje o provozovateli ---------- */
.pat-udaje {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pat-udaje li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #444444;
}

.pat-udaje li + li {
    margin-top: 10px;
}

.pat-ikona {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0148bc;
    color: #ffffff;
}

.pat-ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Prostřední sloupec: logo a Facebook ---------- */
.pat-stred {
    text-align: center;
}

/* Na širokém okně by byl prostřední sloupec hodně široký a řádky textu
   nepříjemně dlouhé. Obsah proto držíme v rozumné šířce na jeho ose. */
@media only screen and (min-width: 992px) {
    .pat-stred {
        max-width: 420px;
        margin: 0 auto;
    }
}

.pat-logo {
    display: inline-block;
    margin-bottom: 10px;
}

.main-footer .pat-stred p {
    line-height: 1.7;
}

/* Pravidlo o kousek výš nuluje horní mezeru všem odstavcům ve sloupci,
   proto je tenhle selektor delší – jinak by výzva lepila na text nad ní. */
.main-footer .pat-sloupec .pat-vyzva {
    margin-top: 12px;
    color: #0148bc;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Dva odkazy na Facebook – stránka školy a skupina Želvuška. Popisek
   pod kolečkem, ať je jasné, kam který vede. */
.pat-site {
    display: flex;
    justify-content: center;
    gap: 40px;
}

/*
   Odkaz je široký přesně jako kolečko. Popisek je vypodložený pod ním,
   takže do šířky nemluví – jinak by „Plavecká škola" blok roztáhl a
   šipka by pak mířila vedle kolečka, ne na něj.
*/
.pat-site-odkaz {
    position: relative;
    display: block;
    width: 54px;
}

.pat-site-kolecko {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #0148bc;
    background: #0148bc;
    color: #ffffff;
    font-size: 26px;
    transition: background 0.25s ease, color 0.25s ease;
}

.pat-site-odkaz:hover .pat-site-kolecko,
.pat-site-odkaz:focus .pat-site-kolecko {
    background: transparent;
    color: #0148bc;
}

.pat-site-nazev {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    line-height: 1.3;
    color: #44546f;
}

/* Odkaz na Facebook se šipkou. Šipka je jen ozdoba, proto ji držíme
   mimo tok textu – nesmí posunout ikonu z osy sloupce. */
.pat-fb {
    position: relative;
    display: inline-block;
    margin-top: 6px;
    /* Místo pro vypodložené popisky pod kolečky. */
    padding-bottom: 22px;
}

/*
   Šipky sedí u koleček, ne u celého bloku s popiskem – proto `top: -1px`
   a žádné svislé posouvání. Hrot kresby leží 27,6 px pod horní hranou
   plátna, což je přesně poloměr kolečka (54 / 2). Tím míří na jeho střed.
   Šířka je o kousek menší než volné místo vedle koleček, aby se ocas
   nedotýkal dělicí linky sloupce.
*/
.pat-sipka-fb {
    position: absolute;
    top: -1px;
    width: 104px;
    height: 41px;
    fill: none;
    stroke: #0148bc;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Pravá šipka míří doleva na Želvušku. */
.pat-sipka-vpravo {
    left: 100%;
    margin-left: -2px;
}

/* Levá je tatáž kresba překlopená zrcadlově – míří doprava na
   Plaveckou školu. */
.pat-sipka-vlevo {
    right: 100%;
    margin-right: -2px;
    transform: scaleX(-1);
}

/* Na užších displejích by šipka utekla mimo stránku. */
@media only screen and (max-width: 1199px) {
    .pat-sipka-fb {
        display: none;
    }
}

/* ---------- Pravý sloupec: rychlé odkazy ---------- */
.pat-odkazy {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pat-odkazy li + li {
    margin-top: 9px;
}

.pat-odkazy a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #444444;
    transition: color 0.25s ease;
}

.pat-odkazy a:hover,
.pat-odkazy a:focus {
    color: #0148bc;
}

.pat-ico-sipka {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #0148bc;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Spodní proužek ---------- */
/* Co nejnižší – je to jen podpis, ne obsah. */
.footer-bottom {
    padding: 5px 0;
}

.footer-bottom .copyright {
    margin: 0;
    text-align: center;
}

/* Na užších displejích jsou sloupce pod sebou a potřebují mezi sebou
   místo; prostřední se zarovná doleva jako zbytek. */
@media only screen and (max-width: 991px) {
    .pat-mrizka > [class*="col-"] + [class*="col-"] {
        margin-top: 38px;
    }
    .pat-stred {
        text-align: left;
    }
    .pat-stred .footer-icons ul {
        text-align: left;
    }
}

/*----------------------------------------*/
/*  Galerie na hlavní straně
/*----------------------------------------*/
/*
   Nadpis lepil na horní hranu sekce, zatímco pod ním bylo 88 px místa.
   Část té mezery jsme přesunuli nad nadpis – sekce je stejně vysoká jako
   dřív, jen nadpis stojí uprostřed volného místa místo na jeho kraji.
*/
.project-area {
    padding-top: 34px;
}

.project-area .section-title h2 {
    margin-bottom: 39px;
}

/* Text vedle videa v bloku „Vítejte v plavecké škole".
   Na střed vypadal roztřepeně – každý řádek jinak dlouhý. Do bloku má
   zarovnané oba okraje a čte se klidněji. Nadpisy zůstávají na střed. */
.appointment-area .appoint-content p {
    text-align: justify;
    /* Bez dělení slov by v úzkém sloupci vznikaly velké mezery mezi slovy. */
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* Pruh s čísly (spokojení klienti, léta zkušeností…) seděl dolní hranou
   přímo na barevných dlaždicích – vypadalo to, jako by na ně spadl.
   Pruh je proto nižší a pod ním je mezera. Šablonové třídy pt-110/pb-110
   v HTML zůstávají, používají je i jiné sekce. */
.fun-area {
    padding-top: 80px;
    padding-bottom: 80px;
}

.contact-area {
    padding-top: 40px;
}


/* Facebooková ikonka v tlačítku u Želvušky. Je to ikonový font, ne SVG,
   takže se řídí velikostí písma – tady jen o kousek větší než text. */
.reg-ico-fb {
    font-size: 16px;
    margin-right: 6px;
    vertical-align: -1px;
}


/* Mezi pruhem s cenami a platbou a sekcí Rychlé tipy zbývalo přes sto
   pixelů prázdna – šablonových 80 px pod přehledem kurzů plus vlastní
   odsazení tipů. Tipy proto začínají výš. */
.class-area.prehled-area {
    padding-bottom: 10px;
}


/* Rámeček u výběru kurzu byl vlasový, barva dlaždice se v něm ztrácela.
   Silnější linka je vidět na první pohled a ladí s rámečky v sekci
   Bezpečnost ve vodě. Vnější rozměr dlaždice se nemění – roste jen
   linka dovnitř. */
.reg-kurz-obsah {
    border-width: 3px;
    padding: 22px 14px 20px;
}


/* ---------- Článek v překryvném okně (Pro rodiče) ---------- */

/* Karta je sloupec, aby tlačítko drželo u spodní hrany i tam, kde je
   perex kratší. Karty bez článku tlačítko nemají a nic se jim nemění. */
.pr-clanek {
    display: flex;
    flex-direction: column;
}

.pr-clanek-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pr-clanek-vic {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 0 0;
    border: 0;
    background: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #0148bc;
    cursor: pointer;
    /* Šablona dává tlačítkům velké počáteční písmeno u každého slova –
       „Číst Více" je v češtině chyba. */
    text-transform: none;
    transition: color 0.2s ease;
}

.pr-clanek-vic:hover {
    color: #00adc6;
}

.pr-clanek-sipka {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.pr-clanek-vic:hover .pr-clanek-sipka {
    transform: translateX(3px);
}

/* Dovětek jen pro odečítače obrazovky – aby „Číst více" nebylo bez
   souvislosti, když si někdo nechá přečíst samotná tlačítka. */
.pr-jen-pro-cetbu {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Šablona má v shortcode/header.css vlastní vyskakovací okno s pevnou
   velikostí (width: 465px, height: 432px, position: absolute) a bílým
   písmem. Pro naše okno to vracíme na chování Bootstrapu, jinak by se
   článek nevešel a byl by nečitelný. */
.pr-okno .modal-dialog {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    max-width: 680px;
    margin: 1.75rem auto;
    color: inherit;
}

/* Tmavé pozadí za oknem kreslí Bootstrap sám, šablonové by se s ním
   sčítalo a bylo by skoro černé. */
.pr-okno {
    background-color: transparent;
}

.pr-okno-obsah {
    border: 0;
    border-radius: 0;
}

.pr-okno-hlava {
    position: relative;
    padding: 30px 62px 22px 34px;
    border-bottom: 1px solid #e6edf6;
}

/* Štítek je v kartě přilepený k fotce natvrdo, v okně má stát v textu. */
.pr-okno-hlava .pr-stitek {
    position: static;
    display: inline-block;
    margin-bottom: 12px;
}

.pr-okno-nadpis {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #0d2a5e;
    text-transform: none;
    margin: 0;
}

.pr-okno-zavrit {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: #f2f6fb;
    color: #44546f;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pr-okno-zavrit:hover {
    background: #ea4335;
    color: #ffffff;
}

.pr-okno-zavrit svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Delší článek se roluje uvnitř okna, ne celou stránkou. */
.pr-okno-telo {
    padding: 24px 34px 32px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}

.pr-okno-telo p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #44546f;
    margin: 0 0 16px;
}

.pr-okno-telo p:last-child {
    margin-bottom: 0;
}

.pr-okno-telo strong {
    color: #0d2a5e;
}

@media only screen and (max-width: 575px) {
    .pr-okno-hlava {
        padding: 24px 56px 18px 22px;
    }

    .pr-okno-nadpis {
        font-size: 20px;
    }

    .pr-okno-telo {
        padding: 20px 22px 26px;
    }
}


/* Plovoucí tlačítko „nahoru" se při otevřeném článku pletlo přes text.
   Dokud je okno otevřené, není potřeba. */
body.modal-open #scrollUp {
    display: none !important;
}


/* Štítek a nadpis okna stojí na střed. Odsazení hlavy je souměrné,
   jinak by nadpis stál o kus vlevo – místo pro křížek si drželo jen
   pravou stranu. */
.pr-okno-hlava {
    padding-left: 56px;
    padding-right: 56px;
    text-align: center;
}

/* Samotný článek je do bloku – oba okraje zarovnané, ať odstavce drží
   tvar. Bez dělení slov by v užším okně vznikaly velké mezery. */
.pr-okno-telo p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}


/* Odkaz uvnitř článku – ať je poznat, že se dá kliknout. */
.pr-okno-telo a {
    color: #0148bc;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pr-okno-telo a:hover {
    color: #00adc6;
}


/* Tlačítka „Číst více" mají každé svou barvu – stejnou trojici jako
   kurzy na hlavní straně a výběr kurzu v registraci. Barva se přenáší
   i na šipku, ta dědí currentColor. */
.pr-vic-picton {
    color: #1c9dec;
}

.pr-vic-picton:hover {
    color: #0e7fc4;
}

.pr-vic-cobalt {
    color: #0148bc;
}

.pr-vic-cobalt:hover {
    color: #013a99;
}

.pr-vic-cinnabar {
    color: #ea4335;
}

.pr-vic-cinnabar:hover {
    color: #c62d21;
}


/* Štítek nad fotkou i v okně nese barvu svého článku – stejnou jako
   tlačítko „Číst více" pod ním. */
.pr-stitek-picton {
    background: #1c9dec;
}

.pr-stitek-cobalt {
    background: #0148bc;
}

.pr-stitek-cinnabar {
    background: #ea4335;
}


/* ---------- Barvy témat u nejčastějších otázek ---------- */
/* Stejná trojice jako u kurzů na hlavní straně, u výběru kurzu
   v registraci a u článků: kojenci světle modrá, děti tmavě modrá,
   dospělí červená. Barva se bere z data-tema, takže v HTML není
   potřeba nic přidávat a při přestavbě otázek se nemá co ztratit. */

.faq-tema[data-tema="kojenci"] {
    border-color: #1c9dec;
    color: #0f6ea6;
}

.faq-tema[data-tema="kojenci"]:hover {
    border-color: #1c9dec;
    background: #f2f9fe;
}

.faq-tema[data-tema="kojenci"].je-vybrane {
    background: #1c9dec;
    border-color: #1c9dec;
    color: #ffffff;
}

.faq-tema[data-tema="kojenci"]:focus-visible {
    outline-color: #1c9dec;
}

.faq-tema[data-tema="deti"] {
    border-color: #0148bc;
    color: #0148bc;
}

.faq-tema[data-tema="deti"]:hover {
    border-color: #0148bc;
    background: #f1f5fc;
}

.faq-tema[data-tema="deti"].je-vybrane {
    background: #0148bc;
    border-color: #0148bc;
    color: #ffffff;
}

.faq-tema[data-tema="dospeli"] {
    border-color: #ea4335;
    color: #c62d21;
}

.faq-tema[data-tema="dospeli"]:hover {
    border-color: #ea4335;
    background: #fdf4f3;
}

.faq-tema[data-tema="dospeli"].je-vybrane {
    background: #ea4335;
    border-color: #ea4335;
    color: #ffffff;
}

.faq-tema[data-tema="dospeli"]:focus-visible {
    outline-color: #ea4335;
}

/* Znaménko + / − a najetí myší na otázku drží barvu své kategorie,
   ať je po přepnutí tématu poznat, ve které části člověk je. */
.faq-accordion .faq-item[data-tema="kojenci"] .faq-sign,
.faq-accordion .faq-item[data-tema="kojenci"] .faq-toggle:not(.collapsed) .faq-sign {
    color: #1c9dec;
}

.faq-accordion .faq-item[data-tema="kojenci"] .faq-toggle:hover {
    color: #0f6ea6;
}

.faq-accordion .faq-item[data-tema="deti"] .faq-sign,
.faq-accordion .faq-item[data-tema="deti"] .faq-toggle:not(.collapsed) .faq-sign {
    color: #0148bc;
}

.faq-accordion .faq-item[data-tema="deti"] .faq-toggle:hover {
    color: #0148bc;
}

.faq-accordion .faq-item[data-tema="dospeli"] .faq-sign,
.faq-accordion .faq-item[data-tema="dospeli"] .faq-toggle:not(.collapsed) .faq-sign {
    color: #ea4335;
}

.faq-accordion .faq-item[data-tema="dospeli"] .faq-toggle:hover {
    color: #c62d21;
}


/* Panel s polibkem pod vodou: text stojí uprostřed panelu, což je přesně
   tam, kde se obě tváře potkávají. Na širších obrazovkách proto text
   posuneme níž, ať je polibek vidět. Na mobilu je panel nízký a posun
   by vytlačil tlačítko ven, tam zůstává na místě. */
@media only screen and (min-width: 768px) {
    .hs-pusa .slider-content {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 992px) {
    .hs-pusa .slider-content {
        margin-top: 84px;
    }
}


/* ---------- Barvy bloků s říkankami ---------- */
/* Karty se střídají po třech barvách webu. Barevný je rámeček, kolečko
   s ikonou i vlnka pod textem; podklad zůstává světlý, ať se říkanka
   dobře čte. */

.pr-basnicka-picton {
    border-color: #1c9dec;
    background: #f2f9fe;
}

.pr-basnicka-picton .pr-basnicka-ikona {
    background: #dceffc;
    color: #0f6ea6;
}

.pr-basnicka-picton .pr-vlnka {
    stroke: #1c9dec;
}

.pr-basnicka-cobalt {
    border-color: #0148bc;
    background: #f1f5fc;
}

.pr-basnicka-cobalt .pr-basnicka-ikona {
    background: #dfe8f8;
    color: #0148bc;
}

.pr-basnicka-cobalt .pr-vlnka {
    stroke: #0148bc;
}

.pr-basnicka-cinnabar {
    border-color: #ea4335;
    background: #fdf5f4;
}

.pr-basnicka-cinnabar .pr-basnicka-ikona {
    background: #fbe3e0;
    color: #c62d21;
}

.pr-basnicka-cinnabar .pr-vlnka {
    stroke: #ea4335;
}


/* Rámeček bloků s říkankami je silnější, ať je barva vidět na první
   pohled – stejně jako u rámečků v Bezpečnosti ve vodě a u výběru
   kurzu. Linka roste dovnitř, odsazení se proto o dva pixely zmenší
   a vnější rozměr karty zůstává. */
.pr-basnicka {
    border-width: 3px;
    padding: 24px 18px 20px;
}


/* Bloky s říkankami mají různě dlouhé texty, takže každý končil jinde
   a mřížka vypadala rozházeně. Všechny mají být stejné, a to i mezi
   řadami – toho pružná mřížka (flex) neumí, řadu od řady srovná až
   grid s `grid-auto-rows: 1fr`. Sloupcové třídy v HTML tím přestávají
   platit, šířku určuje grid; zůstávají kvůli čitelnosti kódu. */
.pr-basnicky {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    margin: 0;
}

/* `align-self: stretch` ruší dřívější `flex-start` o pár set řádků výš –
   ten sloupce schválně nechával jen tak vysoké, jak je říkanka dlouhá. */
.pr-basnicky > [class*="col-"] {
    display: flex;
    align-self: stretch;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Karta vyplní celý sloupec. Bez `flex: 1` by se v pružném sloupci
   smrskla na šířku nejdelšího verše a mřížka by se rozpadla. */
.pr-basnicka {
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Vlnka odsedne až ke spodní hraně, ať je na všech kartách ve stejné
   výšce. Odstup od textu drží spodní okraj odstavce. */
.pr-basnicka p {
    margin-bottom: 18px;
}

.pr-basnicka .pr-vlnka {
    margin-top: auto;
}

@media only screen and (max-width: 991px) {
    .pr-basnicky {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .pr-basnicky {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Barvy dlaždic v sekci Ke stažení ---------- */
/* Papíry se barví podle toho, koho se týkají – tmavě modrá děti od tří
   let, světle modrá kojence a batolata, červená básničky pro všechny.
   Rodič tak svůj dokument najde podle barvy, ne až podle názvu. */

.pr-dokument-cobalt {
    border-color: #0148bc;
    background: #f1f5fc;
}

.pr-dokument-cobalt .pr-ico-velka {
    color: #0148bc;
}

a.pr-dokument-cobalt:hover,
a.pr-dokument-cobalt:focus {
    border-color: #0148bc;
    color: #0148bc;
}

.pr-dokument-picton {
    border-color: #1c9dec;
    background: #f2f9fe;
}

.pr-dokument-picton .pr-ico-velka {
    color: #0f6ea6;
}

a.pr-dokument-picton:hover,
a.pr-dokument-picton:focus {
    border-color: #1c9dec;
    color: #0f6ea6;
}

.pr-dokument-cinnabar {
    border-color: #ea4335;
    background: #fdf5f4;
}

.pr-dokument-cinnabar .pr-ico-velka {
    color: #c62d21;
}

a.pr-dokument-cinnabar:hover,
a.pr-dokument-cinnabar:focus {
    border-color: #ea4335;
    color: #c62d21;
}

/* Silnější linka, ať je barva vidět stejně jako u říkanek a u rámečků
   v Bezpečnosti ve vodě. Roste dovnitř, vnější rozměr se nemění. */
.pr-dokument {
    border-width: 3px;
    padding: 18px 20px;
}

/* Poznámka na konci není dokument, drží si šedý čárkovaný rámeček. */
.pr-dokument-pozn {
    border-color: #cbd7e6;
    background: #ffffff;
}


/* Najetí myší na dlaždici Ke stažení – dřív se změnil jen odstín rámečku
   a bylo těžké poznat, na čem člověk stojí. Teď se podklad prohloubí do
   barvy dokumentu, dlaždice se nadzvedne a dostane výraznější stín. */
a.pr-dokument {
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

a.pr-dokument:hover,
a.pr-dokument:focus-visible {
    transform: translateY(-3px);
}

a.pr-dokument-cobalt:hover,
a.pr-dokument-cobalt:focus-visible {
    background: #e2ebfa;
    box-shadow: 0 10px 22px rgba(1, 72, 188, 0.22);
}

a.pr-dokument-picton:hover,
a.pr-dokument-picton:focus-visible {
    background: #ddf0fd;
    box-shadow: 0 10px 22px rgba(28, 157, 236, 0.24);
}

/* Šipka se při najetí posune dolů, jako by soubor padal do počítače. */
a.pr-dokument .pr-ico-velka {
    transition: transform 0.2s ease;
}

a.pr-dokument:hover .pr-ico-velka,
a.pr-dokument:focus-visible .pr-ico-velka {
    transform: translateY(3px);
}


/* Tlačítko „Číst více" u článků vypadá stejně jako „Zjistit více"
   u kurzů na hlavní straně: plná barva, bílé písmo, ostré rohy
   a šipka za textem. Přebijeme tím dřívější textový odkaz. */
.pr-clanek-vic {
    display: inline-block;
    gap: 0;
    align-self: flex-start;
    margin-top: auto;
    padding: 13px 26px;
    border: 0;
    border-radius: 0;
    background: #1c9dec;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    text-transform: none;
    cursor: pointer;
    transition: background 0.25s ease;
}

.pr-clanek-vic:hover {
    color: #ffffff;
}

.pr-vic-picton {
    background: #1c9dec;
    color: #ffffff;
}

.pr-vic-picton:hover {
    background: #1580c4;
    color: #ffffff;
}

.pr-vic-cobalt {
    background: #0148bc;
    color: #ffffff;
}

.pr-vic-cobalt:hover {
    background: #013a9a;
    color: #ffffff;
}

.pr-vic-cinnabar {
    background: #ea4335;
    color: #ffffff;
}

.pr-vic-cinnabar:hover {
    background: #c62d21;
    color: #ffffff;
}

/* Text karty potřebuje pod sebou mezeru, aby tlačítko nelepilo na perex. */
.pr-clanek-text p {
    margin-bottom: 18px;
}


/* Štítky u článků byly plné barvy a přebíjely fotku i nadpis. Teď jsou
   jen obrysové na světlém podkladu – zůstávají čitelné, ale nekřičí.
   Průsvitné bílé pozadí je proto, že štítek leží na fotce a musí držet
   kontrast i nad tmavým místem. */
.pr-stitek {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid currentColor;
    font-weight: 700;
    letter-spacing: 0.6px;
    backdrop-filter: blur(2px);
}

.pr-stitek-picton {
    background: rgba(255, 255, 255, 0.88);
    color: #1c9dec;
}

.pr-stitek-cobalt {
    background: rgba(255, 255, 255, 0.88);
    color: #0148bc;
}

.pr-stitek-cinnabar {
    background: rgba(255, 255, 255, 0.88);
    color: #c62d21;
}

/* V hlavičce otevřeného článku leží štítek na bílé, průsvitnost tam
   nedává smysl – stačí čistě bílá s barevným obrysem. */
.pr-okno-hlava .pr-stitek {
    background: #ffffff;
}


/* Termíny u dětského kurzu jsou tři, ne dva – mřížka je proto na širších
   obrazovkách třísloupcová. Na tabletu se vejdou dva vedle sebe,
   na telefonu jde každý na svůj řádek. */
.reg-terminy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media only screen and (max-width: 1199px) {
    .reg-terminy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .reg-terminy {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Odkazy na Facebook v horním proužku ---------- */
/* Místo holé ikonky je u každého odkazu i popisek, ať je poznat, kam
   vede – jeden na stránku školy, druhý do skupiny Želvuška. Ikona stojí
   vlevo, text hned za ní. */
.top-right .top-fb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.top-right .top-fb i {
    font-size: 15px;
}

/* Rozestup mezi oběma odkazy je větší než mezi ikonou a jejím textem,
   aby se dvojice nesplývaly. */
.top-right ul li {
    margin: 0 0 0 22px;
}

.top-right ul li:first-child {
    margin-left: 0;
}

/* Popisky zůstávají i na telefonu – dvě holé ikonky „f" vedle sebe se
   od sebe nedají rozeznat a nikdo by nevěděl, kam vedou. Text se jen
   o kousek zmenší a rozestup zúží. */
@media only screen and (max-width: 767px) {
    .top-right .top-fb {
        font-size: 12.5px;
        gap: 5px;
    }

    .top-right ul li {
        margin-left: 14px;
    }
}


/* ---------- Karty Náš tým ---------- */
/* Šablona dávala panelu pevnou výšku v procentech fotky (zavřený 22 %,
   rozbalený 49 %, na tabletu ještě míň). Naše texty jsou delší, takže
   se konec věty schoval pod okraj karty.
   Panel se proto řídí obsahem, ne procenty: zavřený je přesně na funkci
   a jméno, po najetí doroste na výšku popisu. Animace zůstává – plynule
   se mění max-height odstavce, ne výška celého panelu.
   Selektory začínají `.instructor-area` schválně – responsive.css se
   načítá až po tomhle souboru a s kratším zápisem by přebil naše. */
.instructor-area .inst-content {
    height: auto;
    max-height: none;
    padding-bottom: 22px;
    transition: padding-bottom 0.5s ease 0s, background 0.5s ease 0s;
}

.instructor-area .single-instructor:hover .inst-content {
    height: auto;
    padding-bottom: 30px;
}

.instructor-area .inst-content h6 {
    margin-bottom: 0;
}

.instructor-area .single-instructor:hover .inst-content h6 {
    margin-bottom: 12px;
}

/* Popis je zavřený schovaný (na tabletu ho šablona rušila úplně,
   karta tím ztrácela smysl) a po najetí se rozbalí celý. */
.instructor-area .inst-content > p {
    display: block;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease 0s, opacity 0.5s ease 0s;
}

.instructor-area .single-instructor:hover .inst-content > p {
    max-height: 420px;
    opacity: 1;
}

/* Na dotykových zařízeních se myší najet nedá, panel by tam zůstal
   navždy zavřený. Proto je rovnou otevřený. */
@media (hover: none) {
    .instructor-area .inst-content {
        padding-bottom: 30px;
    }

    .instructor-area .inst-content h6 {
        margin-bottom: 12px;
    }

    .instructor-area .inst-content > p {
        max-height: 420px;
        opacity: 1;
    }
}


/* ---------- Maximální šířka stránky ---------- */
/* Na širokoúhlých (herních) monitorech se panely s fotkou natáhly na
   celou obrazovku. Fotky jsou v nich jako `background-size: cover`, takže
   při poměru 8:1 zbyl uprostřed jen extrémní detail – třeba jenom hlava.
   Stránka se proto nad 1600 px dál nenatahuje a vycentruje se; po
   stranách zůstane světlý pruh a jemný stín, aby bylo poznat, kde web
   končí. Na běžných monitorech (do 1600 px) se nemění vůbec nic. */
html {
    background: #e8eef5;
}

.wrapper {
    max-width: 1600px;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(1, 72, 188, 0.14);
}

/* Tlačítko „nahoru" je position: fixed, takže by na širokém monitoru
   odletělo k okraji obrazovky, daleko od stránky. Drží se u jejího
   pravého okraje. */
@media (min-width: 1601px) {
    #scrollUp {
        right: calc((100% - 1600px) / 2 + 50px);
    }
}

/* Přilepená hlavička je position: fixed, takže se počítá k obrazovce,
   ne ke stránce – bez tohohle by na širokém monitoru přečnívala. */
.header-area.stick {
    max-width: 1600px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}