/* ================================================
   RESPONSIVE STYLES - Capricorn Platform
   ================================================ */

/* ---- Tablets & Small Laptops (max 1024px) ---- */
@media screen and (max-width: 1024px) {
    /* Hide desktop nav, show burger */
    #div-b { display: none; }
    #div-a { width: 50%; }
    #div-c {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
    }
    #start { display: none; }
    #burger {
        display: flex;
    }
    #idlogo { font-size: 20px; color: #00d2ff; }

    /* Hero — tighten up but stay 2-col */
    #sec1-inner { min-height: 60vh; gap: 20px; }
    #jobs { font-size: 34px; }
    #talk { font-size: 16px; }
    #imgbox { height: 360px; }

    /* Stack sec7 (Why Invest) */
    #sec7-inner { flex-direction: column; align-items: stretch; }
    #sec7box1, #sec7box2 { width: 100%; padding: 3% 0; }

    /* Stack sec4 (About) */
    #sec4-inner { flex-direction: column; align-items: stretch; }
    #sec4box1, #sec4box2 { width: 100%; padding: 3% 0; }
    #imagebox { height: 300px; }

    /* Features grid: 2 columns */
    #features li { width: 46%; margin: 0; }
    #features2 li { width: 46%; margin: 0; }

    #about { font-size: 36px; }
    #beginner { font-size: 16px; }
}

/* ---- iPad / Portrait Tablets (max 820px) ---- */
@media screen and (max-width: 820px) {
    /* Hero — stack vertically */
    #sec1-inner {
        flex-direction: column;
        min-height: auto;
        gap: 20px;
        padding-bottom: 40px;
    }
    #sec1box1, #sec1box2 { width: 100%; padding: 0; }
    #sec1box1 { text-align: center; align-items: center; }
    #jobs { font-size: 32px; }
    #talk { font-size: 15px; }
    #explore { align-self: center; }
    #imgbox { height: 280px; }

    #sec5-inner { flex-direction: column; }
    #features { flex-direction: column; gap: 15px; }
    #features li { width: 100%; margin: 0; }

    #feature { gap: 15px; }
    #feature li { padding: 5%; }

    .map-container { flex-direction: column; gap: 20px; }
    .contact-box { width: 100%; }

    #about { font-size: 28px; }
    #sec3 { display: none; }
    #imagebox { height: 240px; }
    
    /* Footer */
    #innerfootsec { flex-wrap: wrap; justify-content: space-between; }
    #innerfootsec div { width: 45%; margin: 2% 0; }
}

/* ---- Mobile Landscape / Small Tablets (max 600px) ---- */
@media screen and (max-width: 600px) {
    #div-a { width: 60%; }
    #div-c { width: 40%; }
    #idlogo { font-size: 18px; }

    #sec1 { padding: 70px 0 40px; }
    #sec1box1 { text-align: center; }
    #explore { width: fit-content; margin: 0 auto; }

    #sec9-inner { padding: 0 15px; }
    #features2 { flex-direction: column; gap: 15px; }
    #features2 li { width: 100%; margin: 0; }

    .faq { padding: 0 10px; }
}

/* ---- Mobile Phones (max 480px) ---- */
@media screen and (max-width: 480px) {
    /* Header */
    #inner-header { width: 95%; }
    #div-a { width: 65%; }
    #div-c { width: 35%; }
    #idlogo { font-size: 14px; padding: 0; }

    /* Hero */
    #sec1 { padding: 70px 0 30px; }
    #sec1box1, #sec1box2 { padding: 0; }
    #sec1box1 { text-align: center; }
    #jobs { font-size: 22px; margin-bottom: 12px; }
    #talk { font-size: 14px; }
    #explore { width: fit-content; margin: 0 auto; padding: 12px 20px; font-size: 14px; }
    #imgbox { height: 220px; }

    /* About */
    #about { font-size: 22px; }
    #beginner { font-size: 13px; }
    #imagebox { height: 200px; }

    /* Features */
    #features li, #feature li { border-radius: 14px; padding: 6%; }
    #features { flex-direction: column; gap: 12px; }
    #features li { width: 100%; }
    .expla { font-size: 16px; }
    #expla { font-size: 13px; }

    /* Contact */
    #features2 li { border-radius: 14px; }
    .contact-box { padding: 20px 15px; }

    /* Footer */
    #innerfootsec { flex-wrap: wrap; }
    #innerfootsec div { width: 100%; margin: 3% 0; }
    #footbox1, #footbox2, #footbox3, #footbox4 { text-align: center; }
    #footlist { align-items: center; }

    /* FAQ */
    .faq-question h1 { font-size: 14px; }
    .faq-answer p { font-size: 13px; }
}

/* ---- Small Phones (max 375px) ---- */
@media screen and (max-width: 375px) {
    #jobs { font-size: 22px; }
    #idlogo { display: none; }
    .expla { font-size: 15px; }
}


/* ================================================
   LOGIN & REGISTER PAGE RESPONSIVE
   ================================================ */

/* ---- Tablets ---- */
@media screen and (max-width: 768px) {
    /* Login/Register card */
    section.your-box-class article#sec1-inner {
        flex-direction: column;
        padding: 35px 25px;
        margin: 15px;
        width: calc(100% - 30px);
        max-width: 100%;
        border-radius: 18px;
    }
}

/* ---- Mobile Phones (login/register) ---- */
@media screen and (max-width: 480px) {
    section.your-box-class article#sec1-inner {
        padding: 30px 18px;
        margin: 10px;
        width: calc(100% - 20px);
        border-radius: 16px;
    }
    section.your-box-class article#sec1-inner h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    section.your-box-class article#sec1-inner .vloggy {
        font-size: 24px;
    }
    section.your-box-class article#sec1-inner .subtitle {
        font-size: 12px;
    }
    section.your-box-class article#sec1-inner input {
        height: 48px;
        font-size: 14px;
    }
    section.your-box-class article#sec1-inner button {
        height: 48px;
        font-size: 14px;
    }
    .form-footer { font-size: 13px; }
    .back-home { font-size: 12px; }
}