*{
    margin: 0;
    border: none;
}
body{
    background-color: #B8D2EE;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 10%;
    font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.hero-section-title{
    color: #1F306E;
    font-size: 54px;
    font-weight: 800;
    margin-bottom: 25px;
    text-align: center;
}
.hero-section{
    display: flex;
    flex-direction:column;
    gap:60px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.hero-section-file-list{
     width: 100%;
    display: flex;
    flex-direction:column;
    gap:60px;
    justify-content: center;
    align-items: center;
}
.hero-section-btns {
padding: 0;
background: transparent;
outline: none;
border: none;
cursor: pointer;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
padding: 12px 24px;
background: #473998 !important;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
position: relative;
z-index: 2;
font-style: normal;
font-weight: 500 !important;
font-size: 42px ;
line-height: 100% !important;
color: #fff;
height: 100px;
text-decoration: none;
width: 60%;
}
.hero-section-btns::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
background: -o-linear-gradient(45deg, #df7178 0%, #b650a9 50%, #7e6ce9 100%);
background: linear-gradient(45deg, #df7178 0%, #b650a9 50%, #7e6ce9 100%);
opacity: 0;

}
.hero-section-btns:hover:before{
    opacity: 1;
}
@media screen and (min-width: 1000px) {

    .hero-section-title{
        font-size: 42px;
    }
    .hero-section-btns{
        width: 30%;
        height: 60px;
        font-size: 32px ;
    }
    .hero-section-file-list
    {
        gap:30px
    }
    .hero-section-link{
    height: 60px !important;
    width: 60px !important;
    }
}

.hero-section-file-item{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:25px;
}
.hero-section-link{
    height: 100px;
    width: 100px;
}
.icon-file-text2{
    width: 100%;
    height: 100%;
}