body{
    margin: 0;
}
.s1{
    background: linear-gradient(rgba(4, 9, 30, 0.5),rgba(4, 9, 30, 0.5)),url('/images/banner.png') center fixed no-repeat; 
    position: relative;
    min-height: 40rem;
}
nav{
    padding:0;
    margin: 0;
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul{
    margin: 0;
    padding: 0;
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    margin-right: 1rem;
    margin-left: 1rem;
}

nav ul li{
    padding: 0;
    width:4rem;
    text-align: center;
}
nav ul a{
    text-decoration: none;
    color: whitesmoke;
    font-size:0.8rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.yo ul li::after{
    height:0.2rem;
    width:0;
    content:'';
    background-color:rgb(198, 196, 196);
    margin: auto;
    transition: 0.5s;
    display: block;
}
.yo ul li:hover::after{
    width:60%;
}
.d1{
    margin: auto;
    text-align: center;
    align-items: center ;
    margin-top:8rem;
    font-size: 2.2rem;
    color:whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.d1 h6{
    font-size: 0.8rem;
    font-weight: lighter;
}
.d2{
    margin: auto;
    text-align: center;
    
}
.d2 p{
    
    border-style: solid;
    border-width: 2px;
    border-color: whitesmoke;
    width: 11rem;
    height: 2rem;
    text-decoration: none;
    font-size: 0.7rem;
    margin: auto;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    text-align: center;
    color: whitesmoke;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
    padding-top: 0.8rem;
}
.d2 p:hover{
    height:2.1rem;
    width: 11.2rem;
    background-color: rgb(177, 123, 37);
    color:black;
    font-weight: bolder;
    transition-timing-function: linear;
    transition: 0.5s;
}

#logo{
    height:35%;
    width:70%;
    margin-left: 2rem;
    margin-top: 1rem;
}
.a1{
    text-decoration: none;
    color:whitesmoke;
}
.s2{
    min-height:60rem ;
}
.d3{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: auto;
    margin-top: 5rem;
    margin-bottom: 4rem;
    width: 50rem;
    height: 5rem;
    text-align: center;
}
.d3 h2{
    margin: 0;
}
.d3 p{
    margin-bottom: 0;
    font-size: 1rem;
    color:rgb(129, 129, 129);

}
.d4{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serifS;
    text-align: center;
    height: 9.5rem;
    margin: auto;
    width: 80%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 6rem;
    display: flex;
    justify-content: space-evenly;
}
.d4 .d41{
    border-radius: 0.6rem;
    height: 9rem;
    width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:linear-gradient(rgba(252, 234, 218, 0.5),rgba(255, 229, 206, 0.5));
    transition: 0.3s;
}
.d41:hover{
    box-shadow: 0 0 1.2rem 0 rgba(0,0,0,0.2);
}
.d41 h5{
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
}
.d41 p{
    margin:0.3rem 0.3rem 1rem 0.3rem;
}
.d5{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serifS;
    text-align: center;
    width: 80%;
    height: 21rem;
    margin: auto;
    margin-bottom: 6rem;
    margin-top: 1rem    ;
    display: flex;
    justify-content: space-evenly;
}
.d51{
    border-radius: 0.6rem;
    height:22rem;
    width: 15rem;
    position: relative;
    background-size: cover;
    background-position: center;
}
.d51 img{
    height: 100%;
    width: 100%;
    border-radius: 0.6rem;
}
.d51 div{
    border-radius: 0.6rem;
    position:absolute ;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: 0.5s;   
}
.d51 div h3{
    margin-top:5%;
} 
.d51 div:hover{
    background: rgba(226,0,0,0.5);
    color:whitesmoke;

}

.d52 {
     border-radius: 0.6rem;
    height: 22rem;
    width: 15rem;
    position: relative;
    background-size: cover;
    background-position: center;
}
.d52 img{
    height: 100%;
    width: 100%;
    border-radius: 0.6rem;
}
.d52 div{
    border-radius: 0.6rem;
    position:absolute ;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    transition: 0.5s;
}
.d52 div h3{
    margin-top:5%;
}
.d52 div:hover{
    background: rgba(226,0,0,0.5);
    color:whitesmoke
}

.d53  {
    border-radius: 0.6rem;
    height: 22rem;
    width: 15rem;
    position:relative;
    background-size: cover;
    background-position: center;
}
.d53 img{
    height: 100%;
    width: 100%;
    border-radius: 0.6rem;
}
.d53 div{
    border-radius: 0.6rem;
    position:absolute ;
    top:0;
    height: 100%;
    width: 100%;
    left: 0;
    transition: 0.5s;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.d53 div h3{
    margin-top:5%;
}
.d53 div:hover{
    background: rgba(226,0,0,0.5);
    color:whitesmoke
}
.d6{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serifS;
    text-align: center;
    width: 80%;
    height: 21rem;
    margin: auto;
    margin-bottom: 5rem;
    margin-top: 1rem    ;
    display: flex;
    justify-content: space-evenly;
}
.d61{
    height: 9rem;
    width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.d61 img{
    border-radius: 0.6rem;
}
.d61 div{
    text-align: left;
    font-size: 80%;
}
.d61 p{
    color: rgb(133, 133, 133);
}
.d7{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serifS;
    text-align: center;
    width: 80%;
    height: 10rem;
    margin: auto;
    margin-bottom: 5rem;
    margin-top: 1rem    ;
    display: flex;
    justify-content: space-evenly;
}
.d71{
    height: 9rem;
    width: 25rem;
    display: flex;
    justify-content: space-between;
    background:linear-gradient(rgba(243, 230, 219, 0.5),rgba(255, 232, 213, 0.5));
    border-radius: 0.4rem;
}
.d71 img{
    height:2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-left: 0.8rem;
    margin-top:1rem;
}
.userdet{
    margin-top: 1rem;
    margin-left: 1.5rem;
    margin-right: 1rem;
    text-align: left;
}
.userdet p{
    font-size: 75%;
    margin: 0;
}
.userdet h5{
    margin-top:1.5rem;
    margin-bottom: 0.5rem;
}
.userrate1 .checked{
    color:orange;
}
.userrate2 .checked{
    color:orange;
}
.d8{
    text-align: center;
    position: relative;
    width: 60%;
    height: 18rem;
    margin: auto;
    border-radius: 0.5rem;
}
.d8 img{
    height: 100%;
    width: 100%;
    border-radius: 0.8rem;
    background-size: cover;
    background-position: center;
}
.d8 h2{
    font-size: 150%;
    width: 65%;
    color: whitesmoke;
    height: 40%;
    margin: auto;
    margin-top: 4rem;    
}
.d81{
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(14, 16, 27, 0.7),rgba(17, 21, 37, 0.7));
    position:absolute ;
    top:0;
    left:0;
    border-radius: 0.8rem;
}
.d9{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: auto;
    margin-top: 5rem;
    margin-bottom: 3rem;
    width: 50rem;
    height: 5rem;
    text-align: center;
    font-size: 70%;
}
.d9 h2{
    margin: 0;
    font-size: 1rem;
}
.d9 p{
    width: 80%;
    margin-bottom: 3rem;
    margin: auto;
    margin-top: 1rem;
    color:rgb(129, 129, 129);

}
.d9 ul{
    padding: 0;
    display: flex;
    list-style-type: none;
    justify-content: center;
}
.d9 li{
    height: 1rem;
    width: 1rem;
    margin:0 0.5rem 0 0.5rem;
}
.slogo{
    height:100%;
    width: 100%;
}
@media (max-width:517px){
   
    #logo{
        margin-left:1rem;
    }
    .s1 li{
        
    }
   .d3{
    width: 100%;
   }
   .d9{
    width: 100%;
   }
}