@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Condensed&display=swap');

:root {
  --text-color: #ffffffb4;
  --bg-color: #02291f;
  --brand-color: #018031;
  --blur-color: #08a4490a;
}


/* 
font-family: 'Anton',sans-serif;
font-family: 'Roboto Condensed',sans-serif;
*/


/* ......Global declaration...... */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--text-color);
  font-family: 'Roboto Condensed', sans-serif;
}
body{
  background: #155d319f !important;
}
span {
  color: #01fb60;
  font-family: 'Anton', sans-serif;
}
h1,h2,h3,h4,h5,h6,a{
  user-select: none;
}
h1,h2,h3,h4,h5,h6{
  color: #fff;
  font-family: 'Anton', sans-serif;
}


/* .........Button Style......... */
.navbar .btn {
  background-color: var(--brand-color);
  color: #fff;
  font-weight: 900;
}
.navbar .btn:hover ,
.navbar .btn:focus {
  background-color: #fff;
  color: var(--brand-color);
  box-shadow: 0 0 30px 5px var(--brand-color);
  transition: ease-in-out 0.3s;
}

#home .btn,
#contact .btn,
#specialists .card .btn{
  width: 200px;
  background-color: var(--brand-color);
  color: #fff;
  font-weight: 900;
}
#home .btn:hover,
#contact .btn:hover,
#specialists .card .btn:hover {
  background-color: #fff;
  color: var(--brand-color);
  box-shadow: 0 0 30px 5px var(--brand-color);
  transition: ease-in-out 0.3s;
}



/* ..........Navbar.......... */
.navbar{
  background-color: var(--bg-color);
}
.navbar .main_logo{
  width: 150px;
}
.navbar a{
  color: #01fb60;
  font-family: 'Roboto Condensed', sans-serif;
}
.navbar a:hover{
  color: #fff;
  text-shadow: 0px 0px 10px #fff;
  transition: ease-in-out 0.3s;
}



/* ........Home Section.......... */
#home{
  border-bottom: 2px solid var(--brand-color);
}
#home .hero_img{
  width: 100%;
}
#home .hero-bg{
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding-bottom: 30px;
  opacity: 80%;
}




/* .........services......... */
#services .card{
  background-color: transparent;
  border: 0;
}


/* .........specialists......... */
#specialists .card {
  background-color: #0a48033c;
  overflow: hidden;
}

#specialists .card .img {
  height: 300px;
  overflow: hidden;
}

#specialists .card .card-body {
  background-color: #0000007e;
}



/* ........about........... */
#about .text_box{
  padding:0 100px 0 100px;
  background-color: #018031;
}



/* ..........Activity........ */
#activity .star i{
  color: var(--brand-color);
}
#activity .progress-bar {
  background-color: var(--brand-color);

}
#activity .img_text{
  z-index: 1;
  margin-bottom: 170px;
}
#activity img{
  width: 100%;
  border-radius: 10px;
  z-index: 0;
  border: 5px solid var(--brand-color);
}

/* ............blog.......... */
#blog .card {
  background-color: #0a48033c;
  overflow: hidden;
}
#blog .card .youtube_icon {
  font-size: 90px;
  color: var(--brand-color);
}
#blog .card .youtube_icon:hover #blog .card{
  width: 400px;
}
#blog .card .youtube_icon:hover{
  font-size: 100px;
  color: #f00;
  transition: 0.3s ease-in-out;
}
#blog .card_profile{
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 5px solid #01fb60;
  background-color: var(--brand-color);
  overflow: hidden;
}
#blog .card_profile img{
  width: 100%;
  
}




/* ........#contact form........... */
#contact form{
  background-color: #71b9a779;
  border-radius: 20px;
}
#contact form input,
#contact form select,
#contact form option,
#contact form .query_text{
  background-color: #59e48f65;
  margin-top: 10px;
}
#contact form input:hover,
#contact form select:hover,
#contact form option:hover,
#contact form .query_text:hover{
  background-color: #92edb69f;
}
#contact form input:focus,
#contact form select:focus,
#contact form option:focus,
#contact form .query_text:focus{
  background-color: #92edb69f !important;
}
#contact form label{
  color: #02291f;
}


/* .....footer......... */
footer .footer{
  background-color: #02291f !important;
}