/**<style>*/

/*PART 02 — CSS (Section 1)*/
    /*=========================================================
MARAMATTA SAFARIS
CLIENT EXPERIENCES
Luxury Editorial Design
=========================================================*/

:root{

    --ms-green:#556B2F;
    --ms-green-dark:#455726;

    --ms-gold:#D99532;

    --ms-bg:#FCFBF8;

    --ms-white:#ffffff;

    --ms-text:#555555;

    --ms-heading:#3E4A25;

    --ms-border:#ECE8DF;

    --shadow-small:
        0 12px 35px rgba(0,0,0,.05);

    --shadow-medium:
        0 18px 55px rgba(0,0,0,.08);

    --shadow-large:
        0 28px 70px rgba(0,0,0,.12);

}


/*=========================================================
SECTION
=========================================================*/

.client-experience-section{

    position:relative;

    padding:90px 0;

    background:#FCFBF8;
        /*linear-gradient(
        //180deg,
        //#FAF8F3 0%,
        //#FCFBF8 55%,
       / #FFFFFF 100%
       // );*/

    overflow:hidden;

}


/* Decorative circles */

.client-experience-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(217,149,50,.08),
        transparent 70%
    );

    top:-180px;

    right:-180px;

}

.client-experience-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(
        rgba(85,107,47,.05),
        transparent 75%
    );

    bottom:-180px;

    left:-180px;

}


/*=========================================================
CONTAINER
=========================================================*/

.client-experience-section .container{

    max-width:1320px;

    margin:auto;

    padding:0 25px;

    position:relative;

    z-index:5;

}


/*=========================================================
SECTION HEADER
=========================================================*/

.section-header{

    text-align:center;

    max-width:850px;

    margin:auto auto 55px;

}

.section-subtitle{

    display:inline-block;

    font-family:'Montserrat',sans-serif;

    font-size:.88rem;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--ms-gold);

    margin-bottom:18px;

}

.section-header h2{

    font-family:'Playfair Display',serif;

    color:var(--ms-heading);

    font-size:3.1rem;

    line-height:1.18;

    font-weight:700;

    margin-bottom:24px;

}

.section-header p{

    font-family:'Montserrat',sans-serif;

    font-size:1.08rem;

    line-height:1.9;

    color:var(--ms-text);

}

.luxury-divider{

display:flex;

justify-content:center;

margin-bottom:35px;

}

.luxury-divider span{

width:80px;

height:2px;

background:

linear-gradient(

90deg,

transparent,

var(--ms-gold),

transparent

);

display:block;

}


/*=========================================================
FEATURED VIDEO
=========================================================*/

.featured-story{

    display:grid;

    /*grid-template-columns:1.7fr 0.8fr;*/

    grid-template-columns:1.6fr 1fr;
    
    max-height:flex;

    background:#fff;

    border-radius:26px;

    overflow:hidden;
    
    margin-bottom:28px;

    box-shadow:var(--shadow-medium);

    transition:.45s;

}

.featured-story:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-large);

}

/*</style>*/


/*<style>*/
/*PART 02 — CSS (Section 2)*/
    /*=========================================================
FEATURED IMAGE
=========================================================*/

.video-thumbnail{

    position:relative;

    overflow:hidden;
    
    
aspect-ratio:16/10;

max-height:460px;

overflow:hidden;

}

.video-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s ease;

}

.featured-story:hover img{

    transform:scale(1.08);

}


/*=========================================================
VIDEO OVERLAY
=========================================================*/

.video-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.08),

    rgba(0,0,0,.20),

    rgba(0,0,0,.60)
    );

    display:flex;

    align-items:center;

    justify-content:center;

}

.video-duration{

    position:absolute;

    right:24px;

    bottom:24px;

    background:

        rgba(255,255,255,.14);

    backdrop-filter:blur(14px);

    color:#fff;

    font-family:'Montserrat';

    font-size:.92rem;

    font-weight:700;

    padding:10px 18px;

    border-radius:40px;

    letter-spacing:.5px;

}

/*=========================================================
CINEMATIC PLAY BUTTON
=========================================================*/

.play-button{

    position:relative;

    width:104px;
    height:104px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:34px;

    background:
        rgba(255,255,255,.16);

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 15px 40px rgba(0,0,0,.25);

    transition:
        .45s ease;

    animation:
        floatingPlay 4s ease-in-out infinite;

}

.play-button::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    animation:

        ripple 3s infinite;

}

@keyframes ripple{

    0%{

        transform:scale(.75);

        opacity:1;

    }

    100%{

        transform:scale(1.5);

        opacity:0;

    }

}


.play-button:hover{

    background:var(--ms-gold);

    transform:scale(1.15);

}


@keyframes floatingPlay{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.play-button:hover{

    transform:scale(1.12);

    background:

    var(--ms-gold);

}

.play-button i{

    margin-left:5px;

}
/*</style>*/


/*<style>*/
/*PART 02 — CSS (Section 3)*/
    /*=========================================================
FEATURED CONTENT
=========================================================*/

.featured-content{
    
    padding:34px;

    display:flex;

    flex-direction:column;

    justify-content:center;
    
    position:relative;

    z-index:2;

}

.featured-content blockquote::before{

    content:"“";

    position:absolute;

    left:-18px;

    top:-80px;

    font-family:'Playfair Display';

    font-size:170px;

    line-height:1;

    color:

        rgba(217,149,50,.12);

    z-index:-1;

}

.country-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:9px 18px;

    border-radius:50px;

    background:#F5F1E8;

    color:var(--ms-green);

    font-weight:600;

    font-family:'Montserrat';

    margin-bottom:30px;

}

.luxury-line{

    width:90px;

    height:3px;

    background:

        linear-gradient(

        90deg,

        var(--ms-gold),

        #f7d58f

        );

    border-radius:30px;

    margin-bottom:26px;

}

.featured-content h3{

    font-family:'Playfair Display';

    color:var(--ms-heading);

    font-size:1.85rem;

    line-height:1.25;

    margin-bottom:2px;



 

}

.featured-meta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.package{

    background:#F6F6F6;

    padding:10px 18px;

    border-radius:50px;

    font-family:'Montserrat';

    font-weight:600;

}

.duration{

    background:#EDF4E5;

    color:var(--ms-green);

    padding:10px 18px;

    border-radius:50px;

}

.stars{

    color:#F3B53F;

    font-size:22px;

    margin-bottom:30px;

}

.featured-content blockquote{

    font-family:'Playfair Display';

    font-size:1.35rem;

    line-height:1.8;

    color:#666;

    font-style:italic;

    margin-bottom:0px;

}

.watch-story{

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    text-decoration:none;

    color:var(--ms-green);

    font-family:'Montserrat';

    font-weight:700;

    transition:.35s;

}

.watch-story:hover{

    color:var(--ms-gold);

}

.watch-story span{

    transition:.35s;

}

.watch-story:hover span{

    transform:translateX(8px);

}



/*</style>*/

/*<style>*/
/*PART 02 — CSS (Section 4)*/


/***********************************/
/*=========================================================
LUXURY DIVIDER
=========================================================*/

.stories-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:42px 0 38px;

}



.stories-divider span{

    flex:1;

    max-width:120px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--ms-gold),
        transparent
    );

}

.luxury-divider span{

width:0;

transition:

width 1.2s ease;

}

.section-header.is-visible

.luxury-divider span{

width:100px;

}
.stories-divider i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:var(--ms-gold);

    font-size:.9rem;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}
/***************************************/

.stories-heading{

display:flex;

justify-content:space-between;

 align-items:center;  text-align:center;

justify-content:center;

margin-top:20px;


}

.stories-heading h3{

font-family:'Playfair Display';

font-size:2rem;

color:var(--ms-heading);

  margin:20px 0 22px;

}


.stories-wrapper{

position:relative;

margin-top:-40px;

overflow:hidden;

}
 /*+++++++++++++++++BEFORE+++++++++++++++*/
.stories-wrapper::before{

content:"";

position:absolute;

left:0;

top:0;

width:90px;

height:100%;

background:

linear-gradient(

90deg,

#FCFBF8,

transparent

);

z-index:3;

pointer-events:none;

}
 /*+++++++++++++++++AFTER+++++++++++++++*/
.stories-wrapper::after{

content:"";

position:absolute;

right:0;

top:0;

width:90px;

height:100%;

background:

linear-gradient(

270deg,

#FCFBF8,

transparent

);

z-index:3;

pointer-events:none;

}

.carousel-arrow{

position:absolute;

top:40%;

transform:translateY(-50%);

width:54px;

height:54px;

border:none;

border-radius:50%;

background:#fff;

color:var(--ms-green);

cursor:pointer;

box-shadow:

0 12px 30px rgba(0,0,0,.12);

z-index:5;

transition:.35s;

animation:

arrowFloat

5s ease-in-out infinite;

}

@keyframes arrowFloat{

0%{

transform:

translateY(-50%);

}

50%{

transform:

translateY(calc(-50% - 6px));

}

100%{

transform:

translateY(-50%);

}

}

.carousel-arrow:hover{

background:var(--ms-gold);

color:#fff;

transform:

translateY(-50%)

scale(1.08);

}

.carousel-arrow.left{

left:10px;

}

.carousel-arrow.right{

right:10px;

}
    /*=========================================================
VIDEO GRID
=========================================================*/

.stories-grid{

display:flex;

gap:26px;

overflow-x:auto;

overflow-y:hidden;

scroll-behavior:smooth;

padding:8px 20px 25px;

 padding-inline: 24px;

scrollbar-width:none;

-ms-overflow-style:none;

/*Prevent Overscroll*/
overscroll-behavior-x:contain;

 scroll-snap-type:x proximity;
 
 /*=========================================================
DRAG CURSOR
=========================================================*/
cursor:grab;


}

.story-card:first-child{
    margin-left: 8px;
}

.story-card:last-child{
    margin-right: 8px;
}

/*Dragging  stories grids*/
.stories-grid.dragging{

cursor:grabbing;

user-select:none;

scroll-behavior:auto;

}

.stories-grid.dragging *{

user-select:none;

}

/*Disable Image Dragging Otherwise Browsers try to drag images.*/
.story-card img{

pointer-events:none;

-webkit-user-drag:none;

user-select:none;

}


.stories-grid::-webkit-scrollbar{

display:none;

}

/*=========================================================
CARD
=========================================================*/

.story-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    transition:

    transform .45s,

    box-shadow .45s;
    
    border:1px solid transparent;
    
     flex:0 0 280px;
     scroll-snap-align:start;
     

}

.story-card:hover{

    transform:translateY(-10px);

   
    
    border-color: rgba(217,149,50,.22);
    
    box-shadow: 0 35px 70px rgba(217,149,50,.12);

}

.card-image{

    position:relative;

    overflow:hidden;

}

.card-image img{

    width:100%;

    
    height:150px;

    object-fit:cover;

    display:block;

    transition:.8s;

}

.story-card:hover img{

    transform:scale(1.10);

}


/*=========================================================
CARD OVERLAY
=========================================================*/

.card-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

    rgba(0,0,0,.15),

    rgba(0,0,0,.55)

    );

    opacity:0;

    transition:.45s;

}

.story-card:hover .card-overlay{

    opacity:1;

}

.card-overlay button{

    width:76px;

    height:76px;

    border-radius:50%;

    border:none;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    background:

    rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.card-overlay button:hover{

    background:var(--ms-gold);

    transform:scale(1.12);

}


/*</style>*/

/*<style>*/
/*PART 02 — CSS (Section 5)*/
    /*=========================================================
CARD CONTENT
=========================================================*/

.card-content{

    padding:28px;

}

.country{
    font-size:.72rem;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#A9A08C;
    font-weight:600;
    font-family:'Montserrat';

}

.card-content h4{

    font-family:'Playfair Display';

    color:var(--ms-heading);
  
    font-size:1.28rem;
    font-weight:700;

    line-height:1.3;
    margin:10px 0 8px;

}

.package-name{

    font-family:'Montserrat';

    color:#777;

    font-size:.92rem;
    font-weight:500;
    line-height:1.6;

}


/*</style>*/

/*<style>*/
/*PART 02 — CSS (Section 6 – Responsive)*/
    /*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1100px){

.featured-story{

grid-template-columns:1fr;

}

.featured-content{

padding:50px;

}

.section-header h2{

font-size:2.6rem;

}

}

@media(max-width:768px){

.client-experience-section{

padding:90px 0;

}

.section-header{

margin-bottom:60px;

}

.section-header h2{

font-size:2.2rem;

}

.stories-grid{

grid-template-columns:1fr;

gap:28px;

}

.featured-content{

padding:38px;

}

.featured-content h3{

font-size:1.8rem;

}

.play-button{

width:78px;
height:78px;

font-size:28px;

}

.card-image img{

height:250px;

}

.experience-footer p{

font-size:1.6rem;

}

}

@media(max-width:480px){

.section-header h2{

font-size:1.9rem;

}

.section-header p{

font-size:1rem;

}

.featured-content{

padding:30px;

}

.featured-content blockquote{

font-size:1.1rem;

}

.experience-btn{

width:100%;

text-align:center;

}

}
/*</style>*/

/*<!--PART 3B.1 — Piece 1
Luxury Video Lightbox CSS-->
<style>*/
    /*=========================================================
MARAMATTA SAFARIS
LUXURY VIDEO LIGHTBOX
=========================================================*/

.video-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:

        opacity .45s ease,

        visibility .45s ease;

    z-index:999999;

}

/*=========================================================
OPEN STATE
=========================================================*/

.video-lightbox.active{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}

/*BACKGROUND*/
/*=========================================================
BACKDROP
=========================================================*/

.video-backdrop{

    position:absolute;

    inset:0;

    background:

        rgba(20,20,20,.72);

    backdrop-filter:

        blur(14px);

    -webkit-backdrop-filter:

        blur(14px);

}
/*Notice... Not black. Luxury sites never use pure black.*/

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

.video-modal{

    position:relative;

    width:min(1200px,100%);

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:

        0 35px 120px rgba(0,0,0,.30);

    transform:

        translateY(40px)

        scale(.96);

    opacity:0;

    transition:

        .45s cubic-bezier(.2,.8,.2,1);

    z-index:5;

}

/*Open Animation*/
.video-lightbox.active .video-modal{

    transform:

        translateY(0)

        scale(1);

    opacity:1;

}

/*=========================================================
VIDEO FRAME/VIDEO AREA
=========================================================*/

.video-frame{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    background:#000;

    overflow:hidden;

}

/*IFRAME*/
.video-frame iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

/*=========================================================
LOADING: Loading Overlay While YouTube loads... Visitors never see a blank box.
=========================================================*/

.video-loading{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:24px;

    background:

        linear-gradient(

        180deg,

        rgba(255,255,255,.96),

        rgba(248,248,248,.96)

        );

    transition:

        opacity .35s ease;

    z-index:6;

}

/*Hide Loading*/
.video-loading.hidden{

    opacity:0;

    visibility:hidden;

}

/*=========================================================
SPINNER
=========================================================*/

.loader{

    width:58px;

    height:58px;

    border-radius:50%;

    border:

        4px solid

        rgba(217,149,50,.18);

    border-top-color:

        var(--ms-gold);

    animation:

        spin .8s linear infinite;

}
/*Animation*/
@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*Loading Text*/
.video-loading span{

    font-family:'Montserrat';

    font-size:.95rem;

    letter-spacing:1px;

    color:var(--ms-heading);

}


/*=========================================================
CLOSE BUTTON: Luxury floating close button.
=========================================================*/

.close-video{

    position:absolute;

    top:22px;

    right:22px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:

        rgba(255,255,255,.92);

    color:

        var(--ms-green);

    font-size:18px;

    cursor:pointer;

    z-index:10;

    transition:.35s;

    box-shadow:

        0 12px 30px rgba(0,0,0,.16);

}


/*Hover*/
.close-video:hover{

    background:

        var(--ms-gold);

    color:#fff;

    transform:

        rotate(90deg)

        scale(1.08);

}

/*=========================================================
VIDEO META/ META AREA
=========================================================*/

.video-meta{

    padding:36px 42px;
    
    background:#FCFBF8;

    border-top:1px solid rgba(217,149,50,.12);

}

/*Title*/
.video-meta h3{

    font-family:'Playfair Display';

    font-size:2rem;

    color:var(--ms-heading);

    margin-bottom:18px;

}

/*Details Row*/
.video-details{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*Pills*/
.video-details span{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:40px;

    background:#F5F2EB;

    color:var(--ms-green);

    font-family:'Montserrat';

    font-size:.9rem;

    font-weight:600;

}

/*=========================================================
BODY LOCK: Scroll Lock Helper We'll toggle this from JavaScript.Scroll Lock Helper We'll toggle this from JavaScript.
=========================================================*/

body.video-open{

    overflow:hidden;

}

/*Responsive Tablet*/
@media(max-width:991px){

.video-lightbox{

padding:20px;

}

.video-meta{

padding:30px;

}

.video-meta h3{

font-size:1.7rem;

}

}

/*phone*/
@media(max-width:768px){

.video-lightbox{

padding:14px;

}

.video-modal{

border-radius:20px;

}

.close-video{

width:46px;

height:46px;

top:14px;

right:14px;

}

.video-meta{

padding:24px;

}

.video-meta h3{

font-size:1.45rem;

line-height:1.3;

}

.video-details{

gap:10px;

}

.video-details span{

font-size:.82rem;

padding:8px 14px;

}

}

/*Reduced Motion Accessibility.*/
@media(prefers-reduced-motion:reduce){

.video-lightbox,

.video-modal,

.close-video,

.video-loading{

transition:none;

animation:none;

}

.loader{

animation:none;

}

}


/*=========================================================
SCREEN READER ONLY
=========================================================*/

.sr-only{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}


/*=========================================================
DISABLED ARROWS
=========================================================*/

.carousel-arrow.is-disabled{

    opacity:.25;

    pointer-events:none;

    transform:translateY(-50%) scale(.9);

}



/*</style>*/

/*PART 3B.4 PIECE 1: Complete Scroll Reveal Engine
<style>*/
   /*=========================================================
SCROLL REVEAL: INVisible State
=========================================================*/

.reveal{

    opacity:1;

    transform:translateY(60px);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

    will-change:

        opacity,

        transform;

} 

/*Visible State*/
.reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}

/*Featured Story: Give it slightly more elegance.*/
.featured-story.reveal{

    transform:

        translateY(30px)

        scale(.97);

}

/*Visible*/
.featured-story.reveal.is-visible{

    transform:

        translateY(0)

        scale(1);

}

/*Cards : Cards should feel lighter.*/
/*.story-card.reveal{

    transform:

        translateY(40px);

}*/

.experience-footer.reveal{

    transform:

        translateY(30px);

}


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

.reveal{

opacity:1;

transform:none;

transition:none;

}

}

/*</style>*/