body {
    padding: 0%;
    margin: 0%;
    font-family: "Lato";
    text-align: center;
}




/*----------------------------- Title section --------------------------------*/


#title {
    position: sticky;
    top: 0;
    z-index: 10;
}

.container-fluid{
    padding: 0;
}


.navbar {
    font-family: "Lato";
    color: lightcoral;
    background-color: rgb(239, 241, 243);
}

.navbar-brand {
    font-family: "Pacifico";
    font-size: 35px;
}

.nav-link {
    font-size: 20px;
    margin: 0 15px;
    font-weight: 600;
    font-family: "Ubuntu";
    color: black!important;
}

.nav-link:hover{
    color: #3a8383!important;
}





/*---------------------------------- Banner Section ------------------------------------------*/

#banner{
    background-size : cover;
    text-align: center;

    background-image: url("../Images/img1.jpg");

    background-attachment: fixed;

    background-repeat : no-repeat;
}


.row {
    margin: 0;
}

.site-title, .site-desc{
    font-family: "Righteous";
    color: rgb(255, 255, 255);
}

.site-title{
    padding-top: 5%;
    padding-bottom: 1%;
    font-size: 50px;
}

.site-desc{
    font-size: 18px;
}

.play-btn{
    width: 2.813rem;
    margin: 1rem 10px;
}


.tutorial-title{
    color: rgb(255, 255, 255);
    font-size: 20px;
}

.tutorial-title:hover{
    color: white;
    font-size: 20px;
    font-weight: 500;
}

.site-btn1 {
    padding: 8px 3px;
    margin-right:8px;
}

.site-btn2 {
    padding: 8px 3px;
    margin-left: 8px;
}

.site-btn1, .site-btn2{
    margin-top: 3rem;
    margin-bottom: 12rem;
}




/*----------------------------- Feature1 section --------------------------------*/


.middle-container1{
    text-align: center;
    padding: 3%;
    margin: 8% 5% 4%;
}

.heading2{
    margin-bottom: 5%;
    font-size: 40px;
}

.feature1-column{
    margin: 1.25rem 0;
    padding: 1.25rem;
}

.feature1-column .card{
    text-align: center;
}


.para1{
    width: 60%;
    margin-left: 20%;
    margin-bottom: 5%;
}

.card-text, .para1{
    color: rgba(0,0,0,0.6);
}



/*----------------------------- Feature2 section --------------------------------*/

#feature2{
    padding-bottom:1 rem;
    background-size : cover;
    background-image: url(../Images/img5.jpg);

   

    

    background-repeat: no-repeat;
}




    


#feature2 .heading1{
    text-align: center;
    margin: 15% 0 4%;
    font-family: "Righteous";
    width: 80%;
    color: rgb(30, 83, 70);
}

#feature2 .para{
    width: 80%;
    font-family: "Ubuntu";
    color: rgb(23, 61, 52);
    margin-bottom: 7%;
}

#feature2 .like-btn{
    margin-bottom: 15%;
    width: 34%;
    padding: 2% 5%;
    background-color: #538181;
}

#feature2 .like-btn:hover{
    color: white;
    font-weight: 500;
    background-color: #325c5c;
}




/*----------------------------- Feature3 section --------------------------------*/

.middle-container3{
    margin: 6% 10%;
}


.middle-container3 p{
    color: rgba(0,0,0,0.6);
}


/*----------------------------- Feature4 section --------------------------------*/

.middle-container4{
    margin-top: 8%;
    text-align: center;
}

.middle-container4 .row .col-md-7{
    padding: 10% 0;
}

.middle-container4 .row .col-md-5{
    text-align: center;
    padding: 10% 5%;
}

.middle-container4 a{
    color: lightseagreen;
    font-size: 40px;
    text-decoration: none;
}

.middle-container4 a:hover{
    color: rgb(21, 138, 132);
}


.middle-container4 .para-1{
    color: rgb(255, 255, 255);
    font-family: "Montserrat";
    margin-top: 7%;
}


/*----------------------------- Feature4 section --------------------------------*/


.bottom-container{
    margin-top: 5%;
}


/*----------------------------- Footer section --------------------------------*/


.bottom-container .footer-title{
    font-family: "Righteous";
    color: #325c5c;
    font-size: 25px;
}

.bottom-container .footer-para{
    font-family: "Righteous";
    color: #224d4d;
    font-size: 18px;
}

.bottom-container .id-button{
    color: black;
    background-color: #498181;
}

.bottom-container .id-button:hover{
    color: white;
    background-color: #295e5e;
}



/*----------------------------- Media section --------------------------------*/

@media(max-width:1028px){

    #banner{
    background-size : 100% 40%;
    text-align: center;

    background-image: url("../Images/img1.jpg");

    background-attachment: fixed;

    background-repeat : no-repeat;
}
    
    



}