/* Custom Navbar Styling */
.navbar-custom {
    background-color: #0A4864 !important;
}

.navbar-custom .navbar-brand {
    color: #7FC2E2 !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 19px;
}

.navbar-custom .nav-link {
    color: #7FC2E2 !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 19px;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover {
    color: #fff !important;
}

.navbar-custom .nav-link.active {
    color: #fff !important;
}

.phone-number {
    color: #fff !important;
    font-family: "Fjalla One", sans-serif;
    letter-spacing: .200em;
    font-size: 1.556rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-left: 20px;
    height: 100%;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.phone-number:hover {
    color: #fff !important;
}

.navbar-custom .dropdown-menu {
    background-color: #0A4864;
}

.navbar-custom .dropdown-menu .dropdown-item {
    color: #7FC2E2;
    font-family: "Noto Sans", sans-serif;
    font-size: 19px;
    transition: color 0.3s ease;
}

.navbar-custom .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #7FC2E2;
}

/* Mobile Phone Number Styling */
@media (max-width: 768px) {
    .phone-number {
        font-family: "Fjalla One", sans-serif !important;
        font-size: 26.452px !important;
        color: #fff !important;
        font-weight: 700;
    }
}

/* Section Mainstage Styling */
.section_mainstage {
    background-color: rgb(0, 83, 117);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

.section_mainstage {
    background: url("../images/mainstage-v9-bg.jpg") center / cover no-repeat;
}


.over-item {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;
    width: 601.6px;
}

.highlight-font {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    font-family: "Fjalla One", sans-serif;
    font-size: 65.2799px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 71.8px;
    text-align: left;
    text-transform: none;
}

.title-style-5 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 18.7px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 26.1833px;
    margin-bottom: 20.4px;
    margin-top: 20px;
    text-align: left;
    text-transform: none;
}

.section_mainstage_button {
    color: #FFFFFF;
    background-color: #842F3F;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: "Fjalla One", sans-serif;
    font-size: 20.4px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 24.4833px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    cursor: pointer;
    text-decoration: none;
}

.section_mainstage_button:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}


/** section panel-group v5 **/
.panel-group-header {
    font-family: "Fjalla One", sans-serif;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 44px;
    color: rgb(132, 47, 63);
    margin-bottom: 20px;
}

.panel-group {
    background: url("../images/panel-group-v1-bg.jpg") center / cover no-repeat;
}

.bigbox {
    background-color: rgb(0, 83, 117);
    padding: 45px;
    /* so text isn’t stuck to edges */
    color: white;
    /* optional: text readable */
    box-shadow: rgba(0, 0, 0, 0.33) 11.9px 11.9px 20.4px 0px;
}

.title-style-1 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: block;
    font-family: "Fjalla One", sans-serif;
    font-size: 40.5279px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 44.5833px;
    text-align: center;
    text-transform: none;
}

.message-style-1 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;
    text-align: center;
    margin-top: 15px;
}

.practice_area_link {
    box-sizing: border-box;
    color: rgb(127, 194, 226);
    cursor: pointer;
    font-family: "Fjalla One", sans-serif;
    font-size: 20px;
    line-height: 30.6px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    position: relative;
    text-decoration-color: rgb(127, 194, 226);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: color;
    transition-timing-function: ease;
    margin-bottom: 30px;
}

.practice_area_link:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.service-image {
    background: url("../images/services-parent-v1-bg.jpg") center / cover no-repeat;
}

.staff_sub_heading {
    box-sizing: border-box;
    color: rgb(217, 217, 217);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 32.1129px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 38.5333px;
    margin-bottom: 0px;
    margin-top: 8.02823px;
    text-align: center;
    text-transform: none;
}

.staff_name {
    box-sizing: border-box;
    color: rgb(0, 66, 92);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 28.3389px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 39.6667px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    text-align: center;
    text-transform: none;
}

#SSAccordionV1 .accordion-button {
    cursor: pointer;
    display: block;
    font-family: "Noto Sans", sans-serif;
    
    font-size: 27.1999px; 
    line-height: 48.9667px; 
    
    background-color: #1781ae;
    /* your base bg */
    color: #fff;
    border-bottom: 1px solid #0a4864;
}

#SSAccordionV1 .accordion-body p {
    font-family: "Noto Sans", sans-serif;
    font-size: 19px;
    line-height: 30.6px;

    background-color: #0a4864;
    /* your existing answer bg */
    color: #fff;
    box-shadow: 0.7em 0.7em 1.2em rgba(0, 0, 0, 0.33);
}

#SSAccordionV1 .title-style-3 .letter {
    font-size: 19px;
}

/* Default question background */
#SSAccordionV1 .accordion-button {
    background-color: #1781ae;
    color: #fff;
    border-bottom: 1px solid #fff;
    /* or change color if needed */
}

/* Hover on question */
#SSAccordionV1 .accordion-button:hover {
    background-color: #842f3f;
    color: #fff;
    /* optional but recommended */
}

/* When question is open (active) */
#SSAccordionV1 .accordion-button:not(.collapsed) {
    background-color: #842f3f;
    color: #fff;
    box-shadow: none;
    /* remove Bootstrap blue glow */
}

/* Answer background */
#SSAccordionV1 .accordion-body {
    background-color: #0a4864;
    color: #fff;
    box-shadow: 0.7em 0.7em 1.2em rgba(0, 0, 0, 0.33);
}

/* Optional: remove Bootstrap arrow background */
#SSAccordionV1 .accordion-button::after {
    filter: invert(1);
    /* keeps arrow visible on dark bg */
}

/* Remove blue focus ring & glow */
#SSAccordionV1 .accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Also remove when active */
#SSAccordionV1 .accordion-button:active {
    box-shadow: none !important;
}

#SSAccordionV1 {

    background-color: #1781ae;
    color: #FFFFFF;

}

.faq_subtitle {
    box-sizing: border-box;
    color: rgb(217, 217, 217);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 32.1129px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 38.5333px;
    margin-bottom: 0px;
    margin-top: 8.02823px;
    text-align: left;
    text-transform: none;
}

.clients_subtitle {
    box-sizing: border-box;
    color: rgb(63, 63, 63);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 32.1129px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 38.5333px;
    margin-bottom: 0px;
    margin-top: 8.02823px;
    text-align: left;
    text-transform: none;
}

.clients_message {
    box-sizing: border-box;
    color: rgb(63, 63, 63);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;
    margin-top: 10px;
    text-align: left;
}

.btn_seemore {
    background-color: rgb(132, 47, 63);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: "Fjalla One", sans-serif;
    font-size: 20.4px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 24.4833px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 14.28px;
    padding-left: 30.5999px;
    padding-right: 30.5999px;
    padding-top: 14.28px;
    position: relative;
    text-align: center;
    text-decoration-color: rgb(255, 255, 255);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    text-transform: capitalize;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.25s;
    transition-property: color;
    transition-timing-function: ease;
    z-index: 1;
}

.btn_seemore:hover {
    background-color: #005375;
    color: #fff;
    text-decoration: none;
}

.btn_submit_form {
    background-color: rgb(132, 47, 63);
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: "Fjalla One", sans-serif;
    font-size: 20.4px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 24.4833px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(255, 255, 255);
    outline-style: none;
    outline-width: 2.66667px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 14.2833px;
    padding-left: 30.6px;
    padding-right: 30.6px;
    padding-top: 14.2833px;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.25s;
    transition-property: color;
    transition-timing-function: ease;
    z-index: 1;
}

.btn_submit_form:hover {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

.why_hire_title {
    box-sizing: border-box;
    color: rgb(217, 217, 217);
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 24.548px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 34.3667px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    text-transform: none;
}

.box-height {
    min-height: 170px;

}

.footer_phone {
    box-sizing: border-box;
    color: rgb(127, 194, 226) !important;
    cursor: default;
    font-family: "Fjalla One", sans-serif;
    font-size: 26.4519px;
    font-weight: 700;
    letter-spacing: 5.29039px;
    line-height: 31.75px;
    text-align: center;
    text-decoration: none;
}

.footer_quick_links {
    box-sizing: border-box;
    color: rgb(127, 194, 226) !important;
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    text-decoration-color: rgb(127, 194, 226);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    transition-behavior: normal;
    transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: color;
    transition-timing-function: ease;
}

.footer_quick_links:hover {
    color: rgb(255, 255, 255) !important;
    text-decoration: none;
}

/** for menu 2 **/
#menu2 {
    background-color: #005375;
}

#menu2 .navbar-nav .nav-link,
#menu2 .navbar-nav .dropdown-toggle {
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Noto Sans", sans-serif;
    font-size: 18.7px;
    font-weight: 400;
    line-height: 33.6667px;
    text-transform: capitalize;

    color: #ffffff;
    padding-top: 8.5px;
    padding-bottom: 8.5px;

    text-decoration: none;
    transition: color 0.4s ease;
}

#menu2 .navbar-nav .nav-link:hover,
#menu2 .navbar-nav .dropdown-toggle:hover {
    color: rgb(127, 194, 226);
    text-decoration-color: rgb(127, 194, 226);
}
/**
#menu2 .dropdown-menu {
    background-color: rgb(10, 72, 100);

    border: none;
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.05);

    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;

    padding-top: 17px;
    padding-bottom: 17px;

    min-width: 340px;
    max-height: 510px;

    overflow-y: auto;
    overflow-x: auto;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease;
}
**/

#menu2 .dropdown-menu {
    background-color: rgb(10, 72, 100);

    /* No border as requested */
    border: none;
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.05);

    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    line-height: 30.6px;

    padding-top: 17px;
    padding-bottom: 17px;

    /* 🔥 KEY FIXES */
    width: auto;              /* auto size based on content */
    min-width: unset;         /* removes forced 340px */
    max-width: none;

    max-height: 510px;

    white-space: nowrap;      /* keeps text in one line */

    overflow-y: auto;
    overflow-x: hidden;       /* removes horizontal scrollbar */

    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease;
}

#menu2 .dropdown-item {
    white-space: nowrap;
}

#menu2 .dropdown-item {
    color: #ffffff;
    font-family: "Noto Sans", sans-serif;
    font-size: 18.7px;
    font-weight: 400;
    line-height: 22.4333px;

    padding: 9.35px 23.375px;

    text-transform: capitalize;
    transition: color 0.4s ease, background-color 0.4s ease;
    border-left: 4px solid transparent;
}
#menu2 .dropdown-item:hover {
    background-color: rgb(132, 47, 63);
    color: #ffffff;
    cursor: pointer;
    border-left: 4px solid #ffffff;
}
#menu2 .nav-link.active,
#menu2 .nav-link:focus {
    background-color: transparent;
    color: rgb(127, 194, 226);
}
@media (max-width: 991px) {
    #menu2 .navbar-nav {
        text-align: center;
    }

    #menu2 .dropdown-menu {
        position: static;
        min-width: 100%;
    }
}
#menu2 .navbar-nav .menu2-link {
    padding-left: 1rem;
    padding-right: 1rem;
}

/** menu align **/
#menu2 .navbar-nav {
    margin-left: auto;
}

@media (min-width: 992px) {
    #menu2 .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    #menu2 .dropdown-toggle::after {
        pointer-events: none;
    }
}
/* End of menu 2 styling */

/** Custom css for mobile fix **/
@media (max-width: 768px) {

    /* HERO */
    .highlight-font {
        font-size: 38px;
        line-height: 42px;
        text-align: center;
    }

    .title-style-5 {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .section_mainstage_button {
        display: inline-block;
        margin: 0 auto;
    }

    /* BIG CONTAINERS */
    .bigbox {
        padding: 20px;
    }

    .over-item {
        width: 100%;
    }

    /* HEADINGS */
    .panel-group-header,
    .title-style-1 {
        font-size: 26px;
        line-height: 30px;
        text-align: center;
    }

    .staff_sub_heading,
    .faq_subtitle,
    .clients_subtitle {
        font-size: 22px;
        line-height: 26px;
        text-align: center;
    }

    /* ACCORDION */
    #SSAccordionV1 .accordion-button {
        font-size: 18px;
        line-height: 26px;
        padding: 14px;
    }

    #SSAccordionV1 .accordion-body p {
        font-size: 16px;
        line-height: 26px;
    }

    /* WHY HIRE BOXES */
    .box-height {
        min-height: auto;
    }

    /* MENU 2 MOBILE */
    #menu2 .navbar-nav {
        text-align: left;
    }

    #menu2 .navbar-nav .menu2-link {
        justify-content: flex-start;
        padding: 12px 16px;
    }

    #menu2 .dropdown-menu {
        min-width: 100%;
        white-space: normal;
    }

    #menu2 .dropdown-item {
        white-space: normal;
    }

    /* FOOTER */
    .footer_phone {
        font-size: 20px;
        letter-spacing: 3px;
    }
}

/* End of custom css for mobile fix **/

/** mobile fix top image **/
.section_mainstage .col-lg-6:first-child {
    padding: 80px 50px;
}

@media (max-width: 768px) {
    .section_mainstage .col-lg-6:first-child {
        padding: 40px 15px;
    }
}

@media (max-width: 768px) {
    .section_mainstage .mt-4 {
        text-align: center;
    }
}

@media (max-width: 768px) {
    #PanelGroupV1 .row.py-5 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/** For Social link **/
.social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 40px;
    height: 40px;
    
    background-color: red;
    color: #ffffff;
    
    border-radius: 50%;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

.social-circle i {
    font-size: 18px;
}

.social-circle:hover {
    background-color: #1877f2; /* Facebook blue */
    color: #ffffff;
    transform: scale(1.1);
}