@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');


*{
    font-family: 'poppins', sans-serif;
}

/* =========================
           MODAL WRAPPER
        ========================= */

        @media (min-width: 992px) {
        .modal-lg {
        max-width: 715px !important;
        }
        }

        .travel-homemodal {
            width: min(860px, calc(100% - 0px));
            min-height: 380px;
            background: #fff;
            border-radius: 0 22px 22px 0;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
            position: relative;
        }

        /* =========================
           LEFT IMAGE SECTION
        ========================= */

        .travmage {
            min-height: 380px;
            height: 75%;
            background-image:
                linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.20),
                    rgba(0, 0, 0, 0.30)
                ),
                url("/resources/images/pgirls.png");

            background-size: cover;
            background-position: center;
            position: relative;
            color: #fff;
        }

        .image-content {
            position: absolute;
            inset: 0;
            padding: 22px 26px;
            display: flex;
            flex-direction: column;
        }

        /* Logo */
        .brand {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 23px;
            font-weight: 600;
            color: #fff;
        }

        .brand-icon {
            width: 27px;
            height: 27px;
            background: #ff4655;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 17px;
        }

        .brand-name {
            letter-spacing: -0.5px;
        }

        /* Left Heading */
        .left-text {
            margin-top: 34px;
        }

        .left-text h2 {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 28px;
            line-height: 1.28;
            font-weight: 700;
            margin: 0;
            max-width: 280px;
        }

        .red-line {
            width: 57px;
            height: 5px;
            background: #ff2949;
            border-radius: 5px;
            margin: 13px 0 18px;
        }

        .left-features {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left-features li {
            font-size: 15px;
            margin-bottom: 8px;
            font-weight: 500;
        }

        /* =========================
           RIGHT CONTENT
        ========================= */

        .travontent {
            min-height: 375px;
            padding: 12px 39px 17px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Close button */
        .clospopbtn {
            position: absolute;
            top: 28px;
            right: 26px;
            width: 24px;
            height: 24px;
            border: 1.5px solid #666;
            border-radius: 50%;
            background: transparent;
            color: #555;
            font-size: 16px;
            line-height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
        }

        .clospopbtn:hover {
            background: #f1f1f1;
        }

        /* Small heading */
        .call-heading {
            display: flex;
            align-items: center;
            gap: 15px;
            color: #626262;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 3px;
            margin-bottom: 15px;
        }

        .call-heading::after {
            content: "";
            width: 100px;
            height: 1px;
            background: #888;
            display: block;
        }

        /* Main heading */
        .travontent h1 {
            font-family: Georgia, "Times New Roman", serif;
            color: #0a2d82;
            font-size: 35px;
            line-height: 1.28;
            font-weight: 700;
            margin: 0 0 16px;
            max-width: 430px;
        }

        .description {
            color: #626262;
            font-size: 15px;
            line-height: 1.45;
            font-weight: 500;
            margin-bottom: 20px;
            max-width: 450px;
        }

        /* =========================
           PHONE BOX
        ========================= */

        .phone-box {
            width: 100%;
            max-width: 385px;
            min-height: 67px;
            border: 1px solid #bdd3ff;
            background: #eef4ff;
            border-radius: 40px;
            display: flex;
            align-items: center;
            padding: 5px 22px 5px 12px;
            margin-bottom: 18px;
        }

        .phone-icon {
            width: 50px;
            height: 50px;
            min-width: 50px;
            border-radius: 50%;
            background: #4caf00;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 27px;
        }

        .phone-divider {
            width: 1px;
            height: 34px;
            background: #d1d9e8;
            margin: 0 20px;
        }

        .phone-number {
            color: #0a338b;
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0px;
            white-space: nowrap;
        }

        /* =========================
           ASSISTANCE TEXT
        ========================= */

        .assistance {
            color: #777;
            font-size: 12.5px;
            line-height: 1.5;
            text-align: center;
            max-width: 385px;
        }

        /* =========================
           RATING
        ========================= */

        .rating {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .stars {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-bottom: 2px;
        }

        .star {
            width: 19px;
            height: 19px;
            background: #05b85c;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            border-radius: 2px;
        }

        .star.empty {
            background: #d9d9d9;
        }

        .rating-title {
            color: #1e3157;
            font-size: 12px;
            font-weight: 700;
        }

        .rating-subtitle {
            color: #46516b;
            font-size: 10px;
            margin-top: 1px;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media (max-width: 767.98px) {

            body {
                padding: 15px 0;
            }

            .travel-homemodal {
                width: calc(100% - 0px);
                margin: auto;
                border-radius: 18px;
                min-height: auto;
            }

            .travmage {
                /* min-height: 390px;
                height: 390px; */
                border-radius: 18px 18px 0 0;
                background-position: center;
            }

            .image-content {
                padding: 20px;
            }

            .brand {
                font-size: 20px;
            }

            .left-text {
                margin-top: 35px;
            }

            .left-text h2 {
                font-size: 25px;
                max-width: 230px;
            }

            .left-features li {
                font-size: 14px;
            }

            .travontent {
                min-height: auto;
                padding: 55px 22px 30px;
            }

            .clospopbtn {
                top: 18px;
                right: 18px;
            }

            .call-heading {
                font-size: 11px;
                letter-spacing: 2px;
                margin-bottom: 22px;
            }

            .call-heading::after {
                width: 80px;
            }

            .travontent h1 {
                font-size: 34px;
                line-height: 1.2;
                margin-bottom: 15px;
            }

            .description {
                font-size: 16px;
                margin-bottom: 25px;
            }

            .phone-box {
                max-width: 100%;
                min-height: 62px;
                padding-right: 12px;
            }

            .phone-icon {
                width: 46px;
                height: 46px;
                min-width: 46px;
                font-size: 24px;
            }

            .phone-divider {
                margin: 0 12px;
            }

            .phone-number {
                font-size: clamp(20px, 6vw, 27px);
                letter-spacing: 0;
            }

            .assistance {
                font-size: 14px;
                margin-bottom: 22px;
            }
        }

        @media (max-width: 400px) {

            .travmage {
                min-height: 350px;
                height: 350px;
            }

            .left-text h2 {
                font-size: 23px;
            }

            .travontent {
                padding-left: 18px;
                padding-right: 18px;
            }

            .travontent h1 {
                font-size: 30px;
            }

            .phone-box {
                min-height: 58px;
            }

            .phone-icon {
                width: 42px;
                height: 42px;
                min-width: 42px;
            }

            .phone-divider {
                margin: 0 9px;
            }

            .phone-number {
                font-size: 19px;
            }
        }