.elementor-4998 .elementor-element.elementor-element-60c6800{width:100%;max-width:100%;}.elementor-4998 .elementor-element.elementor-element-f2204f1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-60c6800 *//*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 1A
GLOBAL FOUNDATION

==========================================================*/


/*=========================================
ROOT VARIABLES
=========================================*/

:root{

    --wm-contact-primary:#0F4C81;
    --wm-contact-primary-dark:#0B3B63;
    --wm-contact-secondary:#2C7CC2;
    --wm-contact-light:#F5FAFE;

    --wm-contact-heading:#18364A;
    --wm-contact-text:#65788A;

    --wm-contact-border:#E7EEF5;

    --wm-contact-white:#FFFFFF;

    --wm-contact-shadow:
        0 30px 80px rgba(15,76,129,.08);

}


/*=========================================
GENERAL
=========================================*/


.wm-contact-hero,
.wm-contact-methods,
.wm-contact-location,
.wm-contact-concierge{

    position:relative;

    overflow:hidden;

    background:#ffffff;

}


.wm-contact-container{

    width:min(1280px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}



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


.wm-contact-methods{

    padding:150px 0;

}


.wm-contact-location{

    padding:150px 0;

}


.wm-contact-concierge{

    padding:170px 0;

}



/*=========================================
TYPOGRAPHY
=========================================*/


.wm-contact-hero h1{

    margin:0;

    color:var(--wm-contact-heading);

    font-size:clamp(58px,6vw,84px);

    font-weight:700;

    line-height:1.05;

    letter-spacing:-2px;

}



.wm-contact-methods h2,
.wm-contact-location h2,
.wm-contact-concierge h2{

    margin:0 0 26px;

    color:var(--wm-contact-heading);

    font-size:clamp(42px,5vw,60px);

    line-height:1.15;

    font-weight:700;

}



.wm-contact-methods h3,
.wm-contact-location h3,
.wm-contact-concierge h3{

    margin:0 0 16px;

    color:var(--wm-contact-heading);

    font-size:30px;

    line-height:1.3;

}



.wm-contact-hero p,
.wm-contact-methods p,
.wm-contact-location p,
.wm-contact-concierge p{

    margin:0;

    color:var(--wm-contact-text);

    font-size:17px;

    line-height:1.95;

}



/*=========================================
BADGE
=========================================*/


.wm-contact-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:30px;

    border-radius:999px;

    background:#EDF6FD;

    color:var(--wm-contact-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}



.wm-contact-badge::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--wm-contact-primary);

}



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


.wm-contact-section-heading{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}


.wm-contact-section-heading p{

    max-width:650px;

    margin:auto;

}



/*=========================================
BUTTONS
=========================================*/


.wm-contact-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}



.wm-contact-btn-primary,
.wm-contact-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:205px;

    padding:18px 40px;

    border-radius:999px;

    text-decoration:none !important;

    font-size:15px;

    font-weight:700;

    transition:.35s ease;

}



/* Primary */


.wm-contact-btn-primary{

    background:linear-gradient(
        135deg,
        #0F4C81,
        #236FAE
    );

    color:#ffffff !important;

    box-shadow:
        0 20px 45px rgba(15,76,129,.18);

}



.wm-contact-btn-primary,
.wm-contact-btn-primary *{

    color:#ffffff !important;

}



.wm-contact-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
        0 35px 70px rgba(15,76,129,.24);

}



/* Secondary */


.wm-contact-btn-secondary{

    background:#ffffff;

    border:1px solid var(--wm-contact-border);

    color:var(--wm-contact-primary) !important;

}



.wm-contact-btn-secondary,
.wm-contact-btn-secondary *{

    color:var(--wm-contact-primary) !important;

}



.wm-contact-btn-secondary:hover{

    background:#F7FBFE;

    transform:translateY(-6px);

}



/*=========================================
IMAGES
=========================================*/


.wm-contact-hero img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}



/*=========================================
COMMON CARDS
=========================================*/


.wm-contact-method-card,
.wm-contact-location-card,
.wm-contact-concierge-box,
.wm-contact-concierge-card{

    background:#ffffff;

    border-radius:34px;

    box-shadow:var(--wm-contact-shadow);

}



/*=========================================
DECORATIVE BLOBS
=========================================*/


.wm-contact-blob{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            rgba(66,145,214,.16),

            rgba(66,145,214,0)

        );

}



/*=========================================
TRANSITIONS
=========================================*/


.wm-contact-btn-primary,
.wm-contact-btn-secondary,
.wm-contact-method-card,
.wm-contact-location-card,
.wm-contact-map-btn,
.wm-contact-concierge-box,
.wm-contact-concierge-card{

    transition:.35s ease;

}



/*=========================================
TEXT SELECTION
=========================================*/


.wm-contact-hero ::selection,
.wm-contact-methods ::selection,
.wm-contact-location ::selection,
.wm-contact-concierge ::selection{

    background:#0F4C81;

    color:#ffffff;

}



/*=========================================
SMOOTH SCROLL
=========================================*/


html{

    scroll-behavior:smooth;

}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 1B
PREMIUM HERO

==========================================================*/


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

.wm-contact-hero{

    position:relative;

    overflow:hidden;

    padding:150px 0 190px;

    background:
    linear-gradient(
        180deg,
        #F7FBFE 0%,
        #FFFFFF 100%
    );

}


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

.wm-contact-hero-grid{

    display:grid;

    grid-template-columns:1.08fr .92fr;

    align-items:center;

    gap:110px;

}


/*=========================================
LEFT
=========================================*/

.wm-contact-hero-content{

    max-width:650px;

}


.wm-contact-hero-content p{

    margin-top:30px;

    max-width:570px;

}


/*=========================================
BUTTONS
=========================================*/

.wm-contact-buttons{

    margin-top:45px;

}


/*=========================================
INFORMATION STRIP
=========================================*/

.wm-contact-hero-info{

    display:flex;

    align-items:center;

    gap:38px;

    margin-top:60px;

}


.wm-contact-mini-item{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.wm-contact-mini-item strong{

    color:var(--wm-contact-heading);

    font-size:18px;

    font-weight:700;

}


.wm-contact-mini-item span{

    color:var(--wm-contact-text);

    font-size:15px;

}


.wm-contact-mini-divider{

    width:1px;

    height:52px;

    background:#E6EEF6;

}



/*=========================================
IMAGE
=========================================*/

.wm-contact-hero-image{

    position:relative;

}



/*=========================================
ARC IMAGE
=========================================*/

.wm-contact-hero-arc{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/5.6;

    border-radius:340px 340px 36px 36px;

    background:#ffffff;

    box-shadow:

        0 45px 100px rgba(15,76,129,.10);

}



.wm-contact-hero-arc img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}



.wm-contact-hero-image:hover img{

    transform:scale(1.06);

}



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

.wm-contact-concierge-card{

    position:absolute;

    left:-60px;

    bottom:45px;

    width:290px;

    padding:34px;

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

    backdrop-filter:blur(18px);

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

    border-radius:32px;

    box-shadow:

        0 35px 90px rgba(15,76,129,.15);

}



.wm-contact-concierge-icon{

    width:72px;

    height:72px;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(
        135deg,
        #EDF6FD,
        #DCEBF9
    );

    color:var(--wm-contact-primary);

    font-size:30px;

}



.wm-contact-concierge-card span{

    display:block;

    margin-bottom:12px;

    color:var(--wm-contact-primary);

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}



.wm-contact-concierge-card h3{

    margin:0 0 16px;

    color:var(--wm-contact-heading);

    font-size:30px;

    line-height:1.25;

}



.wm-contact-concierge-card p{

    margin:0;

    color:var(--wm-contact-text);

    font-size:15px;

    line-height:1.8;

}



/*=========================================
BLOBS
=========================================*/


.wm-contact-blob-1{

    width:600px;

    height:600px;

    top:-220px;

    right:-220px;

    opacity:.28;

}


.wm-contact-blob-2{

    width:360px;

    height:360px;

    left:-120px;

    bottom:40px;

    opacity:.14;

}



/*=========================================
BOTTOM WAVE
=========================================*/


.wm-contact-bottom-wave{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    line-height:0;

}



.wm-contact-bottom-wave svg{

    width:100%;

    height:130px;

    display:block;

}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 2
PREMIUM CONTACT CARDS

==========================================================*/


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

.wm-contact-methods{

    position:relative;

    padding:130px 0;

    background:#ffffff;

}



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


.wm-contact-method-grid{

    display:grid;

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

    gap:28px;

}



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


.wm-contact-method-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:38px;

    background:#ffffff;

    border-radius:30px;

    border:1px solid #EAF2F8;

    text-decoration:none;

    overflow:hidden;

    box-shadow:

        0 18px 55px rgba(15,76,129,.08);


    transition:

        transform .35s ease,

        box-shadow .35s ease;

}



/*=========================================
TOP ACCENT
=========================================*/


.wm-contact-method-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;


    background:linear-gradient(

        90deg,

        #0F4C81,

        #5EAEE2

    );

}



/*=========================================
HOVER
=========================================*/


.wm-contact-method-card:hover{

    transform:translateY(-8px);


    box-shadow:

        0 30px 70px rgba(15,76,129,.14);

}



.wm-contact-method-card:hover 
.wm-contact-method-icon{

    transform:translateY(-4px);

}



.wm-contact-method-card:hover 
.wm-contact-link i{

    transform:translateX(6px);

}



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


.wm-contact-method-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

}



/*=========================================
ICON
=========================================*/


.wm-contact-method-icon{

    width:68px;

    height:68px;

    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:linear-gradient(

        135deg,

        #EDF6FD,

        #DDECF9

    );


    color:var(--wm-contact-primary);

    font-size:28px;


    transition:.35s ease;

}



/*=========================================
WHATSAPP ICON
=========================================*/


.wm-contact-whatsapp{

    background:linear-gradient(

        135deg,

        #E8FAEF,

        #D8F7E5

    );


    color:#25D366;

}



/*=========================================
TITLE AREA
=========================================*/


.wm-contact-method-title{

    display:flex;

    flex-direction:column;

    gap:6px;

}



.wm-contact-method-title span{

    margin:0;


    color:var(--wm-contact-primary);


    font-size:11px;


    font-weight:700;


    letter-spacing:2px;


    text-transform:uppercase;

}



.wm-contact-method-title h3{

    margin:0;


    color:var(--wm-contact-heading);


    font-size:29px;


    line-height:1.2;

}



/*=========================================
DESCRIPTION
=========================================*/


.wm-contact-method-card p{

    margin:0;


    color:var(--wm-contact-text);


    font-size:16px;


    line-height:1.9;

}



/*=========================================
BOTTOM LINK
=========================================*/


.wm-contact-link{

    display:inline-flex;


    align-items:center;


    gap:10px;


    margin-top:28px;


    color:var(--wm-contact-primary);


    font-size:15px;


    font-weight:700;

}



.wm-contact-link i{

    transition:.35s ease;

}



/*=========================================
BOTTOM NOTE
=========================================*/


.wm-contact-response{

    display:flex;


    justify-content:center;


    align-items:center;


    gap:14px;


    margin-top:55px;

}



.wm-contact-response i{

    width:42px;

    height:42px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#EDF6FD;


    color:var(--wm-contact-primary);


    font-size:16px;

}



.wm-contact-response span{

    color:var(--wm-contact-text);


    font-size:15px;

}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 3
PREMIUM LOCATION SECTION

==========================================================*/


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


.wm-contact-location{

    position:relative;

    overflow:hidden;

    padding:160px 0;

    background:

    linear-gradient(

        180deg,

        #F7FBFE 0%,

        #FFFFFF 100%

    );

}



/*=========================================
MAP
=========================================*/


.wm-contact-map-wrapper{

    position:relative;

    margin-top:70px;

}



.wm-contact-map{

    overflow:hidden;

    border-radius:38px;

    background:#ffffff;

    border:1px solid #EAF2F8;


    box-shadow:

        0 30px 90px rgba(15,76,129,.10);

}



.wm-contact-map iframe{

    display:block;

    width:100%;

    height:620px;

    border:0;

}



/*=========================================
FLOATING LOCATION CARD
=========================================*/


.wm-contact-location-card{

    position:relative;

    z-index:5;

    width:min(560px,92%);


    margin:-90px auto 0;


    padding:46px;


    display:flex;

    flex-direction:column;


    align-items:center;

    text-align:center;


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


    backdrop-filter:blur(16px);


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



    border-radius:36px;


    border:1px solid rgba(255,255,255,.8);



    box-shadow:

        0 40px 90px rgba(15,76,129,.14);

}



/*=========================================
LOGO
=========================================*/


.wm-contact-location-logo{

    width:92px;

    height:92px;


    margin-bottom:24px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:26px;


    background:#F5FAFE;



    box-shadow:

        0 15px 35px rgba(15,76,129,.08);

}



.wm-contact-location-logo img{

    width:68px;

    height:auto;

    display:block;

}



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


.wm-contact-location-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}



.wm-contact-location-content span{

    margin-bottom:14px;


    color:var(--wm-contact-primary);


    font-size:11px;


    font-weight:700;


    letter-spacing:3px;


    text-transform:uppercase;

}



.wm-contact-location-content h3{

    margin:0;


    color:var(--wm-contact-heading);


    font-size:34px;


    line-height:1.25;

}



.wm-contact-location-content p{

    margin-top:14px;


    color:var(--wm-contact-text);


    font-size:17px;

}



/*=========================================
BUTTON
=========================================*/


.wm-contact-map-btn{

    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:12px;


    margin-top:34px;


    padding:18px 34px;


    border-radius:999px;



    background:

    linear-gradient(

        135deg,

        #0F4C81,

        #246EAC

    );



    color:#ffffff !important;


    text-decoration:none;



    font-size:15px;


    font-weight:700;



    box-shadow:

        0 20px 50px rgba(15,76,129,.20);



    transition:.35s ease;

}



.wm-contact-map-btn,
.wm-contact-map-btn *{

    color:#ffffff !important;

}



.wm-contact-map-btn:hover{

    transform:translateY(-5px);


    box-shadow:

        0 30px 65px rgba(15,76,129,.24);

}



.wm-contact-map-btn:hover i{

    transform:translateX(5px);

}



.wm-contact-map-btn i{

    transition:.35s ease;

}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 4
PREMIUM CLOSING SECTION

==========================================================*/


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


.wm-contact-concierge{

    position:relative;

    overflow:hidden;

    padding:150px 0;


    background:

    radial-gradient(

        circle at top,

        #F4FAFE 0%,

        #FFFFFF 45%

    );

}



/*=========================================
REMOVE CARD FEEL
=========================================*/


.wm-contact-concierge-box{

    max-width:900px;

    margin:auto;


    padding:0;


    text-align:center;


    background:transparent;


    border:none;


    box-shadow:none;

}



/*=========================================
MAIN CONTENT
=========================================*/


.wm-contact-concierge-left{

    max-width:760px;

    margin:auto;

}



.wm-contact-concierge-left p{

    max-width:650px;


    margin:25px auto 0;


    color:var(--wm-contact-text);


    font-size:18px;


    line-height:1.8;

}



/*=========================================
BUTTONS
=========================================*/


.wm-contact-concierge .wm-contact-buttons{


    display:flex;


    justify-content:center;


    gap:18px;


    margin-top:45px;

}



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


.wm-contact-concierge-right{


    margin-top:90px;


    padding-top:70px;


    position:relative;

}



.wm-contact-concierge-right::before{


    content:"";


    position:absolute;


    top:0;


    left:50%;


    transform:translateX(-50%);



    width:90px;


    height:1px;



    background:#DCE8F2;

}



/*=========================================
QUOTE ICON
=========================================*/


.wm-contact-quote-icon{


    width:75px;


    height:75px;


    margin:0 auto 35px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:


    linear-gradient(

        135deg,

        #EDF6FD,

        #DCECF9

    );



    color:#0F4C81;


    font-family:Georgia,serif;


    font-size:38px;

}



/*=========================================
QUOTE
=========================================*/


.wm-contact-concierge-right blockquote{


    max-width:720px;


    margin:auto;


    color:#18384F;


    font-family:Georgia,serif;


    font-size:30px;


    font-style:italic;


    font-weight:500;


    line-height:1.7;

}



/*=========================================
SIGNATURE
=========================================*/


.wm-contact-signature{


    margin-top:45px;

}



.wm-contact-signature strong{


    display:block;


    color:#18384F;


    font-size:25px;


    font-weight:700;

}



.wm-contact-signature span{


    display:block;


    margin-top:8px;


    color:#60798E;


    font-size:16px;

}



/*=========================================
DECORATIVE BLOBS
=========================================*/


.wm-contact-blob-5{


    width:450px;


    height:450px;


    top:-180px;


    right:-150px;


    opacity:.12;

}



.wm-contact-blob-6{


    width:350px;


    height:350px;


    bottom:-150px;


    left:-120px;


    opacity:.10;

}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 5
TABLET RESPONSIVE

==========================================================*/


@media (max-width:1024px){


/*=========================================
GLOBAL SECTIONS
=========================================*/

.wm-contact-methods,
.wm-contact-location,
.wm-contact-concierge{

    padding:110px 0;

}



/*=========================================
CONTACT CARDS
=========================================*/


.wm-contact-method-grid{

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

    gap:24px;

}



.wm-contact-method-card{

    padding:32px;

}



.wm-contact-method-title h3{

    font-size:24px;

}



/*=========================================
LOCATION MAP
=========================================*/


.wm-contact-map iframe{

    height:480px;

}



.wm-contact-map{

    border-radius:30px;

}



.wm-contact-location-card{

    width:90%;

    padding:40px;

}



.wm-contact-location-logo{

    width:82px;

    height:82px;

}



.wm-contact-location-content h3{

    font-size:28px;

}



/*=========================================
MAP BUTTON
=========================================*/


.wm-contact-map-btn{

    padding:16px 28px;

}



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


.wm-contact-concierge-box{

    max-width:850px;

}



.wm-contact-concierge-left p{

    font-size:17px;

}



.wm-contact-concierge-right{

    margin-top:70px;

}



.wm-contact-concierge-right blockquote{

    font-size:26px;

}



/*=========================================
DECORATIVE BLOBS
=========================================*/


.wm-contact-blob-5{

    width:300px;

    height:300px;

}



.wm-contact-blob-6{

    width:220px;

    height:220px;

}


}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 6
MOBILE RESPONSIVE - UPDATED

ONLY MOBILE HERO FIX

==========================================================*/


@media (max-width:768px){


/*=========================================
GLOBAL SPACING
=========================================*/

.wm-contact-methods,
.wm-contact-location,
.wm-contact-concierge{

    padding:85px 0;

}



/*=========================================
CONTACT CARDS
=========================================*/


.wm-contact-method-grid{

    grid-template-columns:1fr;

    gap:18px;

}



.wm-contact-method-card{

    padding:28px;

    border-radius:24px;

}



.wm-contact-method-header{

    gap:15px;

}



.wm-contact-method-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    font-size:23px;

}



.wm-contact-method-title h3{

    font-size:20px;

}



.wm-contact-method-title span{

    font-size:10px;

}



/*=========================================
RESPONSE NOTE
=========================================*/


.wm-contact-response{

    flex-direction:column;

    text-align:center;

    margin-top:40px;

}



/*=========================================
GOOGLE MAP
=========================================*/


.wm-contact-map-wrapper{

    margin-top:45px;

}



.wm-contact-map{

    border-radius:24px;

}



.wm-contact-map iframe{

    height:330px;

}



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


.wm-contact-location-card{

    width:92%;

    margin:-45px auto 0;

    padding:34px 24px;

    border-radius:28px;

}



.wm-contact-location-logo{

    width:78px;

    height:78px;

}



.wm-contact-location-logo img{

    width:58px;

}



.wm-contact-location-content h3{

    font-size:25px;

}



.wm-contact-location-content p{

    font-size:15px;

}



.wm-contact-map-btn{

    width:100%;

}



/*==========================================================
HERO MOBILE FIX
ONLY IMAGE + CONCIERGE CARD
==========================================================*/


.wm-contact-hero{

    padding:70px 0 90px;

}



/* STACK HERO */

.wm-contact-hero-grid{

    display:flex;

    flex-direction:column;

    gap:45px;

}



/* TEXT */

.wm-contact-hero-content{

    width:100%;

    max-width:100%;

}



.wm-contact-hero-content h1{

    font-size:46px;

    line-height:1.08;

    letter-spacing:-1.5px;

}



.wm-contact-hero-content p{

    font-size:16px;

    line-height:1.8;

}



/* BUTTONS */


.wm-contact-buttons{

    flex-direction:column;

    width:100%;

    gap:14px;

}



.wm-contact-buttons a{

    width:100%;

}



/*=========================================
IMAGE
=========================================*/


.wm-contact-hero-image{

    width:100%;

    max-width:360px;

    margin:20px auto 0;

}



/*=========================================
ARC IMAGE
=========================================*/


.wm-contact-hero-arc{

    aspect-ratio:4 / 4.5;

    border-radius:

    180px 180px 30px 30px;

}



/*=========================================
CONCIERGE CARD
FINAL MOBILE POSITION
=========================================*/


.wm-contact-concierge-card{

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;


    width:calc(100% - 50px);


    margin:-55px auto 0;


    padding:28px;


    z-index:10;


    border-radius:30px;

}



.wm-contact-concierge-card h3{

    font-size:22px;

    line-height:1.3;

}



.wm-contact-concierge-card p{

    font-size:15px;

    line-height:1.8;

}



/*=========================================
FINAL CTA MOBILE
=========================================*/


.wm-contact-concierge-box{

    padding:0;

}



.wm-contact-concierge-left{

    width:100%;

}



.wm-contact-concierge-left p{

    font-size:16px;

}



.wm-contact-concierge .wm-contact-buttons{

    flex-direction:column;

    width:100%;

}



.wm-contact-concierge .wm-contact-buttons a{

    width:100%;

}



/* QUOTE */


.wm-contact-concierge-right{

    margin-top:65px;

    padding-top:55px;

}



.wm-contact-quote-icon{

    width:65px;

    height:65px;

    font-size:32px;

}



.wm-contact-concierge-right blockquote{

    font-size:22px;

    line-height:1.6;

}



.wm-contact-signature strong{

    font-size:21px;

}



.wm-contact-signature span{

    font-size:15px;

}



/* REMOVE BLOBS */


.wm-contact-blob-5,
.wm-contact-blob-6{

    display:none;

}


}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE V2

PART 7
PREMIUM ANIMATIONS

==========================================================*/


/*=========================================
INITIAL STATE
=========================================*/


.wm-contact-reveal{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}



/*=========================================
ACTIVE STATE
=========================================*/


.wm-contact-reveal.active{

    opacity:1;

    transform:translateY(0);

}



/*=========================================
STAGGER CARDS
=========================================*/


.wm-contact-method-card:nth-child(1){

    transition-delay:.1s;

}



.wm-contact-method-card:nth-child(2){

    transition-delay:.2s;

}



.wm-contact-method-card:nth-child(3){

    transition-delay:.3s;

}



.wm-contact-method-card:nth-child(4){

    transition-delay:.4s;

}



/*=========================================
MAP REVEAL
=========================================*/


.wm-contact-map-wrapper{

    opacity:0;

    transform:translateY(30px);


    transition:


        opacity .9s ease,


        transform .9s ease;

}



.wm-contact-map-wrapper.active{

    opacity:1;

    transform:translateY(0);

}



/*=========================================
LOCATION CARD FLOAT
=========================================*/


.wm-contact-location-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}



.wm-contact-location-card:hover{

    transform:translateY(-8px);


    box-shadow:


    0 45px 100px rgba(15,76,129,.16);

}



/*=========================================
BUTTON MICRO EFFECT
=========================================*/


.wm-contact-btn-primary,
.wm-contact-btn-secondary,
.wm-contact-map-btn{


    transition:


    transform .35s ease,


    box-shadow .35s ease;

}



.wm-contact-btn-primary:hover,
.wm-contact-map-btn:hover{


    transform:translateY(-4px);

}



/*=========================================
QUOTE ANIMATION
=========================================*/


.wm-contact-quote-icon{

    transition:

    transform .5s ease;

}



.wm-contact-concierge-right:hover 
.wm-contact-quote-icon{


    transform:

    rotate(-8deg)

    scale(1.05);

}



/*=========================================
IMAGE / LOGO FLOAT
=========================================*/


.wm-contact-location-logo img{


    transition:

    transform .4s ease;


}



.wm-contact-location-card:hover 
.wm-contact-location-logo img{


    transform:scale(1.08);


}
/*==========================================================
WHITE MAKUTI
CONTACT PAGE
EMAIL CARD + RESPONSE FIX
==========================================================*/


/*=========================================
EMAIL ADDRESS FIX
=========================================*/

.wm-contact-email-address{

    margin-top:20px;

    color:var(--wm-contact-heading);

    font-size:16px;

    font-weight:600;

    line-height:1.5;

    overflow-wrap:anywhere;

    word-break:break-word;

}


/*=========================================
EMAIL BUTTON FIX
MATCH OTHER BUTTON LINKS
=========================================*/


.wm-contact-method-card .wm-contact-link{

    display:inline-flex;

    align-items:center;

    width:auto;

    max-width:max-content;

    margin-top:28px;

    padding:0;

    border:none;

    background:none;

}


/*=========================================
RESPONSE NOTE CENTER FIX
=========================================*/


.wm-contact-response{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}


.wm-contact-response span{

    text-align:center;

}



/*==========================================================
MOBILE EMAIL CARD FIX
==========================================================*/


@media(max-width:768px){


    .wm-contact-method-card{

        overflow:hidden;

    }



    .wm-contact-email-address{


        font-size:15px;

        max-width:100%;

        line-height:1.5;


    }



    .wm-contact-method-card .wm-contact-link{

        margin-top:24px;

    }



    .wm-contact-response{

        flex-direction:column;

        gap:14px;

        text-align:center;

        padding:0 20px;

    }


    .wm-contact-response span{

        max-width:320px;

        text-align:center;

        line-height:1.7;

    }


}
/*==========================================================
WHITE MAKUTI
RESPONSE MESSAGE TRUE CENTER FIX
==========================================================*/


.wm-contact-response{

    position:relative;

    left:50%;

    transform:translateX(-50%);

    width:100vw;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    text-align:center;

}


.wm-contact-response span{

    text-align:center;

}



/* remove reveal transform conflict */

.wm-contact-response.active{

    transform:translateX(-50%);

}



/* MOBILE */

@media(max-width:768px){


    .wm-contact-response{

        width:100%;

        left:auto;

        transform:none;

        flex-direction:column;

        gap:14px;

    }


    .wm-contact-response.active{

        transform:none;

    }

}
/*==========================================================
WHITE MAKUTI
RESPONSE MESSAGE FINAL DESKTOP CENTER FIX
==========================================================*/


.wm-contact-response{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:55px;

    text-align:center;

    position:relative;

}


.wm-contact-response i{

    flex-shrink:0;

}


.wm-contact-response span{

    text-align:center;

}


/* FIX ANIMATION CONFLICT */

.wm-contact-response.wm-contact-reveal{

    opacity:0;

    transform:translateY(35px);

}


.wm-contact-response.wm-contact-reveal.active{

    opacity:1;

    transform:translateY(0);

}



/* MOBILE */

@media(max-width:768px){


    .wm-contact-response{

        flex-direction:column;

        gap:14px;

        margin-top:40px;

        padding:0 20px;

    }


    .wm-contact-response span{

        max-width:320px;

        line-height:1.7;

    }


}/* End custom CSS */