@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Fredoka+One&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'DM Sans', sans-serif;
}
html,body{
background-color: #F7F7F7;
}

h1,h2,h3,h4,h5,h6{
font-family: 'Fredoka One', cursive;
}

#top{
    background-image: url(img/bird.jpeg);
    background-attachment:fixed;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;

}
#top> div{
    background-color: rgba(0, 0, 0, 0.4);
  
}
.heading{
    height: 500px;
   padding: 20px;
   
    
    
}
.heading h1{
   padding-top: 17%;
    color: white;   
}
.heading p{
    font-size:25px;
    color:yellow;
}
#work{
    background-image: url(img/family.jpg);
    background-size:cover;
    background-attachment: fixed;

    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
}
 #work h1{
     color:white;
     padding-top: 100px;
    text-align: center;

}
 #work> div{
    background-color: rgba(0, 0, 0, 0.7);

} 

.para{
    height:245px;
    margin: auto;
    font-size:20px;
    color:white;
   
}
.why-us {

    padding: 40px;
}
.why-us h1{
    text-align: center;
    color:gray;
}
ul.list li {
    margin-left: 60px;
    line-height: 60px;
    list-style: none;
    font-size: 20px;
}
.why-us img{
    border-radius: 50%;
}

/* scrollbar */

::-webkit-scrollbar {
width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8); 
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: black; 
border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
width: 5px;
}

/* navbar */

#nav_bar{
background-color: white;
box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.1);
padding: 20px;
}

#navbarNav li{  
margin: 0 2px;
width: 110px;
transition: all .5s ease;
}


#navbarNav li:hover{
border-radius: 10px;
background-color: red;
}

#navbarNav li a{
color: black;   
transition: all .5s ease;
}

#navbarNav li a:hover{
color: white;
font-weight: bold;
}

#navbarNav .active{
background-color: red;
color: white;
font-weight: bold;
border-radius: 10px;
}

#nav_img{
position: relative;
animation-name: nav_img;
animation-duration: 2s;
animation-timing-function: ease;   
}

#nav_a1{
position: relative;
animation-name: nav_a1;
animation-duration: 2s;
animation-timing-function: ease;   
}

#nav_a2{
position: relative;
animation-name: nav_a2;
animation-duration: 2.5s;
animation-timing-function: ease;   
}

#nav_a3{
position: relative;
animation-name: nav_a3;
animation-duration: 3s;
animation-timing-function: ease;   
}

#nav_a4{
position: relative;
animation-name: nav_a4;
animation-duration: 3.5s;
animation-timing-function: ease;   
}

#nav_a5{
position: relative;
animation-name: nav_a5;
animation-duration: 4s;
animation-timing-function: ease;   
}

@keyframes nav_img {
0%{
    left: -100px;
    transform: rotate(180deg);
}

100%{
    left: 0;
    transform: rotate(0deg);
}
}

@keyframes nav_a1 {
0%{
    top: -150px;
}

100%{
    top: 0;
}
}

@keyframes nav_a2 {
0%{
    top: -150px;
}

100%{
    top: 0;
}
}

@keyframes nav_a3 {
0%{
    top: -150px;
}

100%{
    top: 0;
}
}

@keyframes nav_a4 {
0%{
    top: -150px;
}

100%{
    top: 0;
}
}

@keyframes nav_a5 {
0%{
    top: -150px;
}

100%{
    top: 0;
}
}
.cols{
   
    margin-bottom: 20px;
}
.cols2{
    font-size: 20px;
    line-height: 40px;
    word-spacing: 10px;
    padding: 25px;
    margin-bottom: 20px;  
    background-color: lavender;
    border-radius: 20px;  
}
.cols2 strong{
   color: red;
}
#t-cards img{
    border-radius: 10px;
}