/* ================================
   Base HTML & Body
================================ */
html,
body {
    height: 100%;    /* Fill entire window height */
    margin: 0;       /* Reset default margin */
    padding: 0;      /* Reset default padding */
    font-size: clamp(16px, 2vw, 18px);
    background: var(--bs-body-bg);
    box-sizing: border-box;
}

/* body as a flex container */
body {
    display: flex;
    flex-direction: column;
    background: rgb(255, 255, 255);
    font-family: 'Truculenta', sans-serif; /* fallback if Truculenta doesn't load */
}

/* .section (main content) grows to fill remaining space */
.section {
    flex: 1;
}

/* --------------------------------
   HEADINGS & TEXT
---------------------------------- */
/* For .col-lg-6 .p-5 p, but there's no "p-5" in your snippet
   If needed, adapt for p inside .col-lg-6. */
.col-lg-6 .p-5 p {
    font-size: 1.25rem;
}

.masthead-heading {
    font-size: 4rem;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
    color: #fff; /* ensure white text */
}

/* Masthead subheading override */
.masthead h2.masthead-subheading {
    font-size: 2rem; /* Adjust as needed */
}

/* Bubble-class headings if used anywhere. */
.bubble-class h3.bubble-header {
    font-size: 1.2rem; 
}

/* --------------------------------
   BUTTONS & LAYOUT
---------------------------------- */
/* Button container for .btn-equal usage */
.btn-equal {
    display: inline-block;
    width: 100%;
    max-width: 400px; /* Set max width on large screens */
}

.btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-container a {
    margin-right: 0; /* Remove margin for smaller screens */
}

/* --------------------------------
   NAVBAR 
---------------------------------- */
/* Removing inline style from nav background */
/* Navbar Background */
.navbar {
    position: sticky;     /* or .sticky-top in the HTML */
    top: 0;
    z-index: 9999 !important; /* Force it above other elements */
  }
  
  .navbar-bg {
    background-color: #fff !important; 
  }
  

/* Logo Icon */
.logo-icon {
    background: url('/assets/img/dearhire_logo1.webp') center / contain;
    width: 40px;
    height: 40px;
}

/* Transparent Logo Button */
.btn-logo {
    background: transparent;
    border-style: none;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 2rem;
    font-weight: bold;
    color: rgb(48, 163, 166);
}

/* Login / Register Button */
.btn-login-register {
    background: #258b8d;
    border-style: none;
    font-size: 1.25rem;
}

/* Span text color for "DearHire" */
.dearhire-text {
    color: rgb(48, 163, 166);
    font-family: 'Truculenta', sans-serif;
}

/* --------------------------------
   MASTHEAD / HEADER
---------------------------------- */
/* Masthead container background & positioning 
   (previously style="background: url(...) center/cover; position: relative;") */
.masthead {
    background: url('/assets/img/new_banner1.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    text-align: center; 
    color: #fff; 
}

/* Dark overlay on the masthead */
.masthead .overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 0;
}

/* Masthead content sits on top of the overlay */
.masthead-content {
    position: relative; 
    z-index: 1;
}

/* Title text style & drop shadow */
.masthead-heading {
    font-size: 4rem;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
    color: #fff;
    margin-bottom: 0;
}

/* Circle backgrounds if used 
   .bg-circle-n classes left untouched or define them here
*/

/* --------------------------------
   PRICING SECTION
---------------------------------- */
/* Replacing inline style="padding: 50px 0;" */
.pricing-section {
    padding: 50px 0;
}

/* Left column border & spacing 
   (was style="border-right: 2px solid #30a3a6; padding-right: 30px;") */
.pricing-col-candidates {
    border-right: 2px solid #30a3a6;
    padding-right: 30px;
}

/* Right column spacing 
   (was style="padding-left: 30px;") */
.pricing-col-employers {
    padding-left: 30px;
}

/* Common style for the subheadings 
   (was inline style color: #30a3a6; font-family: 'Georgia', serif; text-align: center...) */
.pricing-subhead {
    color: #30a3a6;
    font-family: 'Georgia', serif;
    text-align: center;
    margin-bottom: 40px;
}

/* Common style for paragraphs in pricing section 
   (was style="font-family: 'Georgia', serif; font-size: 1.3rem; margin-top: 40px;") */
.pricing-paragraph {
    font-family: 'Georgia', serif;
    font-size: 1.3rem;
    margin-top: 40px;
}

/* Lists in pricing section 
   (was style="font-family: 'Georgia', serif; font-size: 1.3rem; margin-top: 40px;") */
.pricing-list {
    font-family: 'Georgia', serif;
    font-size: 1.3rem;
    margin-top: 40px;
}

/* --------------------------------
   CALL-TO-ACTION SECTION
---------------------------------- */
/* (was style="background-color: #30a3a6; ...") */
.call-to-action {
    background-color: #30a3a6;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    position: relative; 
    text-align: center;
    color: white;
    padding: 30px 0; /* optional if needed */
}

/* overlay in the call-to-action if needed 
   (the snippet had an empty .overlay inside .call-to-action)
*/
.call-to-action .overlay {
    /* define if needed; snippet shows <div class="overlay"></div> with no style */
}

/* CTA heading (was style="font-size: 2rem; font-weight: 700;") */
.call-to-action h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem; /* example spacing */
}

/* CTA big button */
.call-to-action .btn.btn-primary.btn-lg {
    background-color: #30a3a6; 
    border-color: #30a3a6; 
    font-size: 1.67rem; 
}

/* ================================
   Footer Styles
================================ */
.footer-link {
    color: #30a3a6;
    font-family: 'Truculenta';
}

.footer-social-icon {
    color: #30a3a6;
}

/* -----------------------------------
   OVERRIDE: Navbar Brand Hover
----------------------------------- */
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* -----------------------------------
   OVERRIDE: Logo Button Hover
----------------------------------- */
.btn-logo:hover,
.btn-logo:focus,
.btn-logo:active {
    background-color: transparent !important;
    color: rgb(48, 163, 166) !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* -----------------------------------
   OVERRIDE: .btn-primary + .btn-transparent
----------------------------------- */
.btn.btn-primary.btn-transparent:hover,
.btn.btn-primary.btn-transparent:focus,
.btn.btn-primary.btn-transparent:active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: rgb(48, 163, 166) !important;
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #a0674b !important;
    border-color: #a0674b !important;
    color: #fff !important;
}

/* -----------------------------------
   OVERRIDE: Default Link Color 
----------------------------------- */
a {
    color: #30a3a6;
    text-decoration: none; /* optional if you want to remove underlines */
}

/* Media Query for devices with max-width of 768px (common breakpoint for tablets and below) */
@media (max-width: 768px) {
    .masthead-heading  {
        text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
        color: #fff;
        font-size: 2.5rem !important; 
    }
    /* Adjusting subheadings in the pricing section */
    .pricing-subhead {
        font-size: 1.5rem; /* Smaller than desktop but still prominent */
    }

    /* Adjusting paragraphs in the pricing section */
    .pricing-paragraph, .cta-paragraph {
        font-size: 0.9rem; /* Smaller font size for better readability on mobile */
    }

    /* Adjusting list items in the pricing section */
    .pricing-list li {
        font-size: 0.9rem; /* Ensuring list items are not too large */
    }

    /* Adjusting the call-to-action heading */
    .call-to-action h2 {
        font-size: 1.75rem; /* Smaller for better fit on mobile screens */
    }

    /* Adjusting button text sizes in the call-to-action */
    .call-to-action .btn.btn-primary.btn-lg {
        font-size: 1.25rem; /* Smaller buttons with smaller text */
    }

    .custom-margin-top-small-screen{
        margin-top: 50px;
    }

}