@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800');

* {
    box-sizing: border-box;
    margin: 0;
}

html,
body {
    margin: 0;
    background: white;
    font-family: 'Montserrat', helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.link {
    display: block;
    text-align: center;
    color: #777;
    text-decoration: none;
    padding: 10px;
}

.movie_card {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1000px;
    min-height: 400px;
    height: auto;
    margin: 80px auto;
    overflow: visible;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0px 0px 120px -25px rgba(0, 0, 0, 0.5);

    &:hover {
        transform: scale(1.02) translateY(-5px);
        box-shadow: 0px 15px 80px -25px rgba(0, 0, 0, 0.5);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .info_section {
        position: relative;
        width: 100%;
        height: 100%;
        background-blend-mode: multiply;
        z-index: 2;
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        .movie_header {
            position: relative;
            padding: 25px;
            height: auto;

            h1 {
                color: black;
                font-weight: 400;
            }

            h2 {
                color: black;
                font-weight: 700;
                margin-bottom: 10px;
            }

            h3 {
                color: #555;
                font-weight: 400;
                font-size: 1.1rem;
            }

            .type {
                display: inline-block;
                color: #959595;
                margin-left: 10px;
            }

            .locandina {
                position: relative;
                float: left;
                margin-right: 20px;
                height: 120px;
                box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
            }
        }

        .movie_desc {
            padding: 25px;
            height: auto;
            flex-grow: 1;

            .text {
                color: #545454;
            }
        }

        .btn {
            margin: 0 25px 25px 25px;
            align-self: flex-start;
        }

        .movie_social {
            height: 10%;
            padding-left: 15px;
            padding-bottom: 60px;

            ul {
                list-style: none;
                padding: 0;

                li {
                    display: inline-block;
                    color: rgba(0, 0, 0, 0.3);
                    transition: color 0.3s;
                    transition-delay: 0.15s;
                    margin: 0 10px;

                    &:hover {
                        transition: color 0.3s;
                        color: rgba(0, 0, 0, 0.7);
                    }

                    i {
                        font-size: 19px;
                        cursor: pointer;
                    }
                }
            }
        }
    }



    .blur_back {
        position: absolute;
        top: 0;
        z-index: 1;
        height: 100%;
        right: 0;
        background-size: cover;
    }


}

@media screen and (min-width: 768px) {
    .movie_header {
        width: 65%;
    }

    .movie_desc {
        width: 65%;
        /* Increased width for better text flow */
    }

    .info_section {
        background: linear-gradient(to right, #e5e6e6 50%, transparent 100%);
    }

    .blur_back {
        width: 70%;
        background-position: 100% 50% !important;
        /* Moved from -100% to 0% to shift image right */
    }
}

@media screen and (max-width: 768px) {
    .movie_card {
        width: 95%;
        margin: 70px auto;
        min-height: 400px;
        /* Increased from 350px */
        height: auto;
    }

    .blur_back {
        width: 100%;
        background-position: 50% 50% !important;
    }

    .movie_header {
        width: 100%;
        margin-top: 85px;
    }

    .movie_desc {
        width: 100%;
    }

    .info_section {
        background: linear-gradient(to top, #e5e6e6 50%, transparent 100%);
        display: inline-grid;
    }
}


.bright_back {
    background-image: url("../img/lessons/private/trial01.jpg");
}

.back_p02 {
    background-image: url("../img/lessons/private/P02.jpg");
}

.back_p03 {
    background-image: url("../img/lessons/private/P03.jpg");
    background-position: 100% 50% !important;
}

.back_p04 {
    background-image: url("../img/lessons/private/P04.jpg");

}

.back_g01 {
    background-image: url("../img/lessons/group/group01.JPG");
}

.back_g02 {
    background-image: url("../img/lessons/group/group02.jpeg");
}

.back_g03 {
    background-image: url("../img/lessons/group/group03.JPG");

}

.back_g04 {
    background-image: url("../img/lessons/group/group04.JPG");

}

.back_k01 {
    background-image: url("../img/lessons/kids/kids06.JPG");
}

.back_k02 {
    background-image: url("../img/lessons/kids/kids02.JPG");
}

.back_k03 {
    background-image: url("../img/lessons/kids/kids03.jpeg");
}

.back_k04 {
    background-image: url("../img/lessons/kids/kids04.JPG");
}

/*** Private Lessons Page ***/

/* Info Bar Icons */
.service .fa-certificate,
.service .fa-swimmer,
.service .fa-calendar-check {
    transition: transform 0.5s ease;
}

.service .bg-white:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* Course Rows */
.service .bg-light {
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

.service .bg-light:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: #fff !important;
    /* Lighter on hover */
    border-color: var(--bs-primary);
    transform: translateY(-5px);
}

/* Image Hover Zoom */
.service .rounded.overflow-hidden img {
    transition: transform 0.8s ease;
}

.service .rounded.overflow-hidden:hover img {
    transform: scale(1.1);
}

/* Typography Enhancements */
.service h2 {
    color: var(--bs-dark);
    font-weight: 700;
}

/* Floating Info Cards */
@keyframes floatY {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.info-card-item {
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    animation: floatY 4s ease-in-out infinite;
    cursor: pointer;
}

/* Pause animation and lift on hover */
.info-card-item:hover {
    animation-play-state: paused;
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background: var(--bs-primary) !important;
}

/* Change text and icon colors on hover */
.info-card-item:hover h5 {
    color: #fff;
}

.info-card-item:hover i {
    color: #fff !important;
    transform: scale(1.2) rotate(360deg);
    /* Special spin for the icon */
    transition: all 0.5s ease;
}

/* Stagger the animations */
.col-md-4:nth-child(1) .info-card-item {
    animation-delay: 0s;
}

.col-md-4:nth-child(2) .info-card-item {
    animation-delay: 0.5s;
}

.col-md-4:nth-child(3) .info-card-item {
    animation-delay: 1s;
}

/* Animated Private Lessons Title */
@keyframes fadeInUpTitle {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.private-lesson-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    color: var(--bs-dark);
    text-align: center;
    margin-bottom: 3rem;
    cursor: default;
    animation: fadeInUpTitle 1s ease-out both;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.private-lesson-title::after {
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    bottom: 0;
    left: 50%;
    background-color: var(--bs-primary);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.private-lesson-title:hover {
    color: var(--bs-primary);
    transform: scale(1.05);
    /* Slight zoom on hover */
    transition: all 0.3s ease;
}

.private-lesson-title:hover::after {
    width: 80%;
    /* Underline expands on hover */
}

strong {
    font-size: 1.2rem;
}

/* Video Hero Section */
.video-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    width: 100%;
}

.hero-video {
    position: absolute;
    top: 50%;
    /* Revert to center for general case, specific helper class might be better but I'll edit globally for now as context implies tweaking this specific video */
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-55%);
    /* Shifted up (-65% instead of -50%) to crop top */
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Dark overlay */
    z-index: 1;
}

/* Mobile Responsive Fix for Movie Cards */
@media screen and (max-width: 768px) {
    .movie_card {
        display: flex;
        flex-direction: column-reverse;
        /* Image on top, Content on bottom */
        width: 90% !important;
        /* Ensure it fits with some margin */
        min-height: auto !important;
        height: auto !important;
        margin: 30px auto !important;
    }

    .movie_card .blur_back {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
        border-radius: 10px 10px 0 0 !important;
        /* Top corners rounded */
        background-position: center center !important;
        top: auto;
        right: auto;
        left: auto;
    }

    .movie_card .info_section {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        /* Solid white background */
        border-radius: 0 0 10px 10px !important;
        /* Bottom corners rounded */
        background-blend-mode: normal !important;
        opacity: 1 !important;
        padding-bottom: 20px;
        display: block !important;
    }

    .movie_card .movie_header {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 20px;
    }

    .movie_card .movie_desc {
        width: 100% !important;
        padding: 0 20px 20px 20px;
    }

    .movie_card .btn {
        margin: 0 20px 20px 20px;
    }
}

/* Fix for Social Icons in Mobile Navbar */
@media (max-width: 991px) {
    .navbar-collapse .team-icon {
        padding: 10px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        justify-content: center !important;
    }

    .navbar-collapse .team-icon .btn-light {
        background: var(--bs-primary);
        color: white;
    }
}