:root {
    /* Define custom properties for font variations */
    --font-weight: 400;
    --font-stretch: 100%;

    --bg-colour: #F5F5EF;

    --text-color: #2E1D11;

    --dark-primary: #2E1D11;
    --dark-primary-100: #3c2616;
    --dark-primary-200: #3f2819;

    --max-content-width: 1080px;
    --side-margin: 2rem;
  }


@font-face {
    font-family: 'Sentient';
    src: url('Sentient-Variable.woff') format('woff');
    src: url('Sentient-Variable.woff2') format('woff2');

    font-weight: 100 900; /* Variable font supports a range of weights */
    font-stretch: 75% 125%; /* Variable font supports a range of widths */
    font-style: normal;
    font-display: swap;
  }


  @keyframes slideIn {
    from {
      translate: 0 4rem;

    }
  
    to {
      translate: 0 0;
    }
  }

  @keyframes slideInSmall {
    from {
      translate: 0 1rem;

    }
  
    to {
      translate: 0 0;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;

    }
  
    to {
      opacity: 1;
    }
  }


/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}
body {
  color: var(--text-color);
  font-family: 'Sentient', serif;
  font-weight: 300;
  font-stretch: 100%;
  background-color: var(--bg-colour);

  display:flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  margin: 0;
}


/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  font-weight: 400;
  line-height: 1.2;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}



  p{
    font-weight: 200;
    font-size: 1.125rem;;
  }

    p.logo{
        font-weight: 400;
        font-size: 2rem;
        margin:0;
        padding:0;
        text-wrap: nowrap;
    }

    .logo a{
      text-decoration: none;
    }


  button {
    background-color: var(--dark-primary);
    color: white; 
    padding: 0.75rem 1.25rem; /* Padding for the button */
    margin:0;
    border: none; /* Remove default border */
    border-radius: 2rem; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    /* font-weight: ; */
    font-weight: 300;
    font-size: 1.125rem; /* Set font size */
    transition: transform 0.8s ease; /* Smooth transition for background color */
  }

  button:hover {
    background-color: var(--dark-primary-100); /* Darker blue on hover */
  }

  button:active {
    background-color:var(--dark-primary-200); /* Even darker blue on click */
    transform: translateY(1px); /* Slightly move the button down on click */
  }

  button:disabled{
   
      opacity: 0.4;

  }

section{
    width: 100%;
    max-width: var(--max-content-width);
    padding: 0 var(--side-margin) ;
}

  nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;

    width: 100%;
    max-width: var(--max-content-width);
    padding: 1rem var(--side-margin) ;
  }

  nav ul{
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */

    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
}

nav ul li a{
text-decoration: none;
font-size: 1.125rem;
}

.CTA{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:center;
    width:100%;
}

.hero h1{
font-size: 2.125rem;
text-align: center;
font-weight: 200;

padding:4rem 1rem ;
margin:0;

opacity: 0;
animation-name: slideInSmall, fadeIn;
animation-duration: 0.85s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;

}

.hero .images{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 0px;

}

.hero .images div{

  opacity: 0;
  animation-name: fadeIn, slideIn;
  animation-duration: 1.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in, cubic-bezier(0,.49,.25,1.02);
}

.hero .images div p{
  font-size: 0.75rem;;

  margin-top: 0.15rem;
}

.hero .images div:nth-of-type(1){
  padding-top:4rem;
  animation-delay: 0.25s;
}

.hero .images div:nth-of-type(2){
  animation-delay: 0.50s;
}



.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  max-width: var(--max-content-width);
  padding: 1rem var(--side-margin) ;
}



footer{
    border-top: #d2c3b6 solid 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;

    width: 100%;

    padding-top: 1rem;
    margin-top:3rem;

}

footer .container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 0;
}

footer .container div{
  display: flex;
  height:100%;
  flex-direction: column;
  justify-content: space-between;

 

}

footer ul{
  height: 100%;
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */

    display: flex;
    flex-direction: column;
    gap: 0.75rem;


}

footer ul li a{
  font-size: 1rem;
  }

li a{
  text-decoration: none;
    position: relative;
    
    }
  

li a::before {
  cursor: pointer;
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    
    bottom: -2px;
    left: 0;
    background-color: #454545;
    transform: scaleX(0);
    transition: transform 0.4s ease;
  }
  
  li a:hover::before {
    transform: scaleX(1);
  }

.copyrights{
  font-size: 1rem;;
}

  .fullSection{
    max-width: none;
    display: flex;
    justify-content: center;
  }

  .whiteSection{
    background:white;
    margin: 3rem 0;
  }


  .descriptionSection{
    flex-direction: row;
    gap:4rem;
    padding:3rem 0;
  }

  .descriptionSection h2{
    text-wrap: nowrap;
  }

 
  .needInfoSection{
    max-width: 680px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }

  .needInfoSection h2{
    font-size: 2.25rem;;
  }
  .needInfoSection p{
    margin-top:0;
  }


  footer .contacts{
    flex-direction: column;
   justify-content: flex-start;
   padding-right: 0 !important;
  }

footer .contacts p{
margin-top:6px;
text-align: right;

}

footer .contacts .logo{
  margin-top:0;
  font-size: 1.75rem;
  }


  .contactSection{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }


  .form{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .form div{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-start;
    gap: 0.25rem;

    width:100%;
    box-sizing: border-box;
  }

  #form-results-box {
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #b5e2b5;
    border-radius: 2rem;
    border: 1px solid #52b852;
    padding: 0.5rem;
    
}

#form-results-box p{
 padding: 0;
 margin:0;
}

  input, textarea {
    box-sizing: border-box;
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    width: 100%;
    padding-left: 1rem;

    font-weight: 300;;
   
    background-color: #FAFAF7;
    color: #000000;
    border: 1px solid #8b776a;
    border-radius: 1.375rem;;

  }
  
  input:focus,  textarea:focus{
    background: #FFFFFF;
    outline: 1.25px solid var(--dark-primary);
  
  }
  
  .input::placeholder {
    color: #DDDDDD;
  }


  label{
    font-size: 1.25rem;
  }
  
 

  @media screen and (max-width: 900px) {
 
  nav ul{
    display:none;
  }
    
    }




  @media screen and (max-width: 600px) {
 
    footer .container{
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items:start;

      /* text-align: center; */
    }

    .hero .images{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-row-gap: 32px;
    
    }

    .descriptionSection{
      flex-direction: column;
      gap:1rem;
      padding:3rem 0;
    }
    
.contactSection{
  grid-template-columns: repeat(1, 1fr);
  grid-row-gap: 4rem;
}

    }


    @media screen and (max-width: 550px) {
 
      footer .container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
      }

      footer .contacts{
        grid-area: 2 / 1 / 3 / 3;
        flex-direction: column;
       justify-content: flex-start;
       padding-right: 0 !important;
       width: 100%;;
       justify-content: center;
       align-items: center;

       text-align: center;
      }

      footer .contacts p{
        text-align: center;
      }

   
      footer .socialMedia{
        align-items: flex-end;
        text-align: right;
      }
      


        
      }


    @media screen and (max-width: 450px) {
 
      nav .logo{
        font-size:1.5rem;
      }
        
      }

      @media screen and (max-width: 360px) {
        
        html{
          font-size: 14px;;
        }

        nav .logo{
          font-size:1.25rem;
        }
          
        }