body{
     background: rgb(245,222,179);
     background: linear-gradient(90deg, rgba(245,222,179,1) 30%, rgba(173,216,230,1) 100%);
}
.one{
     position: absolute;
     top: -1px;
     left: 0px;
}
.two{
     position: absolute;
     top: 59px;
     left: 0px;
}
.img2{
     position: absolute;
     top: 70px;
}
.sidepanel  {
     width: 0;
     position: fixed;
     z-index: 1;
     height: 700px;
     top: 0;
     left: 0;
     background-color: white;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
}

.sidepanel a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: black;
     display: block;
     transition: 0.3s;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 15px;
}
.sidepanel a b{
     font-size: 18px;
}

.sidepanel a:hover {
     color: black;
}

.sidepanel a .closebtn{
     color: white;
}

.sidepanel .closebtn {
     position: absolute;
     top: 0;
     right: 25px;
     font-size: 36px;
}

.openbtn {
     font-size: 20px;
     cursor: pointer;
     background-color: white;
     color: white;
     padding: 10px 15px;
     border: none;
}

.openbtn:hover {
     background-color:white;
}

.three{
     position: absolute;
     top: 0px;
     left: 0px;
}
.box{
     border: 1px solid;
     width: 10%;
     height: 10%;
}
.box2{
     border: 1px solid;
     width: 10%;
     height: 10%;
}
.first{
     position: absolute;
     top: 50px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.second{
     position: absolute;
     top: 50px;
     left: 190px;
     height: 28%;
     width: 39%;
}
.third{
     position: absolute;
     top: 220px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.fourth{
     position: absolute;
     top: 220px;
     left: 190px;
     height: 28%;
     width: 39%;
}
.text1{
     position: absolute;
     top: 170px;
     left: 15px;
     font-size: 12px;
}
.text2{
     position: absolute;
     top: 170px;
     left: 215px;
     font-size: 12px;
}
.text3{
     position: absolute;
     top: 340px;
     left: 15px;
     font-size: 12px;
}
.text4{
     position: absolute;
     top: 340px;
     left: 215px;
     font-size: 12px;
}
.fifth{
     position: absolute;
     top: 80px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.sixth{
     position: absolute;
     top: 80px;
     left: 190px;
     height: 28%;
     width: 39%;
}
.seventh{
     position: absolute;
     top: 230px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.eight{
     position: absolute;
     top: 230px;
     left: 190px;
     height: 28%;
     width: 39%;
}
.text5{
     position: absolute;
     top: 200px;
     left: 15px;
     font-size: 12px;
}
.text6{
     position: absolute;
     top: 200px;
     left: 215px;
     font-size: 12px;
}
.text7{
     position: absolute;
     top: 350px;
     left: 15px;
     font-size: 12px;
}
.text8{
     position: absolute;
     top: 350px;
     left: 215px;
     font-size: 12px;
}
.header1{
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 20px;
}
.card1{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 350px;
     left: 20px;
     font-family: Arial, Helvetica, sans-serif;
}
.header2{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card2{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     left: 395px;
     top: 350px;
     font-family: Arial, Helvetica, sans-serif;
}
.header3{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card3{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     left: 770px;
     top: 350px;
     font-family: Arial, Helvetica, sans-serif;
}
.header4{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card4{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     left: 20px;
     top: 795px;
     font-family: Arial, Helvetica, sans-serif;
}
.header5{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card5{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 795px;
     left: 395px;
     font-family: Arial, Helvetica, sans-serif;
}
.header6{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card6{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 795px;
     left: 770px;
     font-family: Arial, Helvetica, sans-serif;
}
.header7{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.card7{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 795px;
     left: 1145px;
     font-family: Arial, Helvetica, sans-serif;
}
font{
     position: absolute;
     top: 385px;
     left: 15px;
}
.card{
     width: 350px;
     padding: 74px 1px;
     background-color: white;
     position: absolute;
     top: 350px;
     left: 1145px;
}
.heading{
     position: absolute;
     top: 20px;
     left: 16px;
     font-size: 22px;
     font-family: Arial, Helvetica, sans-serif;
}
button{
     position: absolute;
     left: 16px;
     top: 85px;
     width: 90%;
     height: 30px;
     border: none;
     outline: none;
     border-radius: 10px;
     color: black;
     background-color: gold;
}
.box2 img{
     position: absolute;
     top: 520px;
     left: 1170px;
     width: 19.8%;
}
.box3 .scroll-container {
     background-color: ghostwhite;
     overflow: auto;
     white-space: nowrap;
     padding: 50px 3px 0 20px;
     position: absolute;
     top: 1240px;
     left: 20px;
     right: 20px;
}
   
.box3 .scroll-container img {
     padding: 10px;
}
.box3 h2{
     position: absolute;
     top: 0px;
     left: 10px;
     font-family: Arial, Helvetica, sans-serif;
}
.box3 a{
     text-decoration: none;
     color: blue;
     position: absolute;
     top: 25px;
     left: 200px;
     font-family: Arial, Helvetica, sans-serif;
}
.box4 .scroll-container {
     background-color: ghostwhite;
     overflow: auto;
     white-space: nowrap;
     padding: 50px 3px 0 20px;
     position: absolute;
     top: 1555px;
     left: 20px;
     right: 20px;
}
   
.box4 .scroll-container img {
     padding: 10px;
}
.box4 h2{
     position: absolute;
     top: 0px;
     left: 10px;
     font-family: Arial, Helvetica, sans-serif;
}
.box4 a{
     text-decoration: none;
     color: blue;
     position: absolute;
     top: 25px;
     left: 590px;
     font-family: Arial, Helvetica, sans-serif;
}
.box5 .scroll-container {
     background-color: ghostwhite;
     overflow: auto;
     white-space: nowrap;
     padding: 50px 3px 0 20px;
     position: absolute;
     top: 1870px;
     left: 20px;
     right: 20px;
} 
.box5 .scroll-container img {
     padding: 10px;
}
.box5 h2{
     position: absolute;
     top: 0px;
     left: 10px;
     font-family: Arial, Helvetica, sans-serif;
}
.box5 a{
     text-decoration: none;
     color: blue;
     position: absolute;
     top: 25px;
     left: 680px;
     font-family: Arial, Helvetica, sans-serif;
}
.box6 .header1{
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 20px;
}
.box6 .card1{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 2190px;
     left: 20px;
     font-family: Arial, Helvetica, sans-serif;
}
.box6 .header2{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.box6 .card2{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 2190px;
     left: 395px;
     font-family: Arial, Helvetica, sans-serif;
}
.box6 .header3{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.box6 .card3{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 2190px;
     left: 770px;
     font-family: Arial, Helvetica, sans-serif;
}
.box6 .header4{
     position: absolute;
     top: 20px;
     left: 30px;
     font-size: 20px;
}
.box6 .card4{
     width: 350px;
     padding: 210px 1px;
     background-color: white;
     position: absolute;
     top: 2190px;
     left: 1145px;
     font-family: Arial, Helvetica, sans-serif;
}

.box6-card1{
     position: absolute;
     top: 75px;
     left: 15px;
     height: 70%;
     width: 91.5%;
}
.box6-card2{
     position: absolute;
     top: 75px;
     left: 15px;
     height: 70%;
     width: 91.5%;
}
.box6-card3{
     position: absolute;
     top: 75px;
     left: 15px;
     height: 70%;
     width: 91.5%;
}
.box6-card4{
     position: absolute;
     top: 80px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.box6-card5{
     position: absolute;
     top: 80px;
     left: 190px;
     height: 28%;
     width: 39%;
}
.box6-card6{
     position: absolute;
     top: 230px;
     left: 15px;
     height: 28%;
     width: 39%;
}
.box6-card7{
     position: absolute;
     top: 230px;
     left: 190px;
     height: 28%;
     width: 39%;
}

.btn{
     position: absolute;
     left: 0;
     cursor: pointer;
     top: 2700px;
     width: 100%;
     height: 50px;
     border-radius: 0px;
     background-color: #37475A;
     color: white;
}
.four{
     position: absolute;
     top: 2750px;
     left: 0;
}
.five{
     position: absolute;
     top: 3230px;
     left: 0;
}