@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Libre+Baskerville&family=Poppins:ital,wght@0,400;1,200&display=swap');
/*
=============== 
Fonts
===============
*/

@import 'base.css';
@import 'navbar.css';


:root {

  --primary-color:  #DAB93C;
    
  /* grey used for paragraphs */
  --clr-grey-5:#69696b;
  --clr-grey-6: #747477;
  --clr-grey-7: #a9a9ad;
  --clr-grey-8: #cbcbd3;
  --clr-grey-9:  #e5e5eb;
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: 'Libre Baskerville', serif;
  --ff-secondary: 'Poppins', sans-serif;
  --ff-tertiary: 'Amiri', serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 1rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}
/*
=============== 
Fonts
===============
*/



::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: var(--ff-secondary);
    /* background: var(--clr-grey-10); */
    /* color: var(--primary-color); */
    line-height: 1.5;
    font-size: 0.875rem;
  }

ul {
list-style-type: none;
}
a {
  text-decoration: none;
  color: var(--clr-black);
  cursor: pointer;
  }


  /*
=============== 
Layouts
===============
*/
img {
  width: 100%;
}
.hero{
  height: 100vh;
  /* height: 80vh; */
  position: relative;
}
.content {
  position: absolute;
  top: 80px;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center; 
  flex-direction: column;
 
}
.btn-container {
  position: absolute;
  width: 100%;
  bottom: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.content img {
  width: 80vw;
}

.main-btn{
  background: var(--primary-color);
  padding: 20px 10px;
  border: none;
  margin: 10px;
  border-radius: var(--radius);
  min-width: 90px;
  text-transform: uppercase;
  font-weight: bold;

}
.u-text-center {
  text-align: center;
}

@media screen and (max-width: 900px) and (min-width: 768px) {
  .content img {
    width: 40vw;
  }
  .main-btn{
    padding: 20px 50px;
    margin: 20px;
  }
  .btn-container {
    bottom: -100px;
  }
  .content {
   
    height: 300px;
    
  }
   
}

@media only screen  and (min-width: 901px){
    .content img {
    width: 40vw;
  }
  .main-btn{
    padding: 20px 50px;
    margin: 20px;
  }
  .content {
   
    height: 400px;
    
  }
  .btn-container {
    bottom: 200px;
  }
}