/*
|--------------------------------------------------------------------------
| MUSAFIRCAB-V3.1-GLOBAL-DESIGN-FOUNDATION-SAFE
|--------------------------------------------------------------------------
*/


:root{

    --mc-red:#e51b23;

    --mc-red-dark:#bd1218;

    --mc-navy:#071a2d;

    --mc-navy-2:#0d2d48;

    --mc-text:#101828;

    --mc-text-2:#344054;

    --mc-muted:#667085;

    --mc-line:#e4e9f0;

    --mc-bg:#ffffff;

    --mc-soft:#f7f9fc;

    --mc-soft-red:#fff5f5;

    --mc-green:#12a666;

    --mc-radius:12px;

    --mc-radius-lg:18px;

    --mc-shadow:
        0 12px 32px
        rgba(16,24,40,.08);

    --mc-shadow-small:
        0 5px 16px
        rgba(16,24,40,.05);

    --mc-container:1220px;

}


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html.mcv31{

    scroll-behavior:smooth;

}


html.mcv31 body{

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


html.mcv31 body:not(.mcv3-body){

    background:#fff;

    color:var(--mc-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}


html.mcv31 body:not(.mcv3-body) button,

html.mcv31 body:not(.mcv3-body) input,

html.mcv31 body:not(.mcv3-body) select,

html.mcv31 body:not(.mcv3-body) textarea{

    font-family:inherit;

}


html.mcv31 img{

    max-width:100%;

}


html.mcv31 :focus-visible{

    outline:
        3px solid
        rgba(229,27,35,.18);

    outline-offset:2px;

}


/*
|--------------------------------------------------------------------------
| Global container
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.container{

    width:
        min(
            var(--mc-container),
            calc(100% - 32px)
        );

    max-width:
        var(--mc-container);

}


/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
h1,

html.mcv31
body:not(.mcv3-body)
h2,

html.mcv31
body:not(.mcv3-body)
h3,

html.mcv31
body:not(.mcv3-body)
h4{

    color:
        var(--mc-text);

    letter-spacing:
        -.025em;

}


html.mcv31
body:not(.mcv3-body)
h1{

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    line-height:1.06;

}


html.mcv31
body:not(.mcv3-body)
h2{

    font-size:
        clamp(
            25px,
            3vw,
            34px
        );

    line-height:1.12;

}


html.mcv31
body:not(.mcv3-body)
p{

    color:
        var(--mc-text-2);

    line-height:1.7;

}


/*
|--------------------------------------------------------------------------
| Breadcrumb / Page Hero
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.breadcrumb-section{

    position:relative;

    overflow:hidden;

    background-size:
        cover!important;

    background-position:
        center!important;

}


html.mcv31
body:not(.mcv3-body)
.breadcrumb-section
.banner-content h1{

    color:#fff;

    text-shadow:
        0 4px 20px
        rgba(0,0,0,.30);

}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.btn,

html.mcv31
body:not(.mcv3-body)
.primary-btn1,

html.mcv31
body:not(.mcv3-body)
.primary-btn2,

html.mcv31
body:not(.mcv3-body)
.primary-btn3{

    border-radius:
        9px;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


html.mcv31
body:not(.mcv3-body)
.btn:hover,

html.mcv31
body:not(.mcv3-body)
.primary-btn1:hover,

html.mcv31
body:not(.mcv3-body)
.primary-btn2:hover,

html.mcv31
body:not(.mcv3-body)
.primary-btn3:hover{

    transform:
        translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| Form System
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.form-control,

html.mcv31
body:not(.mcv3-body)
.form-select,

html.mcv31
body:not(.mcv3-body)
input[type="text"],

html.mcv31
body:not(.mcv3-body)
input[type="email"],

html.mcv31
body:not(.mcv3-body)
input[type="tel"],

html.mcv31
body:not(.mcv3-body)
input[type="date"],

html.mcv31
body:not(.mcv3-body)
input[type="number"],

html.mcv31
body:not(.mcv3-body)
select,

html.mcv31
body:not(.mcv3-body)
textarea{

    border-radius:
        9px;

}


html.mcv31
body:not(.mcv3-body)
.form-control:focus,

html.mcv31
body:not(.mcv3-body)
.form-select:focus,

html.mcv31
body:not(.mcv3-body)
input:focus,

html.mcv31
body:not(.mcv3-body)
select:focus,

html.mcv31
body:not(.mcv3-body)
textarea:focus{

    border-color:
        rgba(229,27,35,.55);

    box-shadow:
        0 0 0 3px
        rgba(229,27,35,.09);

}


/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.card,

html.mcv31
body:not(.mcv3-body)
.package-card,

html.mcv31
body:not(.mcv3-body)
.tour-card,

html.mcv31
body:not(.mcv3-body)
.blog-card,

html.mcv31
body:not(.mcv3-body)
.activity-card{

    border-color:
        var(--mc-line);

    border-radius:
        var(--mc-radius);

    box-shadow:
        var(--mc-shadow-small);

}


/*
|--------------------------------------------------------------------------
| Accordions / Itinerary / FAQ
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.accordion-item{

    overflow:hidden;

    border-color:
        var(--mc-line);

    border-radius:
        var(--mc-radius)!important;

    background:#fff;

}


html.mcv31
body:not(.mcv3-body)
.accordion-button{

    min-height:54px;

    font-weight:750;

}


html.mcv31
body:not(.mcv3-body)
.accordion-button:not(.collapsed){

    color:
        var(--mc-red);

    background:
        var(--mc-soft-red);

    box-shadow:none;

}


/*
|--------------------------------------------------------------------------
| Package Details General
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.package-details-area{

    overflow:hidden;

}


html.mcv31
body:not(.mcv3-body)
.package-details-area img{

    height:auto;

    border-radius:10px;

}


/*
|--------------------------------------------------------------------------
| Blog / Rich Content
|--------------------------------------------------------------------------
*/

html.mcv31
body:not(.mcv3-body)
.blog-details-content img,

html.mcv31
body:not(.mcv3-body)
.details-content img,

html.mcv31
body:not(.mcv3-body)
.static-page-content img{

    height:auto;

    border-radius:10px;

}


/*
|--------------------------------------------------------------------------
| Responsive Tables
|--------------------------------------------------------------------------
*/

.mcv31-table-scroll{

    max-width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:
        touch;

}


/*
|--------------------------------------------------------------------------
| V3 Reusable Component Classes
|--------------------------------------------------------------------------
*/

.mcv31-shell{

    width:
        min(
            var(--mc-container),
            calc(100% - 32px)
        );

    margin-inline:auto;

}


.mcv31-section{

    padding:
        52px 0;

}


.mcv31-section-soft{

    background:
        var(--mc-soft);

}


.mcv31-eyebrow{

    color:
        var(--mc-red);

    font-size:11px;

    font-weight:900;

    letter-spacing:.11em;

    text-transform:
        uppercase;

}


.mcv31-title{

    margin:
        4px 0 8px;

    color:
        var(--mc-text);

    font-size:
        clamp(
            27px,
            3vw,
            38px
        );

    line-height:1.08;

    letter-spacing:
        -.035em;

}


.mcv31-card{

    border:
        1px solid
        var(--mc-line);

    border-radius:
        var(--mc-radius);

    background:#fff;

    box-shadow:
        var(--mc-shadow-small);

}


.mcv31-btn{

    min-height:44px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:
        0 16px;

    border:
        1px solid
        transparent;

    border-radius:9px;

    background:
        var(--mc-red);

    color:#fff!important;

    font-size:13px;

    font-weight:850;

    text-decoration:none!important;

}


.mcv31-btn:hover{

    background:
        var(--mc-red-dark);

}


.mcv31-btn-outline{

    border-color:
        var(--mc-line);

    background:#fff;

    color:
        var(--mc-text)!important;

}


.mcv31-chip{

    min-height:32px;

    display:inline-flex;

    align-items:center;

    padding:
        0 11px;

    border:
        1px solid
        var(--mc-line);

    border-radius:
        999px;

    background:#fff;

    color:
        var(--mc-text-2);

    font-size:11px;

    font-weight:750;

}


.mcv31-grid-3{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:16px;

}


.mcv31-grid-4{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:14px;

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    html.mcv31
    body:not(.mcv3-body)
    .container{

        width:
            min(
                var(--mc-container),
                calc(100% - 24px)
            );

    }


    .mcv31-grid-4{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:767px){

    html.mcv31
    body:not(.mcv3-body){

        font-size:15px;

    }


    html.mcv31
    body:not(.mcv3-body)
    h1{

        font-size:
            clamp(
                28px,
                9vw,
                38px
            );

    }


    html.mcv31
    body:not(.mcv3-body)
    h2{

        font-size:
            clamp(
                23px,
                7vw,
                30px
            );

    }


    html.mcv31
    body:not(.mcv3-body)
    .btn,

    html.mcv31
    body:not(.mcv3-body)
    .primary-btn1,

    html.mcv31
    body:not(.mcv3-body)
    .primary-btn2,

    html.mcv31
    body:not(.mcv3-body)
    .primary-btn3{

        min-height:44px;

    }


    .mcv31-section{

        padding:
            36px 0;

    }


    .mcv31-grid-3,

    .mcv31-grid-4{

        grid-template-columns:
            1fr;

    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media(
    prefers-reduced-motion:reduce
){

    html.mcv31{

        scroll-behavior:auto;

    }


    html.mcv31 *,

    html.mcv31 *::before,

    html.mcv31 *::after{

        animation-duration:
            .01ms!important;

        transition-duration:
            .01ms!important;

    }

}