:root {
   --bg-color: #F5F2ED;
   --last-section-bg: #00A0DA;
   --ext-btn-color: #EE3E31;
   --txt-color: #092742;
   --header-link-color: #092742;
   --footer-link-color: #F5F2ED;
   --footer-bg-color: #092742;
}

html, body {
   height: auto;
   font-family: 'Nunito';
}

body {
   background: var(--bg-color)
}

img {
   max-width: 100%;
}

.opacity-07 {
   opacity: 0.7;
}

.fdbck-header-holder {
   background: url(../img/htu-top-bg.jpg) center center no-repeat;
   background-size: cover;
}

.fdbc-img-holder {
   background: var(--bg-color);
}

.fdbck-card-holder-container .card-footer {
   background: transparent;
   border: none;
}

.fdbck-card-holder-container .card-footer .btn {
   background-color: var(--ext-btn-color);
   border: 1px solid var(--ext-btn-bg);
}

.fdbck-card-holder-container .card-footer .btn:hover {
   background-color: var(--ext-btn-color) !important;
   border: 1px solid var(--ext-btn-bg) !important;
   opacity: 0.8;
}


.navbar-light {
   background: var(--bg-color) !important;
}

.navbar-brand {
   max-height: 71px;
   padding: 10px 0 10px 0 !important;
}

header a.nav-link {
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   text-align: center;
   color: var(--header-link-color) !important;
}

header .nav-item {
   padding-right: 10px;
}

header a.nav-link:hover {
   opacity: 0.7;
}

header a.nav-link.active {
   font-weight: bold;
}

footer a.nav-link.active {
   font-weight: bold;
}

.nav-link.add-extension {
   background: var(--ext-btn-color);
   border-radius: 12px;
   padding-left: 25px !important; 
   padding-right: 25px !important;
   color: #FFFFFF !important;
}

#website-widget-container {
   height: 700px;
}

.install-extension,
.btn-install-extension {
   background: var(--ext-btn-color);
   border-radius: 12px;
   color: #FFFFFF;
   padding: 10px 35px;
   font-weight: bold;
}

.install-extension:hover,
.btn-install-extension:hover {
   color: #FFFFFF;
   opacity: 0.7;
   text-decoration: none;
}

.top-section {
   background: url(../img/top-bg.jpg) center center no-repeat;
   background-size: cover;
}

.middle-section {
   background: url(../img/background.png) center center no-repeat, var(--bg-color);
   background-size: 80%;
   min-height: 800px;
}


.middle-section .container {
   position: relative;
   z-index: 2;
}

.latest-section {
   background-color: var(--last-section-bg);
   padding: 65px 0;
}

.middle-section h4,
.latest-section h4 {
   font-style: normal;
   font-weight: 600;
   font-size: 20px;
   line-height: 104.3%;
   color: var(--footer-link-color);
}

.middle-section h4 {
   color: var(--txt-color);
}

.middle-section h3,
.latest-section h3 {
   font-style: normal;
   font-weight: 300;
   font-size: 28px;
   line-height: 104.3%;
   color: var(--txt-color);

}

.latest-section h5 {
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
   line-height: 104.3%;
   color: var(--txt-color);
}

.middle-section p,
.latest-section p {
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 24px;
   color: var(--txt-color);
   opacity: 0.75;
}

.latest-section .item-card {
   background: var(--bg-color);
   box-shadow: 0px 0px 20px -3px rgba(5, 18, 24, 0.25);
   border-radius: 12px;
   padding: 15px;
}

.latest-section .item-card img {
   margin-right: -30px;
   margin-top: -12px;
}

footer {
   background: var(--footer-bg-color);
   box-shadow: none;
   border: none;
}

footer a.nav-link {
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
   text-align: center;
   text-transform: uppercase;
   color: #FFFFFF;
}

footer a.nav-link:hover {
   color: var(--footer-link-color) !important;
}

main {
   position: relative;
}

.container-fluid.middle-section {
   position: relative;
   z-index: 2;
}

.how-to-use-header {
    background: url(../img/htu-top-bg.jpg) center center no-repeat;
    background-size: cover;
    color: var(--footer-link-color);
}

.pt-6 {
   padding-top: 4rem !important;
}


.how-to-use h4 {
   font-style: normal;
   font-weight: 600;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
   color: var(--bg-color);
}

.how-to-use p {
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   line-height: 22px;
   text-align: center;
   color: var(--txt-color);
   opacity: 0.75;
   text-align: justify;
}

.lega-page-header {
   min-height: 150px;
   background: url(../img/htu-top-bg.jpg) center center no-repeat;
   background-size: cover;
   color: var(--footer-link-color);
}

.error-view,
.contact-view,
.ccpa-container,
.legal-container,
.exit-survey-view,
.requirements-view,
.how-to-use-container {
   color: var(--txt-color);
   min-height: calc(100vh - 130px);
   text-align: justify;
}

.how-to-use-container {
   min-height: 300px;
   background: var(--bg-color);
}

.htu-section-2 {
   background:  var(--bg-color) !important;
}

.htu-section-3 {
   background: var(--footer-link-color) !important;
}

.legal-container h1 {
   color: var(--bg-color);
}

.legal-container a {
   color: var(--txt-color) !important;
}

.legal-container a:hover {
   color: var(--txt-color) !important;
   opacity: 0.7;
}

.static-view, .contact-view{
   padding: 0 65px;
}

.right-side-home-page {
   position: absolute;
   right: 0;
   top: 0;
}

.right-side-home-page {
   z-index: 2;
   pointer-events: none;
}

.how-to-use-container h1 {
   font-style: normal;
   font-weight: 400;
   font-size: 42px;
   line-height: 63px;
   text-align: center;
   color: var(--bg-color);
}

.how-to-use-container h6 {
   font-style: normal;
   font-weight: normal;
   font-size: 18px;
   line-height: 27px;
   text-align: center;
   color: var(--txt-color);
}

.how-to-explain {
   font-weight: 300 !important;
   font-size: 28px !important;
   color: var(--txt-color) !important;

}

.how-to-use-container h2 {
   font-style: normal;
   font-weight: bold;
   font-size: 20px;
   line-height: 104.3%;
   text-align: center;
}

.how-to-use-container p {
   font-size: 18px;
}

footer .nav-link {
   display: block;
   padding: .5rem .5rem;
}

.footer-bar {
   padding-top: 25px;
}

.modal-body {
   min-height: auto;
}

/** scroller */

::-webkit-scrollbar {
   width: 7px;
}

::-webkit-scrollbar-track {
   background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
   background: var(--footer-bg-color);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--header-link-color);
}

@media (min-width: 992px) and (max-width: 1210px) {
   nav.navbar {
      display: block;
   }
   
   .navbar-brand {
      text-align: center;
      margin: auto;
      display: block;
   }
}

@media (min-width: 1200px) and (max-width: 1374px) {
   .footer-bar {
      display: block;
   }
   
   footer .footer-brand, footer .navbar-items {
      text-align: center;
      margin: auto;
      display: block;
   }
}