/* ===== Fonts (use your local .ttf) ===== */
@import url('https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@font-face {
  font-family: 'Brittany';
  src: url('../fonts/brittany_signature/BrittanySignature.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Dream Avenue';
  src: url('../fonts/dream-avnue.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Amoresa';
  src: url('../fonts/Amoresa.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'TT Hoves';
  src: url("../fonts/TT Hoves Pro Trial Black.ttf") format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'TT Hoves';
  src: url('../fonts/TT-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Billion Miracles';
  src: url('../fonts/Billion-Miracles.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-display: swap;
}


@font-face {
  font-family: 'Canva Sans';
  src: url('../fonts/canva-sans-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
   font-weight: 400;
    font-style: normal;
}

.fm-bublo {
  font-family: "Bilbo Swash Caps", cursive;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 500;
  color: #AE842F;
  margin-bottom: 0;
  letter-spacing: 4px;
}
.fm-Montserrat {
   font-family: "Open Sans", sans-serif;
  font-size: clamp(20px, 4vw, 26px);
  color: #AE842F;
  padding-top: 0;
  font-weight: 500;
  letter-spacing: 14px;
  margin-top:-8px;
  text-transform: uppercase;
}

.fm-snas
{
    font-family: "Google Sans Code", monospace;
}


/* ===== Theme ===== */
:root{
  --ink:#222;
  --bg:#f6f2ea; /* paper-like, matches your screenshot */
  --muted:#6c6c6c;
}
.container{ max-width:1320px; padding: 0 20px;}
.bg-paper{ background:var(--bg) !important; padding:20px 0 50px; }
body{ color:var(--ink); font-family:'TT Hoves', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.lead{ max-width: 50ch; }

/* ===== Headlines ===== */
.tagline{
  font-family: 'Brittany', cursive;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing:.02em;
  margin-top:.5rem;
}
.beauty{
  font-family: 'Dream Avenue', serif;
  font-size:  50px;
  margin:0;
  letter-spacing:.02em;
}
.peace{
  font-family: 'Amoresa', serif;
  font-size: 46px;
  margin:0 0 1rem 0;
  transform: translateY(-6px);
}

/* ===== Image ===== */
.hero-img{
  /* border-radius: 14px; */
  /* box-shadow: 0 18px 40px rgba(0,0,0,.08); */
}

/* ===== Button ===== */
.btn-dark{
  padding:.75rem 1rem;
}

/* ===== Social buttons ===== */
.icon{
  width:40px; height:40px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem;
  border-color:#d8d4cc !important;
  color:#333;
  background:#fff;
}
.icon:hover{ background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); }

/* ===== Brand lockup ===== */
.brand{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size: clamp(26px, 5vw, 44px);
}
.input-field{
    padding: 13px 20px;
}
.logo-img {
  width: clamp(200px, 68vw, 500px);
}
@media screen and (max-width: 1189px) {
    .beauty, .peace {
        font-size: 45px;
    }
}
@media screen and (max-width: 925px) {
    .beauty, .peace {
        font-size: 40px;
    }
}
@media screen and (max-width: 786px) {
    .beauty, .peace {
        font-size: 30px;
    }
    .lead {
      font-size: 16px;
       padding-top: 40px;
    }
    .tagline {
    margin-top: 3.5rem;
  }
}
@media screen and (max-width: 611px) {
    .beauty, .peace {
        font-size: 26px;
    }
    .lead {
      font-size: 13px;
     
    }
    .input-field, .btn-dark {
    padding: 7px 17px;
    font-size: 12px;
}
   
}
    
  @media screen and (max-width: 443px) {
 .beauty, .peace {
        font-size: 32px;
    }
    /* .bg-paper{padding: 0;} */
  }