/* BODY */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
  scrollbar-width: none;
}
body {
    display: flex;
    flex-direction: column;
    
    overflow-x: hidden;
    min-height: 100vh;
    background-color: #E4DDD9;
}
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
    flex: 1;
}
header a            { color: #E4DDD9; }
header nav a        { color: #E4DDD9; margin-inline-start: 2rem;}
header a:hover      { color: #B86200; }
/* ////////// HERO ////////// */
.hero {
  align-items: center;
  text-align: center;
}
/* BANNER */
.banner {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0) 50%, #040A03),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #040A03),
    url('images/rizen-group/cover-images/lushfield.png');
  background-size: cover;
  background-repeat: no-repeat;
  padding-block-start: 15rem;
  padding-block-end: 20rem;
  padding-inline: 2.5rem;

  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.banner h3 {
    color:#E4DDD9;
    font-family: 'Beckman', sans-serif;
    font-size: 3rem;
}
.banner p {
  color: #C4C1BD;
  font-family: 'Classica-Book';
  font-size: 1.25rem;
  font-style: italic;

  padding-bottom: 2.5rem;
}
@media (max-width: 750px) {
  .banner h3  { font-size: 1.5rem !important; }
  .banner p   { font-size: 0.75rem !important; }
}
/* BUTTON */
.hero.loaded .button-explore {
    opacity: 1;
    transform: scaleX(1);
}
.button-explore {
    width: auto;
    height: auto;
    padding: .5em;
    padding-inline: 1rem;

    background-color: #B86200;
    border: none;

    color: #010F02;
    font-family: 'Beckman';
    font-size: 1rem;

    cursor: pointer;

    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.button-explore.visible.draw {
  opacity: 1;
  transform: scaleX(1);
}
.button-explore h1 {
    opacity: 0;
    transform: translateY(10px);
    transition: 
        opacity 0.5s ease 0.5s,
        transform 0.5s ease 0.5s;
}
.button-explore.visible.draw h1 {
  opacity: 1;
  transform: translateY(0);
}
.button-explore:hover {
  transform: scale(.95) !important;
  background-color: #A43D01;
}
/* HERO BOX */
.box-border {
  position: relative;
  justify-self: center;
  margin-inline: 0;
  margin-top: -50px;

  width: 600px;
  height: auto;
  padding: 1rem;

  border: none;

  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.box-border.visible {
  transform: scale(1);
  opacity: 1;
}
@media (max-width: 750px) {
  .box-border { width: 90%; font-size: 0.75rem !important; }
}
.box-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border: 3px solid #B86200;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;

  transform: scaleX(0);
  transform-origin: left;
  animation: none;
  transition: transform 0.5s ease;
  z-index: 0;
}
.box-border.draw::before {
  animation: drawBorder 1s ease forwards;
}
@keyframes drawBorder {
  0%    { transform: scaleY(0); }
  100%  { transform: scaleY(1); }
}
.box-logo {
    width: 100px;
    height: 100px;

    border-radius: 50%;
    object-fit: contain;

    position: absolute;
    justify-self: center;
    margin-top: -75px;

    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.box-logo.visible {
    opacity: 1;
    transform: translateY(0);
}
.box-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}
.hero-box {
    justify-self: center;

    width: 100%;
    padding-block: 40px;
    padding-inline: 25px;
    background-color: #0B2204;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);

    color: #C4C1BD;
    font-family: 'Classica-Book';
    text-align: justify;
}

/* ////////// LISTINGS ////////// */
.listings {
    display: block;
    padding-block: 25px;

    margin: auto;
    margin-top: 50px;
}
/* LISTING CARD */
.listing-cards {
    width: 100%;
    max-width: 1500px;
    padding: 25px;

    margin: auto;
    align-items: center;
    
    display: flex;
    flex-direction: column;
}
.listing-row {
  display: flex;
  justify-content: center;
  width: 100%;
}
.listing-card {
    width: 300px;
    height: 250px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    overflow: hidden;

    position: relative;
    margin: 10px;
    justify-self: center;

    display: flex;
    flex-direction: column;

    cursor: pointer;
    transition: all 1s ease;
}
.listing-card.hidden {
  display: none;
}
.listing-card:hover {
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.25);

    transform: translateY(-5px);
    transition: all 0.5s ease;
}
/* LISTING CARD CONTENT */
.listing-image {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;
}
.listing-image::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0.5));
  z-index: 1;
  pointer-events: none;
}
.listing-image img {
    width: 100%;
    height: 100%;

    z-index: 0;
    position: relative;
    object-fit: cover;
    display: block;
}
.listing-info {
    position: absolute;
    bottom: 0;
    width: 100%;

    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #C4C1BD;
    padding: 1rem;
    font-family: 'Beckman';
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

    z-index: 1;
}
.listing-info p {
    font-family: 'Classica-Book';
}
/* PLATFORM */
@media (max-width: 750px) {
    .listings       { font-size: 0.75rem    !important; }
    .listing-cards  { width: 100%           !important; }
    .listing-row    { display: block        !important; }
    .listing-info p { font-size: 0.75rem    !important; }
}
/* SEE MORE */
.see-more {
    width: 100%;

    margin-block-start: 0;
    justify-items: center;
}
.button-see-more {
    display: block;

    padding: .75rem;
    padding-inline: 2rem;
    background-color: #B86200;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);  
    border: none;

    color: #040A03;
    font-family: 'Beckman';

    cursor: pointer;
    transition-duration: 0.5s;
}
.button-see-more:hover {
    background-color: #A43D01;
    transform: scale(.97);
}
/* EXPLORE LOT PROJECTS */
.button-lot-projects {
    display: block;
    margin-inline: auto;
    margin-block-end: 20px;

    padding: .75rem;
    padding-inline: 2rem;
    background-color: #032203;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    border: none;

    color: #ffffff;
    font-family: 'CaviarDreams';
    font-size: 1rem;
    font-style: italic;

    cursor: pointer;
    transition-duration: 0.5s;
}
.button-lot-projects:hover {
    background-color: #040A03;
    transform: scale(.97);
}
/* ////////// ABOUT ////////// */
.about {
    display: block;

    height: 750px;
    background-color: #3b5209;
    background-image: url('images/rizen-group/cover-images/lushfield.png');
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
}
/* SECTIONS */
.about-section {
    padding: 2rem;
    margin-block-end: 5rem;

    background-color: #032203;
    display: flex;
    align-items: center;

    transition: all 1s ease;
}
.about-section:hover {
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.25);

    transform: translateY(-5px);
    transition: all 0.5s ease;
}
@media (max-width: 750px) {
  .about-section { font-size: 3vw !important; }
}

/* ////////// ABOUT-OVERVIEW ////////// */
.about-overview {
    height: 100%;
    padding: 25px;
    padding-block-start: 5%;

    display: flex;
    flex-wrap: wrap;
    
    position: relative;
    align-items: center;
    align-content: center;
}
.overview-box {
    display: flex;
    flex-wrap: wrap;

    width: 80%;
    padding-inline: 25px;
    border: 4px solid transparent;

    z-index: 0;
    position: relative;
    margin: 0 auto; 
}
.overview-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid #AF4A01;
  box-sizing: border-box;
  pointer-events: none;

  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.5s ease;

  z-index: -1;
}
.overview-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: #AF4A01;
  pointer-events: none;
  z-index: 2;
}
.overview-box.draw::before {
  transform: scaleY(1);
}
/* TEXT */
.overview-label {
    margin-block-start: -25px;
    margin-block-end: 25px;
    margin-inline-start: -25px;
    
    color: #040A03;
    font-family: 'Beckman';
    font-size: 2rem;

    width: 75%;
    padding-block: 0.5rem;
    padding-inline: 2rem;
    background-color: #C4C1BD;

    transform: TranslateX(-30px);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.75s ease, opacity 0.75s ease;
}
.overview-label.animate {
    transform: TranslateX(0);
    animation: slideInLeft 0.75s ease forwards;
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.overview-text {
    height: 100%;
    padding-block: 25px;
    
    flex: 1;
    
    color: #C4C1BD;
    font-family: 'Classica-Book';
    text-align: justify;
}
/* AGENT */
.overview-agent {
  position: relative;
  margin-bottom: 4px;
  justify-self: right;

  width: 250px;
  height: 350px;
}
.agent-image {
  position: absolute;
  bottom: 0;
  left: 0;

  width: auto;
  height: 400px;

  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease-in-out, transform 1.5s ease;
}
.agent-image.active {
  opacity: 1;
  z-index: 1;

  transform: translateY(0);
}
/* PLATFORM */
@media (max-width: 750px) {
  .overview-box {
    flex-direction: column !important;
    gap: 1.5rem;
    align-items: center;

    width: 100%;
    padding: 15px;
    padding-block-end: 5rem;
  }
  .overview-text {
    padding-right: 25%;
    font-size: 0.75rem;
    text-align: left;
  }

  .overview-label { width: 90%; font-size: 1rem; }

  .overview-agent {
    max-width: 50%;
    height: 150px;

    position: absolute;
    align-self: right;
    justify-self: right;

    align-items: right;
    justify-items: right;
    justify-content: right;

    bottom: 0;
    right: -10%;
  }

  .agent-image {
    width: 100%;
    height: 100%;
    object-fit: contain;

    right: 0;
    justify-self: right;
  }
}
/* ////////// ABOUT-SERVICE ////////// */
.about-services {
    justify-content: center;
    margin-top: -50px;
}
.about-service-box {
    width: 90%;
    display: flex;
}
.about-service-icons {
    width: 20%;
    height: 500px;
    
    display: block;
    align-content: center;
    margin-block: -25px;
}
.about-service-icon {
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: contain;

    justify-self: center;

    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.about-service-icon.animate {
    transform: translateY(0);
    opacity: 1;
}
.about-service-icon:hover {
    transform: translateY(-10px);
}
.about-service-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
/* TEXT*/
.about-service-text {
    color: #C4C1BD;
    font-family: 'Classica-Book';
    font-size: 1rem;
    text-align: justify;

    width: 80%;
    margin-block: auto;
}
.about-service-title {
    color: #040A03;
    font-family: 'Beckman';
    font-size: 2rem;

    margin-inline: auto;
    margin-block-end: 1rem;

    display: inline-block;
    padding-block: 0.25rem;
    padding-inline: 1.25rem;
    background-color: #B86200;

    transform: TranslateX(-30px);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.75s ease, opacity 0.75s ease;
}
.about-service-title.animate {
  transform: TranslateX(0);
  opacity: 1;
}
@media (max-width: 750px) {
    .about-service-icons        { width: 50%; }
    .about-service-title        { font-size: 0.85rem; }
    .about-service-pharagraph   { font-size: 0.75rem; }
}

/* ////////// ABOUT-VISION & MISSION ////////// */
.about-vision {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.about-mission {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* PIN */
.about-vision-pin {
    width: 100%;
    height: 30%;

    position: relative;
    overflow: visible;
    align-content:end;
    justify-items: center;

    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.about-vision-pin.animate {
  transform: translateY(0);
  opacity: 1;
}
.pin-logo {
    z-index: 2;
    position: relative;
    transform: translateY(35px);

    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
.pin-logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: contain;

    justify-self: center;
}
.location-clip {
    z-index: 10;

    width: 40px;
    height: 60px;
    transform: scale(3) translateY(-5px);

    background-color: #153506;
    overflow: visible;
    clip-path: path("M20,0 C31,0 40,10 40,22 C40,38 20,60 20,60 C20,60 0,38 0,22 C0,10 9,0 20,0 Z");
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1)); 
}
/* TEXT */
.about-vision-title {
    font-family: 'Beckman';
    font-size: 2rem;

    padding-block-start: 25px;
    margin-block-end: 1rem;
}
.about-vision-text {
    width: 100%;
    height: 70%;
    padding: 10%;
    padding-block-start: 50px;
    background-color: #E4DDD9;

    font-family: 'Classica-Book';
}
@media (max-width: 750px) {
    .about-vision-title     { font-size: 1.5rem; }
    .about-vision-paragraph { font-size: 0.75rem; }
}

/* ////////// ABOUT-LOTS ////////// */
.about-lots {
    width: 100%;
    height: 80%;
    background-color: #C3B4AC;

    position: relative;
    display: block;
    overflow-x: hidden;
}
/* TEXT */
.about-lots-text {
  position: relative;
  justify-self: left;

  padding: 25px;

  width: 40%;
  height: 100%;
  padding-block: 1rem;
  padding-inline: 1rem;
  background-color: #375309;

  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.about-lots-text.animate {
  opacity: 1;
  transform: translateX(0);
}
.about-lots-title {
    color: #C3B4AC;
    font-family: 'Classica-Book';
    font-size: 2rem;
}
.about-lots-description {
    color: #C3B4AC;
    font-family: 'Classica-Book';
    font-size: 1rem;
}
/* CARD LIST */
.lot-projects-list {
    width: 100%;
    padding: 25px;
    
    display: block;
    justify-content: center;
}
.lot-project-card {
  color: #040a03;
  font-family: 'Classica-Book';
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

  z-index: 1;
  position: relative;
  margin-block-end: 10px;
  
  width: 100%;
  height: 25%;
  padding: 1rem;
  background-color: #E4DDD9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.lot-project-card.animate {
    transform: translateY(0);
    opacity: 1;
}
.lot-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 0;
}
.lot-project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* LOT PROJECT CONTEXT */
.lot-project-card h4 {
    color: #B86200;
    font-size: 1.5rem;
    
    position: relative;
    margin-bottom: 1rem;
}
.lot-project-card ul {
    list-style: none;
    object-fit: contain;
    
    z-index: 1;
    position: relative;

    color: #E4DDD9;
    text-align: left;
}
.lot-project-card li { font-size: 1rem; }
/* POPUP MODAL */
.image-popup {
    display: none;
    justify-content: center;
    align-items: center;
    
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}
.image-popup img {
    max-width: 90%;
    max-height: 90%;

    border-radius: 8px;
    box-shadow: 0 0 20px black;
}
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;

    color: white;
    font-size: 40px;
    cursor: pointer;
}

/* BUTTON */
.view-more-btn {
  margin-top: 15px;
  margin-inline: 0;

  width: 100%;

  padding-block: 0.5rem;
  padding-inline: 1rem;
  background-color: #0B2204;
  border: none;

  color: #C3B4AC;
  font-family: 'Classica-Book';
  font-size: 1rem;
  font-style: italic;

  cursor: pointer;
  transition: 0.5s ease;
}
.view-more-btn:hover {
    transform: translateY(-5px);
    background-color: #A43D01;
}
/* PLATFORM */
@media (max-width: 750px) {
  .about-lots-title         { font-size: 1rem       !important; }
  .about-lots-description   { font-size: 0.75rem    !important; }
  .lot-project-card h4      { font-size: 1rem       !important; }
  .lot-project-card li      { font-size: 0.75rem    !important; }
  .view-more-btn            { font-size: 0.75rem    !important; }
}
@media (min-width: 1300px) {
  .about-lots-title         { font-size: 2.5rem     !important; }
  .about-lots-description   { font-size: 1.25rem    !important; }
  .lot-project-card h4      { font-size: 1.5rem     !important; }
  .lot-project-card li      { font-size: 1rem       !important; }
}

/* ////////// SERVICES ////////// */
.box-strip {
    width: 100%;
    height: auto;

    padding: .75rem;
    background-color: #C3B4AC;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 1);

    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);

    z-index: 1;

    color: #C3B4AC;
    font-family: 'Beckman';
    font-size: 1.5rem;
    text-align: center;
}
/* SERVICE SLIDER */
.service-slider {
    width: 100%;
    height: 500px;

    align-items: center;
    justify-items: center;
    justify-content: center;
    
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 100%, #040A03);
}
.service-slides {
    width: 100%;
    height: 100%;

    position: relative;
    display: flex;
    transition: transform 1s ease-in-out;

    z-index: 1;
    pointer-events: auto;
}
.service-slide {
    width: 100%;
    height: 100%;
    pointer-events: auto;

    pointer-events: auto;
    position: relative;
    z-index: 1;
    
    flex-shrink: 0;
    background-size: cover;
    background-position: center;

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

    color: #E4DDD9;
    text-align: center;
}
.service-slide::before { 
    width: 100%;
    height: 100%;
    
    top: 0;
    left: 0;
    z-index: 0;

    content: "";
    position: absolute;

    background: rgba(0, 0, 0, 0.7);
}
.service-slide::after {
    content: "";
    position: absolute;

    bottom: 0;
    left: 0;
    z-index: 0;

    width: 100%;
    height: 50%;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        #040A03 100%
    );
}
.service-slide.active {
    display: flex;
}
/* SLIDE CONTENT */
.service-slide-content {
    position: relative;
    width: 75%;
    padding-bottom: 5rem;

    z-index: 2;

    font-family: 'Beckman';
    font-size: 1.75rem;
    text-decoration: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    display: block;
    color: inherit;
}
.service-slide-content:hover { cursor: pointer; }
.service-slide-content p {
    padding-inline: 2rem;
    font-family: 'Classica-Book';
    font-size: 1rem;
}
/* SERVICE LOGO */
.service-logo {
    position: relative;

    cursor: pointer;
    transition: 0.5s;
}
.service-logo:hover { transform: translateY(-5px); }
.service-logo a {
    display: inline-block;
    position: relative;

    cursor: pointer;
    pointer-events: auto !important;
    z-index: 3;
}
.service-logo img {
    width: 120px;
    height: 120px;
    pointer-events: auto;

    margin-bottom: 15px;
    object-fit: cover;

    border-radius: 50%;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
/* ARROW */
.arrow {
    top: 50%;
    position: absolute;
    z-index: 1;

    padding: 10px 15px;
    border: none;
    background: none;

    color: #E4DDD9;
    font-size: 2rem;

    cursor: pointer;
    transform: translateY(-50%);
}
.arrow.left     { left: 10px;   }
.arrow.right    { right: 10px;  }
/* DOTS */
.dots {
    width: 100%;
    bottom: 15px;
    
    position: absolute;
    text-align: center;

    z-index: -1;
}
.dots span {  
    width: .4rem;
    height: .4rem;
    
    margin-inline: .4rem;

    background: #E4DDD9;
    border-radius: 50%;
    display: inline-block;
    
    opacity: 0.1;
    cursor: pointer;
}
.dots span.active {
    opacity: 1;
}
/* PLATFORM */
@media (max-width: 750px) {
    .service-slide-content h3  { font-size: 1.25rem; }
    .service-slide-content p   {  font-size: 0.75rem; }
}
/* SERVICE ICONS */
.our-services {
    width: 100%;
    height: auto;

    align-items: center;
}
.service-list {
    display: flex;
    flex: wrap;
    overflow-x: hidden;

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

    width: 100%;
    padding-block: 25px;
    padding-inline: 10px;
    background-color: #040A03;
}
.service {
    width: 150px;
    height: 200px;

    align-items:center;
    margin-inline: 10px;

    object-fit: contain;
    word-wrap: break-word;
    overflow-wrap: break-word;

    color: #cfcfcf;
    font-family: 'Classica-Book';
    font-size: 0.75rem;
    text-decoration: none;
    text-align: center;

    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.25s ease, transform 0.5s ease;
}
.service.visible {
    opacity: 1;
    transform: translateY(0);
}
.service:hover { transform: translateY(-10px); color: #ffffff; }
.service-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;

    justify-self: center;
    margin-block-end: 10px;
    align-items: center;    
}
.service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition: filter 0.3s;
    filter: brightness(0) saturate(0) invert(50%);
}
.service:hover .service-icon img {
   filter: brightness(0) saturate(100%) invert(41%) sepia(94%) saturate(2245%) hue-rotate(0deg)    brightness(104%)  contrast(107%);
}
.service-note {
    position: absolute;
    right: 0;

    padding: 10px;
    background-color: #032203;

    color: #ffffff;
    font-family: 'Beckman';
    font-size: 1.25rem;
}
@media (max-width: 750px) {
    .service {
        margin-inline: 3px !important;

        width: 75px !important;
        height: 100px !important;

        font-size: 0.5rem;
    }
    .service-icon { 
        width: 45px !important;
        height: 45px !important; 
    }
    .service-note { font-size: 0.5rem !important; }
}

/* ////////// WHY US ////////// */
.why-us {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);

    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.wu-title h3 {
    margin-bottom: 2rem;
    
    color: #B86200;
    font-family: 'Classica-Book' !important;
    font-size: 2rem;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
/* BOX */
.wu-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 2rem;
    
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;

    margin: 0 auto;
}
/* SLOTS */
.wu-slot {
    width: auto;
    height: auto;
    padding: 1.5rem;
    
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
    box-sizing: border-box;

    justify-self: center;
    text-align: center;
    transition: transform 0.5s;
}
.wu-slot h3 {
    margin-bottom: 0.5rem;

    color: #C3B4AC;
    font-family: 'Classica-Book' !important;
    font-size: 1.25rem;
    text-shadow: none;
    
    transition: color 0.5s ease;
}
.wu-slot p {
    color: #C3B4AC;
    font-family: 'Classica-Book';
    font-size: 1rem;

    transition: color 0.3s ease;
}
.wu-slot:hover      { transform: translateY(-5px); }
.wu-slot:hover h3   { color: #B86200;  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.wu-slot:hover p    { color: #E4DDD9; }
/* SLOT TEXT */
.wu-slot img.icon-white {
  width: 40px;
  margin-bottom: 1rem;
}

/* ////////// FAQ ////////// */
.faq {
    align-items: center;
    text-align: center;
}
/* FAQ BANNER */
.faq-banner {
    background: 
        linear-gradient(rgba(0, 0, 0, 0.5), #040A03),
        url('images/rizen-group/cover-images/lushfield.png') center/cover no-repeat;
    background-blend-mode: darken;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;

    padding: 5rem 2.5rem;
    text-align: center;
}
.faq-banner h3 {
    margin-bottom: 1rem;

    font-family: 'Classica-Book';
    font-size: 2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* FAQ BOX */
.faq-box {
    height: auto;
    width: 80%;

    justify-self: center;
    color: #B86200;

    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);

    z-index: 1;
}
.qna {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    align-items: flex-start;
}
/* FAQ ITEM */
.faq-item {
    width: 100%;
    margin-bottom: 1rem;
    padding-block: .5rem;
    object-fit: contain;
    
    padding-inline: 1rem;
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(1px);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: all 0.5s ease;
}
.faq-item:hover { transform: translateY(-5px); }
/* QUESTION */
.faq-question {
    color: #C3B4AC;
    font-family: 'Classica-Book', sans-serif;
    font-size: 1.25rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    text-align: left;
}
/* ANSWER */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.4s ease;

    color: #C3B4AC;
    font-family: 'Classica-Book', sans-serif;
    font-size: 1rem;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

    margin-top: 0.5rem;
    padding-block-end: .25rem;
}
.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
}
/* PLATFORM */
@media (max-width: 750px) {
    .faq-box        { width: 100% !important; }
    .faq-banner h3  { font-size: 1.25rem; }
    .faq-question   { font-size: 0.75rem; }
    .faq-answer     { font-size: 0.70rem; }
    .wu-slot h3     {  font-size: 1rem; }
    .wu-slot p      {  font-size: 0.75rem; }
}

/* ////////// CONTACT ////////// */
.connect-section {
    width: auto;
    max-width: 100%;
    padding: 2rem;

    margin-top: 2rem;

    align-items: center;
    justify-content: center;
    text-align: center;

    box-sizing: border-box;
}
.connect-title {
    padding-block: .25rem;
    padding-inline: 2rem;
    background-color: #A43D01;

    margin: 0 auto;
    margin-bottom: 1rem;
    display: inline-block;

    color: #E4DDD9;
    font-family: 'Beckman';
    font-size: 1rem;
}
.contact-section {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    gap: .5rem;

    word-wrap: break-word;
    overflow-wrap: break-word;
}
.contact {
  color: #040A03;
  font-family: 'Classica-Book';
  word-break: break-word;
}
@media (max-width: 750px) {
    .contact { font-size: 0.75rem; }
}
/* ICONS */
.social-section {
  padding: 2rem;

  margin: 0;
  align-items: center;
  justify-content: center;
}
.icon-box{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  justify-content: center;
  align-items: center; 
}
.icon-box img {
  width: 2rem;
  height: 2rem;
}
footer {
    color: #040A03;
    background-color: #C3B4AC;
}