/* =========================================================
   THEME + RESET
   ========================================================= */
:root{
  --peach-bg: #fff0e6;
  --peach-ink: #E59866;
  --brand: #cf741a;
  --brand-dark: #A0522D;
  --ink: #333;
  --soft-cream: #FDF8F6;
  --shadow: 0 8px 16px rgba(0,0,0,.10);
}

html, body{
  height:100%;
  margin:0;
  padding:0;
  background-color:var(--peach-bg);
}

/* =========================================================
   LAYOUT SHELL
   ========================================================= */
.full-height-container{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  overflow-y:visible;
  background-color:var(--peach-bg);
}

/* =========================================================
   DECOR (grid + circles)
   ========================================================= */
.grid-lines{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(229,152,102,.3) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, rgba(229,152,102,.3) 1px, transparent 1px) 0 0/40px 40px;
  z-index:2;
}

.circle-decor{
  position:absolute; width:15px; height:15px; border-radius:50%;
  background-color:rgba(229,152,102,.7);
}

/* base circle */
.circle{
  position:absolute; border-radius:50%;
  background-color:rgba(250,250,240,.5);
  border:6px solid rgba(250,250,240,.5);
  backdrop-filter:blur(4px);
  z-index:2;
}
.circle::before{
  content:""; position:absolute; inset:-12px;
  border:3px solid rgba(211,178,140,.7); border-radius:50%;
}

/* sizes/positions */
.large-circle{  width:300px; height:300px; top:250px; left:50px; }
.medium-circle{ width:200px; height:200px; bottom:100px; right:100px; }
.small-circle{  width:100px; height:100px; top:200px; right:150px; }

/* =========================================================
   TYPOGRAPHY (mobile-first)
   ========================================================= */
.intro-text{
  font-family:'Playfair Display', serif;
  font-weight:bold;
  color:var(--brand);
  margin-bottom:30px;
  z-index:100;
  font-size:1.8rem;         /* phones */
  line-height:1.25;
  text-align:center;
}

.subtext{
  font-family:'Playfair Display', serif;
  color:#5a5a5a;
  line-height:1.5;
  z-index:100;
  font-size:1rem;           /* phones */
  text-align:center;
}

p{
  font-family:'Open Sans', sans-serif;
  color:var(--ink);
}

/* =========================================================
   MEDIA: TABLET & DESKTOP TYPOGRAPHY
   ========================================================= */
@media (min-width: 576px){                      /* small phones → large phones */
  .intro-text{ font-size:2rem; }
  .subtext{    font-size:1.05rem; }
}

@media (min-width: 768px){                      /* tablets */
  .intro-text{ font-size:2.4rem; }
  .subtext{    font-size:1.1rem; line-height:1.6; }
}

@media (min-width: 992px){                      /* desktop */
  .intro-text{ font-size:3rem; }
  .subtext{    font-size:1.2rem; }
}

@media (min-width: 1200px){                     /* large desktop */
  .intro-text{ font-size:3.4rem; }
}

/* =========================================================
   CTA + SOCIAL
   ========================================================= */
.btn-explore{
  display:inline-block;
  background-color:var(--brand);
  color:#fff;
  text-transform:uppercase;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;
  margin-bottom:20px;
  z-index:100;
  font-size:.95rem;         /* phones */
  padding:10px 18px;
}
.btn-explore:hover{
  background-color:var(--brand-dark);
  color:#fff;
  box-shadow:0 6px 8px rgba(0,0,0,.2);
}

@media (min-width: 768px){
  .btn-explore{ font-size:1rem; padding:12px 24px; }
}
@media (min-width: 992px){
  .btn-explore{ font-size:1.1rem; padding:15px 30px; }
}

.social-icons{
  display:flex; justify-content:center; gap:20px; z-index:100;
}
.social-icons i{ color:var(--brand); font-size:36px; }
@media (max-width: 767px){ .social-icons i{ font-size:42px; } }
@media (min-width:1200px){ .social-icons i{ font-size:42px; } }

/* =========================================================
   IMAGE
   ========================================================= */
.photo-image{
  width:80%; max-width:540px; height:auto;
  border-radius:15px; object-fit:cover; box-shadow:var(--shadow); z-index:100;
}
.photo-image-mobile{ width:100%; height:auto; padding:20px; }

/* =========================================================
   TESTIMONIALS (one at a time, smooth fade)
   ========================================================= */
#testimonialCarousel .carousel-inner{
  position:relative; min-height:200px;
}
#testimonialCarousel .carousel-item{
  position:absolute; inset:0; display:block!important;
  opacity:0; visibility:hidden; transition:opacity .45s ease;
  padding:16px 0;
}
#testimonialCarousel .carousel-item.active{
  position:relative; opacity:1; visibility:visible;
}
@media (max-width: 767.98px){
  #testimonialCarousel .carousel-inner{ min-height:220px; }
}
.testimonial-text{
  text-align:center; line-height:1.6; margin:auto; max-width:700px;
  font-size:1rem;              /* phones */
}
@media (min-width:768px){ .testimonial-text{ font-size:1.05rem; } }
@media (min-width:992px){ .testimonial-text{ font-size:1.2rem; } }

/* =========================================================
   LOGO BAR
   ========================================================= */
.styled-logo{
  border:3px solid var(--brand-dark);
  border-radius:50%;
  padding:8px;
  background-color:var(--soft-cream);
  box-shadow:0 3px 8px rgba(160,82,45,.35);
  max-height:100px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.styled-logo:hover{ transform:scale(1.08); box-shadow:0 5px 12px rgba(160,82,45,.45); }

.logo-bar{
  display:flex; justify-content:flex-end; align-items:center;
  padding:16px 20px; background:var(--peach-bg);
}
.logo-bar__img{ height:100px; width:auto; max-width:100%; }

@media (max-width: 991.98px){
  .logo-bar{ padding:12px 16px; }
  .logo-bar__img{ height:80px; }
}
@media (max-width: 575.98px){
  .logo-bar{ padding:10px 14px; }
  .logo-bar__img{ height:70px; }
}

/* =========================================================
   UTILITIES + ANIM
   ========================================================= */
.fade-in-animation{ animation:fadeIn 2s ease-in-out; }
@keyframes fadeIn{
  0%{ opacity:0; transform:translateY(20px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */
/* shrink first row space on small screens */
@media (max-width:768px){
  .flex-grow-0{ flex-basis:20%!important; }
  .p-3{ padding:5px!important; }
}

/* circles: lighten on tablets, hide on phones to avoid overlap/cropping */
@media (max-width: 991.98px){
  .circle{ opacity:.35; transform:scale(.85); }
}
@media (max-width: 575.98px){
  .circle{ display:none; }
}