/* =========================================================
   Hero Travel — Responsive Stylesheet
   Loaded LAST — overrides earlier section CSS files.
   Breakpoints: 1024px (tablet) and 600px (mobile)
   ========================================================= */

/* =========================================================
   INTERACTIONS — toast + modal + cursor styles
   ========================================================= */

button,
a,
.choosedestinationImg,
.WCUBodyCOntentAll,
.dealsandDiscountBodyCommonPanel {
    cursor: pointer;
}

/* ---------- Toast ---------- */
.ht-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 100px);
    background: #1a1a1a;
    color: #fff;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 90%;
    text-align: center;
    pointer-events: none;
}

.ht-toast--show {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Modal ---------- */
.ht-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 20px;
}

.ht-modal-backdrop--show {
    opacity: 1;
    visibility: visible;
}

.ht-modal {
    background: #fff;
    border-radius: 14px;
    padding: 36px 30px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.ht-modal-backdrop--show .ht-modal {
    transform: scale(1);
}

.ht-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
}

.ht-modal__close:hover {
    color: #000;
    background: #f3f3f3;
}

.ht-modal__title {
    font-size: 1.4rem;
    margin: 0 0 12px;
    color: #1a1a1a;
}

.ht-modal__body {
    font-size: 1rem;
    color: #555;
    line-height: 1.55;
    margin: 0 0 22px;
}

.ht-modal__cta {
    display: inline-block;
    padding: 12px 28px;
    background: var(--btncolor, #ff5400);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: opacity 0.2s ease;
}

.ht-modal__cta:hover {
    opacity: 0.9;
}

/* ---------- Footer social icon hover ---------- */
.footerSocialMediaIcons > a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.footerSocialMediaIcons > a:hover {
    color: var(--btncolor) !important;
    transform: translateY(-2px);
}

/* ---------- Global resets / safety ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, iframe, video {
    max-width: 100%;
    height: auto;
}

.pagewidth {
    width: 92%;
    margin: 60px auto;
}

section,
.popularTourDiv,
.simplePlaceDiv,
.dealsandDiscountBodyCommonPanel {
    max-height: none !important;
}


/* =========================================================
   LAYOUT FIXES — apply at ALL widths
   The original CSS has buggy widths in these two sections
   even on desktop, so we override globally.
   ========================================================= */

/* ---------- Choose Destination — clean 4-col grid on desktop ---------- */
.chooseDestinationBody {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 280px;
    gap: 20px !important;
}

.chooseDestinationBody > .choosedestinationImg,
.choosedestinationImg1,
.choosedestinationImg2,
.choosedestinationImg3,
.choosedestinationImg4,
.choosedestinationImg5,
.choosedestinationImg6,
.choosedestinationImg7 {
    width: 100% !important;
    height: 100% !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Make card 1 + 7 wider so the layout reads as a clean bento grid:
   Row 1: [card1 spans 2] [card2] [card3]
   Row 2: [card4] [card5] [card6] [card7]
   = 7 cards filling 8 cells perfectly */
.choosedestinationImg1 {
    grid-column: span 2 !important;
}

/* ---------- Why Choose Us — 3 even columns on desktop ---------- */
.whyChooseUsBodyPanel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
    align-items: stretch !important;
}

.WCUBodyCOntentAll {
    width: 100% !important;
    margin: 0 !important;
}

/* ---------- Popular Tours — gap above Read More button ---------- */
.popularTourdetails > a {
    margin-top: 25px !important;
    display: inline-block;
}

/* ---------- Simple Place — fix YouTube iframe aspect ratio ---------- */
.simplePlaceVideoDiv {
    aspect-ratio: 16 / 9;
    align-self: center;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.simplePlaceVideoDiv > iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px;
    display: block;
}


/* =========================================================
   TABLET — up to 1024px
   ========================================================= */
@media (max-width: 1024px) {

    :root {
        --bannerfontsize: 4rem;
        --h1fontsize: 2rem;
        --h2fontsize: 1.7rem;
        --titlefontsize: 2.4rem;
        --h3fontsize: 1.4rem;
    }

    .pagewidth {
        margin: 50px auto;
    }

    /* ---------- Header ---------- */
    .headerPaneldiv {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .headernavPanel > ul {
        gap: 22px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .headernavPanel > ul > li > a {
        font-size: 1.15rem;
    }

    /* ---------- Banner ---------- */
    .bannerPanelDiv {
        min-height: 480px !important;
        padding: 30px 20px;
    }

    .tourSearchPanel {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .tourSearchPanel input,
    .tourSearchPanel select,
    .tourSearchPanel > a > button {
        flex: 1 1 220px;
        min-width: 0 !important;
        width: 100%;
    }

    /* ---------- Popular Tours: stack image + text ---------- */
    .popularTourDiv {
        flex-direction: column !important;
        max-height: none !important;
        gap: 30px;
    }

    .popularTourImage,
    .popularTourImage > img {
        width: 100%;
        max-height: none !important;
        height: auto;
        border-radius: 12px;
    }

    /* ---------- Choose Destination: clean 2-col grid on tablet ---------- */
    .chooseDestinationBody {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 240px !important;
        gap: 16px !important;
    }

    .choosedestinationImg1 {
        grid-column: span 1 !important;
    }

    /* ---------- Why Choose Us: stack 1 column on tablet ---------- */
    .whyChooseUsBodyPanel {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ---------- Deals & Discounts ---------- */
    .dealsandDiscountBodyPanel {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .dealsandDiscountBodyCommonPanel {
        min-height: 400px !important;
        padding: 30px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .TourToSantoriniPanel2 {
        justify-content: center !important;
    }

    .dealsandDiscountContentDiv {
        width: 80% !important;
        padding: 30px !important;
    }

    /* ---------- Simple Place: stack ---------- */
    .simplePlaceDiv {
        grid-template-columns: 1fr !important;
        gap: 30px;
        min-height: 0 !important;
    }

    .simplePlaceVideoDiv {
        min-width: 100% !important;
    }

    /* ---------- Newsletter ---------- */
    .newsletterDiv {
        flex-direction: column !important;
        gap: 25px;
    }

    .newsletterFromDIV {
        min-width: 100% !important;
        padding: 30px !important;
    }

    .newsletterImgDiv {
        min-width: 100% !important;
        min-height: 280px;
        justify-content: flex-end !important;
    }

    .newsletterImgContent {
        margin-bottom: 30px !important;
        margin-right: 20px !important;
    }

    /* ---------- Footer ---------- */
    .footerDiv {
        height: auto !important;
        padding: 40px 20px !important;
        gap: 20px;
    }
}


/* =========================================================
   MOBILE — up to 600px
   ========================================================= */
@media (max-width: 600px) {

    :root {
        --bannerfontsize: 2.4rem;
        --h1fontsize: 1.5rem;
        --h2fontsize: 1.3rem;
        --titlefontsize: 1.8rem;
        --h3fontsize: 1.1rem;
    }

    p, li {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }

    .pagewidth {
        width: 94%;
        margin: 35px auto;
    }

    /* ---------- Header — stack nav under logo ---------- */
    .headerPaneldiv {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .headerlogoPanel {
        justify-content: center;
    }

    .headernavPanel > ul {
        gap: 10px 18px;
    }

    .headernavPanel > ul > li > a {
        font-size: 1rem;
    }

    /* ---------- Banner ---------- */
    .bannerPanelDiv {
        min-height: 420px !important;
        gap: 20px;
        padding: 20px 15px;
    }

    .bannerPanelDiv > h1 {
        font-size: var(--bannerfontsize) !important;
        line-height: 1.1;
    }

    .bannerPanelDiv > p {
        font-size: 1rem;
        line-height: 1.4rem;
    }

    .tourSearchPanel {
        flex-direction: column !important;
        width: 100%;
        gap: 10px;
        padding: 12px;
    }

    .tourSearchPanel input,
    .tourSearchPanel select,
    .tourSearchPanel > a,
    .tourSearchPanel > a > button {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        font-size: 1rem !important;
    }

    .whenPanel {
        width: 100%;
    }

    #when {
        width: 100% !important;
    }

    /* ---------- Popular Tours ---------- */
    .popularTourdetails > h1 {
        font-size: var(--titlefontsize) !important;
        text-align: center;
    }

    .popularTourpara > ul {
        padding: 0 0 0 25px !important;
    }

    .popularTourpara > ul > li > a {
        font-size: 1rem !important;
        line-height: 1.4rem !important;
    }

    .popularTourdetails > a {
        align-self: center;
    }

    /* ---------- Section titles ---------- */
    .generalTitlePanel > h1 {
        font-size: var(--titlefontsize) !important;
        text-align: center;
    }

    .generalTitlePanel > p {
        font-size: 1rem !important;
        line-height: 1.4rem !important;
    }

    /* ---------- Choose Destination: 1 column on mobile ---------- */
    .chooseDestinationBody {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 200px !important;
        gap: 14px !important;
    }

    .choosedestinationImg > h2 {
        font-size: 1.4rem !important;
    }

    /* ---------- Why Choose Us ---------- */
    .WCUBodyCOntentAll {
        text-align: center;
        padding: 25px 18px !important;
    }

    .WCUImg {
        margin: 0 auto;
    }

    .WCUImg > img {
        max-height: 60px;
    }

    .WCUContentAll > p {
        font-size: 1rem !important;
    }

    /* ---------- Deals & Discounts ---------- */
    .dealsandDiscountBodyCommonPanel {
        min-height: 360px !important;
        padding: 18px !important;
        background-position: center !important;
    }

    .dealsandDiscountContentDiv {
        width: 100% !important;
        padding: 20px !important;
        gap: 14px;
    }

    .dealsandDiscountContentTop {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .DDtopCmnSection p {
        font-size: 0.9rem !important;
    }

    .DDcmnLogoIcon > .fa {
        font-size: 1.2rem !important;
    }

    .dealsandDiscountContentDiv > h2 {
        font-size: 1.3rem !important;
    }

    .dealsandDiscountContentDiv > p {
        font-size: 0.95rem !important;
    }

    .dealsandDiscountContentDiv > a > button {
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }

    .dealsandDiscountBodyPanel > a > button {
        font-size: 1.1rem !important;
        padding: 14px 22px !important;
    }

    /* ---------- Simple Place ---------- */
    .simplePlaceContentPanel > h1 {
        font-size: var(--titlefontsize) !important;
        text-align: center;
    }

    .simplePlaceContentPanel > p,
    .simplePlaceContentPanel > ul > li {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }

    .simplePlaceContentPanel > a {
        align-self: center;
        margin-top: 10px;
    }

    .simplePlaceContentPanel > a > button {
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }

    /* simplePlaceVideoDiv keeps its 16:9 aspect ratio from the global rule */

    /* ---------- Newsletter ---------- */
    .newsletterFromDIV {
        padding: 24px 18px !important;
        text-align: center;
        gap: 18px !important;
    }

    .newsletterFromDIV > form {
        gap: 14px !important;
    }

    .newsletterFromDIV > form > input {
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    .newsletterFromDIV > form > a > button {
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    .newsletterImgDiv {
        min-height: 220px !important;
        background-position: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .newsletterImgContent {
        height: 130px !important;
        width: 250px !important;
        margin: 0 !important;
        transform: rotate(-12deg) !important;
    }

    .newsletterImgContent > p {
        font-size: 1.2rem !important;
    }

    .newsletterImgContent > h1 {
        font-size: 1.3rem !important;
    }

    /* ---------- Footer ---------- */
    .footerDiv {
        padding: 30px 18px !important;
        gap: 18px;
    }

    .footertext {
        font-size: 1rem !important;
        text-align: center;
        line-height: 1.6rem !important;
    }

    .footerSocialMediaIcons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .footerSocialMediaIcons > .fa {
        font-size: 1.6rem !important;
        margin: 0 8px !important;
    }

    .copyRight {
        font-size: 0.9rem !important;
        text-align: center;
    }

    /* ---------- General buttons ---------- */
    button {
        font-size: 1rem !important;
        padding: 10px 18px !important;
    }
}


/* =========================================================
   TINY phones — up to 380px
   ========================================================= */
@media (max-width: 380px) {

    :root {
        --bannerfontsize: 2rem;
        --titlefontsize: 1.5rem;
        --h2fontsize: 1.2rem;
    }

    .headernavPanel > ul {
        gap: 8px 12px;
    }

    .headernavPanel > ul > li > a {
        font-size: 0.9rem;
    }

    .newsletterImgContent {
        width: 220px !important;
        height: 120px !important;
    }
}