/** SERVICE PAGE**/
/* FUNCTIONS OF REALUX */
 .grid-container {
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
    }


.tile-button {
      width: 350px;
      height: 250px;
      padding: 0px 0px;
      background: none;
      border-top: 0px none;
      border-bottom: 0px solid #C29470;
      border-left: 0px none;
      border-right: 0px solid #C29470;
      cursor: pointer;
      box-shadow: 2px 4px #E6C3A0;
      border-radius: 12px;
      padding-bottom: 40px;
      font-family: 'Futura', sans-serif; /* Set your desired font */
      font-size: 1.25rem; /* Adjust the font size */
      font-weight: 400; /* Set the font weight */
      color: #E6C3A0; /* Set the text color */
      text-align: center; /* Center-align the text */
      letter-spacing: 2px; /* Adjust letter spacing */
      line-height: 1.2; /* Adjust line height */
      margin: 20px 0; /* Add some margin */
      text-transform: uppercase;
    }

 .dropdown-slot {
      font-family: 'Acumin Pro', sans-serif;
      color: #E6C3A0;
     letter-spacing: 2px;
    }
    .tile-button:hover {
      color: #C29470;
    }
 .tile-button.active {
    background-color: none;
    color: #C29470;
    box-shadow: 1px 1px 1px #C29470;
  }
  .tile-button.active:hover {
    background-color: none;
  }
    .tile-button .icon {
    font-size: 70px;
    margin-bottom: 4px;
    user-select: none;
    }
 .dropdown-bar {
      display: none;
      position: relative;
      width: 100%;
      background-color: none;
      border-top: 2px solid #C29470;
      font-size: 16px;
      padding: 4px;
      animation: fadeIn 0.3s ease-in-out;
      padding-bottom: 40px;
    }

    .dropdown-bar.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }

.row-wrapper {
      display: contents;
    }

.dropdown-slot {
      grid-column: 1 / -1;
    }

.tile-button p {
     background: linear-gradient(to bottom, #E6C3A0, #865E47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 40px;
    }

    .icon-img {
  width: auto;
  height: 90px;
  margin-top: 50px;
  margin-bottom: 5px;
  position: relative;
    }
   
.row-wrapper{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  padding:0 10px;
}

.tile-button{
  width:100%;
  min-height:200px;
}

.grid-container{
  width:100%;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}

/* ===============================
   MOBILE / TABLET: 320px – 1023px
=============================== */
@media (max-width: 1023px) {
  .row-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* single column stacked */
    gap: 15px;                  /* space between tiles */
    padding: 0 10px;            /* optional container padding */
    justify-content: center;    /* center tiles */
  }

  .row-button {
    width: 300px;   /* fill the column */
    height: 200px; /* fixed height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .icon-img {
    height: 90px;
    margin: 20px auto 10px auto; /* center icon, adjust spacing */
    display: block;
  }
  .dropdown-slot{
    margin-right: 25px;
  }
}

.grid-container{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-right: 60px;
}

/* ROWS */
.row-wrapper-1,
.row-wrapper-2{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-right: 60px;
  width:100%;
}

/* TILE */
.row-button{
  width:100%;
  min-height:220px;
  border:none;
  border-radius:24px;
  padding:30px 20px;
  background:#111;
  color:#fff;
  cursor:pointer;

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

  transition:0.3s ease;
}

.tile-button:hover{
  transform:translateY(-4px);
}

.tile-button p{
  margin:0;
  font-size:18px;
}

.icon-img{
  width:72px;
  height:72px;
  object-fit:contain;
}

/* DROPDOWNS */
.dropdown-slot-1,
.dropdown-slot-2{
  width:100%;
}

.dropdown-bar{
  display:none;
  width:100%;
  margin-top:10px;
  padding:24px;
  border-radius:20px;
  background:;
  color:#fff;
  line-height:1.7;
}

/* MOBILE ONLY */
@media(max-width:767px){

  .row-wrapper-1,
  .row-wrapper-2{
    grid-template-columns:1fr;
  }

}

/* Section 1440px */
.image-text-section2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0;
  height: 500px;
}
.left-side2 {
  position: relative;
}

/* Left side (text) */

.left-side2 p{
  z-index: 2; /* Ensures text is above the overlay */
  display: flex;
  align-items: flex-start; /* Aligns content to the left */
  /* Full height of the screen */
  padding-left: 40px;
  padding-right: 90px;
  text-align: left;
}
.left-side2 ul {
  list-style-type: disc; /* disc, circle, square */
  padding-left: 100px;    /* adjust indentation */
 font-family: 'Acumin Pro', sans-serif; /* Set your desired font */
  font-size: 20px; /* Adjust the font size */
  font-weight: 400; /* Set the font weight */
  color: #000000; /* Set the text color */
  letter-spacing: 2px; /* Adjust letter spacing */
  line-height: 2; /* Adjust line height */
 margin: -40px;
}

.left-side2 li {
  padding-left: 40px;
  font-size: 20px;
  margin-bottom: 6px;    /* space between bullets */
}
.left-side2 h3{
  text-align: left;
  padding: 0 40px;
}

/* Right side (image) */
.right-side2 {
  flex: 1;
  position: relative;
  height: 100%;
}

.image-container2 {
  position: relative;
  height: 100%;
  width: 100%;
  
}

.image-container2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Fade overlay */
.image-container2 .overlay2 {
 position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,    /* fully white on left */
    rgba(255, 255, 255, 0) 100%   /* fully transparent on right */
  );
  z-index: 1;
}

@media (max-width: 1024px) {
  .image-text-section2 {
    height: 450px; /* slightly smaller so it fits */
    padding: 0;
  }

  .left-side2 p {
    font-size: 16px;
    font-weight: 400;
    padding-left: 30px; /* reduce padding a bit */
    padding-right: 15px;
    width: 600px;
  }

  .left-side2 h3 {
    padding: 0 30px;
    font-size: 1.8rem;
  }
.left-side2 ul {
  list-style-type: disc; /* disc, circle, square */
  padding-left: 60px;    /* adjust indentation */
 font-family: 'Acumin Pro', sans-serif; /* Set your desired font */
  font-size: 15px; /* Adjust the font size */
  font-weight: 400; /* Set the font weight */
  color: #000000; /* Set the text color */
  letter-spacing: 2px; /* Adjust letter spacing */
  line-height: 2; /* Adjust line height */
 margin: -20px;
}

.left-side2 li {
  padding-left: 40px;
  font-size: 20px;
  margin-bottom: 6px;    /* space between bullets */
}
  .image-container2 {
    width: 600px; /* narrower image so layout fits */
  }

  .image-container2 img {
    object-fit: cover;
  }
}

@media (max-width: 390px) {
  .image-text-section2 {
    flex-direction: column; /* stack vertically */
    height: auto;
  }

  /* Image first */
  .right-side2 {
    order: 1;
    width: 100%;
    height: auto;
  }
  .section-icon {
   /* adjust to align with text on smaller screen */
    width: 70px;        /* smaller icon width */
    margin-top: 6px;
    margin-right: 30px;
  }
  .image-container2 {
    width: 100%;
    height: 250px; /* mobile height */
  }

  .image-container2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Text section under image */
  .left-side2 {
    order: 2;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontally center children */
  text-align: center;  /* center text inside */
  }

  .left-side2 h3 {
    margin-bottom: 15px;
    font-size: 22px;
    text-align: center;
  }

  .left-side2 p {
    margin-bottom: 15px;
  padding: 0 40px;
 
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  .left-side2 ul {
  list-style-type: disc; /* disc, circle, square */
  padding-left: 60px;    /* adjust indentation */
padding-right: 40px;
  font-family: 'Acumin Pro', sans-serif; /* Set your desired font */
  font-size: 10px; /* Adjust the font size */
  font-weight: 400; /* Set the font weight */
  color: #000000; /* Set the text color */
  letter-spacing: 2px; /* Adjust letter spacing */
  line-height: 2; /* Adjust line height */
 margin: -10px;
}
.left-side2 li {
  text-align: left;
  padding-left: 20px;
  font-size: 20px;
  margin-bottom: 6px;    /* space between bullets */
}
}

/* Main section layout 1440px */
.image-text-section1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 800px;
 overflow: hidden;
}

/* Left side with image */
.left-side1 {
  flex: none;
  position: relative;
  height: 100%; /* Full height */
  width: 200px;
}

.image-container1 {
  position: relative;
  height: 100%; /* Full height */
  width: 100%;
}

.image-container1 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers the full area without distortion */
  display: block;
}

.image-container1 .overlay1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, 
  rgba(255, 255, 255, 0), 
  rgba(255, 255, 255, 0.85), 
  rgb(255, 255, 255)); /* Overlay fade effect */
  z-index: 1;
}

/* Right side with heading and paragraph */
.right-side1 {
  padding-left: 0px;
  z-index: 2; /* Ensures text is above the overlay */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically centers the content */
  align-items: flex-start; /* Aligns content to the left */
  height: 100vh; /* Full height of the screen */
  padding: 20px;
}

.right-side1 .dark-text {
  text-align: left; /* Aligns text to the left */
  padding-right: 30px;
}


@media (max-width: 1024px) {
  .image-text-section1 {
    flex: display;
    justify-content: space-between;
    height: 500px;
  }

  .left-side1 {
    width: 420px; /* Fixed width for the image */
  }

  .image-container1 img {
    width: 100%;
  }

  .overlay1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Overlay on image */
    z-index: 1;
  }

  .right-side1 {
    padding: 20px;
    flex: 1;
  }

  .right-side1 h3 {
    font-size: 1.75rem; /* Same as desktop */
    margin-bottom: 20px;
    text-align: left;
  }

  .right-side1 .dark-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    max-width: 700px;
    text-align: left;
  }
}

@media (max-width: 390px) {
  .image-text-section1 {
    display: flex;
    flex-direction: column; /* stack vertically */
    width: 100%;
    height: auto; /* adjust height automatically */
  }

  /* Image on top */
  .left-side1 {
    order: 1;
    width: 100%;
    padding: 0; /* remove side padding */
  }

  .image-container1 img {
    width: 100%;
    height: 300px; /* maintain aspect ratio */
    display: block;
    margin-top: -80px
  }

.image-container1 .overlay1 {
 position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to left,
    #FFFFFF,    /* fully white on left */
    #FFFFFF00);   /* fully transparent on right */
  z-index: 1;
}
  /* Text below image */
  .right-side1 {
    order: 2;
    width: 100%;
    padding-right: 50px; /* spacing from edges */
    padding-left: 50px;
    text-align: center;
  }

  .right-side1 h3 {
    font-size: 22px; /* smaller for mobile */
    margin-bottom: 15px;
    padding-right: 40px;
    padding-left: 40px;
    text-align: center;
  }

  .right-side1 .dark-text {
    font-size: 14px;
    line-height: 1.4;
    max-width: 100%; /* full width */
    text-align: center;
    padding-right: 40px;
    padding-left: 40px;
  }
}