@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap");

html, body {
    overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Poppins, sans-serif;
  background: #f8f4ef;
  color: #222;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
/* ==========================
   CONTACT HERO
========================== */

.contact-hero{
    height:560px;
    background:url("../images/hero/contact.png") center center/cover no-repeat;
    display:flex;
    align-items:center;
    padding-left:5%;
    position:relative;
    overflow:hidden;
}

.contact-hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
}

.hero-container{
    position:relative;
    z-index:2;
    width:100%;
	margin-top:-100px;
}

.hero-content{
    max-width:600px;
    color:#fff;
}

.sub-title{
    display:block;
    font-family:"Poppins",sans-serif;
    font-size:15px;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#d8ae66;
    margin-bottom:18px;
}

.hero-content h1{
    font-family:"Cormorant Garamond",serif;
    font-size:60px;
    font-weight:500;
    line-height:1;
    letter-spacing:.5px;
    color:#fff;
    margin-bottom:22px;
}

.hero-content h1 span{
    font-style:italic;
    color:#e38aa2;
}

.divider{
    width:220px;
    height:2px;
    background:#c79d5c;
    margin:25px 0;
    position:relative;
}

.divider::before,
.divider::after{
    content:"";
    position:absolute;
    top:50%;
    width:8px;
    height:8px;
    border:2px solid #c79d5c;
    border-radius:50%;
    background:#1d120d;
    transform:translateY(-50%);
}

.divider::before{
    left:0;
}

.divider::after{
    right:0;
}

.hero-content p{
    font-family:"Lora",serif;
    font-size:20px;
    line-height:1.9;
    color:#f6f6f6;
    max-width:620px;
    margin:0;
}

/* Wave */

.hero-wave{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:100px;
    background:#f8f4ef;
    border-radius:100% 100% 0 0;
    transform:scaleX(1.25);
}
.contact-section {
  margin-top: -40px;

  position: relative;

  z-index: 5;

  padding-bottom: 0px;
}

.contact-grid {
  display: grid;

  grid-template-columns: 1.4fr 0.9fr;

  gap: 40px;

  align-items: stretch;
}
.contact-card{
    min-height:650px;
    display:flex;
    flex-direction:column;
}
.contact-form,
.contact-card{
    height:100%;
}
.contact-form {
  background: #fbf8f4;
 min-height:650px;
  padding: 40px;

  border-radius: 20px;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.contact-form h2 {
  font-family: "Cormorant Garamond", serif;

  font-size: 46px;

  text-align: center;

  margin-bottom: 12px;
}

.small-divider {
  width: 120px;

  height: 2px;

  background: #c79d5c;

  margin: 20px auto 40px;

  position: relative;
}

.small-divider::after {
  content: "";

  width: 10px;
  height: 10px;

  border: 2px solid #c79d5c;

  border-radius: 50%;

  position: absolute;

  left: 50%;
  top: -5px;

  transform: translateX(-50%);

  background: #fbf8f4;
}

.two-col {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;

  padding: 18px 22px;

  margin-bottom: 20px;

  border: 1px solid #eee;

  border-radius: 8px;

  font-size: 15px;

  background: white;

  outline: none;

  transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #bb7b8e;
}

.contact-form textarea {
  resize: none;
}

.contact-form button {
  background: #5d2d38;

  color: white;

  border: none;

  padding: 16px 34px;

  border-radius: 8px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 15px;

  margin-top: 10px;

  transition: 0.35s;
}

.contact-form button span {
  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #84515d;
}

.contact-form button:hover {
  background: #7d4150;
}
.contact-card {
  background: #2d2018;

  color: white;

  padding: 45px 35px;

  border-radius: 25px;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.contact-card h2 {
  font-family: "Cormorant Garamond", serif;

  font-size: 42px;

  text-align: center;

  margin-bottom: 15px;
}

.contact-card .small-divider::after {
  background: #2d2018;
}

.item {
  display: flex;

  gap: 20px;

  margin-bottom: 22px;

  align-items: flex-start;
}

.icon {
  width: 60px;
  height: 60px;

  border-radius: 50%;

  background: #b86f81;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 22px;

  flex-shrink: 0;
}

.item h4 {
  font-size: 22px;

  font-family: "Cormorant Garamond", serif;

  margin-bottom: 10px;

  color: #e9d4b4;
}

.item p {
  line-height: 28px;

  font-size: 15px;

  color: #ececec;
}

.support-section {
  padding: 60px 0;
  background: rgb(248, 244, 239);
}

.support-section h2 {
  text-align: center;

  font-family: "Cormorant Garamond", serif;

  font-size: 48px;

  margin-bottom: 12px;

  color: #2b1b18;
}

.support-grid {
  display: grid;

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

  gap: 25px;

  margin-top: 45px;
}
.support-box {
  text-align: center;

  padding: 30px 22px;

  transition: 0.35s;

  border-radius: 18px;
}

.support-box:hover {
  background: white;

  transform: translateY(-8px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}


.support-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;

    border-radius:50%;

    background:#c88094;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:all .35s ease;
}

.support-icon i{
    font-size:34px;
    color:#fff;
    transition:transform .35s ease;
}

.support-box:hover .support-icon {
  transform: scale(1.08);
  background: #b56d82;
}

.support-box:hover .support-icon i {
  transform: scale(1.1);
}

.support-icon i {
  transition: transform 0.35s ease;
}

.support-box h3 {
  font-family: "Cormorant Garamond", serif;

  font-size: 30px;

  margin-bottom: 12px;
}

.support-box p {
  font-size: 15px;

  line-height: 28px;

  color: #666;
}
.appointment-banner {
  position: relative;

  margin-top: 50px;

  padding: 100px 0;

  background:
    linear-gradient(rgba(24, 12, 10, 0.65), rgba(24, 12, 10, 0.65)),
    url(images/banner.jpg) center/cover;

  overflow: hidden;
}
.appointment-banner::before {
  content: "";

  position: absolute;

  top: -70px;

  left: 0;

  width: 100%;

  height: 100px;

  background: rgb(248, 244, 239);

  border-radius: 0 0 100% 100%;

  transform: scaleX(1.2);
}

.appointment-banner::after {
  content: "";

  position: absolute;

  bottom: -70px;

  left: 0;

  width: 100%;

  height: 140px;

  background: white;

  border-radius: 100% 100% 0 0;

  transform: scaleX(1.2);
}

.cta-wrapper {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 5;
}

.cta-content {
  width: 45%;

  color: white;
}

.cta-content h2 {
  font-family: "Cormorant Garamond", serif;

  font-size: 52px;

  line-height: 1.1;

  margin-bottom: 20px;
}

.cta-content span {
  color: #d98a9f;

  font-style: italic;
}

.cta-content p {
  font-size: 17px;

  line-height: 30px;

  margin-bottom: 35px;

  color: #f3f3f3;
}
.cta-btn {
  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding: 16px 30px;

  background: #b5647d;

  color: white;

  text-decoration: none;

  border-radius: 8px;

  font-weight: 600;

  transition: 0.35s;
}

.cta-btn span {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: #6b3946;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;
}

.cta-btn:hover {
  background: #d06b88;
}
.cta-image {
  width: 42%;

  text-align: right;
}

.cta-image img {
  width: 100%;

  max-width: 400px;
}

.flower {
  position: absolute;

  opacity: 0.18;

  pointer-events: none;
}

.flower img {
  width: 180px;
}

.flower-left {
  left: -40px;

  bottom: 80px;
}

.flower-right {
  right: -30px;

  bottom: 60px;
}
.contact-card {
  transition: 0.45s;
}

.contact-card:hover {
  transform: translateY(-10px);

  box-shadow: 0 40px 70px rgba(0, 0, 0, 0.22);
}
.contact-form {
  transition: 0.4s;
}

.contact-form:hover {
  transform: translateY(-6px);

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}
.contact-form input,
.contact-form textarea {
  transition: 0.35s;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: #cf92a3;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #cb7890;

  box-shadow: 0 0 0 5px rgba(203, 120, 144, 0.15);
}
.contact-card {
  background: rgba(41, 28, 21, 0.93);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);
}

.support-box {
  transition: 0.45s;
}

.support-box:hover {
  transform: translateY(-12px) scale(1.02);
}

.cta-image img {
  animation: floatImage 5s ease-in-out infinite;
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

button,
.cta-btn {
  overflow: hidden;

  position: relative;
}

button::before,
.cta-btn::before {
  content: "";

  position: absolute;

  left: -120px;

  top: 0;

  width: 80px;

  height: 100%;

  background: rgba(255, 255, 255, 0.25);

  transform: skew(-20deg);

  transition: 0.7s;
}

button:hover::before,
.cta-btn:hover::before {
  left: 120%;
}

.hero-content,
.contact-form,
.contact-card,
.support-box,
.cta-content,
.cta-image {
  animation: fadeUp 0.9s ease forwards;

  opacity: 0;
}

@keyframes fadeUp {
  0% {
    opacity: 0;

    transform: translateY(60px);
  }

  100% {
    opacity: 1;

    transform: none;
  }
}
.scroll-top {
  position: fixed;

  right: 25px;

  bottom: 25px;

  width: 50px;

  height: 50px;

  background: #c57f95;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  font-size: 22px;

  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);

  transition: 0.3s;

  z-index: 999;
}

.scroll-top:hover {
  transform: translateY(-6px);

  background: #af6078;
}
/* ==========================
   TABLET
========================== */

@media (max-width:991px){

.container{
    width:92%;
}

.contact-hero{
    height:75vh;
}

.hero-content{
    width:100%;
    max-width:600px;
}

.hero-content h1{
    font-size:58px;
}

.hero-content p{
    font-size:16px;
    line-height:28px;
}

.hero-wave{
    height:90px;
}

.contact-section{
    margin-top:-20px;
}

.contact-grid{
    grid-template-columns:1fr;
    gap:30px;
}

.contact-form,
.contact-card{
    width:100%;
}

.contact-form{
    padding:40px;
}

.contact-card{
    padding:40px;
}

.contact-form h2,
.contact-card h2{
    font-size:40px;
}

.support-section{
    padding:60px 0;
}

.support-grid{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:40px;
}

.support-box{
    padding:30px 20px;
}

.support-box h3{
    font-size:28px;
}

.appointment-banner{
    padding:90px 0;
}

.cta-wrapper{
    flex-direction:column;
    text-align:center;
}

.cta-content{
    width:100%;
}

.cta-content h2{
    font-size:48px;
}

.cta-content p{
    max-width:650px;
    margin:0 auto 30px;
}

.cta-btn{
    margin:auto;
}

.cta-image{
    width:80%;
    margin-top:40px;
    text-align:center;
}

.cta-image img{
    max-width:360px;
}

.flower img{
    width:130px;
}

}

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

@media (max-width:767px){

.container{
    width:92%;
}

/* HERO */

.contact-hero{
    height:65vh;
    background-position:center;
}

.overlay{
    background:linear-gradient(rgba(16,8,5,.78),rgba(16,8,5,.55));
}

.hero-container{
    justify-content:center;
    text-align:center;
}

.hero-content{
    width:100%;
}

.sub-title{
    font-size:12px;
    letter-spacing:3px;
}

.hero-content h1{
    font-size:42px;
    line-height:1.05;
}

.hero-content p{
    font-size:15px;
    line-height:26px;
    max-width:100%;
}

.divider{
    width:120px;
    margin:20px auto;
}

.hero-wave{
    height:60px;
}

/* CONTACT */

.contact-section{
    margin-top:-15px;
}

.contact-grid{
    grid-template-columns:1fr;
    gap:25px;
}

.contact-form{
    padding:25px 20px;
    border-radius:15px;
}

.contact-card{
    padding:30px 20px;
    border-radius:15px;
}

.contact-form h2,
.contact-card h2{
    font-size:32px;
}

.small-divider{
    margin:15px auto 30px;
}

.two-col{
    grid-template-columns:1fr;
    gap:0;
}

.contact-form input,
.contact-form textarea{
    padding:15px 16px;
    font-size:14px;
}

.contact-form textarea{
    height:140px;
}

.contact-form button{
    width:100%;
    justify-content:center;
}

/* INFO */

.item{
    gap:15px;
    margin-bottom:22px;
}

.icon{
    width:50px;
    height:50px;
    font-size:18px;
}

.item h4{
    font-size:20px;
}

.item p{
    font-size:14px;
    line-height:22px;
}

/* SUPPORT */

.support-section{
    padding:45px 0;
}

.support-section h2{
    font-size:34px;
}

.support-grid{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:30px;
}

.support-box{
    padding:25px 18px;
}

.support-icon{
    width:75px;
    height:75px;
    margin-bottom:18px;
}

.support-icon i{
    font-size:28px;
}

.support-box h3{
    font-size:26px;
}

.support-box p{
    font-size:14px;
    line-height:24px;
}

/* CTA */

.appointment-banner{
    margin-top:40px;
    padding:80px 0;
}

.appointment-banner::before{
    height:60px;
    top:-35px;
}

.appointment-banner::after{
    height:80px;
    bottom:-40px;
}

.cta-wrapper{
    flex-direction:column;
    text-align:center;
}

.cta-content{
    width:100%;
}

.cta-content h2{
    font-size:38px;
}

.cta-content p{
    font-size:15px;
    line-height:25px;
    margin-bottom:25px;
}

.cta-btn{
    display:inline-flex;
    margin:auto;
    padding:14px 26px;
}

.cta-image{
    width:100%;
    margin-top:30px;
    text-align:center;
}

.cta-image img{
    width:80%;
    max-width:260px;
}

/* FLOWERS */

.flower{
    display:none;
}

/* SCROLL BUTTON */

.scroll-top{
    width:45px;
    height:45px;
    right:15px;
    bottom:15px;
    font-size:18px;
}

}