/* CSS Document */

/*********** UNIVERSAL *************/
body{
    background-color:#fff;
    margin:0px;
    padding:0px;
    font-family: "Poppins", sans-serif;
    font-size:1.2vw;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color:#000;
}

a{
    text-decoration: none;
}
a:hover{
}

h1{
    font-family: "Modak", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:6vw;
    line-height:5vw;
    color:#d1007c;
    margin:0px;
}

h2{
    font-size:1.4em;
    color:#ec008c;
    font-weight:800;
    float:left;
    width:100%;
    margin-bottom:.1vw;
    margin-top:0px;
}

h2 .sub{
    color:#000;
    font-size:.6em;
    font-weight:300;
}

h3{
    font-size:1.4em;
    color:#ec008c;
    font-weight:800;
    float:left;
    width:100%;
    margin-bottom:.8vw;
    margin-top:0px;
}

h4{
    font-size:1.4em;
    color:#fff;
    font-weight:800;
    float:left;
    width:100%;
    margin-bottom:.2vw;
    margin-top:0px;line-height: 1.2em;
}

p{
    font-size:1.2vw;
}

.row{
    float:left;
    width:100%;
    margin-top:1vw;
    margin-bottom:1vw;
}

.sm{
    font-size:1.2vw;
}

/************ UI ELEMENTS **********/

.button{
    background-color:#ce047b;
    display:inline-block;
    border:1px solid #ce047b;
    border-radius:25px;
    height:1.5em;
    width:auto;
    text-align:center;
    color:#fff;
    font-size:1vw;
    padding:.6em 2em .4em 2em; 
    margin-right:1em;
}
.button:hover{
    background-color:#f275b5;
}

/************ HEADER ***************/

#header{
    border-bottom:1px solid #e5e5e5;
    width:100%;
    height:8vw;
    margin:0px;
    padding:0px;
    display:block;
    z-index:0;
    position:fixed;
    background-color:#fff;
}

#logo{
    background-image:url("../Images/Logos/HL_Full_Magenta_NoTag_2026.svg");
    background-repeat: no-repeat;
    width:10vw;
    height:5vw;
    margin-left:4vw;
    margin-top:1.6vw;
    margin-bottom:1vw;
    float:left;
}

#buttons{
    float:right;
    margin-right:2vw;
    margin-top:2.6vw;
}

#socialBar{
    float:right;
    margin-right:2vw;
    margin-top:3.4vw;
}

.social .inlineSVG{
    fill:#bcbec0;
    height:1.2vw;
    float:left;
    margin-right:.8vw;
    width:auto;
}

.social .inlineSVG:hover{
    fill:#ce047b;
}


/*************** CONTENT BODY ***************/

#ContentBody{
    float:left;
    width:100vw;
    margin-top:8vw;
}

.container{
    display:block;
    width:80vw;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:2em;
}

#Hero img{
    width:100%;
}

.leftText{
    float:left;
    width:48vw;
    margin-left:2vw;
    margin-right:4vw;
    margin-top:0px;
}

.rightImg{
    float:right;
    width:20vw;
    margin-right:4vw;
}

.rightText{
    float:right;
    width:48vw;
    margin-right:4vw;
    margin-top:0px;
}

.leftImg{
    float:left;
    width:20vw;
    margin-left:2vw;
    margin-right:4vw;
}

.rightImg img, .leftImg img{
    width:100%;
}

.third{
    float:left;
    width:20vw;
    height:14vw;
    margin-left:2vw;
    margin-right:2vw;
    background-color:#f6f6f6;
    border-radius:25px;
    text-align:center;
    padding:1vw;
    font-weight:500;
}

.third img{
    height:4vw;
    margin-top:2vw;
    margin-bottom:1vw;
}

.thirdP{
    float:left;
    width:20vw;
    height:20vw;
    margin-left:2vw;
    margin-right:2vw;
    background-color:#ec008c;
    border-radius:25px;
    text-align:center;
    padding:1vw;
    font-weight:500;
    color:#fff;
}

#ThirdPSocial{
    padding-top:6vw;
    height:15vw;
}

.thirdP .inlineSVG{
    fill:#fff;
    float:none;
    display:inline-block;
}

.thirdP .inlineSVG:hover{
    height:1.4vw;
    fill:#fff;
    margin-top:-.1em;
}

.thirdP form{
    margin-top:1vw;
}


/********** FOOTER ************/

#Footer{
    float:right;
    width:100%;
    background-color:#d1007c;
    height:8vw;
    margin-top:4vw;
}

#FooterLogo{
    background-image:url("../Images/Logos/HL_Full_Reverse_NoTag_2026.svg");
    background-repeat: no-repeat;
    width:10vw;
    height:5vw;
    margin-left:4vw;
    margin-top:1.6vw;
    margin-bottom:1vw;
    float:left;
}

#FooterSocialBar{
    float:right;
    margin-right:2vw;
    margin-top:3.4vw;
}

#Footer .inlineSVG{
    fill:#fff;
}

#Footer .inlineSVG:hover{
    height:1.4vw;
    margin-top:-.1em;
}

#FooterNav{
    float:left;
    background-color:#FFF;
    margin:2vw;
}

#Copyright{
    float:left;
    width:100%;
    margin-left:2vw;
}


/*********** SPECIAL COMPONENTS **********/

#ReviewBar{
    float:left;
    width:90%;
    background-color:#f6f6f6;
    border-radius:25px;
    padding:25px 5% 25px 5%;
    margin-top:2vw;
    margin-bottom:2vw;
}

#ReviewBar .ratingStar{
    width:4vw;
}

#ReviewBar a img{
    height:3vw;
    margin-left:4vw;
}


/*********** FORMS *************/

.frmField{
    width:80%;
    height:1.6vw;
    border-radius:25px;
    border:1px solid #bcbdc0;
    padding:.6vw;
    font-size:1vw;
    margin-bottom:.6vw;
}

.ltPinkBtn{
    background-color:#ff8bc6;
    color:#fff;
    border-radius:25px;
    border:1px solid #d1007c;
    font-size:1.4vw;
    font-weight:500;
    padding:.6vw 1.6vw .6vw 1.6vw;
    margin:1vw;
    margin-top:.4vw;
    display:inline-block;
    cursor:pointer;
}

.ltPinkBtn:hover{
    background-color:#fff;
    color:#ec008c;
}