/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
Version: 1.0.0
*/

main {
    margin-top: 0 !important;
}

body {
    font-family: "Work Sans", sans-serif;

}

/* Don't show page titles */
.page .wp-block-post-title {
    display: none;
}

.home-overlay-container {
    position: relative;
    width: fit-content;
}

.home-image-underlay {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .5;
}

.home-overlay-group {
    position: absolute;
    top: 40%;
    left: 2rem;
    width: 100%;
    height: 100%;
}
.home-overlay-group .tci-custom-button-container {
    padding-left: 2rem;
}

body .polygon-container-top {
    width: calc(100% + 4rem);
    background-color: inherit;
    /* clip-path: polygon(0 25%, 25% 0, 100% 25%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 25%, 25% 0, 100% 25%, 100% 100%, 0 100%); */
    min-height: 600px;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    margin-top: -10rem;
    position: relative;
    z-index: 3;
}

body .footer-layout {
    background-color: white;
    /* width: calc(100% + 4rem); */
    width: 100%;
    background-color: inherit;
    min-height: 600px;
    /* margin-left: -2rem !important; */
    /* margin-right: -2rem !important; */
    margin-top: -10rem;
    position: relative;
    z-index: 3;
}

.overlay-top {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    width: calc(100% + 2rem);
    height: 150%;
    transform: translateX(-50%);
    clip-path: polygon(0 10%, 15% 0, 100% 20%, 100% 90%, 85% 100%, 0 85%);
    z-index: 2;
    background-color: #005895;
}

body .overlay-subheader {
    margin-top: 10rem;
    margin-left: 6rem;
}

.footer-cta-header {
    color: darkgray;
}

.footer-container-lower {
    margin-top: -4.5rem;
    padding-bottom: 1.5rem;
}

.footer-logo {
    margin-left: 6rem;
}

.footer-link a {
    text-decoration: none;
}

.footer-link:hover {
    opacity: 70%;

}

.background-white {
    background-color: white !important;
}

.background-primary {
    background-color: #005895 !important;
}

body .polygon-container-top .background-white {
    background-color: white !important;
}

body .polygon-container-top .background-primary {
    background-color: #005895 !important;
}


/* Header Navigation Style Adjustments */
.wp-block-site-logo.df-main-logo img {
    top: .675rem;
    position: relative;
}

.wp-block-navigation.df-main-nav {
    top: .375rem;
}


/* Hide the submenu indicators (arrows) */
.wp-block-navigation .wp-block-navigation__submenu-icon {
    display: none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    border: none;
}

/* Consolidated Style for submenu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item a {
    box-sizing: border-box;
    color: inherit;
    /* Adjust if you have a specific color */
    position: relative;
    display: inline-block;
    padding-left: 2rem;
    padding-right: 1.5rem;
    width: 220px;
    transition: padding-left 0.3s ease, margin-right 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 400;
}

/* Adjust width for longer items in "solutions" menu */
.submenu-container-large {
    width: 260px;
}

/* Add dash line on hover */
.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2rem;
    /* Length of the dash */
    height: 2px;
    /* Thickness of the dash */
    background-color: #ffd322;
    /* Color of the dash */
    margin-top: -1px;
    /* Adjust to center the line vertically */
}

/* Adjust padding and margin on hover to maintain container size */
.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    text-decoration: none;
    padding-left: 2.5rem;
    /* Increased padding */
}

/* Add underline effect on hover for all navigation links */
.wp-block-navigation-item a:hover {
    text-decoration: underline;
    text-decoration-color: #ffd322;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Style the 'Contact' link */
.custom-contact-link {
    text-decoration: none;
    font-size: 18px;
    font-family: 'Work Sans', sans-serif;
    font-weight: bold;
    background-color: #ffd322;
    /* Adjust the color as needed */
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 15% 75%, 0% 60%);
    /* Creates the angled effect */
    color: #1A5AA8;
    /* Text color, adjust as needed */
    padding: 22px 20px;
    /* Adjust the padding as needed */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    display: inline-block;
    line-height: normal;

}

/* Style the 'Contact' link */
.custom-contact-link a {
    text-decoration: none;
    font-size: 18px;
    font-family: 'Work Sans', sans-serif;
    font-weight: bold;
    background-color: #ffd322;
    /* Adjust the color as needed */
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 15% 75%, 0% 60%);
    /* Creates the angled effect */
    color: #1A5AA8;
    /* Text color, adjust as needed */
    padding: 22px 20px;
    /* Adjust the padding as needed */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    display: inline-block;
    line-height: normal;

}


.custom-contact-link p {
    text-decoration: none;
    /* Remove underline */
    display: block;
    transition: transform 0.3s ease;
}

/* Hover effect for 'Contacts' link */
.custom-contact-link:hover {
    /* margin-top: 5px; */
    padding-top: 22px;
    /* padding-bottom: 30px; */
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 15% 90%, 0% 75%);
    /* Increases the padding at the bottom */
}

.wp-block-navigation .wp-block-navigation-item.mobile-contact-link {
    display: none;
}

.custom-contact-link:hover p {
    transform: translateY(18px);
    /* Move text down */
}



/* separator styling */

.horizontal-separator-sm-left {
    /* border-top: 1px solid #ffd322; */
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 0;
}

.vertical-separator-sm-left {
    display: inline-block;
    /* or block, depending on your layout */
    width: 2px !important;
    /* This is the thickness of your separator */
    height: 50px;
    /* Adjust the height as needed */
    background-color: currentColor;
    /* Inherits the text color, or set a custom color */
    margin: 0 auto;
}

body .horizontal-separator-wide {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}

.margin-top-none {
    margin-top: 0px;
}

/* Set Cover to "wide width" and the column group to "full width" */
body .triangle-top-container {
    width: calc(100% + 4rem);
    /* margin-left: -2rem !important; */
    /* margin-right: -2rem !important; */
    background-color: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% 100%, 0 100%);
    z-index: 1;
    margin-top: -12rem;
}

body .triangle-top-bottom-container {
    width: calc(100% + 4rem);
    /* margin-left: -2rem !important; */
    /* margin-right: -2rem !important; */
    background-color: white;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% 100%, 12rem calc(100% - 12rem), 0 calc(100% - 8rem));
    -webkit-clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% 100%, 12rem calc(100% - 12rem), 0 calc(100% - 8rem));
    z-index: 1;
    margin-top: -12rem;
}

body .triangle-top-bottom-container.contact-polygon-overlay {
    background-color: #005895 !important;
    margin-top: -4rem;
    padding-top: 8rem;
}

body .triangle-mirror-container {
    width: calc(100% + 4rem);
    /* margin-left: -2rem !important; */
    /* margin-right: -2rem !important; */
    background-color: #1A5AA8;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% calc(100% - 8rem), calc(100% - 12rem) 100%, 0 calc(100% - 12rem));
    -webkit-clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% calc(100% - 8rem), calc(100% - 12rem) 100%, 0 calc(100% - 12rem));
    z-index: 1;
    margin-top: -12rem;
    padding-bottom: 6rem;
}

/* Place cards above polygon elements */
body .tci-card-container {
    position: relative;
    z-index: 2;
}

body .polygon-yellow-container {
    width: calc(100% + 4rem);
    /* margin-left: -2rem !important; */
    /* margin-right: -2rem !important; */
    background-color: #ffd322;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 4rem, 100% 100%, 0 100%, 0 0);
    -webkit-clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 4rem, 100% 100%, 0 100%, 0 0);
    z-index: 0;
    margin-top: -4rem;
}

body .triangle-bottom-container {
    margin-top: 0px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12rem calc(100% - 12rem), 0 calc(100% - 8rem));
}

body .clip-top-right-container {
    position: relative;
    clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
    margin-left: -4rem;
}

body .clip-top-right-container img {
    position: relative;
    clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
    margin-left: -4rem;
    width: auto;
    height: auto;
}

body .image-over-image-container {
    /* height: auto; */
    position: absolute;
    margin-left: -2rem !important;
    /* margin-top: -50%; */
    /* clip-path:polygon(0 0 , calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%); */
    margin-left: -4rem;
}

body .image-over-image-container img {
    /* clip-path:polygon(0 0 , calc(100% - 6rem) 0, 100% 6rem, 100% 100%, 0 100%); */
    height: 462px !important;
    width: 617px !important;
    object-fit: cover;
    padding-right: 4rem;
}

body .home-image-overlay {
    margin-top: -45rem;
    clip-path: polygon(0 0, calc(100% - 6rem) 0, 100% 6rem, 100% 100%, 0 100%);

}

body .image-over-image-container.clip-top-right-container img {
    position: relative;
    clip-path: polygon(0 0, calc(100% - 6rem) 0, 100% 6rem, 100% 100%, 0 100%);
}

body .image-over-image-container.clip-bottom-left-container img {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4rem 100%, 0 calc(100% - 4rem));
    padding-right: 0px;
}

.time-layout {
    margin-top: 0px;
}




#gform_submit_button_1 {
    color: #1A5AA8;
    font-family: "Work Sans", sans-serif !important;
    font-weight: bold;
    font-size: 18px;
    line-height: 1rem;
    outline-color: #ffd322;
    background-color: #ffd322;
    width: 200px;
    position: relative;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

#gform_submit_button_1:hover {
    background-color: #1A5AA8;
    /* Solid yellow background on hover */
    color: white;
    /* Adjust text color if needed */
}


body .gform_wrapper .gform_footer {
    justify-content: flex-end;
}

body .gform_wrapper .gform_page_footer {
    text-align: right;
}


/* Breakpoints: */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.5; /* Adjust this value as needed */
    }

    /* Adjust the max-width as per your theme's mobile breakpoint */
    /* Selector for the existing mobile menu */
    .mobile-contact-link {
        display: block;
    }

    .wp-block-navigation__responsive-container-close {
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding-right:2rem; */
    }

    body .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content .wp-block-navigation__container li ul {
        display: none;
    }

    #modal-1 {
        margin-top: 5rem;
        background-color: rgb(0, 88, 149, .9);
        backdrop-filter: blur(5px);
        color: white;
    }

    #wpadminbar {
        display: none;
    }

    html {
        margin-top: 0 !important;
    }

    .custom-contact-link {
        display: none;
    }

    img.custom-logo {
        height: 4rem;
        padding-top: 4px;
        width: auto;
    }

    .wp-block-navigation__responsive-container-open {
        background-color: #ffd322;
        width: 4rem;
        height: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
        position: fixed;
        top: 0;

    }

    body .image-over-image-container img {
        display: none;
    }

    body .triangle-mirror-container {
        min-height: 1150px;
        clip-path: polygon(0 3rem, 6rem 0, 100% 6rem, 100% calc(100% - 4rem), calc(100% - 6rem) 100%, 0 calc(100% - 6rem));
        -webkit-clip-path: polygon(0 3rem, 6rem 0, 100% 6rem, 100% calc(100% - 4rem), calc(100% - 6rem) 100%, 0 calc(100% - 6rem));
    }

    body .triangle-bottom-container {
        margin-top: 0px;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 5rem calc(100% - 5rem), 0 calc(100% - 3rem));
    }

    body .triangle-top-container {
        clip-path: polygon(0 3rem, 6rem 0, 100% 4rem, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 3rem, 6rem 0, 100% 4rem, 100% 100%, 0 100%);
        margin-top: -12rem;
    }

    body .triangle-top-bottom-container {
        clip-path: polygon(0 3rem, 6rem 0, 100% 6rem, 100% 100%, 6rem calc(100% - 6rem), 0 calc(100% - 3rem));
        /* -webkit-clip-path: polygon(0 8rem, 12rem 0, 100% 12rem, 100% 100%, 12rem calc(100% - 12rem), 0 calc(100% - 8rem)); */
        margin-top: -12rem;
    }

    body .triangle-top-bottom-container.contact-polygon-overlay {
        margin-top: 2rem;
    }
    .footer-upper-spacer {
        display: none;
    }

    .footer-cta-header {
        font-size: 2.5rem !important;
        margin-top: 6rem;
    }

    .footer-apply-column {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    body .gform_body {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
    /* Adjust padding for buttons and text on mobile home page */
    .home-overlay-group .tci-custom-button-container {
        padding-left: 0px;
    }
    body .no-padding-mobile{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* Remove spacers on mobile */
    .height-none-mobile{
        height: 0px !important;
    }
}