/* Start Rulez */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@1,800&display=swap'); /* Subfont */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); /* Main Font */

/* Root */
:root{
    --primary: #0d6efd;
    --light: #e0e1dd;
    --dark: #0d1b2a;
    --body: #888;
    --box-shadow: 3px 7px 16px 1px rgba(0,0,0,.8);
    --yellow: #fca311;
}

body {
  text-transform: capitalize;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  color: var(--body);
}

h1,h2,h3,h4,h5,h6{
    color:var(--dark);
    font-weight: 700;
    font-family: 'Merriweather Sans', sans-serif; 
}

a{
    color:var(--dark);
    text-decoration: none;
}

.logo {
    font-family: 'Merriweather Sans', sans-serif; 
    font-weight: bold;
    font-size: 1.6em;
    letter-spacing: 0.1em;
}
/* End Rulez */

/* Start Navbar */
.navbar{
    box-shadow: 1px 0px 12px 1px var(--dark)
}
.navbar-toggler:focus{box-shadow: none}
.navbar .nav-link, .navbar .btn{
    font-size: 17px;
    font-weight: 700;
}
/* End Navbar */

/* Start Header */
.main-head{
    background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.9)),url(../assets/img-head.jpg);
    background-size: cover;
    background-position: center;
}
.main-head .display-3{
    color: var(--light);
    font-weight: 700;
}
.main-head .lead{
    color: var(--body);
}
.main-head .btn{
    padding: 10px 18px
}
/* End Header */

/* Start Services */
.services{
    padding: 90px 0;
}
.services .card-effect{
    padding: 40px;
    position: relative;
    cursor: pointer;
}
.services .card-effect .layout{
    height: 0;
    transition: all 0.3s linear;
}
.services .card-effect:hover .layout{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: var(--primary);
}
.services .card-effect:hover .bi{ 
    color: var(--primary);
    background-color: var(--light);
}
.services .card-effect:hover h3,
.services .card-effect:hover p{color:var(--light)}
.services .card-effect .bi{
    background-color: var(--primary);
    padding: 10px;
    color: var(--light);
    border-radius: 50%;
}
/* End Services */

/* Start Features */
.features .col-img{
    background-image: url(../assets/hint-img.jpg);
    background-size: cover;
    background-position: center;
    min-height: 700px;
}
.features .feature .icon-box .bi{
    background-color: var(--primary);
    padding: 10px;
    color: var(--light);
    border-radius: 50%;
    font-size: 1.3em;
}
/* End Features */

/* Start Projects */
.project{
    position: relative;
    overflow: hidden;
}
.project .layout{
    opacity: 0;
    transition: all 0.4s linear;
    cursor: pointer;
}
.project:hover .layout{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    opacity: 1;
    transition: all 0.4s linear;
}   
.project img{transition: all 0.4s linear}
.project:hover img{
    transform: scale(1.1);
    transition: all 0.4s linear;
}
.project .layout-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* End Projects */

/* Start Pricing */
.pricing .card{
    position: relative;
    cursor: pointer;
    z-index: 1;
    border-radius: 12px;
}
.pricing .card:hover .layout{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: var(--dark);
    box-shadow: var(--box-shadow);
    transition: 0.3s linear;
    border-radius: 12px;
}
.pricing .card:hover .card-header,
.pricing .card:hover .card-title,
.pricing .card:hover h3,
.pricing .card:hover h5,
.pricing .card:hover li{ 
    color: var(--light);
    transition: all 0.3s linear;
}
.pricing .card:hover .btn{
    background-color: var(--dark);
    color:var(--light);
    border-color: var(--light);
    transition: all 0.3s linear;
}
.pricing .card .btn:hover{
    background-color: var(--yellow);
    color: var(--dark);
}
.pricing .card:hover .bi{
    color: var(--yellow)
}
.pricing .card .bi{
    font-size: 1.2em;
    color: var(--primary);
}
/* End Pricing */

/* Start Team */
.team-member{
    border-radius: 12px;
    position: relative;
    z-index: 0;
}
.team-member:hover .layout{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: var(--dark);
    box-shadow: var(--box-shadow);
    transition: 0.3s linear;
    border-radius: 12px;
}
.team-member:hover h3,
.team-member:hover h5{
    color: var(--light);
    transition: 0.3s linear;
}
.team-member img{
    border-radius: 50%;
    width: 150px;
    height: 150px;
}
.team-member .social-icons .bi{
    background-color: var(--primary);
    color: var(--light);
    padding: 10px;
    font-size: 0.8em;
    border-radius: 50%;
}
.team-member .social-icons .bi:hover{
    background-color: var(--yellow);
    color: var(--dark);
}
/* End Team */

/* Start Blog */
.blog-new:hover{
    transform: translateY(1%);
    transition: 0.3s linear;
}
/* End Blog */

/* Start Contact */
.contact .form-control{
    background-color: rgba(0,0,0,.2);
}
.contact .btn{
    font-size: 1.1em;
}
/* End Contact */

/* Start Footer */
.footer-top{
    background-color: var(--dark);
}
.footer-top .logo{
    font-size: 2em;
}
.footer-top a:hover{
    color: var(--light);
}
.footer-top .logo,
.footer-top h2{
    color: var(--light);
}
.footer-top li,
.footer-top a{
    color: var(--body);
}
.footer-bottom .social-icons .bi{
    background-color: var(--primary);
    color: var(--light);
    padding: 10px;
    font-size: 0.8em;
    border-radius: 50%;
}
.footer-bottom{
    background-color: #1d3557;
}
.footer-bottom .social-icons .bi:hover{
    background-color: var(--yellow);
    color: var(--dark);
}
/* End Footer */