:root {

  --pink: #e85d83;
  --pink-dark: #c94168;

  --cream: #fffaf7;
  --soft-pink: #fff0f4;

  --dark: #26232a;
  --text: #39343a;
  --muted: #777078;

  --white: #ffffff;

  --border: #eadedf;

  --shadow:
    0 20px 60px rgba(65, 35, 45, .10);

}


* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: var(--cream);

  color: var(--text);

  line-height: 1.6;

}


a {

  text-decoration: none;

  color: inherit;

}


img {

  max-width: 100%;

  display: block;

}


/* ================= HEADER ================= */

.header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background:
    rgba(255,250,247,.94);

  backdrop-filter:
    blur(15px);

  border-bottom:
    1px solid var(--border);

}


.nav-container {

  width: 92%;

  max-width: 1180px;

  margin: auto;

  min-height: 75px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 800;

  font-size: 16px;

}


.brand img {

  width: 48px;

  height: 48px;

  object-fit: cover;

  border-radius: 14px;

}


nav {

  display: flex;

  gap: 27px;

}


nav a {

  font-size: 14px;

  font-weight: 700;

  color: #625b62;

  transition: .2s;

}


nav a:hover {

  color: var(--pink-dark);

}


.menu-btn {

  display: none;

  border: none;

  background: none;

  font-size: 28px;

  cursor: pointer;

}



/* ================= HERO ================= */

.hero {

  width: 92%;

  max-width: 1180px;

  margin: auto;

  min-height: 680px;

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  align-items: center;

  gap: 70px;

}


.hero-content {

  padding: 70px 0;

}


.label {

  color: var(--pink-dark);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 3px;

}


.hero h1 {

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(48px, 7vw, 86px);

  line-height: 1.02;

  letter-spacing: -3px;

  margin: 18px 0;

}


.hero h1 span {

  display: block;

  color: var(--pink-dark);

}


.hero-content > p:not(.label) {

  max-width: 590px;

  color: var(--muted);

  font-size: 17px;

  margin: 25px 0 30px;

}


.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}


.btn {

  padding:
    14px 22px;

  border-radius: 50px;

  font-weight: 800;

  transition: .25s;

}


.btn.primary {

  background: var(--dark);

  color: white;

  box-shadow:
    0 12px 30px
    rgba(35,30,38,.18);

}


.btn.primary:hover {

  transform:
    translateY(-3px);

}


.btn.secondary {

  background: white;

  border:
    1px solid var(--border);

}


.btn.secondary:hover {

  border-color:
    var(--pink);

}


.trust {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 30px;

  color: #837a80;

  font-size: 13px;

}


.hero-card {

  position: relative;

  min-height: 480px;

  border-radius: 45px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #ffe5ed
    );

  display: grid;

  place-items: center;

  box-shadow: var(--shadow);

  border:
    1px solid #f1dadd;

}


.hero-logo {

  width: 75%;

  background: white;

  padding: 16px;

  border-radius: 28px;

  box-shadow:
    0 25px 55px
    rgba(75,40,50,.13);

  transform: rotate(2deg);

}


.hero-logo img {

  width: 100%;

  border-radius: 20px;

}


.floating {

  position: absolute;

  background: white;

  border:
    1px solid var(--border);

  border-radius: 50px;

  padding:
    9px 16px;

  font-size: 13px;

  font-weight: 800;

  box-shadow:
    0 12px 30px
    rgba(70,40,50,.10);

}


.floating-one {

  left: 3%;

  top: 17%;

  transform: rotate(-7deg);

}


.floating-two {

  right: 4%;

  bottom: 16%;

  transform: rotate(6deg);

}



/* ================= SECTION ================= */

.section {

  padding: 105px 4%;

}


.section-heading {

  width: 92%;

  max-width: 1180px;

  margin:
    0 auto 50px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap: 35px;

}


.section-heading h2 {

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(36px,5vw,58px);

  line-height: 1.1;

  margin-top: 10px;

}


.section-heading > p {

  max-width: 470px;

  color: var(--muted);

}


.section-heading.center {

  display: block;

  text-align: center;

}


.section-heading.center > p {

  margin:
    12px auto 0;

}



/* ================= COLLECTIONS ================= */

.collection-grid {

  width: 92%;

  max-width: 1180px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 18px;

}


.collection-card {

  background: white;

  border:
    1px solid var(--border);

  border-radius: 26px;

  padding: 30px;

  min-height: 225px;

  transition: .25s;

}


.collection-card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    var(--shadow);

}


.collection-icon {

  font-size: 36px;

  margin-bottom: 17px;

}


.collection-card h3 {

  font-size: 20px;

  margin-bottom: 8px;

}


.collection-card p {

  color: var(--muted);

  font-size: 14px;

  margin-bottom: 18px;

}


.collection-card a {

  color: var(--pink-dark);

  font-size: 14px;

  font-weight: 800;

}


.collection-card.special {

  background:
    var(--soft-pink);

}



/* ================= GALLERY ================= */

.gallery-section {

  padding:
    105px 4%;

  background:
    #f8f0ee;

}


.category {

  width: 92%;

  max-width: 1180px;

  margin:
    0 auto 70px;

}


.category-title {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 25px;

}


.category-title span {

  font-size: 28px;

}


.category-title h3 {

  font-family:
    Georgia,
    serif;

  font-size: 30px;

}


.photo-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 17px;

}


.photo-card {

  position: relative;

  height: 330px;

  overflow: hidden;

  border-radius: 25px;

  background: #eee;

  box-shadow:
    0 8px 25px
    rgba(60,35,40,.07);

}


.photo-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: .5s;

}


.photo-card:hover img {

  transform:
    scale(1.07);

}


.photo-info {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  padding:
    55px 18px 18px;

  color: white;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.78)
    );

}


.photo-info h4 {

  font-size: 17px;

}


.photo-info p {

  font-size: 12px;

  opacity: .85;

}



/* ================= CUSTOM ================= */

.custom-section {

  padding:
    110px 4%;

  background:
    linear-gradient(
      135deg,
      #fff0f4,
      #fff9f3
    );

}


.custom-container {

  width: 92%;

  max-width: 1180px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr
    .85fr;

  gap: 75px;

  align-items: center;

}


.custom-text h2 {

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(40px,5vw,60px);

  line-height: 1.1;

  margin:
    12px 0 20px;

}


.custom-text > p {

  color: var(--muted);

  max-width: 570px;

}


.custom-text ul {

  list-style: none;

  margin-top: 28px;

}


.custom-text li {

  margin:
    12px 0;

  font-weight: 700;

}



/* ================= FORM ================= */

.order-form {

  background: white;

  padding: 32px;

  border-radius: 28px;

  box-shadow:
    var(--shadow);

  border:
    1px solid var(--border);

}


.form-label {

  color:
    var(--pink-dark);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

}


.order-form h3 {

  font-size: 26px;

  margin:
    10px 0 20px;

}


.order-form label {

  display: block;

  font-size: 13px;

  font-weight: 700;

  margin-top: 16px;

}


input,
select,
textarea {

  width: 100%;

  margin-top: 7px;

  padding: 13px;

  border:
    1px solid var(--border);

  border-radius: 13px;

  background:
    #fffaf9;

  font: inherit;

  outline: none;

}


textarea {

  min-height: 120px;

  resize: vertical;

}


input:focus,
select:focus,
textarea:focus {

  border-color:
    var(--pink);

  box-shadow:
    0 0 0 3px
    rgba(232,93,131,.10);

}


.order-form button {

  width: 100%;

  border: none;

  background:
    var(--dark);

  color: white;

  padding: 15px;

  margin-top: 20px;

  border-radius: 50px;

  font-weight: 800;

  font-size: 15px;

  cursor: pointer;

}


.order-form small {

  display: block;

  text-align: center;

  color: #8a8085;

  font-size: 11px;

  margin-top: 10px;

}



/* ================= CONTACT ================= */

.contact-section {

  padding:
    85px 4%;

  background:
    var(--dark);

  color: white;

  text-align: center;

}


.contact-container {

  width: 92%;

  max-width: 900px;

  margin: auto;

}


.contact-section .label {

  color: #ffb2c6;

}


.contact-section h2 {

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(38px,5vw,58px);

  margin:
    10px 0;

}


.contact-section p {

  color: #bdb6bb;

}


.contact-buttons {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;

}


.contact-btn {

  background: white;

  color: var(--dark);

  padding:
    14px 22px;

  border-radius: 50px;

  font-weight: 800;

}


.contact-btn.facebook {

  background:
    #ffe7ee;

}



/* ================= FOOTER ================= */

footer {

  padding:
    25px 5%;

  background:
    #1f1d22;

  color: #aaa;

  display: flex;

  justify-content:
    space-between;

  font-size: 13px;

}



/* ================= MOBILE ================= */

@media(max-width:900px) {

  nav {

    display: none;

    position: absolute;

    top: 75px;

    left: 0;

    right: 0;

    background:
      var(--cream);

    padding: 20px 5%;

    flex-direction: column;

    border-bottom:
      1px solid var(--border);

  }


  nav.active {

    display: flex;

  }


  .menu-btn {

    display: block;

  }


  .hero {

    grid-template-columns: 1fr;

    padding:
      60px 0 80px;

  }


  .hero-card {

    min-height: 380px;

  }


  .collection-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .photo-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .custom-container {

    grid-template-columns: 1fr;

  }

}


@media(max-width:550px) {

  .hero h1 {

    font-size: 48px;

  }


  .collection-grid {

    grid-template-columns: 1fr;

  }


  .photo-grid {

    grid-template-columns: 1fr;

  }


  .photo-card {

    height: 360px;

  }


  .section-heading {

    display: block;

  }


  .section-heading > p {

    margin-top: 15px;

  }


  footer {

    flex-direction: column;

    gap: 8px;

  }

}