/* fonts */
@font-face {
    font-family: Intro-Bold;
    src: url('../fonts/intro/Intro-Bold-Regular.otf'); 
  }

@font-face {
    font-family: Intro-Regular;
    src: url('../fonts/intro/Intro-Regular-Regular.otf'); 
  }

@font-face {
    font-family: Intro-Black;
    src: url('../fonts/intro/Intro-Black-Regular.otf'); 
  }

@font-face {
    font-family: Lucida-Grande;
    src: url(../fonts/lucida-grande/LucidaGrande.ttf);
}

body {
    font-family: Intro-Regular, Helvetica, sans-serif;
}

p {
    font-size: 0.9rem;
}



/* helper styles */
.dark-blue {
    color: #242A44;
}

.white {
    color: #fff;
}

.blue-background {
    background-color: #96D4FF;
    color: #242A44;
}

.dark-blue-background {
    background-color: #242A44;
    color: #fff;
}

.orange-background {
    background-color: #FF552E;
    color: #fff;
}

.section-heading {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

a {
    color: #FF552E;
    text-decoration: none;
}
a:hover {
    color: #FF552E;
    text-decoration: none;
}


/* Landing page styles */

.navbar {
    font-family: Lucida-Grande, Helvetica ,sans-serif;
    text-transform: uppercase;
}

.navbar a {
    color: #242A44;
    font-size: 14px;
}

a.lets-chat-mobile {
    margin-right: 0em;
}

img.lets-chat-mobile {
    margin-left: 6px;
}
img.menu-icon {
    margin-right: 6px;
}

h3, h2, h4 {
    font-family: Intro-Bold;
}

.landing-container {
    width: 100vw;
    height: 100vh;
    background-color: #96D4FF;
}


div.mobile-logo img {
    /* width: 200px; */
    height: 20vh;
    margin: 10vh auto 5vh auto;
}

.mobile-nav {
    background-color: #96D4FF;
    /* z-index: 0!important; */
}


/* The mobile side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1040; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #242A44; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #FFF;
    /* display: block; */
    transition: 0.3s;
    font-family: Intro-Bold;
    text-transform: uppercase;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left .5s;
    padding: 20px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

/* hero box 1 styles */
.box-1-text {
    position: absolute;
    bottom: 30vh;
}

/* Hero box 2 styles */
.hero-box-2 {
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    color: #FF552E;
    height: 26vh;
}

.col-2.scroll-col {
    background-color: #96D4FF;
    color: #242A44;
}
.hero-box-2-row {
    height: 26vh;
}

div.scroll-content {
    transform: rotate(-90deg);
    text-transform: uppercase;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 50px;
}

.scroll-content a {
    color: #242A44;
}

div.scroll-arrow {
    margin-bottom: 10px;
}

.hero-box-2 h3 {
    font-size: 18px;
    font-family: Intro-Regular;
}

.hero-box-2 h2 {
    font-size: 24px;
    font-family: Intro-Black;
}

div.hero-text-col {
    border-bottom: solid 2px;
}


/* Why us styles */
.why-content-items {
    padding-bottom: 30px;
}
.why-content-items h4 {
    padding-bottom: 15px;
}
.seriously-orange {
    background-color: #FF552E;
    color: #fff;
}
.external-link {
    font-family: Intro-Bold;
}
.external-link img {
    padding-left: 4px;
}

/* what we offer styles */
.accordion-item, .accordion-button {
    background-color: #FF552E!important;
    border: none;
    border-bottom: 1px solid #fff;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: #fff;
}
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url('../img/HF-down-accordion.svg');
}
.accordion-button:not(.collapsed) {
    color: #fff;
}
h2.accordion-header button {
    color: #fff;
}

ul {
    list-style: none; /* Remove default bullets */
    font-size: 0.9rem;
    margin-bottom: 0rem;
  }
  
ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color:#96D4FF; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
    }
.offer-accordions {
    padding-bottom: 50px;
}
.accordion-button {
    color: #fff;
    font-size: inherit;
}

/* About us styles */

.our-story.col-12 {
    background-color: #F2F2F2;
    color: #242A44;
    padding-top: 50px;
    padding-bottom: 50px;
}
.your-advantage.col-12 {
    background-color: #242A44;
    color: #fff;
    padding-top: 50px;
    padding-bottom: 50px;
    background: url(../img/HF-part-logo.svg) right bottom no-repeat,  #242A44;
    background-size: auto 75%;
}
.about-us h4 {
    padding-bottom: 20px;
}

/* contact us styles */
.contact-us {
    padding-bottom: 50px;
}
.contact-us h1 {
    color: #FF552E;
}
.form-control {
    color: #fff;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
}
.form-control:focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    box-shadow: none;
}
.form-select {
    background-color: transparent;
    color: #fff;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
}
.form-select:focus {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    box-shadow: none;
}
textarea.form-control {
    min-height: 200px;
}
.g-recaptcha {
    margin: 10px auto;
}
.contact-heading {
    text-align: left;
}
span.contact-us::after {
    content: url(../img/HF-contact-stroke.svg);
    min-width: 200px;
    margin-left: 10px;
    /* border-bottom: 2px solid #FF552E; */
}
#contactUs span.contact-us {
    font-size: 14px;
    font-family: Intro-Regular;
    color: #FF552E;
}
#contactUs p.contact-sub {
    font-family: Intro-bold;
    font-size: 28px;
    color: #FF552E;
}

.btn.btn-primary.btn-lg {
    background-color: #FF552E;
    border-color: #FF552E;
    border-radius: 0px;
    margin-bottom: 30px;

}

iframe ._3t7mZz3weV._3MKqkxnEwi {
    background-color: #242A44;
}
/* footer styles start */
#footer .container-lg {
    padding-top: 50px;
    padding-bottom: 50px;
}

#footer h6 {
    font-family: Intro-Bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

#footer p {
    font-size: 0.75rem;
    color: #fff;
    margin-bottom: 0px;
}

.footer-menu a {
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 5px;
}

.footer-menu a:hover {
    color: #FF552E;
}

.follow-us {
    text-align: right;
}

.follow-us a {
    margin-bottom: 10px;
    display: block;
}
.follow-us img {
    height: 30px;
}
.follow-us img:hover {
    color: #FF552E;
}
div.scroll-top-content {
    transform: rotate(90deg);
    text-transform: uppercase;
    font-size: 12px;
    white-space: nowrap;
}
.scroll-top span {
    margin-left: 20px;
}
.scroll-top a {
    color: #242A44;
}

.legal a {
    color: #FFF;
    text-decoration: underline;
}
div.legal {
    margin-top: 20px;
}
/* Profile page styles start */
.will-pic {
    max-width: 100%;
}
.profile-header {
    margin-top: 30px;
}
.profile-header h4:last-of-type {
    margin-bottom: 0px;
}
.profile-content {
    margin-top: 30px;
    margin-bottom: 50px;
}
.profile-content ul {
    margin-bottom: 1rem;
}
nav.navbar.dark-nav {
    background-color: #242A44;
    color: #fff;
}
nav.dark-nav a {
    color: #fff;
}

/* Success page styles */
.contact-us.success {
    min-height: 100vh;
}
svg.tick {
    margin-bottom: 16px;
}
svg.success-home {
    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.success-btn-row {
    margin-top: 50px;
}

/* loading screen styles */
#page-content {
    display: none;
}

#loadingScreen {
    height: 100vh;
    width: 100vw;
    background-color: #96D4FF;
}

.loading-logo {
    width: 200px;
}

.loading-row {
    color: #FFF;
}

.logo-row {
    padding-top: 30vh;
    padding-bottom: 50px;
}

/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }



/* Medium devices (tablets, 768px and up) Desktop layout */
@media (min-width: 768px) { 
    /* hide mobile specific stuff */
    div.mobile-logo {
        display: none!important;
    }
    nav.mobile-nav {
        display: none!important;
    }
    /* desktop menu styles */
    .desktop-nav {
        background-color: #96D4FF;
    }
    a.desktop-logo {
        margin-right: 50px;
        margin-top: 20px;
    }
    a.nav-link {
        margin-right: 30px;
        margin-bottom: 40px;
    }
    div.chat-desktop {
        margin-bottom: 40px;
    }
    .nav-link.active, .nav-link:hover {
        border-bottom: 2px #FF552E solid;
    }
    /* desktop scroll */
    .desktop-scroll {
        position: absolute;
        bottom: 10px;
        right: 0px;
        z-index: 1;
    }
    .down-img {
        padding-right: 10px;
    }
    /* div.scroll-arrow {
        margin-right: 40px;
    } */


    /* hero box 1  */
    .box-1-text {
        margin-left: 150px;
        max-width: 690px;
    }
    .box-1-text h3 {
        font-size: 42px;
    }
    /* hero box 2 */
    .hero-box-2 h3 {
        font-size: 24px;
    }
    
    .hero-box-2 h2 {
        font-size: 42px;
    }
    div.hero-text-col {
        margin-right: 20px;
    }

    .section-heading {
        text-align: center;
        padding-top: 112px;
        padding-bottom: 90px;
    }
    .why-content {
        padding-bottom: 70px;
    }
    .offer-accordions {
        padding-bottom: 90px;
    }

    .about-us {
        padding: 50px 0px;
        background: linear-gradient(to right, #F2F2F2 50%, #242A44 50%);
    }
    .about-us h4 {
        padding-bottom: 40px;
    }
    .your-advantage.col-12 {
        background-color: transparent;
        background-image: none;
        /* color: #fff;
        padding-top: 50px;
        padding-bottom: 50px;
        background: url(../img/HF-part-logo.svg) right bottom no-repeat,  #242A44;
        background-size: auto 75%; */
    }
    .about-us {
        /* background: -webkit-linear-gradient(to right, #F2F2F2 50%, #242A44 50%); */
        background: url(../img/HF-part-logo.svg) right bottom no-repeat, linear-gradient(to right, #F2F2F2 50%, #242A44 50%);
        background-size: auto 75%, auto;
        /* background-image: url(../img/HF-part-logo.svg); */
        /* padding: 50px 0px; */
        /* background: linear-gradient(to right, #F2F2F2 50%, #242A44 50%); */
    }
    #contactUs span.contact-us {
        font-size: 18px;
    }
    #contactUs p.contact-sub {
        font-size: 48px;
    }

    .follow-us {
        text-align: left;
    }

    .follow-us a {
        margin-right: 15px;
        display: inline;
    }

    #footer .container-lg {
        padding-top: 100px;
        padding-bottom: 100px;
    }
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    a.desktop-logo {
        margin-right: 100px;
        margin-top: 20px;
    }
    a.nav-link {
        margin-right: 60px;
        margin-bottom: 40px;
    }
    div.chat-desktop {
        margin-bottom: 40px;
    }
    .box-1-text {
        margin-left: 200px;
        max-width: 690px;
    }
    .box-1-text h3 {
        font-size: 48px;
    }
    /* hero box 2 */
    .hero-box-2 h3 {
        font-size: 28px;
    }
    
    .hero-box-2 h2 {
        font-size: 48px;
    }

    .section-heading h1 {
        font-size: 3rem;
    }

    h4,
    .accordion-button  {
        font-size: 1.75rem;
    }
 }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }