/*------------------ header start ---------------*/
header{
    background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../images/bg_me_hero.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}
header h1{
    font-size: 64px;
}

#typing{
color:#2DACCA;
font-weight:600;
font-size:28px;
}
/*------------------ header end---------------*/


/*------------------ navbar start ---------------*/

.navbar .nav-item .nav-link{
    color: white;
}

.navbar .nav-item .nav-link:hover{
    color: #2DACCA;
}

.navbar .nav-item{
    position: relative;
}

.navbar .nav-link::after{
    content: '';
    width: 0%;
    height: 3px;
    background-color:#2DACCA;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.6s ease;
}

.navbar .nav-link:hover::after{
    width: 90%;
}


.navbar .nav-link.active{
    color: #2DACCA;
}

/*------------------ navber end ---------------*/

/*------------------ about start ---------------*/

section {
    padding-top: 80px;
}


.about h2{
    position: relative;
}

.about h2::after{
    content: '';
    width: 20%;
    height: 3px;
    background-color: #2DACCA;
    position: absolute;
    top: 40px;
    left: 0;
} 


/*------------------ about end ---------------*/

/*------------------ services start ---------------*/

.content_line{
position: relative;
}


.content_line::after{
content: '';
width: 80px;
height: 4px;
background-color: #2DACCA;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
#services .card{
transition: .6s ease;
}

#services .card:hover{
transform: translateY(-8px);
}
#services .card .circle{
width:80px;
height:80px;
border:6px solid #2DACCA;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;;
}

#services .card:hover .circle{
background:#2DACCA;
color:#fff;
transform:scale(1.1);
}
#services .card .ideal{
    color: #2DACCA;
    
 }
/*------------------ services end ---------------*/


/*------------------ stats start ---------------*/
#stats{
min-height: 60vh;
background-image:
linear-gradient(
rgba(45, 172, 202, 0.75),rgba(45, 172, 202, 0.75) ),
url("../images/counters-bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed; 

}

.circle{
width: 80px;
height: 80px;
border: 6px solid white;
border-radius: 50%;
font-size: 22px;
}

.stat-item h3{
font-size: 32px;
font-weight: bold;
}

.stat-item p{
font-size: 16px;
letter-spacing: 1px;
}

/*------------------ stats end ---------------*/

/*------------------ work start ---------------*/
#work .card img{
transition: .8s;
}

#work .card:hover img{
transform: scale(1.3);
}
#work .card a{
    color: #2DACCA;
    font-size: 22px
}
#work .card a:hover {
    color: black;
    transition: 1s;
    transform: scale(1.1);
}
#work .card .title{
    color: #2d9dca;
}
/*------------------ work end ---------------*/

/*------------------ feedback start ---------------*/
#feedback{
min-height: 80vh;
background-image:
linear-gradient(
rgba(45, 172, 202, 0.65),rgba(45, 172, 202, 0.65) ),
url("../images/overlay-bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed; 
}
.testimonial-item img{
object-fit: cover;
}

.testimonial-item p{
max-width: 780px;
}

.carousel-indicators [data-bs-target]{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
opacity: 0.3;
}

.carousel-indicators .active{
opacity: 1;
}

/*------------------ feedback end ---------------*/

/*------------------ contact start ---------------*/

#contact .title::after{
content: '';
width: 100px;
height: 3px;
background: #2DACCA;
position: absolute;
bottom: -10px;
left: 0;
}

.form-control{
border-radius: 0;
padding: 12px;
}

.form-control:hover {
  border-color: #2DACCA;
  box-shadow: 0 0 0 0.1rem rgba(45, 172, 202, 0.65);
  outline: none;
}

.btn-primary{
background-color: #2DACCA;
border: none;
transition: 0.3s;
}

.btn-primary:hover{
background-color: #1b8aa3;
}

.social-icon{
width: 35px;
height: 35px;
border: 2px solid #2DACCA;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #2DACCA;
text-decoration: none;
transition: 0.3s;
}

.social-icon:hover{
background: #2DACCA;
color: #fff;
transition: .5s;
transform: scale(1.17);

}

/*------------------ contact end ---------------*/

/*------------------ footer ---------------*/
footer{
    background-color: #2d89ca;
}