@charset "utf-8";
/* CSS Document */

/* =========================================================
   MARK ROBERTS MAGICIAN
   EXPERIENCES PAGE CSS

   Scoped:
   mr-services-

   Theme:
   Luxury / Mystery / Cinematic
========================================================= */



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


.mr-services-hero {

    position:relative;

    min-height:900px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#050505;

}



.mr-services-hero-image {

    position:absolute;

    inset:0;

}



.mr-services-hero-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.mr-services-hero-overlay {

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.95),
        rgba(0,0,0,.65),
        rgba(0,0,0,.3)
    );


}





.mr-services-hero-content {

    position:relative;

    z-index:2;

    max-width:800px;

    color:white;


}



.mr-services-hero-content h1 {


    font-family:var(--font-display);


    font-size:

    clamp(3rem,6vw,5.5rem);


    line-height:1.05;


    margin:25px 0;


}




.mr-services-hero-content h1 span {


    color:var(--red);


}



.mr-services-hero-content p {


    max-width:650px;


    font-size:1.2rem;


    line-height:1.8;


    color:#ddd;


}






/* =========================================================
   INTRODUCTION
========================================================= */


.mr-services-intro {


    max-width:850px;


    text-align:center;


}



.mr-services-intro-content {


    margin:auto;


}



.mr-services-intro h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2rem,4vw,3.5rem);


    margin-bottom:30px;


}



.mr-services-intro p {


    font-size:1.1rem;


    line-height:1.9;


    color:#444;


}







/* =========================================================
   EXPERIENCE GRID
========================================================= */


.mr-services-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:35px;


}





.mr-service-card {


    position:relative;


    overflow:hidden;


    min-height:650px;


    background:#111;


    border:

    1px solid rgba(255,255,255,.08);


}



.mr-service-card img {


    width:100%;


    height:100%;


    min-height:650px;


    object-fit:cover;


    display:block;


    transition:

    transform .7s ease;


}




.mr-service-card::after {


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    0deg,

    rgba(0,0,0,.95),

    rgba(0,0,0,.1)

    );


}





.mr-service-card:hover img {


    transform:scale(1.08);


}







.mr-service-card-content {


    position:absolute;


    bottom:0;


    left:0;


    right:0;


    padding:35px;


    z-index:2;


    color:white;


}




.mr-service-card-content span {


    color:var(--red);


    font-size:.85rem;


    letter-spacing:.15em;


    text-transform:uppercase;


}




.mr-service-card-content h3 {


    font-family:var(--font-display);


    font-size:2rem;


    margin:15px 0;


}



.mr-service-card-content p {


    color:#ddd;


    line-height:1.7;


}





.mr-service-card-content a {


    display:inline-block;


    margin-top:20px;


    color:white;


    text-decoration:none;


    border-bottom:

    1px solid var(--red);


    padding-bottom:5px;


}






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


.mr-services-feature {


    position:relative;


    min-height:750px;


    display:flex;


    align-items:center;


    overflow:hidden;


}





.mr-services-feature-image {


    position:absolute;


    inset:0;


}



.mr-services-feature-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}



.mr-services-feature-overlay {


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    90deg,

    rgba(0,0,0,.95),

    rgba(0,0,0,.45)

    );


}





.mr-services-feature-content {


    position:relative;


    z-index:2;


    max-width:700px;


    color:white;


}





.mr-services-feature-content h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2.5rem,5vw,4rem);


}



.mr-services-feature-content p {


    color:#ddd;


    font-size:1.1rem;


    line-height:1.9;


}






/* =========================================================
   BENEFITS
========================================================= */


.mr-services-benefit-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}




.mr-services-benefit {


    padding:35px;


    background:#fff;


    border:

    1px solid #ddd;


}



.mr-services-benefit span {


    font-family:var(--font-display);


    color:var(--red);


    font-size:2rem;


}



.mr-services-benefit h3 {


    font-family:var(--font-display);


    margin:20px 0;


}



.mr-services-benefit p {


    color:#555;


    line-height:1.8;


}







/* =========================================================
   BOOKING PROCESS
========================================================= */


.mr-services-process {


    background:#080808;


    color:white;


}



.mr-services-process-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:40px;


}





.mr-services-process-item {


    text-align:center;


    padding:40px;


    border:

    1px solid rgba(255,255,255,.1);


}




.mr-services-process-item strong {


    font-family:var(--font-display);


    color:var(--red);


    font-size:3rem;


}



.mr-services-process-item h3 {


    font-family:var(--font-display);


    margin:20px 0;


}




.mr-services-process-item p {


    color:#bbb;


    line-height:1.8;


}







/* =========================================================
   CTA
========================================================= */


.mr-services-cta {


    position:relative;


    padding:140px 20px;


    background:


    url("/assets/images/services/services-hero.webp")

    center/cover;


    color:white;


    text-align:center;


}



.mr-services-cta-overlay {


    position:absolute;


    inset:0;


    background:

    rgba(0,0,0,.85);


}




.mr-services-cta-content {


    position:relative;


    z-index:2;


    max-width:850px;


    margin:auto;


}




.mr-services-cta h2 {


    font-family:var(--font-display);


    font-size:

    clamp(2.5rem,5vw,4rem);


}



.mr-services-cta h2 span {


    color:var(--red);


}



.mr-services-cta p {


    color:#ddd;


    font-size:1.15rem;


    line-height:1.8;


}







/* =========================================================
   REVEAL ANIMATION
========================================================= */


.reveal {


    opacity:0;


    transform:translateY(35px);


    transition:

    opacity .8s ease,

    transform .8s ease;


}



.reveal.visible {


    opacity:1;


    transform:none;


}







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



@media(max-width:1200px){


.mr-services-grid {


grid-template-columns:

repeat(2,1fr);


}


.mr-services-benefit-grid {


grid-template-columns:

repeat(2,1fr);


}



}





@media(max-width:900px){



.mr-services-hero {


min-height:700px;


}



.mr-services-grid,


.mr-services-process-grid {


grid-template-columns:1fr;


}



.mr-services-feature {


min-height:650px;


}



}



@media(max-width:600px){


.mr-services-benefit-grid {


grid-template-columns:1fr;


}



.mr-service-card {


min-height:550px;


}



.mr-service-card img {


min-height:550px;


}



}