﻿@font-face {
    font-family: 'Futura';
    src: url('fonts/futura/futuraBook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fedra Sans Light';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Fedra Sans Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Fedra Sans Normal';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/FedraSansStdNormal.woff2') format('woff2');
}


input:focus, textarea:focus, select:focus, button:focus {
    border-color: red !important; 
    box-shadow: 0 0 5px red !important;
    outline: none;
}


body {
    font-family: 'Fedra Sans Normal';
    background-color: #f6f3f3;
}


::-moz-selection {
    background: #E72419 !important;
    color: white !important;
}

::selection {
    background: #E72419 !important;
    color: white !important;
}


option:hover {
    background-color: #E72419 !important;
}


.float-label {
    padding: 0 1.50rem !important;
}

.float-label-span {
    background-color: white;
    padding: 0.25rem;
    border-radius: .375rem;
    color: #E72419 !important;
    font-weight: bold;
    /*    border: 1px solid #ced4da;*/
}

.float-label-input-span {
    background-color: white;
    padding: 0.25rem;
    border-radius: .375rem;
    color: #E72419 !important;
    font-weight: bold;
    /* border: 1px solid #ced4da;
}


ul li a::selection {
    background: #E72419 !important;
}


.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: calc(3rem + -2px);
    line-height: 1.25; /* Adjust line-height for better appearance */
}


.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
}

.form-floating label {
    position: absolute; /* Positioning the label absolutely */
    left: -2px; /* Align label with input */
    top: 1.25rem; /* Position label at the start height */
    transition: all 0.2s ease; /* Smooth transition for the label */
    /*opacity: 0.5;*/ /* Slightly transparent */
    pointer-events: none; /* Prevent interaction with the label */
}

.form-floating .form-select:focus + label,
.form-floating .form-select:not(:placeholder-shown) + label {
    top: -9px; /* Move the label above when focused or selected */
    left: -0.3rem; /* Align with input */
    font-size: 0.85rem; /* Scale down the label */
    opacity: 1 !important; /* Fully opaque when active */
}




.form-floating > .form-select {
    padding-top: 0.625rem;
    padding-bottom: .625rem;
}

.float-input-lbl {
    /*color: #6C757D !important;
    left: -0.5rem !important;
    top: 0.5rem !important;*/
    color: #6C757D !important;
    left: -9.8rem !important;
    top: -0.5rem !important;
    /* align-items: end; */
    /* background-color: white; */
    font-size: 12px;
    margin-left: 17px;
}



.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: none !important;
    /*    transform: scale(.85) translateY(-.5rem) translateX(.15rem);*/
}



.rj-red {
    color: #E72419 !important;
}

.rj-bg-red {
    background-color: #E72419 !important;
}

.rj-white {
    color: #fff !important;
}

.section-title {
    color: #E72419;
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    margin-bottom: 20px;
}

.discover-color {
    color: #686868 !important;
}

/*ul.check-list {
    list-style: none;
    padding-left: 0;
}

    ul.check-list li::before {
        content: "🗸";*/
        /*content: "✔";*/
        /*color: #686868;
        margin-right: 8px;
    }*/


ul.check-list li {
    position: relative;
    padding-left: 24px; /* Space for the image */
    list-style: none;
}

    ul.check-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.2em; /* adjust vertically as needed */
        width: 16px;
        height: 16px;
        background-image: url('../images/photos/tick.png');
        /* replace with your image path */
        background-size: contain;
        background-repeat: no-repeat;
    }

.discover-bg-color {
    background: #686868 !important;
}

.discover-section-title {
    color: #686868;
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    margin-bottom: 20px;
    padding: 25px 15px;
    /*padding: 5% 11% 1% 11%;*/
}

.discover-section-subtitle {
    color: #686868;
    text-align: center;
    font-weight: bold;
    /*font-size: 35px;*/
/*    margin-bottom: 20px;*/ 
    padding: 15px;
}

.discover-section-icons {
    width: 13%;
    height: intrinsic;
}

.book-your-flight-btn {
    width: 50% !important;
}

.discover-card-title {
    padding: 0px 15px;
}


.discover-details-background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/photos/discover_map_background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

.discover-details-icons {
    width: 21% !important;
    height: intrinsic;
}
.discover-details-arrows-icons {
    width: 65% !important;
    height: intrinsic;
}

.discover-arrows-icons {
    width: 46%;
    height: intrinsic;
}

.discover-pkg-map-icons {
    width: 100%;
}


.top-wrapper {
    position: relative;
    background-image: url(../images/photos/RJunlimitedbannar.jpg);
    background-size: cover;
    background-color: #E1251A;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 250px;
    overflow: hidden; /* Ensure overlay does not exceed container */
}

.carousel-inner {
    height: 550px; /* Set your desired fixed height */
}

    .carousel-inner img {
        height: 100%;
        width: 100%;
        object-fit: contain; /* Maintain aspect ratio and crop overflow */
    }
.carousel-control-prev:focus,
.carousel-control-next:focus {
    outline: none;
    box-shadow: none !important;
}


    .top-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2); /* Black color with 50% opacity */
        z-index: 1; /* Ensure overlay is above the background but below the content */
    }



    .top-wrapper h1 {
        /*position: relative;*/ /* Position text above the overlay */
        color: white;
        z-index: 2; /* Ensure text is above the overlay */
        /*margin-bottom: -70px;*/
    }



.top-wrapper-pkgs {
    position: relative;
    background-image: url("https://images.unsplash.com/photo-1661074123418-884482e7c247?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJlZCUyMHNreXxlbnwwfHwwfHx8MA%3D%3D");
    /*https: //wallpaperswide.com/download/iceland_nature_travel_photography-wallpaper-1920x1080.jpg background-size: cover;*/
    background-size: cover;
    background-color: #E1251A;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 50px;
    overflow: hidden; /* Ensure overlay does not exceed container */
}

    .top-wrapper-pkgs::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Black color with 50% opacity */
        z-index: 1; /* Ensure overlay is above the background but below the content */
    }

    .top-wrapper-pkgs h1 {
        position: relative; /* Position text above the overlay */
        color: white;
        z-index: 2; /* Ensure text is above the overlay */
    }



header .container-fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    header .container-fluid .header-left img {
        width: 170px;
        height: 65px;
    }

    header .container-fluid .header-right {
        display: flex;
        align-items: center;
    }

        header .container-fluid .header-right .navbar-nav {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }

            header .container-fluid .header-right .navbar-nav li {
                margin-right: 20px;
            }

.login i {
    font-family: fontawesome;
    color: #E72419;
    font-style: unset !important;
}

.login a {
    border-left: 1px solid grey;
    border-radius: 0;
}

header .container-fluid .header-right .navbar-nav a {
    font-weight: bold;
    color: grey;
    padding: 0 15px;
}

.bold {
    font-weight: bold;
}


.discription {
    /*margin-top: 20px;*/
    padding-bottom: 120px;
}

    .discription p {
        font-size: 50px;
        font-weight: bold;
        text-shadow: 2px 2px 11px #888;
        color: #fff;
        margin-bottom: 0px;
    }

        .discription p .unlimited {
            background-color: #E72419;
            padding: 0 15px;
        }

.form-rout-validity {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 30px;
}

    .form-rout-validity .form-control {
        width: 100%;
        position: relative;
    }

.search-background-wrapper {
    position: relative;
    width: 38%;
}

.form-rout-validity .search-icon {
    content: "";
    background-image: url('../images/other/icons8-search.svg');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    background-size: cover;
}

.btnpkg {
    background-color: #E72419;
    color: #fff;
    border-color: #E72419;
    width: 100%;
    font-weight: bold;
    height: 100%
}

    .btnpkg:hover {
        background-color: #E72419;
    }

.form-block {
    width: 64%;
    border: 1px solid white;
    background-color: white;
    margin-top: -50px !important;
    margin: auto;
    /*    border-radius: 10px;
*/ border-radius: 37px;
    position: relative; /* Ensure it does not affect other elements */
    z-index: 2; /* Ensure it is above any background or overlay */
    margin-top: 50px;
    border-color: rgba(0, 0, 0, 0.5);
}


.form-block-pkg {
    width: 90%;
    border: 1px solid white;
    background-color: white;
    margin-top: -60px !important;
    margin: auto;
    border-radius: 37px;
    position: relative; /* Ensure it does not affect other elements */
    z-index: 2; /* Ensure it is above any background or overlay */
    margin-top: 50px;
    border-color: rgba(0, 0, 0, 0.5);
}


.form-block-pkg-my-pkgs {
    width: 90%;
    /* border: 1px solid white; */
    /* background-color: white; */
    margin-top: -120px !important;
    margin: auto;
    /* border-radius: 37px; */
    position: relative;
    z-index: 2;
    margin-top: 50px;
    border-color: rgba(0, 0, 0, 0.5);
}


.desc-block {
    /*margin-top: 60px;*/
    padding-bottom: 60px;
    border-top: 2px solid #fff;
    padding-top: 40px;
    background-color: white;
}

.discover-block {
    background-color: #dfdfdf;
}



.offers-block {
    margin-bottom: 40px;
    /*    border-top: 2px solid #fff;*/
    padding-top: 20px;
}

    .offers-block img {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .offers-block .offer-image {
        position: relative;
    }

        .offers-block .offer-image .price {
            font-size: 28px;
            position: absolute;
            top: 10px;
            right: 15px;
            color: #fff;
            text-shadow: 2px 2px 8px #888;
            font-weight: bold;
        }

        .offers-block .offer-image .discount {
            font-size: 20px;
            position: absolute;
            top: 55px;
            right: 15px;
            color: #fff;
            text-shadow: 2px 2px 8px #888;
            background-color: #E72419;
            padding: 0 7px;
            font-weight: bold;
        }

.offer-info {
    font-weight: bold;
    /*background-color: #fff;*/
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 30px 20px 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.offers-block .offer-title {
    color: #E72419;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.offers-block .offer-flight .flight-price {
    color: #E72419;
}

.offer-flight, .offer-passenger, .offer-period, .offer-cabin {
    margin-bottom: 5px;
    font-size: 16px;
}

.offers-block .book-now {
    background-color: #E72419;
    color: #fff;
    text-decoration: none;
    display: block;
    width: 130px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    margin-top: 15px;
}

.slick-slide {
    margin-right: 20px;
}


    .slick-slide:last-child {
        margin-right: 0;
    }


.formBlockPadding {
    padding: 20px 25px;
}

.HomeOpt {
    width: 100%
}

.HomeOptRow {
    margin-top: 2%
}

.book-dv {
    /*width: 65px;*/
    margin: 10px auto;
    /*margin: 65px auto;*/
}

    .book-dv i {
        color: white;
        font-size: 25px;
        margin-left: 15px;
        -webkit-transform: rotate(45deg);
        margin-right: 25px;
    }

    .book-dv p {
        color: white;
        font-size: 20px;
        font-weight: bold;
        margin: 0;
    }

.Steps1, .Steps2, .Steps3 {
    margin-top: 20px;
    margin-bottom: 40px;
}

    .Steps1 a {
        cursor: pointer;
        color: #E72419 !important;
        font-family: 'Fedra Sans Light';
        font-size: 14px;
        width: 220px;
        display: block;
        margin: auto;
    }

    .Steps1 p {
        width: 270px;
        margin: auto;
        font-weight: bold;
        color: #E72419;
        font-size: 20px;
    }

    .Steps2 p, .Steps3 p {
        width: 270px;
        margin: auto;
        font-weight: bold;
        color: #E72419;
        font-size: 20px;
    }

    .Steps2 a {
        cursor: pointer;
        color: #E72419 !important;
        font-family: 'Fedra Sans Light';
        font-size: 14px;
        width: 270px;
        display: block;
        margin: auto;
    }

.steps-sub-paragraph {
    font-family: 'Fedra Sans Light' !important;
    font-size: 14px !important;
    width: 270px !important; /* Adjust as needed */
    margin: 0 auto; /* Center the paragraph block horizontally */
    color: #000 !important;
    text-align: justify; /* Justify text to align evenly within the paragraph */
    line-height: 1.5; /* Adjust line-height for readability */
}

    .steps-sub-paragraph::after {
        content: "";
        display: block;
        width: 100%;
    }

.Steps3 a {
    cursor: pointer;
    color: #E72419 !important;
    font-family: 'Fedra Sans Light';
    font-size: 14px;
    width: 240px;
    display: block;
    margin: auto;
}

.footer {
    margin-top: auto;
    background-color: rgba(0, 0, 0, 0.05);
    color: gray;
/*    background-color: #E72419;
    color: white;*/
    text-align: center;
    padding: 10px 0;
    width: 100%;
/*    height: 45px;
*/}

    .footer div p {
        margin-bottom: 0;
    }

    .footer div a {
        margin-bottom: 0;
        color: gray;
/*        color: white;
*/    }

.pholder::placeholder {
    font-weight: bold;
    color: #E72419;
    text-align: center
}

.pholder {
    font-weight: bold !important;
    color: #E72419 !important;
    text-align: center !important;
}

/*------------------------------------------------------------*/
.sectionttl {
    color: #E72419;
    text-align: center;
    font-weight: bold;
    font-size: 34px;
    /*margin-bottom: 40px;*/
    font-family: 'Fedra Sans normal'
}

.Packages-title {
    font-family: 'Fedra Sans Normal';
    font-weight: bold;
    color: #E72419;
    text-align: center;
    font-size: 44px;
    margin-top: 20px;
}


.discover-packages-title {
    font-family: 'Fedra Sans Normal';
    font-weight: bold;
    color: #686868;
    text-align: justify;
    font-size: 44px;
    margin-top: 20px;
}


.disc {
    font-size: 32px;
    position: absolute;
    top: 210px;
    right: 20px;
    color: #fff;
    text-shadow: 0px 0px 10px #888;
    padding: 0 7px;
    font-weight: bold;
    font-family: 'Fedra Sans Normal';
}

.prc {
    font-size: 28px;
    position: absolute;
    top: 10px;
    left: 0px;
    color: #fff;
    text-shadow: 2px 2px 8px #888;
    font-weight: bold;
    background: red;
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Fedra Sans Normal';
}

.discover-details-prc {
    font-size: 28px;
    position: absolute;
    top: 10px;
    left: 0px;
    color: #fff;
    text-shadow: 2px 2px 8px #888;
    font-weight: bold;
    background: #686868;
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Fedra Sans Normal';
}




.offer-lbl {
    font-family: 'Fedra Sans normal';
    /*background: #E72419;
    color: white;*/
    color: #E72419;
    padding: 5px;
    font-size: 25px;
    font-weight: bold;
}

.OriginDestLbl {
    color: rgba(0, 0, 0, 0.5);
    font-size: medium;
}

.offer-info li {
    font-weight: bold;
    font-family: 'Fedra Sans normal';
}

.book-n {
    background-color: #E72419;
    color: #fff;
    text-decoration: none;
    display: block;
    width: 130px;
    text-align: center;
    border-radius: 5px;
    margin-top: 15px;
    margin-left: 60%;
    padding: 2px;
    font-size: 17px;
    font-weight: bold;
    font-family: 'Fedra Sans normal';
}

.offer-crd {
    width: 375px !important;
    margin: auto;
}

.small-lbl {
    color: darkgray;
    font-size: 12px
}


/*-------------------------------------------------------------------*/

#resW2 {
    margin-top: 25px;
    display: none
}

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    font-size: 30px !important;
    color: gray;
}

/*.input-bg-gray {
    background-color: #E9ECEF !important;
}*/

.check-all-destinations {
    background-color: #E72419;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 5px;
}

    .check-all-destinations:hover {
        background-color: #E72419;
    }

.counter-background-wrapper {
    position: relative;
}


.plus-icon::after {
    content: "";
    background-image: url('../images/other/icons9-plus.svg');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 17px;
    right: 0px;
    background-size: cover;
    cursor: pointer
}

.plus-icon {
    width: 15px;
    height: 37px;
    position: absolute;
    top: 5px;
    right: 25px;
    cursor: pointer
}


.minus-icon::after {
    content: url('../images/other/icons10-minus.svg');
    font-size: 0px;
    position: absolute;
    top: 23px;
    left: 0px;
    cursor: pointer
}

.minus-icon {
    width: 25px;
    height: 37px;
    position: absolute;
    top: 5px;
    left: 25px;
    cursor: pointer
}

#BookBtn {
    margin-top: 15px;
    cursor: pointer;
    text-decoration: none;
    background-color: #E72419;
    border-radius: 37px;
    position: relative;
    /*bottom: 1px;
    left: 1px;*/
}

/*.plus-icon {
    content: "";
    background-image: url('../images/other/icons9-plus.svg');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 11px;
    right: 25px;
    background-size: cover;
    cursor: pointer
}

.minus-icon {
    content: "";
    background-image: url('../images/other/icons10-minus.svg');
    background-repeat: no-repeat;
    width: 20px;
    height: 3px;
    position: absolute;
    top: 17px;
    left: 25px;
    background-size: cover;
    cursor: pointer
}*/


.divSpinner {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060 !important;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

.loading-img {
    width: 50%;
    height: 50%;
}



/* Container of the dropdown list */
/*.flexselect_dropdown {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
}*/

    /* Each item in the dropdown list */
    /*.flexselect_dropdown ul li {
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }*/

        /* Hover effect */
        /*.flexselect_dropdown ul li.hover,
        .flexselect_dropdown ul li:hover {
            background-color: #d71920;*/ /* RJ red */
            /*color: #fff;
        }*/

        /* Optional: Style selected item */
        /*.flexselect_dropdown ul li.selected {
            background-color: #f0f0f0;
            font-weight: bold;
        }*/



/* Dropdown container */
.flexselect_dropdown {
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
}

    /* General list item style */
    .flexselect_dropdown ul li {
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        background-color: #fff; /* Force default white bg */
        transition: background-color 0.2s ease;
    }

        /* On real hover */
        .flexselect_dropdown ul li:hover,
        .flexselect_dropdown ul li.hover {
            background-color: #d71920 !important; /* RJ red */
            color: #fff !important;
        }

        /* Optional: override default 'selected' style */
        .flexselect_dropdown ul li.selected {
            background-color: #fff !important;
            color: #333 !important;
            font-weight: normal;
        }
