:root{
   --mount-meadow: #1bbc9c;
   --white-smoke: #f0f0f0;
   --night-rider: #343434;
   --black: #191b17;
   --transition: all 0.5s ease-in-out;
}
body {
   font-family: 'Hind Siliguri', sans-serif;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
html{
   color: var(--black);
   font-size: 1rem;
   font-weight: 300;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
   scroll-behavior: smooth;
}

/* setup & reusable stylings */
img{
   width: 100%;
}
a{
   text-decoration: none;
   color: var(--black);
}
li{
   list-style-type: none;
}
button{
   cursor: pointer;
   outline: 0;
   background: transparent;
}
.container{
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 1rem;
}
h1, h2, h3, h4, h5, h6{
   margin: 0.6rem 0;
   line-height: 1.25;
   font-weight: 400;
   text-transform: capitalize;
}
.text{
   margin: 0.6rem 0;
   opacity: 0.8;
}
.center{
   display: flex;
   justify-content: center;
   align-items: center;
}
section{
   padding: 6.5rem 0;
}
.title{
   padding: 0.6rem 0;
   text-align: center;
}
.title h2{
   font-size: 2.2rem;
   color: var(--night-rider);
}
.title .text{
   font-weight: 500;
   font-size: 1.1rem;
}

/* header */
.header{
   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../images/header-bg.jpg);
   min-height: 100vh;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
}
.navbar{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: #fff;
   z-index: 999;
}
.brand-and-toggler{
   font-size: 1.65rem;
   padding: 0.8rem 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.navbar-brand{
   font-weight: 500;
   color: var(--night-rider);
}
.navbar-brand span{
   color: var(--mount-meadow);
}
.navbar-toggler{
   border: none;
   color: var(--mount-meadow);
}
.navbar-nav{
   margin: 0.2rem 0 0.6rem 0;
}
.nav-item{
   padding: 0.6rem 0;
}
.nav-link{
   text-transform: uppercase;
   font-size: 0.95rem;
   letter-spacing: 1.5px;
   font-weight: 400;
   opacity: 0.65;
   transition: var(--transition);
}
.nav-link:hover{
   color: var(--mount-meadow)!important;
}
.navbar-collapse{
   display: none;
}
.hero-div{
   flex: 1;
   flex-direction: column;
   text-align: center;
}
.hero-div h1{
   font-size: 2.55rem;
   padding-bottom: 0.4rem;
}
.hero-div p{
   color: var(--white-smoke);
   font-size: 1.05rem;
   letter-spacing: 3px;
}
.hero-btns{
   margin-top: 2.8rem;
}
.hero-btns button{
   border: 3.5px solid #fff;
   border-radius: 2rem;
   padding: 0.8rem 2rem;
   text-transform: uppercase;
}
.btn-trans{
   color: #fff;
   transition: var(--transition);
   display: none;
}
.btn-trans:hover{
   background: var(--mount-meadow);
   border-color: var(--mount-meadow);
}
.btn-white{
   background: #fff;
   color: var(--night-rider);
   transition: var(--transition);
}
.btn-white:hover{
   background: transparent;
   color: #fff;
}

/* detail */
.detail{
   background: var(--white-smoke);
}
.detail-item{
   background: #fff;
   text-align: center;
   box-shadow: 0 1px 2px 0 rgba(90, 91, 95, 0.1);
   -webkit-box-shadow: 0 1px 2px 0 rgba(90, 91, 95, 0.1);
   -moz-box-shadow: 0 1px 2px 0 rgba(90, 91, 95, 0.1);
   margin: 2rem 0;
   padding: 3.5rem 1.5rem;
   border-radius: 4px;
   transition: var(--transition);
}
.detail-item:hover{
   -webkit-box-shadow: 0 21px 19px -2px rgba(217, 217, 217, 1);
   -moz-box-shadow: 0 21px 19px -2px rgba(217, 217, 217, 1);
   box-shadow: 0 21px 19px -2px rgba(217, 217, 217, 1);
   transform: translateY(-5px);
}
.detail-item span{
   font-size: 2.5rem;
}
.detail-item h2{
   font-size: 1.4rem;
   opacity: 0.8;
   font-weight: 300;
}
.line{
   width: 45px;
   margin: 1.2rem auto;
   background: var(--mount-meadow);
   height: 2.5px;
}
/* feature */
.feature .title{
   text-align: left;
}
.feature-left img{
   width: 80%;
   margin: 0 auto;
}
.feature-right{
   margin-top: 4rem;
}
.feature-item{
   margin: 1.4rem 0;
   display: flex;
}
.feature-item div h3{
   margin-top: 0;
   font-size: 1.4rem;
   font-weight: 300;
   opacity: 0.85;
}
.feature-item span{
   font-size: 1.1rem;
   color: #fff;
   background: var(--mount-meadow);
   align-self: flex-start;
   padding: 0.4rem 0.7rem;
   border-radius: 2px;
   margin-right: 1.4rem;
}

/* team */
.team .row{
   margin-top: 2rem;
}
.team-item{
   margin: 2rem 0;
}
.team-img{
   position: relative;
}
.team-icons{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   background: var(--white-smoke);
   opacity: 0;
   transition: var(--transition);
}
.team-icons a{
   color: var(--night-rider);
   width: 50px;
   height: 50px;
   transition: var(--transition);
}
.team-icons a:hover{
   background: var(--mount-meadow);
   color: #fff;
}
.team-img:hover .team-icons{
   opacity: 1;
}
.team-info{
   text-align: center;
   padding: 1.5rem;
   line-height: 1;
}
.team-info h3{
   font-size: 1.4rem;
   color: var(--night-rider);
}
.team-info span{
   font-size: 0.85rem;
   letter-spacing: 1px;
   font-weight: 500;
   opacity: 0.7;
}

/* FAQ */
.faq{
   background: #f9f9f9;
}
.faq .row{
   margin-top: 2rem;
}
.faq-item{
   margin: 0.6rem 0;
}
.faq-head{
   background: var(--white-smoke);
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   padding: 0.2rem 1.8rem;
}
.faq-head h3{
   font-weight: 300;
   opacity: 0.8;
}
.faq-content{
   background: #fff;
   overflow: hidden;
   height: 0;
   padding: 0 1.8rem;
   transition: var(--transition);
}
.show-faq-content{
   height: 168px;
   padding: 0.6rem 1.8rem;
}

/* pricing */
.pricing .row{
   margin-top: 2rem;
}
.pricing-item{
   border: 2.5px solid #f9f9f9;
   text-align: center;
   padding: 3.4rem 0;
   margin: 2rem 0;
}
.pricing-item h2{
   color: var(--night-rider);
   opacity: 0.7;
   font-size: 1.5rem;
}
.pricing-item .price{
   padding: 1.5rem 0 1rem 0;
   line-height: 1.1;
}
.pricing-item .price span{
   display: block;
}
.pricing-item .price span:first-child{
   font-size: 2.6rem;
   letter-spacing: 2px;
   color: var(--mount-meadow);
}
.pricing-item .price span:last-child{
   font-size: 0.85rem;
   letter-spacing: 1;
   font-weight: 500;
}
.pricing-item ul li{
   padding: 0.8rem 0;
   opacity: 0.7;
}

/* contact */
.contact .row{
   margin-top: 2rem;
}
.contact .row > div{
   margin: 2rem 0;
   padding: 1rem 0;
}
.contact .row > div h2{
   font-size: 1.4rem;
   font-weight: 300;
   opacity: 0.9;
}
.contact-left form input,
.contact-left form textarea{
   width: 100%;
   font-size: 1.1rem;
   margin: 0.2rem 0;
   padding: 0.8rem 0.6rem;
   border: none;
   border-bottom: 1.5px solid #f0f0f0;
   outline: 0;
}
.contact-left form input::placeholder,
.contact-left form textarea::placeholder{
   font-size: 1.1rem;
   font-weight: 300;
   opacity: 0.8;
}
.contact-left form input:focus,
.contact-left form textarea:focus{
   border-color: var(--night-rider);
}
.submit-btn{
   margin: 1rem 0;
   border: none;
   font-size: 1.3rem;
   color: #fff;
   background: var(--mount-meadow);
   opacity: 0.9;
   padding: 0.8rem 3.4rem;
   border-radius: 2rem;
   transition: var(--transition);
}
.submit-btn:hover{
   background: var(--black);
}
.contact-right div{
   margin: 2rem 0;
}

/* footer */
.footer{
   text-align: center;
   background: var(--black);
   color: var(--white-smoke);
   padding: 2rem 0;
   height: 50vh;
}
.footer .text{
   opacity: 0.8;
}
.footer-links{
   display: flex;
   justify-content: center;
   margin-top: 1.6rem;
}
.footer-links a{
   color: var(--white-smoke);
   opacity: 0.8;
   width: 50px;
   height: 50px;
   margin: 0 0.2rem;
   border-radius: 50%;
   transition: var(--transition);
}
.footer-links a:hover{
   background: var(--mount-meadow);
}


/* #### Media Queries #### */

@media screen and (min-width: 768px){
   .detail .row{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 2rem;
   }
   .detail-item{
       margin: 0;
   }
   .video h2{
       font-size: 2.6rem;
   }
   .video p{
       font-size: 1.2rem;
       width: 75%;
       margin: 0 auto;
   }
   .team-item{
       margin: 0;
   }
   .faq .row{
       width: 80%;
       margin-left: auto;
       margin-right: auto;
   }
   .pricing .row{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 2rem;
   }
   .pricing-item{
       margin: 0;
   }
   .testimonial-item p{
       width: 75%;
       margin-left: auto;
       margin-right: auto;
   }
   .contact .row{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       column-gap: 2rem;
   }
   .contact-right > div:first-child{
       margin-top: 0;
   }
}

@media screen and (min-width: 992px){
   .navbar{
       background: transparent;
       margin-top: 1.4rem;
   }
   .navbar .container{
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .navbar-brand{
       color: var(--white-smoke);
       font-size: 2rem;
   }
   .navbar-toggler{
       display: none;
   }
   .navbar-collapse{
       display: block!important;
   }
   .navbar-nav{
       display: flex;
       margin: 0;
   }
   .nav-item{
       margin-left: 1.8rem;
   }
   .nav-link{
       color: var(--white-smoke);
   }
   .hero-div h1{
       font-size: 3.8rem;
   }
   .btn-trans{
       display: inline-block;
       margin-right: 0.8rem;
   }

   /* navbar change */
   .cng-navbar{
       -webkit-box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
       -moz-box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
       box-shadow: 0 2px 5px 0 rgba(207, 205, 207, 0.3);
       margin-top: 0;
       background: #fff;
   }
   .cng-navbar .navbar-brand{
       color: var(--night-rider);
   }
   .cng-navbar .nav-link{
       color: var(--night-rider);
   }
   .feature .row{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       align-items: center;
       column-gap: 2rem;
   }
   .feature-right{
       margin-top: 0;
   }
   .video p{
       width: 60%;
   }
}

@media screen and (min-width: 1200px){
   .hero-div h1{
       width: 70%;
       margin-left: auto;
       margin-right: auto;
   }
   .detail .row{
       grid-template-columns: repeat(3, 1fr);
   }
   .pricing .row{
       grid-template-columns: repeat(3, 1fr);
   }
   .testimonial-item p{
       width: 60%;
   }
   .contact .row{
       column-gap: 4rem;
   }
   .contact-right{
       padding-left: 4rem!important;
   }
}