/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Main container */
.case-study-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0;
}

/* Each card */
.case-card {
    background: #fff;
    border: 1px solid #d6e4f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    flex: 1 1 30%;
    min-width: 280px;
    max-width: 340px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.case-card:hover {
    transform: translateY(-4px);
    border-color: #0073e6;
}

/* Icon styling */
.case-card img,
.case-card svg {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* Text content */
.case-card h3 {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: #0b2e4e;
}

.case-card p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
    margin: 0;
}

/* Mobile view — stack vertically */
@media (max-width: 768px) {
    .case-study-row {
        flex-direction: column;
        align-items: stretch;
    }

    .case-card {
        flex-direction: row;
        max-width: 100%;
    }
}

/* Contact Line Style */
.contact-line {
    padding: 10px 0;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

/* Text styling */
.contact-line p {
    margin: 0;
    font-size: 1.125rem;
    color: #2C3A4C;
}

/* Bold intro text */
.contact-line strong {
    color: #2C3A4C;
    font-size: 1.125rem;
    font-weight: 600;
    margin-right: 5px !important
}

/* Link styling */
.contact-line a {
    color: red;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-block-start: 0rem !important;
}

@media (max-width: 768px) {
    .contact-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .contact-line p {
        font-size: 1rem;
    }
}

/* Desktop flow */
.process-flow {
    display: flex;
    justify-content: felx-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
}

.process-flow .step {
    background: #f5fbff;
    border: 2px solid #2a3440;
    border-radius: 6px;
    padding: 18px 42px;
    color: #2C3A4C;
    font-weight: 400;
    font-size: 1rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.process-flow .step.active {
    background: #2a3440;
    color: #fff;
}

/* Arrow image */
.process-flow .arrow {
    width: 24px;
    height: auto;
    vertical-align: middle;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

/* Mobile version */
@media (max-width: 768px) {
    .process-flow {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .process-flow .step {
        width: 78%;
        padding: 12px 42px;
    }

    .process-flow .arrow {
        transform: rotate(90deg);
        /* makes arrow point down */
        margin: 0.1rem 0;
    }
}



.ol-list-type-circle-number li::marker {
    color: white;
}


.ol-list-type-circle-number li {
    position: relative
}

.ol-list-type-circle-number li:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: #2C3A4C;
    border-radius: 50%;
    color: white;
    z-index: -1;
    top: 15px;
    left: -27px;
    position: absolute;

}

/* how to apply screen css */
.info-card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    justify-items: start;
    align-items: start;
    width: 93%;

}

.info-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e1e7ef;
    padding: 6px 16px;
    min-height: 60px;
    width: 87% !important;
}


.info-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.info-card span {
    font-size: 14px;
    font-weight: 600;
    color: #2C3A4C;
    line-height: 1;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .info-card-container {
        grid-template-columns: repeat(2, 1fr);
        width: 100%
    }

    .info-card {
        min-height: 60px;
        width: 89% !important;
        padding: 6px 14px;
    }
}




/* HEADER STYLES */
p.primary_link a {
    color: #E9473F
}

.wp-block-cover {
    margin-block-start: 0
}



.header-email-icon {}

.header-login-buttons {
    gap: 0
}

.login-button a {
    background-color: white;
    color: #2C3A4C;
    background-image: url(assets/icons/login_icon.svg);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding-left: 40px
}

span.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
}

span.email-icon {
    background: url(assets/icons/contact_icon.svg) no-repeat;
}

span.search-icon {
    background: url(assets/icons/search_icon.svg) no-repeat;
}

span.linkedin-icon {
    background: url(assets/icons/linkedin_icon.svg) no-repeat;
}

/* HEADER STYLES */


/* how to apply dropdown / selection list */
.process-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.process-left {
    flex: 1;
    max-width: 22%;
    padding-top: 8rem;
}

.process-menu {
    list-style: none;
    margin: 0;
    padding: 0;

}

.process-menu li {
    padding: 12px 16px;
    border-left: 4px solid transparent;
    cursor: pointer;
    color: #2C3A4C;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 15px;
}

.process-menu li span {
    color: #2C3A4C;
    font-weight: 400;
    font-size: 16px
}

.process-menu li.active {
    border-bottom: 1px solid #D8D8D8;
    background: #EEF8FF;
    font-weight: 600;
    font-size: 15px;
}

.process-menu li.active span {
    color: #2C3A4C;
    font-weight: 600;
    font-size: 18px;
}

.process-content {
    flex: 3;
}

.step-content {
    display: none;
}

.step-content.active {
    display: block;
    width: 85%;
    color: #2C3A4C;
}

.step-content h1,
.step-content h2,
.step-content p,
.step-content ul,
.step-content ul li {
    color: #2c3a4c !important;
}

/* --- Custom styled dropdown --- */
.process-dropdown {
    position: relative;
    width: 100%;
    background: #eaf4ff;
    border-radius: 2px;
    padding: 12px 16px;
    cursor: pointer;
    display: none;
    /* hidden on desktop */
    justify-content: center;
}

.dropdown-selected {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px 5px;
}

.dropdown-step {
    font-weight: 700;
    font-size: 18px;
    color: #2C3A4C;
}

.dropdown-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #2C3A4C;
    margin-top: 4px;
}

.dropdown-arrow {
    position: absolute;
    right: 10px;
    margin-top: 5%;
    height: 10px;
    align-self: center;
    justify-content: center;
}

/* Dropdown options (hidden initially) */
.dropdown-options {
    display: none;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    z-index: 99;
    padding-inline-start: 0px !important;
}

.dropdown-options li {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #2C3A4C;
}

.dropdown-options li:hover {
    background: #f0f7ff;
}

/* Active option highlight */
.dropdown-options li.active {
    background: #eaf4ff;
    font-weight: 700 !important;
    color: #2C3A4C !important;
    font-size: 18px;
}

/* Responsive - Mobile View */
@media (max-width: 768px) {
    .process-container {
        flex-direction: column;
    }

    .process-left {
        width: 100% !important;
        max-width: 90% !important;
        padding-top: 1rem;
        padding: 8px 16px 8px 0px;
    }

    .process-menu {
        display: none;
    }

    .process-dropdown {
        display: block;
    }

    .process-content {
        margin-top: 20px;
    }

}

/* Equal height cards styling */
.equal-height-cards .wp-block-column {
    display: flex;
    flex-direction: column;
}

/* Apply equal height to inner cards */
.equal-height-cards .wp-block-column>.wp-block-columns>.wp-block-column {
    background-color: #EEF8FF;
    /* your light blue background */
    padding: 20px;
    height: 285px;
    /* Desktop fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Ensure paragraphs and buttons fit nicely */
.equal-height-cards p {
    margin-bottom: 10px;
}

/* Make button fixed at bottom if needed */
.equal-height-cards .wp-block-button {
    margin-top: auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .equal-height-cards .wp-block-column>.wp-block-columns>.wp-block-column {
        height: 266px;
        /* Mobile fixed height */
    }
}


#wpcf7-f549-p17-o1 input,
.developer-search input {
    background: transparent;
    border: 1px solid white;
    padding: 0.8rem;
    color: white;
    display: block
}

.developer-search input {
    border: 2px solid #2C3A4C;
    width: 100%;
    color: #838C97;
    padding: 1.2rem 1rem 1.2rem 3.4rem;
    background-image: url(assets/icons/search-icon-dark.svg);
    background-repeat: no-repeat;
    background-position: 0.8rem 50%;
	font-size: 1.2rem;
	background-size: 34px
}

.right-arrow-button a {
	padding-right: 100px;
	position:relative;

}
.right-arrow-button a:after{
	content: "";
	display: block;
	position:absolute;
	    background-image: url(assets/icons/arrow_icon.svg);
	    background-repeat: no-repeat;
	    background-position: 90% 50%;
	padding-right: 100px;
	height: 30px;
	right:0;
	top: 50%;
	margin-top: -15px

}

.mt-0 {
	margin-block-start: 0
}


/* FAQ Screen Css change*/
.faq-wrapper {
  margin-top: 2rem;
  font-family: 'Inter', sans-serif;
  color: #222;
}

/* Top section layout */
.faq-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* Allows stacking on mobile */
  gap: 10px;
  margin-bottom: 20px;
}

/* Tabs */
.faq-tabs {
  display: flex;
  gap: 10px;
  background-color: #2C3A4C;
  padding: 5px;
}
.faq-tab {
  padding: 10px 48px;
  background: #2C3A4C;
  border: none;
  border-radius: 2px;
	font-family: 'Inter' !important;
  font-weight: 500;
	font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #CBCFD3;
}
.faq-tab.active {
  background: #E9473F;
  color: #fff;
	font-weight: 700;
	font-size: 20px;
}

/* Search */
.faq-search {
  flex: 1;
  display: flex;
  justify-content: flex-end;
	
}
.faq-search input {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border-radius: 2px;
  border: 1px solid #2C3A4C;
  font-size: 16px;
}

/* Categories */
.faq-category {
  font-size: 22px;
  font-weight: 600;
  margin: 20px 0 10px;
  padding-left: 10px;
	color: #2C3A4C;
}

/* Accordion items */
.faq-item {
	background-color: #EEF8FF;
  padding: 23px 26px;
	margin-bottom: 24px;
}
.faq-question {
  font-family: 'Inter';
	font-size: 18px;
	font-weight: 600;
  color: #2C3A4C;
  cursor: pointer;
  position: relative;
  padding-right: 20px;
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  transition: 0.3s;
}
.faq-item.active{
	border: 1px solid #2c3a4c;
}
.faq-item.active .faq-question::after {
  content: '-'; 
	
}
.faq-answer {
  display: none;
  padding-top: 8px;
  font-family: 'Inter';
	font-size: 16px;
	font-weight: 400;
  color: #2C3A4C;
  line-height: 1.6;
}
.faq-item.active .faq-answer {
  display: block;
}

/* Hide inactive group */
.faq-group {
  display: none;
}
.faq-group.active {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-top {
    flex-direction: column;
    align-items: stretch;
  }
	.faq-search {
		margin-top: 1rem;
	}
	.faq-tab {
		padding: 10px 35px;
		font-size: 18px;
	}
	.faq-tab.active{
		font-size: 18px;
	}
  .faq-search {
    justify-content: flex-start;
  }
  
}

/*why joi section css for mobile view*/
/* Target only the Why Join section */
.why-join-section {
  text-align: center;
}

/* Desktop remains as is */
.why-join-section .wp-block-columns.is-layout-flex {
  justify-content: space-between;
}

/* --- Mobile view tweaks --- */
@media (max-width: 768px) {
  /* Make 2 cards per row */
  .why-join-section .wp-block-columns .is-layout-flex {
    flex-wrap: wrap !important;
    justify-content: center;
  }

  .why-join-section .wp-block-column {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    margin-bottom: 20px;
  }

  /* Reduce icon/image size */
  .why-join-section .wp-block-column img {
    width: 50px !important;
    height: 50px !important;
  }

  /* Title font size smaller */
  .why-join-section .wp-block-column h3,
  .why-join-section .wp-block-column h4 {
    font-size: 16px !important;
    line-height: 1.3em !important;
  }

  /* Description font size smaller */
  .why-join-section .wp-block-column p {
    font-size: 14px !important;
    line-height: 1.5em !important;
  }
}

/* Optional: stack 1 column per row below 480px */
@media (max-width: 480px) {
  .why-join-section .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .why-join-section .wp-block-column img {
    width: 45px !important;
    height: 45px !important;
  }

  .why-join-section .wp-block-column h3,
  .why-join-section .wp-block-column h4 {
    font-size: 15px !important;
  }
}




@media (max-width: 768px) {
	.nhqb-logo {
		width: 60px
	}
	
}

/* Make the first-level submenu a full-width panel */
.wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 100vw;           /* stretch across */
  left: 50%;
  transform: translateX(-50%);/* center under header */
  padding: 24px 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #1b2a36;        /* your header shade */
}

/* Turn submenu list into a 3-column grid */
.wp-block-navigation .wp-block-navigation__submenu-container > ul {
  display: grid !important;
  grid-template-columns: 1.2fr 1.2fr 1.6fr; /* info | resources | FAQ */
  gap: 16px 32px;
}

/* Column headings (use “Label” links as headings) */
.wp-block-navigation__submenu-container > ul > li > a {
  font-weight: 700;
  color: #fff;
}
.wp-block-navigation__submenu-container > ul > li ul a {
  font-weight: 500;
  color: #cfe0f0;
}
.wp-block-navigation__submenu-container a:hover { color: #fff; }

/* Thin dividers in the FAQ column */
.wp-block-navigation__submenu-container .has-divider a {
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 10px 0;
}

/* Keep dropdown aligned under the header */
.wp-block-navigation__submenu-container {
  position: fixed;            /* pins to viewport like your design */
  top: var(--site-header-bottom, 72px);
  right: 0; left: 0;
}

/* Show on hover/focus */
.wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.wp-block-navigation__submenu-container { 
  opacity: 0; visibility: hidden; pointer-events: none; transition: .15s;
}

/* Optional: backdrop under panel */
.site-has-mega-open::before {
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:2;
}

header #modal-1  {
	background: #2C3A4C
}