/* ===== 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: #fff;
    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 {
    text-decoration: none;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 26%;
    transform: translateY(-58%);
    padding: 1.875rem; /* 30px */
}

.back-home,.download-app:hover{
    cursor: pointer;
}

.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 {
    margin-bottom: 1.25rem ;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 0.5rem;
}

.main-title h1 {
    font-size: 2.525rem;
    padding: 0rem 2.2rem;
    font-weight: bold;
    color: #00aeef;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2); /* 1px 1px 2px */
}

.divider-left, .divider-right {
    height: 1.75rem;
    width: 26rem;
}

.divider-right {
    transform: scaleX(-1);
}

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

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

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

/* Section Title Styles */
.section-title {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-title h2 {
    font-size: 2.225rem;
    font-weight: bold;
    color: #005d80;
    margin: 0 2rem;
    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,0.2);
}

.title-divider-left, .title-divider-right {
    height: 1.5rem;
    width: auto;
}

.title-divider-right {
    transform: scaleX(-1);
}

.section-content-large {
}

.section-content-small {
    min-height: 6rem;
}

/* ===== 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;
}

.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;
}

.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: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: contain;
    margin-top: -1rem;
}

.action-img:hover {
    transform: translateY(-0.125rem); /* -2px */
}

/* ===== 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-decoration: none;
    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 {
    color: #000;
    font-size: 1.25rem; /* 20px */
    font-weight: bold;
    text-transform: uppercase;
}

/* ===== TABLET RESPONSIVE STYLES ===== */
/* Tablet Portrait (768px–1024px) */
@media screen and (min-width: 48.0625rem) and (max-width: 1919px) {
    body {
        padding: 0.75rem 0.75rem 1rem;
        background: #fff;
    }

    /* Header */
    .header {
        margin-bottom: 2rem;
        margin-top: 1rem;
    }
    .back-home {
        left: 3%;
        padding: 0.75rem 0.75rem;
    }
    .download-app {
        right: 3%;
        padding: 0.75rem 0.75rem;
    }
    .home-icon, .download-icon {
        width: 2rem;
        height: 2rem;
    }
    .back-home span:last-child,
    .download-app span:last-child {
        font-size: 0.95rem;
    }
    .logo { height: 5.5rem; }

    /* Title */
    .main-title { margin-bottom: 1rem; margin-top: 4rem; padding-top: 0.25rem; }
    .main-title h1 { font-size: 2rem; padding: 0 1.25rem; }
    .divider-left, .divider-right { height: 1.25rem; width: 18rem; display: inline; }

    /* Layout */
    .main-content { max-width: 94vw; gap: 0.75rem; }

    .section-header { margin-top: 0.5rem; }
    .section-title { margin-bottom: 1.25rem; }
    .section-title h2 { font-size: 1.6rem; margin: 0 1rem; }

    .button-header, .button-header-small {
        max-width: 18rem;
        min-height: 3rem;
        margin: -2.5rem auto 1.25rem auto;
    }

    .section-content-large { padding: 0 0.5rem; }
    .section-content-small { padding: 0 0.5rem; min-height: 2.5rem; }

    .action-grid-2x2,
    .chat-section .button-grid,
    .experience-section .button-grid { gap: 0.6rem; }

    .news-section .button-grid,
    .guide-section .button-grid { gap: 0.6rem; }

    .action-img { width: 100%; margin-top: -0.75rem; }

    /* Promo */
    .promo-section {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        max-width: 96vw;
    }
    .promo-item img { width: 80%; height: auto; /* 170px */ }
    .promo-text { font-size: 1rem; }
}

/* Tablet Landscape (1024px–1366px) */
@media screen and (min-width: 64.0625rem) and (max-width: 85.375rem) {
    .back-home { left: 12%; padding: 1rem; }
    .download-app { right: 12%; padding: 1rem; }
    .home-icon, .download-icon { width: 2.25rem; height: 2.25rem; }
    .back-home span:last-child,
    .download-app span:last-child { font-size: 1rem; }
    .logo { height: 6rem; }

    .main-title h1 { font-size: 2.25rem; padding: 0 1.5rem; }
    .divider-left, .divider-right { height: 1.5rem; width: 22rem; display: inline; }

    .main-content { max-width: 90vw; gap: 0.875rem; }

    .button-header, .button-header-small {
        max-width: 22rem;
        min-height: 3.125rem;
        margin: -2.75rem auto 1.25rem auto;
    }

    .section-title h2 { font-size: 1.8rem; }

    .promo-section {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.75rem;
        max-width: 92vw;
    }
    .promo-item img { height: 12.5rem; /* 200px */ }
}

/* ===== 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: #fff;

    }

    /* 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 */
    }
    .main-content{
        gap: 0.5rem;
    }

    .logo {
        height: 54px;
    }

    /* Main title adjustments */
    .main-title {
        margin-bottom: 0.75rem;
    }

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

    .divider-left, .divider-right {
        display: none;
    }
    /* Single column layout */
    .main-content {
        grid-template-columns: 1fr;
        max-width: 100%;
        /* row-gap: 0.5rem; */
    }

    /* 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: 0.3rem 0.5rem;
    }

    .section-header {
        margin-top: 0;
    }

    .section-content-small {
        min-height: 1.875rem;
        padding: 0rem 0.5rem;
    }

    .action-img {
        width: 98%;
        margin-top: -0.5rem;
    }

    .section-title {
        margin-bottom: 1rem;
    }
    /* Section title responsive */
    .section-title h2 {
        font-size: 1.25rem; /* 28px */
        margin: 0 1rem;
    }

    .title-divider-left, .title-divider-right {
        height: 1rem;
    }

    /* 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 {
        width: 98%;
        margin-top: -0.5rem;
    }

    .section-title {
        margin-bottom: 1rem;
    }

    .section-title h2 {
        font-size: 1.1rem;
        margin: 0 1rem;
    }

    .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.225rem; /* 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;
    }
    .section-title {
        margin-bottom: 0.8rem;
    }


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

    .action-img {
        margin-top: -0.5rem;
    }

    .section-title h2 {
        font-size: 1.175rem; /* 26px */
        margin: 0 0.625rem;
    }
    .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.325rem; /* 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;
    }

    .section-title {
        margin-bottom: 1rem;
    }

    .section-title h2 {
        font-size: 1.175rem;
        margin: 0 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; }
}