/* 
====================
Fonts
====================
*/
@import url("https://fonts.googleapis.com/css?family=Catamaran:400,700|Grand+Hotel");

/* 
====================
Variables
====================
*/
:root{
     --clr-primary: #678e3e;
     --clr-primary-light: #beed8c;
     --clr-grey-1: #102a42;
     --clr-grey-5: #617d98;
     --clr-grey-10: #cfdee9;
     --clr-white: #fff;
     --ff-primary: "Catamaran", "sans-serif";
     --ff-secondary: "Grand Hotel", "cursive";
     --transition: all 0.3s linear;
     --spacing: 0.25rem;
     --radius: 0.5rem;
}

/* 
====================
Global Styles
====================
*/

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body{
     font-family: var(--ff-primary);
     background: var(--clr-white);
     color: var(--clr-grey-1);
     line-height: 1.5;
     font-size: 0.875rem;
}
h1,h2,h3,h4{
     letter-spacing: var(--spacing);
     text-transform: capitalize;
     line-height: 1.25;
     margin-bottom: 0.75rem;
}
h1{
     font-size: 3rem;
}
h2{
     font-size: 2rem;
}
h3{
     font-size: 1.5rem;
}
h4{
     font-size: 0.875rem;
}
p {
     margin-bottom: 1.25rem;
}
a{
     text-decoration: none;
}
img {
     width: 100%;
     display: block;
}

@media screen and (min-width:576px) {
     h1{
          font-size: 4rem;
     }
     h2{
          font-size: 2.5rem;
     }
     h3{
          font-size: 2rem;
     }
     h4{
          font-size: 1rem;
     }
     body{
          font-size: 1rem;
     }
     h1,h2,h3,h4{
          line-height: 1;
     }
}
.btn {
     display: inline-block;
     background: var(--clr-primary);
     color: var(--clr-white);
     padding: 0.75rem 1rem;
     letter-spacing: var(--spacing);
     text-transform: uppercase;
     transition: var(--transition);
     font-size: 1rem;
     font-weight: 700;
     border: none;
     box-shadow: 0px 1px 3px rgba(0,0,0,0.6);
     cursor: pointer;
}
.btn:hover{
     color: var(--clr-primary);
     background-color: var(--clr-primary-light);
}
.clearfix::after, .clearfix::before{
     content: '';
     clear: both;
     display: table;
}
.section-title h3{
     font-family: var(--ff-secondary);
     color: var(--clr-primary);
}
.section-title{
     margin-bottom: 2rem;
}
.section-center{
     padding: 4rem 0;
     width: 85vw;
     margin: 0 auto;
     max-width: 1170px;
}

@media screen and (min-width:992px) {
     .section-center{
          width: 95vw;
          padding: 4rem 1rem;
     }
}
/* 
====================
Navbar
====================
*/
.nav-btn{
     font-size: 2.5rem;
     color: var(--clr-primary);
     position: fixed;
     top: 5%;
     left: 5%;
     z-index: 1;
     cursor: pointer;
     animation: bounce 2s ease-in-out infinite;
}
.navbar{
     position: fixed;
     z-index: 2;
     background: var(--clr-grey-10);
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     transition: var(--transition);
     transform: translateX(-100%);
}
.showNav{
     transform: translateX(0);
}
.navbar-header{
     text-align: right;
     padding: 1rem;
}
.navbarClose{
     font-size: 2.5rem;
     color: #f29c9c;
     cursor: pointer;
}
.navbarClose:hover{
     color: #bb2525;
}
.nav-links{
     list-style-type: none;
}
.nav-link a{
     display: block;
     color: var(--clr-grey-5);
     padding: 0.25rem 1rem;
     text-transform: uppercase;
     letter-spacing: var(--spacing);
     transition: var(--transition);
     font-size: 1.5rem;
}
.nav-link a:hover{
     background: var(--clr-primary-light);
     color: var(--clr-primary);
     border-left: 0.25rem solid var(--clr-primary);
     padding-left: 1.5rem;   
}
@media screen and (min-width:768px) {
     .navbar{
          width: 30%;
          max-width: 20rem;
     }
}
/* 
====================
Header
====================
*/
.header{
     min-height: 100vh;
     background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../images/main-bcg.jpeg") center/cover no-repeat fixed;
     position: relative;
     overflow-x: hidden;
}
.banner{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     text-align: center;
}
.banner h2{
     font-family: var(--ff-secondary);
     color: var(--clr-primary);
     animation: slideFromRight 4s ease-in-out 1;
}
.banner h1{
     text-transform: uppercase;
     color: var(--clr-white);
     margin-top: 1.25rem;
     margin-bottom: 2rem;
     animation: slideFromLeft 4s ease-in-out 1;
}
.banner-btn{
     font-size: 1.25rem;
     outline: 0.125rem solid var(--clr-primary);
     outline-offset: 0.25rem;
     padding: 1rem 1.25rem;
     animation: show 4s linear 1;
}
.content-divider{
     height: 0.5rem;
     background: linear-gradient(to left, var(--clr-primary), #fcf807, var(--clr-primary));
}

/* 
====================
Skills
====================
*/

.skills{
     background: var(--clr-grey-10);
     /* display: grid; */
}
.skill{
     text-align: center;
     padding: 2.5rem 0;
}
.skill-icon{
     font-size: 2.5rem;
     margin-bottom: 1.25rem;
     display: inline-block;
     transition: var(--transition);
     color: var(--clr-primary);
}
.skill-text{
     color: var(--clr-grey-5);
     max-width: 17rem;
     margin: 0 auto;
}
.skill:hover{
     background: var(--clr-white);
     box-shadow: 0 2px var(--clr-primary);
}
.skill:hover .skill-icon{
     transform: translateY(-0.5rem);
}
@media screen and (min-width:576px) {
     .skill{
          float:left;
          width: 50%;
     }
     /* .skills{
          grid-template-columns: repeat(2, 1fr);
     } */
}
@media screen and (min-width:1200px) {
     .skill{
          width: 25%;
     }
     /* .skills{
          grid-template-columns: repeat(4,1fr);
     } */
}

/* 
====================
About
====================
*/

.about-img, .about-info{
     padding: 2rem 0;
     /* border: 1px solid black; */
}
.about-picture-container{
     background: var(--clr-primary);
     border: 0.5rem solid var(--clr-primary);
     max-width: 30rem;
     overflow: hidden;
}
.about-picture{
     transition: var(--transition);
}
.about-picture-container:hover .about-picture{
     opacity: 0.5;
     transform: scale(1.2);
}
.about-text{
     max-width: 26rem;
     color: var(--clr-grey-5);
}
@media screen and (min-width:992px) {
     .about-img, .about-info{
          float: left;
          width: 50%;
     }
     .about-info{
          padding-left: 2rem;
     }
}
.products{
     background: var(--clr-grey-10);
}
.products article{
     padding: 2rem 0;
}
.product-text{
     color: var(--clr-grey-5);
     max-width: 26rem;
}
.product {
     margin-bottom: 2rem;
}
.product-img{
     height: 17rem;
     border-radius: var(--radius);
     margin-bottom: 2rem;
     object-fit: cover;
}
.product-price{
     color: var(--clr-primary);
}
@media screen and (min-width:768px) {
     .product {
          float: left;
          width: 50%;
          padding-right: 2rem;
     }
}
@media screen and (min-width:992px) {
     .product {
          width: 33.33%;
     }
}
@media screen and (min-width:1200px) {
     .products-info{
          float: left;
          width: 30%;
     }
     .products-inventory{
          float: right;
          width: 70%;
     }
     .product{
          margin-bottom: 0;
          padding-left: 1rem;
     }
}
/* 
====================
Services
====================
*/
.services-title{
     text-align: center;
     margin-top: 4rem;
     margin-bottom: -4rem;
}
.service-card{
     background: var(--clr-grey-10);
     margin: 2rem 0;
     border-radius: var(--radius);
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     transition: var(--transition);
}
.service-card:hover{
     transform: scale(1.02);
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.service-img{
     height: 17rem;
     object-fit: cover;
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
}
.service-info{
     text-align: center;
     padding: 3rem 1rem 2.5rem 1rem;
}
.service-info p{
     color: var(--clr-grey-5);
     max-width: 20rem;
     margin: 0 auto;
}
.service-btn{
     font-size: 0.75rem;
     padding: 0.375rem 0.5rem;
     text-transform: capitalize;
     border-radius: var(--radius);
     font-weight: 400;
     margin-top: 1.25rem;
}

@media screen and (min-width:768px) {
     .service-card{
          float: left;
          width: 45%;
          margin-right: 5%;
     }
}
@media screen and (min-width:992px) {
     .service-card{
          width: 30%;
          margin-right: 3.33%;
     }
}
.service-img-container{
     position: relative;
}
.service-icon{
     display: block;
     position: absolute;
     left: 50%;
     bottom: 0;
     font-size: 2rem;
     padding: 0.25rem 0.6rem;
     transform: translate(-50%,50%);
     border-radius: 50%;
     border: 0.375rem solid var(--clr-grey-10);
     background-color: var(--clr-primary-light);
     color: var(--clr-primary);
}
/* 
====================
Contact
====================
*/
.contact{
     background: var(--clr-grey-10);
}
.contact-info, .contact-form{
     margin: 1rem 0;
}
.contact-item{
     margin-bottom: 1.75rem;
}
.contact-title{
     font-weight: 400;
     color: var(--clr-primary);
}
.contact-text{
     text-transform: uppercase;
}

.contact-form{
     text-align: center;
     background: var(--clr-white);
     border-radius: var(--radius);
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     transition: var(--transition);
     max-width: 35rem;
}
.contact-form:hover{
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.contact-form h3{
     padding-top: 1.25rem;
     color: var(--clr-grey-5);
}

.form-group{
     padding: 1rem 1.5rem;
}
.form-control{
     display: block;
     width: 100%;
     margin-bottom: 1.25rem;
     padding: 0.75rem 1rem;
     border: none;
     background: var(--clr-grey-10);
     border-radius: var(--radius);
     letter-spacing: var(--spacing);
     text-transform: uppercase;
}
.form-control::placeholder{
     color: var(--clr-grey-1);
     letter-spacing: var(--spacing);
     font-family: var(--ff-primary);
     text-transform: uppercase;
}
.submit-btn{
     display: block;
     width: 100%;
     padding: 1rem;
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
}
@media screen and (min-width:992px) {
     .contact-info, .contact-form{
          float:left;
          width: 50%;
     }
}
/* 
====================
Footer
====================
*/
.footer{
     background: #222;
     text-align: center;
}
.social-icon{
     font-size: 1.25rem;
     text-align: center;
     color: var(--clr-white);
     transition: var(--transition);
     margin-right: 1rem;
}
.social-icon:hover{
     color: var(--clr-primary);
}
.footer-text{
     color: var(--clr-white);
     margin-top: 1.25rem;
     text-transform: uppercase;
     font-weight: 400;
}
.company{
     color: var(--clr-primary);
}

/* 
====================
Animations
====================
*/
@keyframes bounce {
     0%{
          transform: scale(1);
     }
     50%{
          transform: scale(1.5);
     }
     100%{
          transform: scale(1);
     }
}
@keyframes slideFromLeft {
     0%{
          transform: translateX(-1000px);
          opacity: 0;
     }
     25%{
          transform: translateX(100px);
          opacity: 0.25;
     }
     50%{
          transform: translateX(-50px);
          opacity: 0.50;
     }
     100%{
          transform: translateX(0px);
          opacity: 1;
     }
}
@keyframes slideFromRight {
     0%{
          transform: translateX(1000px);
          opacity: 0;
     }
     25%{
          transform: translateX(-100px);
          opacity: 0.25;
     }
     50%{
          transform: translateX(50px);
          opacity: 0.50;
     }
     100%{
          transform: translateX(0px);
          opacity: 1;
     }
}
@keyframes show {
     0%{
          transform: scale(1.25);
          opacity: 0;
     }
     50%{
          transform: scale(1.5);
          opacity: 0.5;
     }
     100%{
          transform: scale(1);
          opacity: 1;
     }
}