main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
main .herotitletext{
    font-size: clamp(2rem,5vw,8rem);
    font-family: 'tusker';
    color: white;
    margin-top: 100px;
padding: 10px;
border-top: 1px solid #e73c45;
border-bottom: 1px solid #e73c45;
width: 95%;
max-width: 1840px;
text-align: center;
user-select: none;
}
main .title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 50px;
    text-align: left;

}
main .title h4{
    position: relative;
    color: white;
    font-family: 'tusker';
    font-size: clamp(3rem,5vw,4rem);
width: 90%;
}
main .herosection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 50px;

}
main .herosection .herocontainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 95%;
    max-width: 1440px;
    height: auto;
border-radius: 15px;
border: 1px solid #7373734e;
padding: 20px;
}
main .herosection .herocontainer div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: auto;
height: auto;
flex-wrap: wrap;
text-wrap-mode: wrap;
margin: 25px;
}
main .herosection .herocontainer .heroblocktitle{
 width: 95%;
}


main .herosection .herocontainer .heroblocktitle h4{
    font-size: clamp(1.5rem,4vw,2rem);
    font-family: 'handipro';
    color: white;
text-align: left;
}
main .herosection .herocontainer .heroblocktitle p{
    font-size: clamp(0.8rem,1vw,1.1rem);
    font-family: 'musticapro';
    color: white;
    margin-top: 25px;
}
main .herosection .herocontainer .heroblocktitle i{
    font-size: clamp(0.6rem,1vw,1rem);
    font-family: 'musticapro';
    color: #ffffffc0;
    margin-top: 25px;
}

main .herosection .herocontainer .heroblock img{
    width: 250px;
    padding: 45px;
}
main .herosection .herocontainer .heroblock a{
    width: 250px;
    height: 50px;
}
main .herosection .herocontainer .heroblock a button{
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    background-color: #e73c45;
cursor: pointer;
color: white;
font-family: 'handipro';
}
main .herosection .herocontainer .heroblock button:hover{
        background-color: #e73c45cb;
transition: .2s ease;
}



main .midsection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 10px;
}
main .midsection .herosection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 95%;
    height: auto;
background: rgba(24, 24, 24, 0.26);
box-shadow: 0 4px 30px #0f0f0f10;
backdrop-filter: blur(4.8px);
-webkit-backdrop-filter: blur(4.8px);
border: 1px solid #e73c45;
border-radius: 25px;
padding: 50px;
margin-top: 10px;

}


main .midsection .herosection .herocontainerlogo img{
    width: clamp(200px,20vw,400px);
}


main .midsection .herosection .herocontainertext{
display: flex;
flex-direction: column;
justify-content: space-around;
width: auto;
height: 100%;
gap: 20px;
}
main .midsection .herosection .herocontainertext article{
position: relative;
}
main .midsection .herosection .herocontainertext h3{
    font-size: clamp(0.9rem,2vw,1.2rem);
font-family: 'handipro';
font-weight: 100;
color: white;
}
main .midsection .herosection .herocontainertext i{
        font-size: clamp(0.7rem,2vw,1rem);
font-family: 'musticapro';
color: rgba(255, 255, 255, 0.922);
margin-left: 5px;
}


main .colorsection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 10px;
}
main .colorsection .herosection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 95%;
    height: auto;
background: rgba(24, 24, 24, 0.26);
box-shadow: 0 4px 30px #0f0f0f10;
backdrop-filter: blur(4.8px);
-webkit-backdrop-filter: blur(4.8px);
border-radius: 25px;
padding: 50px;
margin-top: 10px;
gap: 20px;
}
main .colorsection .herosection .hero{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 95%;
height: auto;
}
main .colorsection .herosection .hero .herocolor{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    width: 50%;
height: 550px;
border-radius: 10px;
background-color: #161616;
}
main .colorsection .herosection .hero .herocolor article{
    margin: 25px;
}
main .colorsection .herosection .hero .herocolor h4{
font-size: clamp(2rem,4vw,4rem);
font-family: 'handipro';
color: white;
}
main .colorsection .herosection .hero .herocolor p{
font-size: 2rem;
font-family: 'musticapro';
color: #ffffffb5;   
}
main .colorsection .herosection .hero .herocolumncolor{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45%;
height: 550px;
border-radius: 10px;
gap: 50px;
}
main .colorsection .herosection .herocolumncolor .columncolor{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    width: 100%;
height: 500px;
border-radius: 10px;
background-color: #161616;
}
main .colorsection .herosection .hero .columncolor article{
    margin: 25px;
}
main .colorsection .herosection .hero .columncolor h4{
font-size: 1.5rem;
font-family: 'handipro';
color: white;
}
main .colorsection .herosection .hero .columncolor p{
font-size: 1rem;
font-family: 'musticapro';
color: #ffffffb5;   
}
main .colorsection .herosection .hero #columncolor08{
background-color: #080808;
}
main .colorsection .herosection .hero #columncolore7{
background-color: #e73c45;
 
}



main .storysection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-top: 10px;
}
main .storysection .herosection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: auto;
background: rgba(24, 24, 24, 0.26);
box-shadow: 0 4px 30px #0f0f0f10;
backdrop-filter: blur(4.8px);
-webkit-backdrop-filter: blur(4.8px);
border-radius: 25px;
padding: 50px;
margin-top: 10px;
gap: 20px;
}
main .storysection .herosection .hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
height: auto;
    background: url(/img/logostory.jpg);
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
main .storysection .herosection .hero .logostory{
    width: 90vw;
    max-width: 1300px;
    user-select: none;
    opacity: 0;
}
.logostorymobile{
    display: none;
}
@media (max-width: 1200px){
main .herosection .herocontainer{
flex-direction: column;
}

main .herosection .herocontainer .heroblock{
width: 95%;
}
main .colorsection .herosection .hero{
flex-direction: column;
align-items: start;
}
main .colorsection .herosection .hero .herocolor{
width: 100%;
height: 300px;
}
main .colorsection .herosection .hero .herocolumncolor{
width: 100%;
margin-top: 50px;

}
}
@media (max-width: 1200px){
    main .storysection .herosection .hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
height: auto;
    background: url(/img/logostorymobile.jpg);
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
    main .storysection .herosection .hero .logostory{
    display: none;
    }
    main .storysection .herosection .hero .logostorymobile{
    display: flex;
    opacity: 0;
    width: 100%;
}
}