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

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

:root {
    --cg-green: #08261d;
    --cg-green-light: #12392d;
    --cg-blue: #06213d;
    --cg-burgundy: #35131d;
    --cg-gold: #caa35b;
    --cg-gold-light: #e5c477;
    --cg-white: #ffffff;
    --cg-cream: #f7f3eb;
    --cg-text: #eeeeee;
}


 

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

.cg-accommodation {
    position: relative;
    width: 100%;
    padding: 90px 25px 80px;
    overflow: hidden; background-color:#1b3b2b;

   /* background:
        radial-gradient(
            circle at top left,
            rgba(202,163,91,.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #061d16 0%,
            #08261d 100%
        );*/
}


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

.cg-accommodation-header {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.cg-logo-mark {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;

    border: 2px solid var(--cg-gold);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--cg-gold);
    font-size: 25px;

    position: relative;
}

.cg-logo-mark::before {
    content: "";
    position: absolute;

    width: 35px;
    height: 35px;

    border: 1px solid var(--cg-gold);

    transform: rotate(45deg);
}

.cg-brand {
    color: var(--cg-white);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(36px, 5vw, 65px);

    font-weight: 500;

    letter-spacing: 8px;

    line-height: 1;
}

.cg-location {
    margin-top: 12px;

    color: var(--cg-gold-light);

    font-size: 14px;

    letter-spacing: 7px;

    text-transform: uppercase;
}

.cg-tagline {
    margin-top: 18px;

    color: #ddd;

    font-size: 13px;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.cg-heading-line {
    width: 100px;
    height: 1px;

    background: var(--cg-gold);

    margin: 25px auto 0;

    position: relative;
}

.cg-heading-line::after { content: " "; 
 /*   content: "✦";*/
width:5px; height:5px;
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: var(--cg-green);

 
 z-index: 10;
    color: var(--cg-gold);

    font-size: 12px;
}
.cg-heading-line::before { content: " "; 
 /*   content: "✦";*/
width:10px; height:10px;
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: var(--cg-gold);

 

        transform: translate(-50%, -50%) rotate(45deg);
    z-index: 20;

    font-size: 12px;
}

/* =========================================================
   3 COLUMN GRID
========================================================= */

.cg-accommodation-grid {

    max-width: 1500px;

    margin: auto;

    display: grid;

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

    gap: 20px;
}


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

.cg-card {

    position: relative;

    min-height: 700px;

    overflow: hidden;

    border-radius: 14px;

    border: 1px solid rgba(202,163,91,.7);

    background: #111;

    isolation: isolate;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.cg-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.4);
}


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

.cg-card-image {

    position: absolute;

    inset: 0;

    z-index: -2;

    background-size: cover;

    background-position: center;

    transition:
        transform 1s ease,
        filter .7s ease;
}

.cg-card:hover .cg-card-image {

    transform: scale(1.07);

}


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

.cg-family .cg-card-image {
background-image:url(../gallery/e5cb2933-860c-48de-9d39-18d492b3d198.png); background-position:left bottom;

   /* background-image:
        url("images/accommodation-family.jpg");*/

}

.cg-corporate .cg-card-image { background-image:url(../gallery/0fc20a3b-2853-4547-8256-1d474fbe62bc.png);

    /*background-image:
        url("images/accommodation-corporate.jpg");*/

}

.cg-honeymoon .cg-card-image {  background-position:center center; background-image:url(../gallery/b2db2f38-d199-46f5-a320-5d4add3ae595.png);

 

   /* background-image:
        url("images/accommodation-honeymoon.jpg");*/

}


/* =========================================================
   DARK OVERLAY
========================================================= */

.cg-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.70) 0%,
            rgba(0,0,0,.18) 35%,
            rgba(0,0,0,.20) 50%,
            rgba(0,0,0,.92) 100%
        );

}


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

.cg-card-content {

    min-height: 700px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 42px 30px 30px;

    text-align: center;

    color: white;
}


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

.cg-card-icon {

    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

    border: 1px solid #e5a93c;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--cg-gold-light);

    font-size: 27px;

    background:
        rgba(0,0,0,.25);

    backdrop-filter: blur(4px);
}
.cg-card-icon   img{ max-width:30px;/* filter: brightness(0) saturate(100%) invert(61%) sepia(52%) saturate(383%) hue-rotate(0deg) brightness(99%) contrast(88%); */ filter: brightness(0) saturate(100%) invert(75%) sepia(90%) saturate(807%) hue-rotate(333deg) brightness(99%) contrast(82%);}

/* =========================================================
   TITLES
========================================================= */

.cg-card-title {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(38px, 4vw, 58px);

    font-weight: 500;

    letter-spacing: 2px;

    line-height: .9;

    text-transform: uppercase;
}

.cg-card-subtitle {

    margin-top: 5px;

    font-family:
        "Cormorant Garamond",
        serif;

    color: #e5a93c;

    font-size: 32px;

    font-style: italic;

    line-height: 1;
}


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

.cg-card-description {

    max-width: 370px;

    margin: 22px auto 0;

    color: #f2f2f2;

    font-size: 14px;

    line-height: 1.8;
}


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

.cg-benefits {

    display: grid;

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

    gap: 15px;

    margin-top: auto;

    padding-top: 35px;
}

.cg-benefit {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;
}
.cg-benefit-icon  img{ max-width:30px; /*filter: brightness(0) saturate(100%) invert(61%) sepia(52%) saturate(383%) hue-rotate(0deg) brightness(99%) contrast(88%); */ filter: brightness(0) saturate(100%) invert(75%) sepia(90%) saturate(807%) hue-rotate(333deg) brightness(99%) contrast(82%);}
.cg-benefit-icon {

    width: 50px;
    height: 50px;

    border: 1px solid #e5a93c;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--cg-gold-light);

    font-size: 20px;
}

.cg-benefit-text {

    font-size: 10px;

    line-height: 1.5;

    letter-spacing: .7px;

    text-transform: uppercase;

    color: #fff;
}


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

.cg-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    width: 100%;

    min-height: 50px;

    margin-top: 30px;

    padding: 12px 20px;

    border: 1px solid var(--cg-gold);

    border-radius: 3px;

    color: var(--cg-gold-light);

    background:
        rgba(0,0,0,.15);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1.2px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.cg-button span {

    font-size: 18px;

    transition:
        transform .3s ease;
}

.cg-button:hover {

    background: #e5a93c;

    color: #10251d;

}

.cg-button:hover span {

    transform: translateX(5px);

}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.cg-features {

    max-width: 1500px;

    margin: 35px auto 0;

    padding: 30px 20px;

    background: var(--cg-cream);

    border-radius: 8px;

    display: grid;

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

    gap: 20px;
}

.cg-feature {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 5px 20px;

    border-right:
        1px solid rgba(0,0,0,.18);
}

.cg-feature:last-child {

    border-right: none;
}

.cg-feature-icon {

    font-size: 30px;

    color: var(--cg-green);
}

.cg-feature-text {

    color: #25362f;

    font-size: 11px;

    line-height: 1.6;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

.cg-card {

    opacity: 0;

    transform:
        translateY(45px);

    animation:
        cgReveal .9s ease forwards;
}

.cg-card:nth-child(1) {
    animation-delay: .1s;
}

.cg-card:nth-child(2) {
    animation-delay: .25s;
}

.cg-card:nth-child(3) {
    animation-delay: .4s;
}

@keyframes cgReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .cg-accommodation {

        padding:
            70px 18px;

    }

    .cg-accommodation-grid {

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

    }

    .cg-card:last-child {

        grid-column:
            1 / -1;

        max-width:
            calc(50% - 10px);

        width: 100%;

        margin: auto;

    }

    .cg-features {

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

    }

    .cg-feature:nth-child(2) {

        border-right: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .cg-accommodation {

        padding:
            60px 12px;

    }

    .cg-accommodation-header {

        margin-bottom: 35px;

    }

    .cg-brand {

        font-size: 34px;

        letter-spacing: 5px;

    }

    .cg-location {

        font-size: 11px;

        letter-spacing: 4px;

    }

    .cg-tagline {

        font-size: 10px;

        line-height: 1.7;

        letter-spacing: 2px;

    }

    .cg-accommodation-grid {

        grid-template-columns:
            1fr;

        gap: 15px;

    }

    .cg-card {

        min-height:
            650px;

    }

    .cg-card:last-child {

        grid-column:
            auto;

        max-width:
            none;

    }

    .cg-card-content {

        min-height:
            650px;

        padding:
            35px 20px 22px;

    }

    .cg-card-title {

        font-size: 45px;

    }

    .cg-card-subtitle {

        font-size: 28px;

    }

    .cg-card-description {

        font-size: 13px;

        line-height: 1.7;

    }

    .cg-benefits {

        gap: 8px;

    }

    .cg-benefit-icon {

        width: 45px;

        height: 45px;

        font-size: 18px;

    }

    .cg-benefit-text {

        font-size: 8px;

    }

    .cg-features {

        grid-template-columns:
            1fr;

        gap: 18px;

        padding:
            25px 15px;

    }

    .cg-feature {

        border-right: none;

        border-bottom:
            1px solid rgba(0,0,0,.15);

        padding:
            0 0 18px;

    }

    .cg-feature:last-child {

        border-bottom:
            none;

        padding-bottom: 0;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }

    .cg-card {

        animation:
            none;

        opacity:
            1;

        transform:
            none;

    }

    .cg-card-image,
    .cg-button,
    .cg-card {

        transition:
            none;

    }

}