/*FONT*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital@1&family=Raleway:wght@400;700&display=swap');

/*COLOR*/
:root{
  --light:rgb(247, 247, 247);
  --dark:rgb(65, 65, 65);
  --gray:rgba(245, 245, 245, 0.9);
}

/*BORDER BOX*/
*,
*::before,
*::after{
    box-sizing: border-box;
}
/*BODY*/
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
}

/*HEADER*/
header{
    background-color:white;
    box-shadow:1px 1px 10px;
    top:0;
    left:0;
    position:fixed;
    width:100%;
    height:5rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
    z-index:99;
}
.hamburger{
    width:25px;
    aspect-ratio:1;
    margin-left:1rem;
}
.logo{
    width:90px;
    height:90px;
}
.instagram{
    width:25px;
    aspect-ratio:1;
    margin-right:1rem;
}

/*NAVIGATION HIDDEN*/
.nav{
    position:fixed;
    inset:0 0 0 0%;
    background-color:rgba(0, 0, 0, 80%);
    transform: translateY(-100%);
    transition: transform 300ms cubic-bezier(.5, 0, .5, 1);
    z-index: 1;
}
/*NAVIGATION SHOWN ON CLICK*/
.nav-open .nav {
    transform: translateY(0);
  }
@supports (backdrop-filter: blur(0.5rem)){
    .nav{
        background-color:hsl(0 0 100%/0.5);
        backdrop-filter: blur(0.5rem);
    }
}

/*MENU LIST*/
ul{
    list-style: none;
    font-family: 'Raleway', sans-serif;
    margin-top:7rem;
    display:flex;
    flex-direction: column;
}
li{
    list-style: none;
    margin:0.75rem 0;
}
a{
    text-decoration: none;
    color:var(--light);
}
a.active {
    color:#97826D;
}

/*MAIN IMAGE*/
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height:550px;
    width: 100%;
    z-index: -1;
    background-image: linear-gradient(
        rgba(33, 33, 33, 0.823),
        rgba(0, 0, 0, 0.523)
      ),
      url('cover.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 95% 5%;
    z-index:-99;
    animation: fadebackground 2s;
}
@keyframes fadebackground {
    from {opacity: 0;}
    to {opacity:1}
}
main{
    display:grid;
    height:550px;
    justify-content: center;
    text-align: center;
    color:white;
    z-index:-2;
}
.text h1{
    font-size:4rem;
    font-family: 'Bebas Neue', cursive;
    line-height: 2rem;
    letter-spacing: 0.25rem;
    margin-top:12.5rem;
    margin-bottom:7rem;
    animation:fadetext 0.75s;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.text span{
    font-size:1.25rem;
    letter-spacing: 0rem;
    font-family: 'Playfair Display', serif;
    font-style:italic;
  }
@keyframes fadetext {
    from {transform: translateY(-100%);}
    to {transform: translateY(0);}
}
.schedule-btn{
    color:var(--dark);
    padding:1rem;
    border-radius:50px;
    font-family: 'Raleway', sans-serif;
    font-size:0.6rem;
    font-weight: bold;
    letter-spacing: 0.15rem;
    border:none;
    width:250px;
    background-color: white;
    animation:fadebutton 1s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes fadebutton {
    from {transform: translateX(-500%);}
    to {transform: translateX(0);}
}
/*ABOUT SECTION*/
#about{
    display:grid;
    justify-content: center;
    text-align:center;
    padding:0 1rem;
    animation: fadebackground 2s;
    animation-delay: 1.3s;
    animation-fill-mode: both;
    margin-bottom:3rem;
}
@keyframes fadebackground {
    from {opacity: 0;}
    to {opacity:1}
}
.page-title::after{
    content:'';
    position:absolute;
    height:1.5px;
    width:20%;
    background-color: var(--dark);
    margin-top:2rem;
    left:50%;
    margin-right:-50%;
    transform:translateX(-50%);
    z-index:-1;
}
.page-title{
    font-family: 'Bebas Neue', cursive;
    margin-bottom:0;
    font-size:1.5rem;
}
#about p {
    font-family: 'Raleway', sans-serif;
    font-size:1rem;
}

/*SERVICES SECTION*/
#services{
    display:grid;
    justify-content: center;
    gap:5rem;
    background-color: var(--gray);
    padding:2rem;
}
.services-container{
    display:grid;
    justify-content: center;
    align-items: center;
    height:100%;
    gap:1rem;
    text-align: center;
}
#services img{
width:125px;
}
#services figcaption{
    font-size:1rem;
    font-family: 'Raleway', sans-serif;
}
.fade-in {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(.5, 0, .5, 1);
}
.fade-in.appear {
    opacity:1;
}
#our-barbers{
    display:grid;
    justify-content: center;
    gap:1rem;
    padding:3rem;
}
.barber-container{
    display:grid;
    justify-content: center;
    align-items: center;
    height:100%;
    gap:1rem;
    text-align: center;
}
#our-barbers img{
    width:200px;
}
#our-barbers figcaption{
    font-size:1.25rem;
    font-family: 'Bebas Neue', cursive;
    margin-bottom: 1.5rem;
}

footer{
    background-color: #1b1b1b;
    margin-top:0;
    display:block;
    position: absolute;
    width:100%;
    padding:0 2rem;
    z-index:-1;
}
.footer-title{
    font-family: 'Bebas Neue', cursive;
    margin-bottom:0;
    font-size:1.5rem;
    color:#eeedec;
}
.footer-title::after{
    content:'';
    position:absolute;
    height:1.5px;
    width:20%;
    background-color: #eeedec;
    margin-top:2rem;
    left:2rem;
    z-index:-1;
}
footer p{
    font-size:1rem;
    font-family: 'Raleway', sans-serif;
    color:#eeedec;
}
#business-hours{
    margin-bottom:3rem;
}
#copyright{
    color: #eeedec;
    font-size:0.7rem;
    font-family: 'Raleway', sans-serif;
    text-align:center;
    padding:2rem;
}