* {
margin: 0;
padding: 0;
box-sizing: border-box;
} 

nav {
    position: absolute;
    height: 180px;
    width: 98.8vw;
}
/**************************** Top Navbar work******/

.top-nav {
    box-sizing: border-box;
    height: 9vw;
    position: absolute;
    width: 98.8vw;
}
.top-nav img{
    float: left;
    width: 7vw;
  
}

.top-nav h1 {
    text-shadow: 4px 4px 10px;
    font-size: 4vw;
    margin-top: 1vw;
    color: rgb(137, 181, 219);
    position: absolute;
    left: 10vw;
    height: 8vw;
    font-family: 'Baloo 2', cursive;
    /* font-family: 'Tangerine', cursive; */

}

/**************************** bottom Navbar work******/

.bottom-nav {
    border-top: 1.6vw solid rgb(236, 154, 236);
    border-radius: 3vw;
    border-bottom: 2px solid rgb(236, 154, 236) ;
    border-right: none;
    border-left: none;
    position: absolute;
    top: 9vw;
    width: 98.8vw;
    height: 6vw;
} 


.bottom-nav ul  {
    list-style: none;
    position: absolute;
    bottom: 0.1vw;
    
}

.bottom-nav ul li  {

    margin-top: 0.5svw;
    padding: 3vw;
    display: inline-block;
    height: 2.5vw;

}

.bottom-nav ul li a {
    padding: 0.7vw;
    text-decoration: none;
    color: rgb(81, 126, 165);
    font-family: 'Baloo 2', cursive;
    font-size: 1.2vw;
    color: black;
    
   

}
.bottom-nav ul li a:hover {

    background-color: rgb(143, 207, 236);
    border-radius: 8px;
    color: black;
}

/**************Container1 work here *****/

.container1 {
    position: absolute;
    top: 18vw;
    display: inline-block;
    width: 98.8vw;


}

.container1 img {
    width: 40vw;
    left: 55vw;
    position: relative;
    bottom: 4vw;
    border-radius: 1rem;
    
}

.container1 h1, h3{
    font-size: 2vw;
    position: relative;
    top: 2vw;
    padding: 0.3vw;
    left: 1vw;
    color: rgb(137, 181, 219);
    font-family: 'Baloo 2', cursive;    
}
.phara {
    width: 50vw;
    height: 14vw;
    position: absolute;
    top: 12vw;
    margin-left: 4vw;
}
.phara p {
    color: rgb(0, 0, 0);
    font-family: 'Baloo 2', cursive;
    text-align: center;
    font-size: 1.5vw;

    
}

.come {
    color: red;
}

/************container2 work here *****/
.container2 {
    display: flex;
    position: absolute;
    top: 50vw;
    padding: 5vw;
    width: 98.8vw;
    
    
}
.box {
    box-shadow: 0.4vw 0.4vw rgb(227, 232, 236);
    width: 40%;
    margin:0.5vw auto 0 auto;
    padding: 4vw;
    font-size: 1.5vw;
    text-align: center;s
    display: inline-block;
    margin-left: 3vw;
    border-radius: 5vw;
    
}
.box img {
    width: 5vw;
}
.box h4 {
    margin-top: 0.3vw;
    margin-bottom: 1.3vw;
    text-shadow: 3px 5px 5px ;
}

.box .arrow{

    width: 2vw;
    display: flex;
    padding-top: 2vw;
}
.box{
    animation: mymove 1000s infinite;
    transition: transform 1s;
}


.box:hover{
    animation: mymove1 5s infinite;
    transform: scale(1.05);
}

@keyframes mymove {
    0% { box-shadow: 1vw 2vw 3vw rgb(221, 134, 221);
    
    }
}
@keyframes mymove1 {
    15% { box-shadow: 1vw 2vw 3vw rgb(82, 109, 168);
    
    }
}

/**************Container3 work here *****/

.container3 {
    position: absolute;
    top: 90vw;
    display: flex;
    width: 98.8vw;
    font-family: 'Baloo 2', cursive;
}


.container3 img {
    width: 25vw;
    margin-left: 10vw;

}

.container3 p {
    width: 50vw;
    height: 10vw;
    margin: 7vw 0 auto 7vw;
    font-size: 1.7vw;
}

/**************Container4 work here *****/

.container4 {
    position: absolute;
    top: 120vw;
    flex-direction: row-reverse;
    display: flex;
    width: 98.8vw;
    font-family: 'Baloo 2', cursive;
}


.container4 img {
    width: 25vw;
    margin-left: 10vw;

}

.container4 p {
    width: 50vw;
    height: 10vw;
    margin: 7vw 0 auto 7vw;
    font-size: 1.7vw;
}


/**************Container4 work here *****/


.container5 {
    position: absolute;
    top: 146vw;
    display: block;
    width: 98.8vw;
    height: 35vw;
    text-align: center;
    flex-direction: column;
    font-family: 'Baloo 2', cursive;

} 

.container5 img {
    width: 20vw;
    padding-top: 2vw;
}

.container5 h3 {
    color: black;
    font-size: 3vw;
}

.container5 p {
    color: black;
    font-size: 1.7vw;
}


/**************footer work here *********/

.footer1 {
    display: flex;
    display: inline-block;
    width: 100vw;
    position: absolute;
    top: 190vw;
    height: 22vw;
    background-color: rgb(12, 12, 11);
    opacity: 0.9;
    color: white;
    
}

.footer1 h2{
    margin-top: 3vw;
    font-size: 5.5vw;
    text-align: center;
    display: inline-block;
    width: 98vw;
    color: rgb(241, 89, 216);
}

.footer1 h3{
    font-size: 5vw;
    text-align: center;
    display: inline-block;
    width: 98vw;
    color: rgb(241, 89, 216);
}