@font-face {
  font-family: "Cera Pro";
  src: url("./fonts/CeraPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MixtaPro";
  src: url("./fonts/MixtaPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "MixtaPro";
  src: url("./fonts/Mixta-Pro-Light.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

.cera-pro {
  font-family: 'Cera Pro';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.light-text {
  font-family: "MixtaPro", sans-serif;
  font-weight: 300; /* Light */
}

.normal-text {
  font-family: "MixtaPro", sans-serif;
  font-weight: 400; /* Regular */
}

.para16 {
  font-size: 16px !important;
    font-family: 'Cera Pro', serif !important;
    font-weight: 600;
    color: #2C3E50;
}


/* Global font reset */
body {
  font-family: "Cera Pro", sans-serif;
  color: #111827; /* Tailwind gray-900 */
  background-color: #F4F1EC; /* light background */
  line-height: 1.6;
}

h1 {
  font-family: 'Cera Pro', serif;
   text-transform: uppercase; /* force full caps */
  font-weight: 600;
  line-height: 1.2;
  color: #1C1C1C; /* Tailwind gray-800 */
}


h2 {
  font-family: "MixtaPro", serif !important;
   text-transform: none; /* force full caps */
  font-weight: 400;
  line-height: 1.2;
  color: #2C3E50; /* Tailwind gray-800 */
}


/* Headings get Mixta Pro for contrast */
h3, h4, h5, h6 {
  font-family: 'Mixta Pro', serif;
   text-transform: none; /* force full caps */
  font-weight: 400;
  line-height: 1.2;
  color: #1f2937; /* Tailwind gray-800 */
}


li a {
  font-family: "MixtaPro", serif !important;
  font-size: 64px;
  text-align: left;
   text-transform: none; /* force full caps */
  font-weight: 400;
  line-height: 1.0;
  color: #C0392B; /* Tailwind gray-800 */
}

p.title {

   font-family: 'Cera Pro', serif;
   text-transform: uppercase; /* force full caps */
  font-weight: 400;
  line-height: 1.5;
  color: #2C3E50; /* Tailwind gray-800 */

}

/* Accent text */
.emphasis {
  font-family: 'Mixta Pro', serif;
  font-style: italic;
}



header .btn, #whatwedo .btn, #recentworks .btn, #customerreviews .btn, #contact .btn{
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.8rem;   /* compact padding */
  font-size: 0.95rem;       /* smaller text */
  font-weight: 500;         /* bold enough for caps */
  text-transform: uppercase; /* force full caps */
  letter-spacing: 1px;      /* optional: adds breathing space between caps */
  color: #2C3E50;
  border-radius: 5px;       /* tighter corners */
  z-index: 1;
  cursor: pointer;
  border: none;
}

/* Gradient border effect */
#whatwedo .btn::before, #recentworks .btn::before, #customerreviews .btn::before, #contact .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;  /* thin border */
  /* background-color: #C0392B; */
  background: linear-gradient(to bottom, #C0392B, #C0392B);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

/* Hover effect */
#whatwedo .btn:hover, #recentworks .btn:hover, #customerreviews .btn:hover, #contact .btn:hover {
  color:#F4F1EC;
  background-color: #C0392B;
}

/* Gradient border effect */
header .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;  /* thin border */
  /* background-color: #C0392B; */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

header .btn:hover, #whatwedo .btn:hover, #recentworks .btn:hover, #customerreviews .btn:hover, #contact .btn:hover {
  color:#F4F1EC;
  background-color: none;
}

/* logo scroll animation css*/
.logo-row {
  display: flex;
  width: max-content;
}

.logo-strip {
  display: flex;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-left {
  display: flex;
  animation: scroll-left 20s linear infinite;
}

.animate-right {
  display: flex;
  animation: scroll-right 25s linear infinite;
}

/* Who We Are Section */
.who-we-are {
  background-color: #922B21;
  color: #BFA76F;
 padding: 60px 20px;
  text-align: center;
}


/* Reduce section width by 25% */
.who-we-are .container {    /* 75% width of parent */
  margin: 0 auto;      /* center the section */
}

/* Optional: keep heading & paragraph left-aligned */
.who-we-are h2,
.who-we-are .description {
  text-align: left;
}


.who-we-are h2 {
  font-family: "Cera Pro", sans-serif !important;
  font-size: 24px;
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  color: #BFA76F;
}

.who-we-are .description {
  font-family: 'Cera Pro', serif;
  text-align: left; /* left align */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
  text-transform: uppercase; /* force full caps */
  font-weight: 400;
  line-height: 1.5;
  color: #BFA76F;
    

}


/* Simple Bordered Button */
.who-we-are .container .btn {
  display: inline-block;
  padding: 0.75rem 1.8rem;    /* compact padding */
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #BFA76F;             /* border & text color */
  border: 2px solid #BFA76F !important;  /* simple border */         /* rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;  /* smooth hover effect */
}

/* Hover effect */
.who-we-are .container .btn:hover {
  background: #BFA76F;   /* filled background on hover */
  color: #111827; 
  text-transform: uppercase;          /* text color changes on hover */
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 300px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3rem;
}

.stats-grid .stat-value {
  font-family: "MixtaPro", sans-serif;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #BFA76F;
  text-transform: uppercase;
}

.stats-grid .stat-label {
  font-family: "Cera Pro", serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #BFA76F;
}

.logo-row-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo-row {
  display: flex;
  gap: 2rem;
}


#whatwedo li {
    font-family: "MixtaPro", serif !important;
  font-size: 40px;
  text-align: center;
   text-transform: none; /* force full caps */
  line-height: 1.0;
  color: #5B4E3D; /* Tailwind gray-800 */
}

#customerreviews p {
      font-family: "MixtaPro", serif !important;
  font-size: 40px;
  text-align: left;
   text-transform: none; /* force full caps */
  line-height: 1.2;
  color: #1C1C1C; /* Tailwind gray-800 */
}



#recentworks p {
  color: #5B4E3D;
}

#contact .text-sm {
  font-family: 'Cera Pro', serif;
  color: #5B4E3D;
  text-transform: uppercase;
  
}

#contact .RGT h4, #contact .RGT h2 {
   font-family: 'Cera Pro', serif !important;
  color: #5B4E3D;
  font-weight: 600;
}

  #contact input::placeholder,
  #contact select::placeholder,
  #contact textarea::placeholder {
    font-family: "Cera Pro", sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    color: #3D3D3D;
  }

  /* For select, since it doesn't support ::placeholder, use same font */
  #contact select {
    font-family: "Cera Pro", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #3D3D3D;
  }

#contact .select-selected {
 color: #3D3D3D;
 font-family: "Cera Pro", sans-serif;
 font-size: 14px;
 font-weight: 600;
 text-transform: none;
}


  /* default placeholder color inside the select */
  .select-placeholder { color: #3D3D3D; }

  


  #footer .para16 {
  font-size: 14px !important;
    font-family: 'Cera Pro', serif !important;
    font-weight:300;
    text-transform: uppercase;
    color: #A99780;
}

  #footer .greenwater {
  font-size: 12px !important;
    font-family: 'Cera Pro', serif !important;
    font-weight:300;
    text-transform: uppercase;
    color: #5B4E3D;
}


  /* Hide default date picker icon */
  input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
    -webkit-appearance: none;
  }
  input[type="date"]::-moz-calendar-picker-indicator {
    display: none;
  }

  p a{
    color:#3D3D3D ;
    font-size: 14px;
    text-decoration: none;
  }

  p a:hover {
    text-decoration: underline;  }

    #ourmission h2 {

      font-size: 40px;
      font-family: "MixtaPro", sans-serif;
      color: #DAD5D0;
      line-height: 1.2;
    } 

    #our-history span {
      font-size: 48px;
      color: #C0392B;
      font-weight: 300;
      font-family: "MixtaPro", sans-serif;
    }

     #our-history p {
      font-size: 16px;
      color: #111827;
      font-weight: 300;
      font-family: 'Cera Pro', serif !important;
    }