@import url(./font.CSS );

body {
    padding:0%;
    margin:0%;
    font-family:Abel; 
}
.navbar-brand{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    color: peru ! important;
    
}
.nav-link{
    font-size:20px;
    margin:15px;
    color:black !important;
    font-family:  Roboto;
} 
.nav-link:hover{
    color:#00e8e8 !important;
} 
.active .nav-link{
    color:pink !important;
} 
.menu-right-btn{
    padding:13px 46px ! important;
    margin-right: 4%;
    background-color: transparent;
    transition: all 300ms ease-in;
}
.menu-right-btn:hover{
    color: white;
    background-color: #00e8e8 ;
}
.site-content{
    background-image: url('../stoke/a.jpg');
    background-attachment: fixed;
    background-size: cover;
}
.site-title, .site-desc{
    color:white;
    font-family: Georgia, 'Times New Roman', Times, serif;

}
.site-title{
    margin-top: 25%;
    margin-bottom: 6%;
    font-size: 40px;
}
.site-desc{
    font-size: 18px;
    padding-left: 10%;

}
.site-btn1{
    margin-left: 20%;
    background-color: black;
    color: white;
}
.site-btn2{
    background-color: white;
}
.site-btn1, .site-btn2{
    margin-top: 5%;
    margin-bottom: 40%;

}

/*..............section-1............*/

.section-1 .heading-1{
    margin-top:8%;
}
.section-1 .heading-2{
    margin-bottom: 5%;
    font-size: 39px;
}
.section-1 .para-1{
    width: 60%;
    margin-left: 20%;
    margin-bottom:5%;
    font-size: 20px;
    
}
.section-1 .card-text, .para-1{
    color: rgb(0,0,0,0.59 )
}
.section-1{
    margin-bottom: 8%;
}
.card{
    width:15rem;
}
/*......x.......section-1....x........*/

/*..............section-2............*/
.section-2 .container-fluid{
    background-image: url('../stoke/sdas.png');
    background-size: cover;
    background-attachment: fixed;
}
.section-2 .heading-1{
    margin-top: 20%;
    margin-bottom: 4%;
    font-family:'Lucida Sans';
    width: 80%;
    color: whitesmoke;
 }
.section-2 .para{
     width: 80%;
     font-family: 'ubuntu';
     color: whitesmoke;
     margin-bottom:7%;
}
.section-2 .btn{
    margin-bottom: 50%;
    width: 30%;
    padding: 2% 5%;
}

/*......x........section-2....x........*/

/*...............section-3.............*/
.section-3{
    margin-top: 6%;

}
.section-3 i{
    color: #00e8e8;
}
.section-3 p{
    color: rgba(0,0,0,0.59)
}


/*......x........section-3....x........*/

/*...............section-4.............*/
.section-4{
    margin-top: 8%;

}
.section-4 .row .col-md-7, .col-md-5{
    margin-top: 10%;
    margin-bottom: 10%;
}
.section-4 a{
    color: lightseagreen;
    font-size: 40px;
    text-decoration: none;
}
.section-4 .para-1{
    color: white;
    font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 7%;
    font-size: 23px;
}

/*......x........section-4....x........*/

/*...............footer.............*/

.social i{
   color: #EF5651;
   font-size: 20px;
}

/*......x.........footer....x.........*/


@media screen and ( max-width: 768px){
    .section-1 .card{
       width: 14rem; 
    }
    .section-4 .col-md-7 img{
       width: 350px; 
    }
    .site-content .site-title{
        font-size: 3rem;
        padding-left: 10%; 
     }
     .site-content .example1 h3{   /*Happy new year */
         font-size: 25px;
         height: 25%;
         
      }
}

@media screen and ( max-width: 320px){
    .site-content .site-title{
       font-size: 2rem;
       padding-left: 10%; 
    }
    .site-content .example1 h3{   /*Happy new year */
        font-size: 25px;
        height: 25%;
        line-height: 35px; 
     }
    .section-4 .col-md-7 img{
        width: 280px; 
     }
    .site-content .site-btn2{
       display: none; 
    }
    .site-content .site-btn1{
       margin-left: 15%; 
     }
     .section-1 .heading-1, .section-1 .heading-2{
         font-size: 25px;
     }
     .section-1 .col-md-4{
         padding: 5%;
         margin-left: 8%;
     }
     .section-1 .card{
        width: 15rem;        
    }
    .section-4 .col-md-5{
        padding: 0%  15%;
    }
    footer input[type="button"]{
        margin-top: 5%;
    }
    
}