/*
 * author: Johann Olivares
 * file: styles.css
 * date: 05/31/2021
 * Desciption: The style selectors for the East Side
 *             Cutters BarberShop landing page.
 *
 * Table of Contents:
 * 1.0 General Styles
 * 2.0 Navigation Bar Styles
 * 3.0 Slider Styles
 * 4.0 About Us Styles
 * 5.0 Image Gallery Styles
 * 6.0 Servics/Schedule Styles
 * 7.0 Location Styles
 * 8.0 Footer Styles
 * 9.0 Form Styles
 * 10.0 Media Queries
 */

/* 1.0 General Styles */
* {
    box-sizing: border-box;   
}
h1, h2, h3, h4, p ,a, span, button, li, table, form {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    padding: 0;
    margin: 0;
}
html, body {
    scroll-behavior: smooth; 
    height: 100%;
    padding: 0;
    margin: 0;
}
h1 {
    font-size: 50px;
    margin-bottom: 15px;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 25px;
}
p {
    font-size: 18px;
}
a:visited {
    color: inherit;
}
.cta {
    background-color: #ce0000;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 15px 25px;
    text-transform: uppercase;
    width: fit-content;
    justify-self: end;
}
.cta:visited {
    color: #fff;
}
/* End of General Styles */

/* 2.0 Navigation Bar Styles*/
#nav-container {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    padding: 10px 20px;
    align-items: center;
}
#nav-container ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    overflow: hidden;
    font-size: 13px;
    text-transform: uppercase;
    background-color: #fff;
    color: #000;
    margin: 0;
    gap: 50px;
}
#nav-container .logo{
    margin-bottom: -50px;
}
.logo {
    height: 110px;
    width: auto;
    z-index: 1;
    -webkit-filter: drop-shadow(2px 2px 0 #fff)
                  drop-shadow(-2px -2px 0 #fff);
    filter: drop-shadow(2px 2px 0 #fff) 
            drop-shadow(-2px -2px 0 #fff);
}
.nav-bar a:link, .nav-bar a:visited {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 2px;
}
.nav-bar .icon {
    display: none;
}
/* End of Navigation Styles */

/* 3.0 Slider Styles */
#slider-container {
    background-image: url("../img/appointmentBack.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    height: 63%;
    width: auto;
    padding: 25px 75px;
    margin: auto;
}
#logo-container {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    text-align: center;
}
#logo-container p {
   margin: 0 auto;
   max-width: 800px;
   margin-bottom: 45px;
}
#logo-container button {
    border: none;
    width: fit-content;
}
#logo-container button:hover {
    background-color: #EA0000;
}
#slider-container img {
    /* border-radius: 500px; */
    width: 500px;
    height: auto;
    object-fit: cover;
    margin: auto;
}
#slider-container span {
    text-transform: uppercase;
    font-size: 18px;
    padding: 15px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
}
#slider-container span i {
    margin-left: 5px;
}
.hc_wrap {
    display: flex;
    position: relative;
}
.hc_item {
    width: fit-content;
    margin: auto;
    position: relative;
}
.hc_item span {
    background: #fff;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
}
/* End of Slider Styles*/

/* 4.0 About Us */
#about{
    text-align: center;
    max-width: 1300px;
    margin: auto;
    padding: 75px 0px;
}
#about h2 {
    margin-bottom: 25px;
}
#about article p {
    margin: auto;
    max-width: 600px;
}
.services {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 25px;
    max-width: 1200px;
    margin: 50px auto;
    margin-bottom: 75px;
}
.service {
    background: #eee;
    padding: 35px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.service i {
    font-size: 35px;
    background: #000;
    border-radius: 500px;
    color: #fff;
    padding: 20px;
    margin-bottom: 35px;
}
#about .cta {
    background: transparent;
    border: 2px solid #000;
    color: #000;
}
/* End of About Us Styles */

/* 5.0 Image Gallery Styles */
#gallery_wrap {
    text-align: center;
    padding: 75px 25px;
}
#gallery_wrap h2 {
    margin: 35px;
}
#gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1200px;
    margin: auto;
}
#gallery img {
    display: block;
    aspect-ratio: 1/1;
    max-width: 275px;
}
/* End of  Image Gallery Styles */


/* End of Service/Schedule Styles*/


/* 7.0 Location Styles*/
#location {
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: 1.5em;
    padding: 25px;
    max-width: 1200px;
    margin: auto;
}
.location-details {
    background: #eee;
    padding: 25px;
    margin-right: 15px;
    font-size: 15px;
}
.location-details ul {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style-type: none;
}
.location-details .details {
    display: grid;
    grid-template-columns: 40% 60%;
}
.location-details table {
    padding: 0px;
    margin: 0px;
    margin-bottom: 25px;
}
.location-details table tr {
    padding: 0px;
    display: block;
    padding-bottom: 5px;
}
#map {
    height: 325px;
    width: 100%;
    margin: auto;
}
#map iframe {
    height: 100%;
}
/* End of Location Styles*/

/* 8.0 Footer */
#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 25px;
}
#footer .logo {
    margin-bottom: 25px;
}
#footer .nav-bar {
    list-style-type: none;
    display: flex;
    gap: 50px;
    color: #000;
}
#footer .nav-bar li {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.social_links {
    display: flex;
    font-size: 20px;
    flex-direction: row;
    gap: 20px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 35px;
}
#web_disclaimar {
    background: #000;
    color: #fff;
    width: 100%;
    letter-spacing: 2px;
    font-size: 13px;
    text-align: center;
    padding: 25px;
}
/* End of Footer */

/* 9.0 Form Styles*/
#form-container {
    background-image: url('../img/appointmentBack.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 1.2em;
    border: 1px solid black;
    height: 100%;
    margin: auto;
    padding: 1em;
}
#form-container h1 {
    text-align: center;
}
.form{
    background-color: white;
    margin: 1em auto; 
    padding: 2em;
    width: 25%;
    height: auto;
}
.form input, .form label, .form select {
    display: block;
    text-align: left;
    padding: .5em;
    width: 100%;
}
.form select {
    margin: 1em auto;
    width: 50%;
}
.form input[type=submit] {
    font-size: .9em;
    text-align: center;
    border: none;
    background-color: darkred;
    color: white;
}
.form input[type=submit]:hover {
    background-color: #EA0000;
}
/* End of Form Styles*/



/* 10.0 Media Queries */
@media screen and (max-width: 600px), (max-width: 1000px) {

    /*Responsive Nav*/
    .nav-bar li a {display: none;}
    .nav-bar a.icon {
      float: left;
      display: block;
    }
    /*End of Responsive Nav*/

    /*Responsive Content*/
    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0em;
        grid-row-gap: 1%;
        margin: 5%;
    }
    .service-list, table {
        font-size: .9em;
    }
    /*End of Responsive Content*/
    
    /*Map Styles*/
    #location {
        display: block;
        border: 1px solid black;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .location-details {
        font-size: .9em;
        padding: 1%;
        margin: 1%;
    }
    .location-details p, .location-details h1 {
        font-size: 1.5em;
    }
    #map {
        height: 100%;
        width: 90%;
        padding: 1%;
        margin: auto;
    }
    /*End of Map Styles*/
    #logo-container img {
        margin: 5em auto auto auto;
        padding: 0;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
        width: auto;
        height: 40%;
    }
    #logo-container button {
        background-color: darkred;
        font-size: 1.5em;
        border: none;
        color: white;
        margin: 15em auto auto auto;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
    }
  }
/*Small narrow screens*/
@media screen  and (max-width: 450px) and (max-height:850px) {
    #logo-container img {
        margin: 5em auto auto auto;
        padding: 0;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
        width: auto;
        height: 30%;
    }
    #logo-container button {
        background-color: darkred;
        font-size: 1.5em;
        border: none;
        color: white;
        margin: 15em auto auto auto;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
    }
}
/*Ipad screens*/
@media screen  and (min-width: 760px) and (min-height: 1024px) {
    #slider-container {
        position: relative;
        left: 0;
        top: 0;
        height: 55%;
        width: 100%;
        padding: 0;
        margin: 0 0 1em 0;
    }
    #logo-container img {
        margin: 5em auto auto auto;
        padding: 0;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
        width: auto;
        height: 30%;
    }
    #logo-container button {
        background-color: darkred;
        font-size: 1.5em;
        border: none;
        color: white;
        margin: 20em auto auto auto;
        padding: .5em 1.5em .5em 1.5em;
        position: absolute;
        top: 0; left: 0; right: 0;
    }
}

/*login*/
@media screen and (max-width: 700px) {
    .form{
        background-color: white;
        margin: 1em auto; 
        padding: 2em;
        width: 65%;
        height: auto;
    }

}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px), (max-width: 800px) {
    .nav-bar.responsive {position: relative;}
    .nav-bar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .nav-bar.responsive a, .nav-bar.responsive li  {
      float: none;
      display: block;
      text-align: left;
    }
  }
  
@media (max-width: 900px) {
    .logo  {
        height: 80px;
        margin-bottom: -25px !important;
    }
    h1 {
        font-size: 42px;
    }
    #nav-container {
        grid-template-columns: 50% 50%;
    }
    #nav-container ul {
        display: none;
    }
    #slider-container {
        display: flex;
        flex-direction: column;
        padding: 75px 25px 50px 25px;
        height: auto;
        gap: 25px;
    }
    #slider-container span {
        display: block;
        text-align: center;
    }
    #logo-container {
        align-items: unset;
        text-align: left;
    }
    #logo-container button {
        position: relative;
        width: 100%;
        margin: 0;
    }
    #logo-container > div {
        width: 100%;
    }
    .cta {
        display: block;
        width: 100%;
        text-align: center;
    }
    .services {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 25px;
    }
    #slider-container img {
        width: 100%;
    }
    #gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    #gallery img {
        width: 100%;
    }
}