@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff2') format('woff2'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



h1,h2,h3,h4,h5,h6,p{
    font-family: 'open_sansregular';
}

nav{
    background-color: transparent;
}

.hero{
    
}

.herok{
    height: 700px;
    
}

.heroimg{
    position: relative;
}


.hero-image::before{
    content: "";
    display: block;
    background-image: url('img/hero.png');
    background-repeat: no-repeat;
    background-size: 35.5rem;
    background-position: center top;
    position: absolute;
    right: 360px;
    top: 180px;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-md{
 position: absolute;
 top: 250px;
 right: 30px;
 z-index: 2;
}


.hero-lg{
    position: absolute;
    top: 210px;
    right: 200px;
    z-index: 2;
}

.border1::after{
    content: "";
    display: block;
    background-image: url('img/border.png');
    background-repeat: no-repeat;
    background-size: 35.5rem;
    background-position: center top;
    position: absolute;
    right: 80px;
    top: 250px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.border1lg::after{
    content: "";
    display: block;
    background-image: url('img/border.png');
    background-repeat: no-repeat;
    background-size: 35.5rem;
    background-position: center top;
    position: absolute;
    right: 10px;
    top: 260px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bordermd{
    width: 200px;
    position: absolute;
    top: 215px;
}

.bordermd2{
    width: 200px;
    position: absolute;
    top: 330px;
    left: 170px;
}

.about{
    height: 900px;
}

.navs-top.scrolled {
    background-color: rgb(13,110,253) !important;
    transition: background-color 200ms linear;
}

.links.scrolled{
    color: #fff !important;
    transition: all 200ms linear;
}

.lefthero{
    z-index: 3;
    position: relative;
}

#square1{
    position: absolute;
    right: 23px;
    bottom: 20px;
}

#square1lg{
    position: absolute;
    right: -120px;
    bottom: 10px;
}

#square1xl{
    position: absolute;
    right: -10px;
    bottom: 25px;
}

.borderbluexxl{
    position: absolute;
    top: -30px;
    right: 50px;
    width: 200px;
    z-index: 0;
}

.circlebluexxl{
    position: absolute;
    top: -80px;
    right: 100px;
    width: 200px;
    z-index: 0; 
}

.borderbluel{
    position: absolute;
    top: -30px;
    right: -20px;
    width: 200px;
    z-index: 0;
}

.circlebluel{
    position: absolute;
    top: -80px;
    right: 30px;
    width: 200px;
    z-index: 0; 
}

.linewhitexxlstatic{
    position: absolute;
    top: -150px;
    right: -100px;
    width: 100%;
}

.linewhitexxl{
    position: absolute;
    top: -50px;
    right: -0px;
    width: 100%;
}
.linewhitelg{
    position: absolute;
    top: -300px;
    width: 100%;
}

.linewhitemd1{
    position: absolute;
    width: 110%;
    left: 15px;
    top: 310px;
}

.linewhitemd2{
    position: absolute;
    width: 110%;
    left: 15px;
    top: 310px;
    transform: rotate(120deg);
    z-index: 0;
}

.linewhitemd3{
    position: absolute;
    width: 110%;
    left: 30px;
    top: 520px;
    transform: rotate(90deg);
    z-index: 0;
}

.linewhitemd4{
    position: absolute;
    width: 110%;
    left: 150px;
    top: 105px;
}

.linebluexxl{
    width: 100%;
    position: absolute;
    left: 455px;
    top: 70px;
    z-index: -1;

}

.linebluexxlstatic{
    width: 100%;
    position: absolute;
    left: -45px;
    top: 150px;
    z-index: -1;

}

.linebluexl{
    width: 100%;
    position: absolute;
    left: 345px;
    top: 100px;
    z-index: -1;

}

.linebluexlstatic{
    width: 100%;
    position: absolute;
    left: -35px;
    top: 180px;
    z-index: -1;

}

.linebluelg{
    width: 100%;
    position: absolute;
    left: 330px;
    top: 150px;
    z-index: -1;

}

.linebluelgstatic{
    width: 100%;
    position: absolute;
    left: -25px;
    top: 200px;
    z-index: -1;

}

.button{
    filter: drop-shadow(2px 2px 2px white) drop-shadow(2px 2px #0d6efd);
}

.button:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

.herosm{
    position: relative;
}

.herosm-img{
    border-radius: 30px;
    width: 200px;
    position: relative;
    z-index: 5;
}

.text-shadow{
    filter: drop-shadow(0px 3px 3px #0d6efd) drop-shadow(0px 4px 4px white );
}

.button2{
    filter: drop-shadow(0px 3px 3px white) drop-shadow(2px 2px #0d6efd);
}

.button2:hover{
    transform: scale(1.1);
    transition: 0.5s;
}

.bordersm1{
    position: absolute;
    width: 15%;
    top: 185px;
    right: 180px;
    z-index: 0;
}
.bordersm2{
    position: absolute;
    width: 15%;
    top: 25px;
    left: 230px;
    z-index: 0;
}

.borderssm{
    position: relative;
    overflow: auto;
}


.borderssm::after{
    content: "";
    background-image: url('img/border.png');
    background-repeat: no-repeat;
    background-size: 5.5rem;
    background-position: center top;
    display: block;
    position: absolute;
    top: 100px;
    left: 490px;
    width: 20%;
    height: 20%;
    z-index: 1;
}

.white-text-shadow{
    text-shadow: 0px 0px 6px black;
}

.black-text-shadow{
    text-shadow: 0px 0px 6px white;
}

.icons{
    width: 50px;
}

.borderimgsm{
    position: absolute;
    width: 25.5rem;
    top: -120px;
    left: 53px;
}

.web{
    
}

.cont{
    position: relative;

}

.inline{
    display: inline;
}