/* ========================================================= */
/* GLOBAL STYLES */
/* ========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", sans-serif;
    background: linear-gradient(135deg, #eae6ff, #d7d9ff);
    overflow-x: hidden; /* horizontal scroll हटाने के लिए */
}

/* ========================================================= */
/* AIMLINE BOX - 95% SCREEN WIDTH */
/* ========================================================= */
.aimline-box {
    width: 95%;
    margin: 5px auto; /* पहले 40px था, अब 30px */
    padding: 35px;
    background: #ffffffcc;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    overflow-x: hidden;
}

/* ========================================================= */
/* MAIN HEADING */
/* ========================================================= */
.main-heading {
    font-size: 30px;
    font-weight: 800;
    color: #2d2787;
    line-height: 1.4;
    word-break: break-word;
}

.emoji {
    font-size: 40px;
    margin-right: 10px;
}

.star {
    font-size: 38px;
    margin-left: 5px;
}

/* ========================================================= */
/* SUB PARAGRAPH */
/* ========================================================= */
.sub-para {
    margin-top: 18px;
    font-size: 19px;
    color: #4a4a4a;
    line-height: 1.6;
}

/* ========================================================= */
/* LINE SECTION (vertical line + text) */
/* ========================================================= */
.line-section {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 25px;
    flex-wrap: wrap; /* Mobile ke liye wrap */
}

.vertical-line {
    width: 4px;
    background: #3d3daa;
    height: 120px;
    border-radius: 10px;
}

.mid-heading {
    font-size: 22px;
    font-weight: 700;
    color: #2b2b2b;
}

.small-para {
    margin-top: 5px;
    font-size: 16px;
    color: #555;
}

/* ========================================================= */
/* WHATSAPP BUTTON */
/* ========================================================= */
.whatsapp-btn {
    margin-top: 35px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    background: #5c52ff;
    color: white;
    padding: 10px 18px; /* Desktop me chota button */
    font-size: 16px;    /* Desktop me chota */
    font-weight: 600;

    border-radius: 10px;
    text-decoration: none;
    transition: 0.2s;
    justify-content: flex-start; /* Desktop left align */
}

.whatsapp-btn:hover {
    background: #473dcd;
}

.wa-icon {
    width: 22px; /* Desktop me chota */
}

/* ========================================================= */
/* TABLET RESPONSIVE */
/* ========================================================= */
@media (max-width: 900px) {
    .main-heading {
        font-size: 26px;
    }
    .sub-para {
        font-size: 18px;
    }
    .vertical-line {
        height: 110px;
    }
}

/* ========================================================= */
/* MOBILE RESPONSIVE */
/* ========================================================= */
@media (max-width: 600px) {
    .aimline-box {
        width: 95%;
        padding: 20px;
    }

    .main-heading {
        font-size: 22px;
        line-height: 1.35;
    }

    .emoji, .star {
        font-size: 28px;
    }

    .sub-para {
        font-size: 16px;
    }

    .line-section {
        gap: 12px;
    }

    .vertical-line {
        height: 90px;
    }

    .mid-heading {
        font-size: 18px;
    }

    .small-para {
        font-size: 14px;
    }

    /* Mobile me WhatsApp button center + full width */
    .whatsapp-btn {
        display: flex;
        width: 100%;
        justify-content: center;
        font-size: 18px;
        padding: 12px;
    }

    .wa-icon {
        width: 22px;
    }
}


/* ========================================================= */
/* FEATURES SECTION */
/* ========================================================= */
.features-section {
    width: 95%;
    margin: 5px auto; /* पहले 60px था, अब 30px */
    padding: 30px;
    background: #fff;
    border-radius: 16px;
}

.features-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 40px;
}

/* Features Boxes Grid */
.features-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

/* Single Feature Box */
.feature-box {
    background: #fff;
    border-top: 4px solid #5c52ff; /* top border */
    border-radius: 12px;
    padding: 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Logo on top border */
.feature-logo {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 50%;
    border: 2px solid #5c52ff;
}

/* Feature Title */
.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #2b2b2b;
    margin-top: 25px;
}

/* Feature Description */
.feature-desc {
    font-size: 16px;
    color: #555;
    margin-top: 8px;
    line-height: 1.5;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
    .features-section {
        padding: 20px;
    }

    .features-heading {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .feature-box {
        padding: 15px;
    }

    .feature-logo {
        font-size: 24px;
        top: -15px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-desc {
        font-size: 14px;
    }
}


/* ========================================================= */
/* PSBI SECTION */
/* ========================================================= */
.psbi-section {
    width: 95%;
    margin: 5px auto; /* Aimline & Features section se similar gap */
    padding: 30px;
    background: #fff;
    border-radius: 16px;
}

.psbi-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 35px;
}

/* PSBI Boxes Grid */
.psbi-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

/* Single PSBI Box */
.psbi-box {
    background: #fff;
    border-top: 4px solid #5c52ff;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* PSBI Box Title */
.psbi-title {
    font-size: 20px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 10px;
}

/* PSBI Box Description */
.psbi-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
    .psbi-section {
        padding: 20px;
    }

    .psbi-heading {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .psbi-box {
        padding: 15px;
    }

    .psbi-title {
        font-size: 18px;
    }

    .psbi-desc {
        font-size: 14px;
    }
}


.contact-section {
    width: 95%;
    margin: 5px auto;
    padding: 20px 0;
    text-align: center;
	
	background:#fff;
	border-radius:16px;
}

.section-heading {
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 30px;
}

/* Flex container for boxes */
.contact-boxes {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual box styling */
.contact-box {
    background: #fff;
    border-top: 4px solid #5c52ff;
    border-radius: 12px;
    padding: 40px 20px 20px 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 250px;
}

.contact-box:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Logo on top border */
.box-logo {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50%;
    padding: 5px;
}

.box-logo img {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
}

.contact-box h2 {
    font-size: 20px;
    font-weight: 700;
    color: #2b2b2b;
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact-box p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .contact-boxes {
        gap: 15px;
    }

    .contact-box {
        width: 45%;
    }
}

@media (max-width: 600px) {
    .section-heading {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .contact-box {
        width: 90%;
        padding: 30px 15px 15px 15px;
    }

    .contact-box h2 {
        font-size: 18px;
    }

    .contact-box p {
        font-size: 14px;
    }

    .box-logo img {
        width: 40px;
        height: 40px;
    }
}


/* ========================================================= */
/* PRICES SECTION */
/* ========================================================= */
.prices-section {
    width: 95%;
    margin: 5px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
}

.prices-section .section-heading {
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    text-align: center;
    margin-bottom: 20px;
}

.prices-para {
    font-size: 16px;
    color: #555;
    text-align: center;
    margin-bottom: 30px;
}

.table-container {
    overflow-x: auto; /* Mobile me scroll ke liye */
}

.prices-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.prices-table th,
.prices-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    font-size: 16px;
    color: #2b2b2b;
}

/* Table Head */
.prices-table th {
    background: #5c52ff;
    color: #fff;
    font-weight: 700;
}

/* Zebra Rows */
.prices-table tbody tr:nth-child(odd) {
    background: #f2f2ff;
}

.prices-table tbody tr:nth-child(even) {
    background: #ffffff;
}

/* Responsive */
@media (max-width: 600px) {
    .prices-section {
        padding: 20px;
    }

    .prices-section .section-heading {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .prices-para {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .prices-table th,
    .prices-table td {
        font-size: 14px;
        padding: 10px;
    }
}


/* ========================================================= */
/* DISCOUNT SECTION */
/* ========================================================= */
.discount-section {
    width: 95%;
    margin: 5px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
}

.discount-section .section-heading {
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 15px;
}

.discount-para {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

/* Price Boxes Grid */
.discount-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Single Discount Box */
.discount-box {
    background: #fff;
    border-top: 4px solid #ff6b6b; /* Top border color */
    border-radius: 12px;
    padding: 25px 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.discount-box:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Price Boxes Backgrounds */
.discount-box.box1 { background: #ffe6e6; border-top-color: #ff4d4d; }
.discount-box.box2 { background: #e6f7ff; border-top-color: #3399ff; }
.discount-box.box3 { background: #e6ffe6; border-top-color: #33cc33; }
.discount-box.box4 { background: #fff0e6; border-top-color: #ff9933; }

/* Info Boxes Backgrounds */
.info-box.info1 { background: #fff0f0; border-top-color: #ff6666; }
.info-box.info2 { background: #f0fff0; border-top-color: #66cc66; }


.discount-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 10px;
}

.discount-box p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* Note */
.discount-note {
    font-size: 14px;
    color: #555;
    margin: 20px 0;
}

/* Info Boxes */
.discount-info-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.info-box {
    background: #fff;
    border-top: 4px solid #ff6b6b;
    border-radius: 12px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.info-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 10px;
}

.info-box p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .discount-boxes {
        gap: 15px;
    }

    .discount-info-boxes {
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .discount-section {
        padding: 20px;
    }

    .discount-section .section-heading {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .discount-para {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .discount-box, .info-box {
        width: 90%;
        padding: 20px;
    }

    .discount-box h3 {
        font-size: 18px;
    }

    .discount-box p,
    .info-box p {
        font-size: 14px;
    }

    .info-box h3 {
        font-size: 16px;
    }
}


/* book section */
.books-section {
    width: 95%;
    margin: 5px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
}

.books-section .section-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 35px;
}
.books-box:nth-child(1) { background: #ffe5e5; }   /* Hindi */
.books-box:nth-child(2) { background: #e5f7ff; }   /* English */
.books-box:nth-child(3) { background: #fff0e5; }   /* Math */
.books-box:nth-child(4) { background: #e5ffe5; }   /* Science */
.books-box:nth-child(5) { background: #fff5e5; }   /* Social Study */
.books-box:nth-child(6) { background: #f0e5ff; }   /* Computer */
.books-box:nth-child(7) { background: #ffe5f7; }   /* GK */
.books-box:nth-child(8) { background: #e5fff0; }   /* Hindi Grammar */
.books-box:nth-child(9) { background: #f7ffe5; }   /* English Grammar */
.books-box:nth-child(10) { background: #e5f7ff; }  /* Conversation */
.books-box:nth-child(11) { background: #fff0f5; }  /* Cursive Writing */
.books-box:nth-child(12) { background: #f0fff0; }  /* Hindi Writing */
.books-box:nth-child(13) { background: #fff5f0; }  /* Drawing */
.books-box:nth-child(14) { background: #f0f5ff; }  /* Moral Science */
.books-box:nth-child(15) { background: #ffe5f0; }  /* Mental Math */
.books-box:nth-child(16) { background: #e5f0ff; }  /* EVS */
.books-box:nth-child(17) { background: #f5ffe5; }  /* Sanskrit */
.books-box:nth-child(18) { background: #fff0e5; }  /* Urdu */
.books-box:nth-child(19) { background: #e5fff5; }  /* Translation */
.books-box:nth-child(20) { background: #f0ffe5; }  /* Reasoning */
.books-box:nth-child(21) { background: #ffe5f5; }  /* Competitive Math */
.books-box:nth-child(22) { background: #e5f0f7; }  /* Competitive GK */
.books-box:nth-child(23) { background: #f7ffe5; }  /* General Grammar & Composition */

/* Boxes grid */
.books-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Individual box */
.books-box {
    background: #fdfdfd;
    border-top: 4px solid #5c52ff;
    border-radius: 12px;
    padding: 25px 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.books-box:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Number on top border */
.box-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    font-weight: 700;
    font-size: 18px;
    color: #5c52ff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 2px solid #5c52ff;
}

/* Box heading & paragraph */
.books-box h3 {
    margin-top: 25px;
    font-size: 20px;
    font-weight: 700;
    color: #2b2b2b;
}

.books-box p {
    margin-top: 8px;
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
    .books-box {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .books-box {
        padding: 15px;
    }
    .books-box h3 {
        font-size: 18px;
    }
    .books-box p {
        font-size: 14px;
    }
    .box-number {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
    }
}

/* ========================================================= */
/* PLAY SECTION BOOKS (FULL CSS) */
/* ========================================================= */

.play-books-section {
    width: 95%;
    margin: 5px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
}

.play-books-section .section-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #2d2787;
    margin-bottom: 10px;
}

.play-para {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

/* Grid Layout */
.play-books-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Main Play Box Design */
.play-box {
    border-left: 5px solid #ff6666;   /* Left border */
    border-right: 5px solid #ff6666;  /* Right border */
    border-radius: 10px;
    padding: 20px 20px 20px 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.10);
    transition: 0.3s ease;
}

/* Dark Different Background Colors */
.play-box:nth-child(1) { background: #2b2b52; }
.play-box:nth-child(2) { background: #33334d; }
.play-box:nth-child(3) { background: #263159; }
.play-box:nth-child(4) { background: #3a3a6a; }
.play-box:nth-child(5) { background: #2e2e46; }
.play-box:nth-child(6) { background: #1f2a44; }
.play-box:nth-child(7) { background: #2c3e50; }
.play-box:nth-child(8) { background: #3b3b58; }
.play-box:nth-child(9) { background: #263238; }
.play-box:nth-child(10) { background: #2f3640; }
.play-box:nth-child(11) { background: #413c69; }
.play-box:nth-child(12) { background: #2d3436; }
.play-box:nth-child(13) { background: #34495e; }
.play-box:nth-child(14) { background: #3d425c; }
.play-box:nth-child(15) { background: #2c2c54; }

/* Text White */
.play-box h3,
.play-box p {
    color: #ffffff;
}

/* Hover Effect */
.play-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {

    .play-books-section {
        padding: 20px;
    }

    .play-books-section .section-heading {
        font-size: 22px;
    }

    .play-para {
        font-size: 14px;
    }

    .play-box {
        padding: 18px;
    }

    .play-box h3 {
        font-size: 16px;
    }

    .play-box p {
        font-size: 14px;
    }
}



/* Container for the whole section */
.order-section {
   width:95%;
    margin: 5px auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(113, 90, 255, 0.15);
}

/* Heading */
.order-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: #3b0d90;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
	
}

/* Steps container - flex row for three boxes */
.order-steps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 35px;
}

/* Single step box */
.order-step {
    flex: 1; /* equal width */
    display: flex;
    align-items: center;
    gap: 15px;

    background: #ffffffc7;
    padding: 18px 20px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on step */
.order-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(113, 90, 255, 0.3);
}

/* Icon container */
.step-icon {
    font-size: 30px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 5px solid #715aff;
    border-right: 5px solid #715aff;
    color: #715aff;
    flex-shrink: 0;
}

/* Step text container */
.step-text {
    display: flex;
    flex-direction: column;
}

/* Step title */
.step-text strong {
    font-size: 18px;
    color: #2c136a;
    margin-bottom: 5px;
}

/* Step description */
.step-text span {
    font-size: 14px;
    color: #555555;
}

/* Buttons container */
.order-buttons {
    display: flex;
    gap: 15px;
}

/* Primary button - eBook देखें */
.btn-primary {
    background: linear-gradient(90deg, #715aff 0%, #9f6fff 100%);
    color: white;
    border: none;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 15px rgba(113, 90, 255, 0.3);
    transition: background 0.3s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #9f6fff 0%, #715aff 100%);
}

/* Secondary button - वेबसाइट पर जाएं */
.btn-secondary {
    background: #ddd;
    color: #555;
    border: none;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
    text-decoration: none;
}

.btn-secondary:hover {
    background: #ccc;
}

/* Icon inside buttons */
.btn-icon {
    font-size: 18px;
}

/* Responsive: On smaller screens stack steps vertically */
@media (max-width: 768px) {
    .order-steps {
        flex-direction: column;
    }

    .order-step {
        justify-content: flex-start;
        width: 100%;
    }

    .order-buttons {
        flex-direction: column;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}


.aimline-section {
  background-color: #fff6f9; /* हल्का पेस्टल बैकग्राउंड */
  padding: 50px 20px;
  border-radius: 18px;
  max-width: 95%;
  margin: 5px auto;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #201d30;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.aimline-section h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #715aff; /* हेडिंग के लिए आकर्षक रंग */
}

.aimline-section p {
  font-size: 16px;
  color: #665c7b;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}



/* Hidden state by default */
.scroll-element {
    opacity: 0;
    transform: translateY(50px); /* नीचे से शुरू */
    transition: all 0.8s ease-out;
}

/* Visible state when scrolled into view */
.scroll-element.visible {
    opacity: 1;
    transform: translateY(0);
}