@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
    font-family: 'helveticaneue';
    src:url('helveticaneue.woff2') format('woff2'),
        url('helveticaneue.woff') format('woff');
}

.row{
    display:flex;
    flex-flow:row;
}

.col{
    display:flex;
    flex-flow:column;
}
*{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
  }

body{
    background-color:rgb(5, 5, 5);
    width:100%;
    color:rgb(226, 226, 226);
}

ht1{
    font-family: helveticaneue, Helvetica, sans-serif;
    font-size:80px;
    display:block;
    width:100%;
    letter-spacing: -0.05cap;
}

ht2{
    font-family: helveticaneue, Helvetica, sans-serif;
    font-size:30px;
    display:block;
    width:100%;
    letter-spacing: -0.05cap;
}
ht3{
    font-family: helveticaneue, Helvetica, sans-serif;
    font-size:30px;
    display:block;
    width:100%;
    letter-spacing: -0.05cap;
}

.banner{
    height:100vh;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-flow:row;
}

.bannerimage{
    height:70%;
    width:100%;
    margin:50px 70px 40px 40px;
    border-radius:20px;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-flow:column;
}

.bamertxt{
    height:70%;
    width:100%;
    margin:50px 70px 40px 40px;
    border-radius:20px;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-flow:column;
    padding:50px;
}

.limitedwidth{
    max-width:50%;
}

.coverimage{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

a{
    color:white;
}
p{
    font-family:Helvetica, sans-serif
}

.display{
    font-family:helveticaneue, Helvetica, sans-serif;
}

.subtitle{
    font-size:60px;
}


#animated-text-decoration{
    display:block;
    background-color: rgb(226, 226, 226);
    width:0%;
    height:7px;
    position:relative;
    top:-10px;
}

.dynamicsearchbar{
    background-color: white;
    color:black;
    border-radius:80px;
    padding:10px;
    display:flex;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.3),
             0px 18px 23px rgba(0,0,0,0.3);
}

.dynamicsearchbar > span{
    min-width:35px;
    display:flex;
    align-items:center;
    justify-content: center;
    min-height:35px;
    border-radius: 50%;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.3),
             0px 18px 23px rgba(0,0,0,0.3);
}

.dynamicsearchbar > span > span{
    color:black;

}

.dynamicsearchbar > input{
    outline:none;
    border:none;
    font-size:20px;
    background-color: transparent;
    padding: 0px 10px;
}

.expandfrom50to100onmobile{
    max-width: 50%;
}

.breakonmo{
    flex-flow:row;
}

.sendbutton{
    transition:0.2s;
}

.sendbutton:hover{
    transition:0.2s;
    transform:scale(1.1);
}

#endorsementTiles{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#endorsementTiles >.end{
    width:100%;
    height:450px;
    border:4px white solid;
    display:flex;
    flex-flow:column;
    flex:1;
    justify-content: end;
    

}

#endorsementTiles > .end > .endtxb{
    margin:10px;
    padding:20px;
    border-radius:10px;
    background-color:white;
    display:flex;
    flex-flow:column;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.3),
             0px 18px 23px rgba(0,0,0,0.3);
}

#endorsementTiles > .end > .endtxb > .ename{
    color:black;
    font-family:helveticaneue, Helvetica, sans-serif;
    font-size:20px;
}
#endorsementTiles > .end > .endtxb > .epos{
    color:rgb(24, 24, 24);
    font-family:helveticaneue, Helvetica, sans-serif;
    font-size:13px;
}

.navbarelement{
    display:flex;
    flex-flow:row;
    gap:20px;
}

.navBarOption{
    color:gray;
    font-family:helveticaneue, Helvetica, sans-serif;
    text-transform: capitalize;
    transition:0.3s;
    font-size:30px;
    letter-spacing: -0.05cap;
}

.navBarOption:hover{
    color:white;
    cursor:pointer;
}

.actuallyabutton{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
    transition:0.2s;
    width: max-content;
}

.actuallyabutton:hover{
    opacity:0.5;
}

.classnavcont{
    display:flex;
    flex-flow:row;
    align-items: center;
    justify-content: space-between;
    padding:20px 20px;
}

.navcontm{
    display:flex;
    flex-flow:row;
    justify-content: start;
    width:100%;
}

.hamburgmobile{
    display:none;
    cursor:pointer;
}

input.b{
    background-color: transparent;
    border:2px white solid;
    border-radius:5px;
    color:white;
    font-size:20px;
    padding:10px;
}

.breakonmo2{
    display:flex;
        flex-flow:row;
    }

textarea{
    background-color: transparent;
    border:2px white solid;
    border-radius:5px;
    color:white;
    font-size:20px;
    resize: vertical;
    font-family:helvetica;
    padding:10px;
}

#homemobbar{
    display:none;
}

.rsadf{
    width:350px;
}

@media (max-width: 1350px){
    #endorsementTiles{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    
    #endorsementTiles >.end{
        height:400px;
        
    
    }
}

@media (max-width: 1150px){
    #endorsementTiles{
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    #endorsementTiles >.end{
        height:450px;
        
    
    }
}



@media (max-width: 900px){
    
    #endorsementTiles{
        grid-template-columns: 1fr 1fr;
    }
    #homemobbar{
        display:flex;
    }
    .navcontm{
        display:flex;
        flex-flow:row;
        justify-content: space-between;
    }
    .classnavcont{
        flex-flow:column;
    }
    .banner{
        min-height:unset;
        flex-flow:column;
        height:unset;
        background-color: rgb(14, 14, 14);
        
    }
    .breakonmo{
        flex-flow:column;
    }
    .navbarelement{
        flex-flow:column;
        display:flex;
        
        height:0px;
        overflow:hidden;
        transition:0.5s;
    }
    .navbarelement.expanded{
        display:flex;
        padding-top:20px;
        
        height:max-content;
    }
    .hamburgmobile{
        display:block;
    }
    .bannerimage{
        box-sizing: border-box;
        
        border-radius:20px;
        min-height:400px;
        margin:0px;
        width:100%;
        padding:70px 40px 40px 40px;
    }
    ht1{
        font-size:50px;
    }
    ht2{
        font-size:20px;
    }
    .limitedwidth{
        max-width:unset;
    }
    .subtitle{
        font-size:40px;
        margin-bottom:25px;
    }
    .banner{
        text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
    }
    #animated-text-decoration{
        display:block;
        background-color: rgb(226, 226, 226);
        width:0%;
        height:5px;
        position:relative;
        top:-5px;
        box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
    }
    .dissap{
        display:none;
    }
    .expandfrom50to100onmobile{
        max-width:100%;
        margin-bottom:30px;
    }
    .bamertxt{
        margin:0px;
        padding-bottom:0px;
        margin-top:80px;
    }
    #homebigbar{
        display:none;
    }

    .breakonmo2{
        flex-flow:column;
    }
}

@media (max-width: 600px){
    #endorsementTiles{
        grid-template-columns: 1fr 1fr;
    }

    .rsadf{
        width:100%;
    }
    
    #endorsementTiles >.end{
        height:450px;
        
    
    }

    #endorsementTiles > .end > .endtxb> .ename{
        font-size:15px;
    }

    #endorsementTiles > .end > .endtxb> .epos{
        font-size:10px;
    }
}