@import './_var.css';
@import './_reset.css';
@import './_utils.css';

/* 
------------------------------------

          HEADER SECTION

------------------------------------

*/
header{
  background-image: url('../img/main.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100dvh;
  padding: 5px 0;
}
.navbar-brand{
  font-size: var(--h3-font);
  font-weight: var(--font-bold);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 1.5px;

}
nav{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background-color: inherit;
}
.nav-item{
  display: inline-block;
  margin-right: 15px;
}
.nav-link{
  color: var(--black);
  font-size:15px;
  letter-spacing: 1px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link:hover{
  color: var(--primary-dark);
}
.active{
  color: var(--primary-dark) !important;
}
.navbar-toggler{
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.navbar-toggler-icon{
  width: 36px;
  color: var(--primary-dark) !important;
}

/* 
------------------------------------

        HERO SECTION -> BANNER SECTION

------------------------------------

*/
.home-banner{
  padding-top: 70px;
}
.hero-content{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* 
------------------------------------

        SERVICES SECTION 

------------------------------------

*/

.service-section{
  padding: 120px 0;
}
.card-title{
  font-weight: var(--font-bold);
}
.card-text{
  letter-spacing: 1px;
  text-align: justify;
}

.card:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  cursor: pointer;
  transform: translateY(-5px);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
/* 
------------------------------------

        ABOUT SECTION 

------------------------------------

*/
.about-section{
  padding-top: 20px;
  padding-bottom: 70px;
}
.about-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 
------------------------------------

        CONTACT SECTION 

------------------------------------

*/
.contact-section{
  padding: 70px 0;
  min-height: 70vh;
  background-image: url(../img/talk-to-us.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}