/* ===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base font size for rem calculations */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: Arial, sans-serif;
    padding: 1.25rem; 
    background-image: url('assets/img/background-xx88.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ===== HEADER STYLES ===== */
.header {
    position: relative;
    margin-bottom: 4.5625rem; /* 73px */
    margin-top: 1.5rem; /* 24px */
}

.back-home {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 26%;
    transform: translateY(-58%);
    padding: 1.875rem; /* 30px */
}

.header-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.logo {
    height: 6.875rem;
    object-fit: contain;
}

.download-app {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 26%;
    transform: translateY(-58%);
    padding: 1.875rem; /* 30px */
}

.home-icon, .download-icon {
    margin-right: 0.375rem; /* 6px */
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
}

.back-home span:last-child,
.download-app span:last-child {
    font-size: 1.125rem; /* 18px */
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}

.separator {
    color: #666;
}

/* ===== MAIN TITLE ===== */
.main-title {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.3rem;
}

.main-title h1 {
    font-size: 2.3125rem; 
    margin: 1.25rem 1.25rem; /* 0 20px */
    font-weight: bold;
    color: #2b8dfe;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); /* 1px 1px 2px */
}

.main-title img {
    height: 100%;
}

.main-title img.logo-2 {
    transform: scaleX(-1);
}

/* ===== MAIN CONTENT GRID ===== */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem; /* 20px */
    margin-bottom: 1.875rem; /* 30px */
    max-width: 83vw;
    margin-left: auto;
    margin-right: auto;
}

/* ===== SECTION STYLES ===== */
.section {
    position: relative;
    overflow: hidden;
}

.section-header {
    margin-top: 3.125rem; /* 50px */
}

.section-content-large {
    padding: 3.125rem 1.25rem 1.25rem 1.25rem; /* 50px 20px 20px 20px */
    background-image: url('assets/img/box-big.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-top: -2.5rem; /* -40px */
}

.section-content-small {
    padding: 3.125rem 0.9375rem 0.9375rem 0.9375rem; /* 50px 15px 15px 15px */
    background-image: url('assets/img/box-small.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-top: -2.5rem; /* -40px */
    min-height: 8.75rem; /* 140px */
}

/* ===== BUTTON HEADERS ===== */
.button-header,
.button-header-small {
    background-position: center;
    background-size: contain;
    display: block;
    width: 100%;
    max-width: 25rem; /* 400px */
    min-height: 3.25rem; /* 52px */
    position: relative;
    z-index: 10;
}

.button-header {
    margin: -3.125rem auto 1.3125rem auto; /* -50px auto 21px auto */
}

.button-header-small {
    margin: -3.125rem auto 1.125rem auto; /* -50px auto 18px auto */
}

/* ===== GRID LAYOUTS ===== */
.action-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.3rem; /* 6px */
}

.action-grid-1x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.25rem; /* 12px */
    margin-top: 0.1875rem; /* 3px */
}

/* Button grids for different sections */
.chat-section .button-grid,
.experience-section .button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem; /* 12px */
    background-image: url('assets/img/box-big.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.news-section .button-grid,
.guide-section .button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.75rem; /* 12px */
    margin-top: 0.625rem; /* 10px */
}

/* ===== ACTION IMAGES ===== */
.action-img {
    width: 100%;
    height: 3.875rem; /* 62px */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1); /* 0 2px 8px */
}

.action-img:hover {
    transform: translateY(-0.125rem); /* -2px */
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.2); /* 0 4px 12px */
}

/* ===== PROMOTIONAL SECTION ===== */
.promo-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9375rem; /* 15px */
    max-width: 82vw;
    margin: 0 auto;
}

.promo-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.promo-item:hover {
    transform: translateY(-0.3125rem); /* -5px */
}

.promo-item img {
    width: 15.625rem; /* 250px */
    height: 15.625rem; /* 250px */
    object-fit: cover;
}

.promo-text {
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    text-transform: uppercase;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */
@media screen and (max-width: 48rem), /* 768px */
       screen and (max-device-width: 48rem),
       screen and (orientation: portrait) and (max-width: 64rem), /* 1024px */
       only screen and (min-device-width: 20rem) and (max-device-width: 48rem) { /* 320px-768px */

    body {
        padding: 0;
        background-image: url('assets/img/background-mobile.png');

    }

    /* Header adjustments */
    .header {
        padding: 0.625rem 0.1875rem; /* 10px 3px */
        margin-bottom: 1.25rem; /* 20px */
        margin-top: 0.75rem; /* 12px */
    }

    .back-home {
        margin-top: 0.125rem; /* 2px */
        left: 0;
        padding: 0.375rem 0.625rem; /* 6px 10px */
    }

    .download-app {
        margin-top: 0.125rem; /* 2px */
        right: 0;
        padding: 0.375rem 0.625rem; /* 6px 10px */
    }

    .back-home span,
    .download-app span {
        text-decoration: solid;
        font-size: 0.75rem !important; /* 12px */
    }

    .home-icon, .download-icon {
        width: 1.625rem; /* 26px */
        height: 1.625rem; /* 26px */
    }

    .logo {
        width: 200px; /* Smaller on mobile */
        height: 51px; /* Maintain aspect ratio */
    }

    /* Main title adjustments */
    .main-title {
        margin-bottom: 1.25rem; /* 20px */
    }

    .main-title h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.3rem; /* 20px */
        font-weight: bolder;
        margin:0;
    }

    .main-title img {
        display: none;
    }

    /* Single column layout */
    .main-content {
        grid-template-columns: 1fr;
        gap: 0.75rem; /* 12px */
        max-width: 100%;
        padding: 0 0.3rem; /* 0 15px */
        margin-bottom: 0.9375rem; /* 15px */
    }

    /* Section adjustments */
    .button-header,
    .button-header-small {
        max-width: 12.875rem; /* 206px */
        min-height: 0;
        margin: -3.125rem auto 1.85rem auto; /* -50px auto 30px auto */
    }

    .button-header-small{
        margin: -3.125rem auto 1.9rem auto; /* -50px auto 30px auto */
    }

    .section-content-large {
        padding: 1.675rem 0.5rem 0.75rem 0.5rem; /* 26px 12px 12px 12px */
    }

    .section-content-small {
        min-height: 1.875rem; /* 30px */
        padding: 1.25rem 0.5rem 0.75rem 0.5rem; /* 20px 12px 12px 12px */
    }

    .action-img {
        height: 2.1rem; /* 34px */
        border-radius: 1.25rem; /* 20px */
    }

    /* Promo section */
    .promo-section {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3125rem; /* 5px */
        max-width: 100vw;
        margin: 0.1875rem ; /* 3px */
        padding-bottom: 1rem;
    }

    .promo-item img {
        width: 100%;
        height: 8.125rem; /* 130px */
    }

    .promo-text {
        font-family: sans-serif;
        font-size: 0.75rem; /* 12px */
    }
}

/* ===== FINE-TUNED RESPONSIVE BREAKPOINTS ===== */
/* Extra small devices (320px to 375px) */
@media screen and (min-width: 20rem) and (max-width: 23.4375rem) { /* 320px-375px */
    .button-header,
    .button-header-small {
        max-width: 11.5rem; /* 176px */
        margin: -3.125rem auto 1.98rem auto;
    }

    .button-header-small{
        margin: -3.125rem auto 2rem auto;
    }
    .action-img {
        height: 1.9rem;
    }
    .promo-item img {
        width: 100%;
        height: 7.625rem; /* 122px */
    }
    .promo-text {
        font-size: 0.75rem; /* 10px */
        font-weight: bold;
    }
    .main-title h1 {
        font-size: 1.125rem; /* 18px */
        margin: 0;
        padding: 0;
    }
}

/* Small devices (376px to 390px) */
@media screen and (min-width: 23.5rem) and (max-width: 24.375rem) { /* 376px-390px */
    .button-header,
    .button-header-small {
        max-width: 12rem; /* 184px */
        margin: -3.125rem auto 1.92rem auto;
    }

    .button-header-small{
        margin: -3.125rem auto 1.92rem auto;
    }

    .action-img {
        height: 2rem;
    }
    .promo-item img {
        width: 100%;
        height: 7.875rem; /* 126px */
    }
    .promo-text {
        font-size: 0.72rem; /* 11px */
        font-weight: 550;
    }
    .main-title h1 {
        font-size: 1.25rem; /* 20px */
        margin: 0;
    }
}

/* Medium devices (391px to 414px) */
@media screen and (min-width: 24.4375rem) and (max-width: 25.875rem) { /* 391px-414px */
    .button-header,
    .button-header-small {
        max-width: 12.875rem; /* 196px */
    }
    .promo-item img {
        width: 100%;
        height: 7.875rem; /* 126px */
    }
    .promo-text {
        font-size: 0.75rem; /* 11px */
        font-weight: 550;
    }
    .main-title h1 {
        font-size: 1.3125rem; /* 21px */
        margin: 0;
    }
    .action-img {
        height: 2.1rem;
    }
}

/* Large mobile devices (431px to 480px) */
@media screen and (min-width: 26.9375rem) and (max-width: 30rem) { /* 431px-480px */
    .button-header,
    .button-header-small {
        max-width: 13.4375rem; /* 215px */
    }
    .promo-item img {
        width: 100%;
        height: 7.875rem; /* 126px */
    }
    .promo-text {
        font-size: 0.6875rem; /* 11px */
        font-weight: bold;
    }
    .main-title h1 {
        font-size: 1.3125rem; /* 21px */
        margin: 0;
    }
}
.mobile-only { display: none; }
.pc-only { display: inline; }

@media (max-width: 768px) {
    .mobile-only { display: inline; }
    .pc-only { display: none; }
}