/* =========================================
   UNDER DEVELOPMENT PAGE
========================================== */
.under-dev-section {
    background-color: #f7f8fa;      /* <-- PAGE BACKGROUND COLOR */
    padding: 20px 20px;             /* <-- PAGE PADDING: top/bottom | left/right */
    text-align: center;
    min-height: 70vh;                /* <-- MINIMUM PAGE HEIGHT */
    display: flex;
    align-items: center;
    justify-content: center;
}

.under-dev-content {
    max-width: 700px;                /* <-- CONTENT MAX WIDTH */
    margin: 0 auto;
}

/* =========================================
   ICON / IMAGE
========================================== */
.under-dev-icon {
    display: inline-block;
    margin-bottom: 30px;             /* <-- SPACE BELOW IMAGE */
    animation: pulse-orange 2s infinite ease-in-out;   /* <-- ANIMATION DURATION (2s) */
}

.under-dev-img {
    width: 280px;                    /* <-- IMAGE WIDTH (Desktop) */
    height: auto;                    /* Keeps aspect ratio */
    max-width: 100%;                 /* Prevents overflow on mobile */
    display: block;
    margin: 0 auto;
}

/* =========================================
   ANIMATION
========================================== */
@keyframes pulse-orange {
    0%, 100% { 
        transform: scale(1);          /* <-- NORMAL SIZE */
    }
    50% { 
        transform: scale(1.05);       /* <-- PULSE SCALE (1.05 = 5% bigger) */
    }
}

/* =========================================
   "PARDON OUR DUST" SUBTITLE
========================================== */
.under-dev-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;                 /* <-- SUBTITLE SIZE */
    font-weight: 800;                /* <-- SUBTITLE WEIGHT */
    color: var(--primary-blue);      /* <-- SUBTITLE COLOR */
    letter-spacing: 2px;             /* <-- LETTER SPACING */
    text-transform: uppercase;
    margin-bottom: 15px;             /* <-- SPACE BELOW SUBTITLE */
}

/* =========================================
   MAIN HEADING "THIS PAGE UNDER DEVELOPMENT."
========================================== */
.under-dev-title {
    font-family: 'League Spartan', sans-serif;
    font-size: 54px;                 /* <-- TITLE SIZE */
    font-weight: 900;                /* <-- TITLE WEIGHT */
    color: var(--primary-orange);    /* <-- TITLE COLOR */
    line-height: 1.1;                /* <-- LINE HEIGHT */
    margin-bottom: 25px;             /* <-- SPACE BELOW TITLE */
    text-transform: uppercase;
    letter-spacing: 1px;             /* <-- LETTER SPACING */
}

/* =========================================
   DESCRIPTION TEXT
========================================== */
.under-dev-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;                 /* <-- DESCRIPTION SIZE */
    font-weight: 600;                /* <-- DESCRIPTION WEIGHT */
    color: var(--text-dark);         /* <-- DESCRIPTION COLOR */
    line-height: 1.7;                /* <-- LINE HEIGHT */
    max-width: 600px;                /* <-- MAX WIDTH */
    margin: 0 auto;
}

/* =========================================
   RESPONSIVE - TABLET (≤768px)
========================================== */
@media (max-width: 768px) {
    .under-dev-section {
        padding: 70px 20px;
        min-height: 60vh;
    }
    .under-dev-img {
        width: 220px;                /* <-- IMAGE WIDTH (Tablet) */
    }
    .under-dev-title {
        font-size: 36px;             /* <-- TITLE SIZE (Tablet) */
    }
    .under-dev-subtitle {
        font-size: 14px;             /* <-- SUBTITLE SIZE (Tablet) */
    }
    .under-dev-desc {
        font-size: 14px;             /* <-- DESCRIPTION SIZE (Tablet) */
    }
}

/* =========================================
   RESPONSIVE - MOBILE (≤480px)
========================================== */
@media (max-width: 480px) {
    .under-dev-img {
        width: 180px;                /* <-- IMAGE WIDTH (Mobile) */
    }
    .under-dev-title {
        font-size: 26px;             /* <-- TITLE SIZE (Mobile) */
    }
    .under-dev-subtitle {
        font-size: 13px;             /* <-- SUBTITLE SIZE (Mobile) */
    }
    .under-dev-desc {
        font-size: 13px;             /* <-- DESCRIPTION SIZE (Mobile) */
    }
}