/*
---- 01 TypeGraphy Systrm

-font size (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 /44 / 52 / 64 / 74 / 86 / 98 

-Font Weights 
Defualt: 400

-Line hights 

-Sp cing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 80 / 96 / 128

--- 02 colors 

-Primeary;
-Tints;
-Accents;
Greys;#555

----05 Shadows 
/* #fbf8f6;
   #2c2621 
   #423932



*/

/*----06 Board-Radius ----07 Whitespace */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
body {
  font-family: "Playfair+Display";
  line-height: 1;
  font-weight: 100;
  color: #f3dcd4;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem hsla(30, 37%, 97%, 0.504);
}

/**************************/
/***resueable**/
/***********************/

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;

  /*background-color: #f8eae5;*/
}

.grid {
  display: grid;
  gap: 9.6rem;
}

.grid--2--cols {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3--cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--5--cols {
  grid-template-columns: repeat(5, 1fr);
}

/* NAV */
.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #000000;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #000000;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:valid {
  padding: 0.5rem 0.5rem;
  border-radius: 5px;
  color: #000000;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta :active {
  color: #000000;
  background-color: #fbf8f6;
}

.section-hero {
  background-color: #f3dcd4;

  padding: 5rem 1rem 18rem 1rem;
  /*padding: 4.8rem 0 9.6rem 1rem;*/
}

/*********************/
/****HERO******/
/*********************/

.hero {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18rem;

  align-items: center;
}

.hero-img {
  width: 70%;
  border-radius: 15px;
}

.heading-primary,
.heading-secondary {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #000000;

  margin-bottom: 4rem;
}

.heading-primary {
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.05;
  color: #000000;
  letter-spacing: -0.5px;
  margin-bottom: 4rem;
}

.italic-text {
  font-style: italic;
}

.heading-secondary {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
}

.container-how {
  background-color: #f5e3dd;
  padding: 1rem 1rem;
}
.subheading {
  display: block;
  font-size: 1rem;
  font-weight: 200;
  color: #000000;
  text-transform: uppercase;
  padding: 0rem;

  letter-spacing: 0.5px;
}

.section-how {
  padding: 2rem 0;
  background-color: #f5e3dd;
  color: #000000;
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-size: 1.2rem;
  font-weight: 300;
}

/*
.subheading {
  font-size: 2rem;
  align-items: center;
}
.heading-primary {
  font-size: 6.2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 4rem;
}
*/

.hero-discription {
  font-size: 1.5rem;
  line-height: 1.05;
  margin-bottom: 4.8rem;
  color: #000000;
}

.logo {
  height: 9rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
  background-color: #f3dcd4;
  height: 9.6rem;
  padding: 7rem 1rem;
}

.margin--right--sm {
  margin-right: 0rem !important;
}

/*****************/
/****BTTMS*******/
/*****************/
.btn,
.btn:link,
.btn:visited {
  display: inline-block;

  font: size 2rem;
  text-decoration: none;

  padding: 0.5rem 0.5rem;
  border-radius: 5px;

  transition: all 0.3s;
  /****btn cta***/
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn--form {
  background-color: #000000;
  color: #fbf8f6;
  align-items: center;
  width: 50%;
  height: 50px;
  margin: 2rem;
  padding: 1;
}

.btn--form:hover {
  background-color: #fbf8f6;
  color: #000000;
}

.btn--full:link,
.btn--full:visited {
  background-color: #000000;
  color: #fbf8f6;
}

.btn--full:hover,
.btn--full:active {
  background-color: #fbf8f6;
  box-shadow: inset 0 0 0 3px #f3dcd4;
  color: #000;
}

.btn--outline:link,
.btn--outline:visited {
  background-color: #000000;
  color: #fbf8f6;
}

.btn--outline:hover,
.btn--outline:active {
  background-color: #fbf8f6;
  box-shadow: inset 0 0 0 3px #f3dcd4;
  color: #000;
}

/******************/
/*container-how */
/*******************/

/* Container Grid */
.container-how {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 6rem;
}

/* Image Styling */
.step-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.about-pic {
  width: 65%;
}

/* Text Box Styling */
.step-text-box {
  font-family: inherit;
  font-size: 17px;
  color: #000000;
  line-height: 1.4;
}

.step-text-box p {
  margin-bottom: 1.1rem; /* adds space below each paragraph */
}

/* Headings */
.heading-tertiary {
  font-size: 1.5rem;
  color: #615855;
  margin-bottom: 1rem;
}

/* Subheading */
.subheading {
  font-size: 1.25rem;
  font-weight: bold;
  color: #615855;
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}

/* Lists */
.step-text-box ul {
  padding-left: 1.5rem;
  list-style: disc;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container-how {
    grid-template-columns: 1fr;
  }

  .step-img {
    width: 100%;
  }
}

/****************/
/***CTA SECTION***/
/*****************/

.contain-cta {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.section-cta {
  padding: 17rem 0;
  box-sizing: border-box;
  background-color: #f3dcd4;
}

.cta {
  display: grid;
  grid-template-columns: 2fr 1fr;

  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.25);
  border-radius: 11px;
  height: 30rem;
  background-image: linear-gradient(to right bottom, #c2b0aa, #f4e0d8);
  overflow: hidden;
}

.cta-text-box {
  color: #000000;
}

.cta-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  padding: 0 2rem;
}

.heading-secdary-cta {
  color: #000000;
  padding: 1rem 20rem;
  font-size: 2.5rem;
  line-height: 1.8;
}

.cta-img-box {
  background-image: linear-gradient(
      to right bottom,
      hsla(15, 16%, 71%, 0.35),
      hsla(17, 56%, 90%, 0.35)
    ),
    url("../footer.jpeg");

  background-position: center;
  border-radius: 11px;
  block-size: 100%;
  background-size: cover;
}

.cta-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0rem;
  row-gap: 3rem;
  width: 40rem;
}

.cta-form label {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0 5rem;
  width: 30rem;
}

.cta-form input {
  width: 70%;
  padding: 1rem 0;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  background-color: #fbf8f6;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-left: 2rem;
}

.cta-form input::placeholder {
  color: #aaa;
}

.cta-form textarea {
  width: 70%;
  padding: 1rem 0;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  background-color: #fbf8f6;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-left: 2rem;
  resize: none;
}

/*********FOOTER*****/
.foot {
  display: flex; /* Use flexbox for vertical arrangement */
  flex-direction: column; /* Stack logo and icons vertically */
  align-items: center;
  padding: 16px;
  background-color: #f7e7e1;
}

.logo-col {
  display: flex; /* Use flexbox for vertical arrangement */
  flex-direction: column; /* Stack logo and icons vertically */
  align-items: center;
}

.logo {
  width: 13rem;
  height: 13rem;
  margin-bottom: 1px;
}

.social-links ion-icon {
  color: #d08d72;
  font-size: 22px;
  margin-left: 9px;
}

.fa-yelp {
  color: #d08d72;
  font-size: 20px;
  margin-left: 8px;
}
.follow {
  font: inherit;
  font-size: 19px;
  color: #d08d72;
  margin: 10px;
}

/*<label for="Your Messege" >Your Massge</label>
               <input id="Your Messege"  type="text" placeholder=" Your Massge..." >
                </div> 

                 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                  <a href="YOUR_YELP_PROFILE_URL" class="fa fa-yelp"></a>
              
                */