/* =========================================================
   LEISURE TRAVELS INDIA
   PREMIUM PAGE HERO / BANNER
   ========================================================= */


/* =========================================================
   MAIN HERO
   ========================================================= */

.lti-page-hero {

    position: relative;

    width: 100%;

    min-height: 445px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    overflow: hidden;

    /*
       CHANGE THIS IMAGE ONLY

       Example:
       url("../images/Taajmahal.png")
    */

    background-image:
        url("../images/tajmahal-nightview.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    color: #ffffff;

}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.lti-page-hero-overlay {

    position: absolute;

    inset: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.72),
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.72)
        );

    z-index: 1;

}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.lti-page-hero-content {

    position: relative;

    z-index: 2;

    width: min(1100px, 92%);

    margin: 0 auto;

    padding: 70px 20px;

    box-sizing: border-box;

    text-align: center;

}


/* =========================================================
   BADGE
   ========================================================= */

.lti-page-hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 7px 18px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.55);

    border-radius: 50px;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}


/* =========================================================
   H1
   ========================================================= */

.lti-page-hero h1 {

    margin: 18px auto 16px;

    padding: 0;

    max-width: 1000px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(46px, 5.2vw, 70px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.55);

}


/* GOLD WORD */

.lti-page-hero h1 span {

    color: #f5b900;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.lti-page-hero-content > p {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 0;

    color: rgba(255,255,255,0.94);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.6);

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.lti-breadcrumb {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

}


/* HOME */

.lti-breadcrumb a {

    color: #f5b900;

    text-decoration: none;

    transition: color 0.2s ease;

}


/* HOME HOVER */

.lti-breadcrumb a:hover {

    color: #ffffff;

}


/* SLASH */

.lti-breadcrumb > span:first-of-type {

    color: rgba(255,255,255,0.55);

}


/* CURRENT PAGE */

.lti-breadcrumb > span:last-child {

    color: #ffffff;

}


/* =========================================================
   DESKTOP LARGE SCREENS
   ========================================================= */

@media screen and (min-width: 1400px) {

    .lti-page-hero {

        min-height: 470px;

    }

    .lti-page-hero-content {

        padding-top: 80px;

        padding-bottom: 80px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    .lti-page-hero {

        min-height: 400px;

    }


    .lti-page-hero-content {

        width: 94%;

        padding: 60px 16px;

    }


    .lti-page-hero h1 {

        font-size: 48px;

        letter-spacing: -1px;

    }


    .lti-page-hero-content > p {

        max-width: 700px;

        font-size: 16px;

        line-height: 1.65;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    .lti-page-hero {

        min-height: 390px;

        background-position: center center;

    }


    .lti-page-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.68),
                rgba(0,0,0,0.60),
                rgba(0,0,0,0.78)
            );

    }


    .lti-page-hero-content {

        width: 100%;

        padding: 55px 18px;

    }


    /* BADGE */

    .lti-page-hero-badge {

        max-width: 100%;

        padding: 7px 14px;

        font-size: 10px;

        letter-spacing: 1.1px;

        white-space: nowrap;

    }


    /* HEADING */

    .lti-page-hero h1 {

        margin-top: 18px;

        margin-bottom: 16px;

        font-size: 39px;

        line-height: 1.12;

        letter-spacing: -0.7px;

    }


    /* DESCRIPTION */

    .lti-page-hero-content > p {

        max-width: 500px;

        font-size: 15px;

        line-height: 1.65;

    }


    /* BREADCRUMB */

    .lti-breadcrumb {

        gap: 7px;

        margin-top: 20px;

        font-size: 13px;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 380px) {

    .lti-page-hero {

        min-height: 370px;

    }


    .lti-page-hero-content {

        padding: 48px 14px;

    }


    .lti-page-hero-badge {

        font-size: 9px;

        letter-spacing: 0.9px;

        padding: 7px 11px;

    }


    .lti-page-hero h1 {

        font-size: 34px;

    }


    .lti-page-hero-content > p {

        font-size: 14px;

    }


    .lti-breadcrumb {

        font-size: 12px;

    }

}