/**
* Theme Name: Dev Cert
* Description: Theme for Developer Certificates Organization
* Author: <a href="https://devcert.org">DevCert.Org</a>
* Template: inspiro
* Version: 1.0.1
*/
:root {
    --color-main: #fb8713;
    --color-white: #ffffff;
    --color-light2: #787878;
    --color-dark: #181818;
    --color-line: #787878;
    --color-light: #c8c8c8;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;/* Ensure the full height of the viewport is used */
}
body, button, input, select, textarea, .sb-search .sb-search-input {
font-family: 'Inter', sans-serif;
font-weight: 400;
letter-spacing: normal;
}
.page-wrapper, .site-content-contain {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}
#content {
    flex: 1; /* Makes this section take up remaining space */
}

h1, h2, h3, h4, h5, h6, h1.entry-title, .page h1.entry-title, h1.page-title, .entry-header .entry-title {
  font-family: "Baumans", "Times New Roman";
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  margin-top: 0;
  line-height: 1;
}


.title-tagline-hidden.has-header-image .custom-logo-link img, .title-tagline-hidden.has-header-video .custom-logo-link img {
    max-height: 60px !important;
    max-width: 100%;
}

.custom-logo-link img {
    display: inline-block;
    max-height: 60px;
    width: auto;
}

body.wp-custom-logo .headroom--not-top .custom-logo-link img {
    transition: all .2s ease-in-out;
    max-height: 40px;
    width: auto;
}

.navbar-nav>li>ul:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-bottom: 8px solid var(--color-light2);
}

input[type=phone], input[type=email], input[type=text], input[type=password], textarea {
    box-sizing: border-box;
    display: block;
    margin-bottom: 15px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #787878;
    background-color: #f5f5f5;
    border-bottom: 1px solid #181818;
}

input[type=submit] {
    box-sizing: border-box;
    display: block;
    margin-bottom: 15px;
    border: 1px solid #787878;
}

input[type=submit]:disabled,
input[type=submit][disabled]{
  border: 1px solid #c8c8c8;
  background-color: #cccccc;
  color: #898989;
}

.page-title, .page .entry-title, .page h1.entry-title {
    font-size: 4rem;
    /*text-transform: capitalize !important;*/
    letter-spacing: -0.1rem;
    margin-top: 2rem;
    line-height: 1;
}

.page .entry-content,
.page:not(.inspiro-front-page) .entry-footer {
    margin: 0 auto 2.8125em;
    max-width: 1200px;
    padding-left: 1.875em;
    padding-right: 1.875em;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin-bottom: 40px;
    line-height: 1.3;
    font-weight: 300;
}
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin-bottom: 0;
}

.entry-content>.wp-block-columns, .entry-content>.wp-block-cover, .entry-content>.wp-block-group {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 0;
    padding-left: 0;
}


.quiz-navigation {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

body:not(.has-archive-description):not(.has-header-image) .page-title:after, 
body:not(.has-archive-description):not(.has-header-image).page .entry-title:after {
    content: "";
    display: block;
    width: 130px;
    height: 1px;
    background: #e6e6e6;
    /*margin: 40px auto 48px;*/
    margin: 0 auto;
}

.navbar-nav .menu-item-has-children .svg-icon {
    margin-left: .25em;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: text-top;
    fill: var(--color-light);
}

/* edd button */
.edd-submit.button, .edd-submit.button.gray, .edd-submit.button:visited {
    color: #f0f0f0;
    background: #282828;
    border-color: #585858;
}

.main-button-dark, a.main-button-dark {
    color: #181818;
    border-color: #181818;
    font-family: "Baumans", "Times New Roman";
    text-decoration: none;
}
.main-button-dark:hover, a.main-button-dark:hover {
    color: #f8f8f8;
    background-color: #383838;
    border-color: #181818;
    
}

.spectra-image-gallery__media-thumbnail-caption.spectra-image-gallery__media-thumbnail-caption--bar-outside {
    line-height: 1;
}


/* Sleek scrollbars */
/* Apply to the entire page */
html {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #cccccc transparent; /* Track and thumb colors for Firefox */
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px; /* Width for vertical scrollbars */
  height: 8px; /* Height for horizontal scrollbars */
}

::-webkit-scrollbar-thumb {
  background: #999999; /* Thumb color */
  border-radius: 4px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: #666666; /* Darker thumb on hover */
}

::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}
/* optional addon 
Add Transparency, a glass-like effect
*/
::-webkit-scrollbar-thumb {
  background: rgba(153, 153, 153, 0.7); /* Semi-transparent thumb */
}
/* auto hide */
html {
  overflow: overlay;
}
::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.full-wh-carousel {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    z-index: 999;
}

.uagb-slider-container.full-hv {
    position: absolute; /* Make it independent from parent layout */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    z-index: 5; /* Push it behind all normal content */
    overflow: hidden; /* Prevent scroll issues */
    background: grey; /* Ensure a background if needed */
    color: #ffffff !important;
    opacity: 1;
}


@media (max-width: 64.0625em) {
    .page h1, .page h2, .page-title, .page .entry-title, .page h1.entry-title {
        font-size: 3rem;
        /* text-transform: capitalize !important; */
        letter-spacing: -0.1rem;
        margin-top: 2rem;
        line-height: 1;
    }
    .page h1.entry-title, h1.entry-title, h1.page-title {
        font-size: 2rem;
    }
    .page h2, .page h3, .page h4, .page h5, .page h6 {
        margin: 0 0 1rem;
    }
    .page h2 {
        font-size: 1.6rem;
    }
    .page h3 {
        font-size: 1.2rem;
    }  
    .page h4 {
        font-size: 1.0rem;
    }  
    .entry-content p {
        line-height: 1.4;
    }
    
}

@media (min-width: 64.0625em) {
    .navbar-nav ul {
        left: 50%;
        width: 220px;
        margin-top: 15px;
        padding: 10px 0 20px;
        border: 1px solid var(--color-dark);
        border-top: 1px solid var(--color-light2);
        background-color: var(--color-dark) !important;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3), 
                      0 4px 6px rgba(0, 0, 0, 0.25);
         transition: transform 0.3s, box-shadow 0.3s;
    }
    .navbar-nav ul:hover {
      /*transform: translateY(-1px);*/
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.35), 
                  0 8px 10px rgba(0, 0, 0, 0.30);
    }

    .navbar-nav ul a {
        color: var(--color-white) !important;
        padding: 8px 15px;
        border-bottom: none;
        line-height: 1;
    }
    .navbar-nav ul li.current-menu-item a, .navbar-nav ul li.current-menu-parent a, .navbar-nav ul li.current_page_item a {
        border-bottom: none;
        color: var(--color-white) !important;
        line-height: 1;
    }
       .navbar-nav ul a:hover, .navbar-nav ul a:active {
        background-color: #585858;
    }
}