/* Custom Styles for Kiddo */

/* Base Adjustments */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Custom Selection */
::selection {
    background-color: #FF5E5B;
    color: white;
}

/* Image Hover Zoom effect on Gallery */
.gallery-img img {
    will-change: transform;
}

/* Float Animations for Hero */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.floating-shape {
    animation: float 6s ease-in-out infinite;
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite;
}

/* Pulse Animation for tags */
@keyframes pulse-soft {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 94, 91, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 94, 91, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 94, 91, 0);
    }
}

/* Train Animation */
@keyframes moveTrain {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.train-anim {
    display: inline-block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #FDFBF7;
}

::-webkit-scrollbar-thumb {
    background: #FFC15E;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FF5E5B;
}

/* Button hover effects */
a.btn-enroll {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

a.btn-enroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    z-index: -1;
}

a.btn-enroll:hover::before {
    left: 100%;
}

/* Hide scrollbar for gallery if scrollable */
.hide-scroll::-webkit-scrollbar {
    display: none;
}

.hide-scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.overlayG {
    background: linear-gradient(220deg, rgba(16, 24, 40, 0.00) 0%, #171e45 100%)
}



/* Admissions & Forms */
.admissions-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.tuition-box {
    margin: 30px 0;
    background: var(--white);
    border-left: 4px solid var(--sage-green);
}

.tuition-table {
    width: 100%;
    border-collapse: collapse;
}

.tuition-table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.1rem;
}

.tuition-table .price {
    text-align: right;
    font-weight: 700;
    color: var(--charcoal);
    font-size: 1.25rem;
}

.tuition-table .price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: #777;
}

.tuition-note {
    font-size: 0.85rem;
    color: #777;
    margin-top: 10px;
    font-style: italic;
}

.checklist li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
}

.checklist i {
    color: var(--sage-green);
    font-size: 1.2rem;
}

.form-wrapper {
    background: #fff;
    border-top: 5px solid var(--warm-amber);
}

.form-desc {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

input,
select {
    width: 100%;
    min-height: 44px;
    /* Per UX specs */
    padding: 10px 15px !important;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--sage-green);
    box-shadow: 0 0 0 3px var(--sage-light);
}

.form-status {
    margin-top: 15px;
    font-weight: 500;
    text-align: center;
    display: none;
    padding: 10px;
    border-radius: 8px;
}

.status-success {
    background: #d4edda;
    color: #155724;
    display: block;
}

.status-error {
    background: #f8d7da;
    color: #721c24;
    display: block;
}

/* Swiper Pagination Overrides */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.5 !important;
    width: 10px !important;
    height: 10px !important;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #F28522 !important;
    /* primary color */
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 5px !important;
}


.card-infant {
    background-color: #2D74FF;
}

/* Blue */
.card-playgroup {
    background-color: #FF6B35;
}

/* Orange */
.card-nursery {
    background-color: #4CAF50;
}

/* Green */
.card-lkg {
    background-color: #FFBC42;
}

/* Yellow */
.card-ukg {
    background-color: #8E44AD;
}

/* Purple */
.card-daycare {
    background-color: #00A896;
}

/* Teal */
.sep svg {
    width: 18px;
    height: 100%;
    position: absolute;
    left: -18px;
    top: 0;
}

.admissions {
    background: url(../images/playschol.png) no-repeat left center;
    background-size: cover;
}

.cardover {
    overflow: hidden;
}