/* =========================================================
   LIBERTY CLASSROOM - HOME PAGE v2
   Responsive, modern layout for home2.php
========================================================= */

/* ---------- Global ---------- */
#lc-home-v2 {
    font-family: "Inter", Arial, sans-serif;
    color:#333;
    line-height:1.65;
}

#lc-home-v2 section {
    width:100%;
    display:block;
}

h1,h2,h3,h4 {
    font-weight:700;
}

h1{font-size:42px;}
h2{font-size:32px;}
h3{font-size:24px;}
h4{font-size:18px;}

p { font-size:18px; margin-bottom:18px; }

/* ---------- BUTTONS ---------- */
.btn-primary {
    display:inline-block;
    padding:14px 32px;
    background:#ff7a00;
    color:#fff !important;
    border-radius:6px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:.25s;
    text-decoration:none !important;
    margin-top:20px;
}

.btn-primary:hover {
    background:#d96500;
    transform:translateY(-2px);
}

/* ================= HERO ================== */
.hero-banner{
    background:#111 url('/path/to/bg-placeholder.jpg') center/cover no-repeat;
    padding:140px 20px;
    color:#fff;
}

.hero-banner h1{
    max-width:900px;
    margin:auto;
    line-height:1.2;
}

.hero-banner p{
    max-width:750px;
    margin:20px auto;
    opacity:.9;
}

/* ================= INTRO LETTER ================= */
.intro-letter{
    max-width:900px;
    margin:auto;
    padding:80px 20px;
}

.intro-letter img{
    border-radius:8px;
}

/* ================= WHO AM I ================= */
.who-am-i .container{
    display:flex;
    align-items:center;
    gap:40px;
    max-width:1100px;
    margin:auto;
}

.who-am-i .boxed-intro{
    background:#fff7eb;
    padding:18px 22px;
    border-left:6px solid #ff7a00;
    margin-top:22px;
}

/* ================= ISSUES SECTION ================= */
.issue-list .issue-item h3{
    font-size:22px;
    margin-bottom:5px;
}

.issue-list .issue-item p{
    margin-top:10px;
}

/* ================= WHAT YOU LEARN ================= */
.course-grid ul li{
    font-size:18px;
    padding:6px 0;
}

/* ================= BENEFITS ================= */
.benefits .container,
.benefits div[style*="flex"]{
    text-align:center;
}

.benefits .container > div{
    flex:1 1 30%;
    max-width:330px;
}

.benefits h3{
    margin-top:20px;
    font-size:22px;
}

/* ================= PRICING ================= */
.pricing-columns > div {
    background:#fff;
    border:2px solid #eee;
    border-radius:10px;
    padding:32px;
    width:300px;
    transition:.3s;
}

.pricing-columns > div:hover{
    border-color:#ff7a00;
    transform:translateY(-5px);
}

.pricing-columns h3{
    font-size:24px;
    margin-bottom:10px;
}

/* ================= GUARANTEE ================= */
#lc-home-v2 section:last-child{
    text-align:center;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
========================================================= */

/* Tablets */
@media(max-width:992px){
    h1{font-size:36px;}
    h2{font-size:28px;}
    
    .who-am-i .container{
        flex-direction:column;
        text-align:center;
    }

    .who-am-i img{
        max-width:400px;
        margin:auto;
    }

    .pricing-columns{
        flex-direction:column;
        align-items:center;
    }

    .pricing-columns > div{
        width:90%;
        max-width:360px;
    }
}

/* Mobile */
@media(max-width:600px){
    h1{font-size:28px;}
    h2{font-size:24px;}
    p{font-size:16px;}

    .hero-banner{padding:100px 20px;}
    .hero-banner h1{font-size:28px;}

    .course-grid{
        columns:1;
    }

    .benefits .container{
        flex-direction:column !important;
    }

    .benefits .container > div{
        width:100%;
    }

    .pricing-columns > div {
        width:95%;
        margin-bottom:25px;
    }

    .btn-primary{
        width:100%;
        text-align:center;
    }
}