@font-face {
    font-family: 'Kirsty';
    src: url('fonts/kirsty/Kirsty Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source-Serif-Pro';
    src: url('fonts/source-serif-pro/SourceSerifPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
  --footer: 90px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


html{
    overflow: hidden;
}

body{
    box-sizing: border-box;
    width: 100vw;
    max-width: 2000px;
    font-family: Source-Serif-Pro;
    margin: unset;
    overflow: hidden;
}

.header-wrapper{
    height: fit-content;
    position: fixed;
}

#home-button, #header-home, #header-contact, #contact span, #contact span:hover, .service-summary a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Makes the link inherit the color of its parent element */
  border: none;
}

#footer-about, #footer-history {
    color: inherit;
}

.hf-section-wrapper{
    /* position: fixed; */
    display: flex;
    height: fit-content;
    justify-content: center;
    width: 100vw;
    z-index: 100;
}

.contact-summary, .header{
    width: 100%;
    max-width: 1200px;
}

.contact-summary > div > span{
    white-space: nowrap;
}


.contact-summary{
    display: flex;
    justify-content: space-around;
    background-color: black;
    fill: white;
    padding: 2px;
    /* max-height: 100px; */
    color: white;
}

.hf-section-wrapper a {
    color: white;
}

.hf-section-wrapper a:active{
    color: grey;
}

.contact-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.fa-phone, .fa-email, .fa-location, .fa-inbox{
    width: 20px;
    stroke: white;
    /* margin-right: 10px; */
}

.fa-inbox{
    transform:  translate(-3px, -19px);
    width: 25px;
}

.fa-location{
    width: 12px;
}

.header{
    height: 70px;
    left: 50%;
    
    display: flex;
    justify-content: space-between;

    box-shadow: 1px black;

    background: white;
}

.logo{
    height: 100%;
    width: fit-content;
    min-width: 200px;
    
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;

    padding-left: 20px
}
.logo img{
    /* max-height: 100%; */
    height: 60px;
}
.logo span{
    font-family: Kirsty;
    font-size: 1.75pc;
    /* display: flex;
    align-items: center; */
    /* min-width: fit-content; */
    padding-left: 10px;

}

.menu{
    width: fit-content;
    display: flex;
    align-items: center;
}

.menu-item{
    padding: 20px;
    display: flex;
    align-items: center;
    position: relative;
}


.menu-item > span{ 
    white-space: nowrap;
    
}

.fa-chevron{
    width: 10px;
    margin-left: 5px;
}


.menu-item span:hover{
    cursor: pointer;
}

.menu-item span.contact-us{
    border: 1px solid black;
    box-shadow: 1px 1px rgb(0, 0, 0) inset, 
    inset -1px -1px rgb(0, 0, 0);
    border-radius: 5%;
    padding: 5px;
    padding-bottom: 4px;
    
    /* background-color: #008CBA; 
    color: white;  */
}

.menu-item span.contact-us:hover{
    /* text-decoration: underline; */
}

/* drop-down */
/* .menu,  */
.drop-menu, .mobile-menu-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    top: 60px;
}

.mobile-menu{
    text-align: center;
}

.mobile-menu-ul {
    top: 0;
}

.drop-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    height: auto;
    max-height: calc(100vh - 100px);
    width: 200px;
    /* min-height: ; */
    /* min-height: 50vh; */
    /* height: calc(100vh - px); */
    overflow-y: scroll;
    overflow-x: hidden;
}

.drop-menu-item {
    width: 100%;
}

.drop-menu-item:hover {
    background-color: #eee;
}

.drop-menu-item a {
    color: #555;
    display: block;
    text-decoration: none;
    padding: 10px;
}

.menu-item:hover .drop-menu {
    display: block;
}

.page{
    position: absolute;
    top: 94px;
    min-height: calc(100vh - 95px);
    height: fit-content;
    z-index: -100;
    height: calc(100vh - 95px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.burger-options-wrapper{
    display: none;
}

.page.burger-mode .burger-options-wrapper{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: fit-content;
    padding-top: 10px;
    padding-bottom: 25px;
}

.content{
    min-height: calc(100vh - 95px);
}

.page.burger-mode .content{
    display: none;
}

.page.burger-mode .burger-options-wrapper{

}

.burger-option{

}

/* 
.header.footer{
    background: #292424;
    color: white;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.header.footer > div > div:first-child{
    color: white;
    text-transform: uppercase;
}

.header.footer > div{
    display: flex;
    flex-direction: column;
    color: red;
} */

.hf-section-wrapper.copyright{
    position: relative;
    color: black;
    width: 100vw;
}


.footer-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #292929;
}

.footer-main{
    display: flex;
    /* flex-direction: column; */
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    background: #292929;
    color: #a3a3a3; 
    width: 90%;
    padding: 40px 0px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-left .logo{
    padding: 0;
}


.footer-left .logo img{
    height: 40px;
}

.footer-mid{
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
}

.footer-mid .mission-statement, .footer-right .footer-contact{
    color: #cccccc; 
    font-size: 1.25pc;
    font-weight: 600;
}

.footer-mid .mission-statement-desc{
    max-width: 250px;
}

/* .footer-right .mailbox{
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
} */

.footer-associations, .biz-deets{
    margin-top: 20px;
}

.footer-left .logo span{
    cursor: default;
    color: #cccccc;
}

.footer-left .punchline{
    text-align: right;
}

.footer-right{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-right a {
    color: #a3a3a3;
}

 .footer-right .contact-icon{
    justify-content: flex-start;
 }

 .footer-main .contact-icon svg{
    fill: #cccccc
 }

.footer-associations{
    display: flex;
    /* justify-content: center; */
    gap: 5px;
    /* margin: 5px; */
}

.footer-associations .wad-min, .footer-associations .ima-min, .footer-associations .cpirc-min{
    height: 50px;
}

.about-link, .history-link{   
    cursor: pointer;
    text-decoration: underline;
}

.postal-address{
    display: flex;
    flex-direction: column;
}


.copyright-signature{   
    text-wrap: nowrap;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0px;
    
    background-color: #151515;
    color: #a3a3a3; 
}

.small-screen-show .burger{
    display: none;
    cursor: pointer;
}

.small-screen-show .menu-item{
    display: block;
}

.fa-burger, .fa-close-burger{
    width: 34px;
    margin-top: 5px;
}

.section-center.flex-column{
    flex-direction: column;
    align-items: center;
}


@media (max-width: 860px) { /* smaller mode */
    .hf-section-wrapper .loc{
        display: none;
    }

    .menu > .menu-item:nth-child(-n + 3){
        display: none;
    }

    .hf-section-wrapper .burger{
        display: block;
    }

    .footer-main{
        flex-wrap: wrap;
        gap: 25px;
    }

    .small-screen-show{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* services pages */
    .section-center.wrap{
        flex-direction: column;
        align-items: center;
    }

    .section-center.no-mid-pad .general-content.max500:first-child{
        padding-bottom: 0;
    }
    .section-center.no-mid-pad .general-content.max500:last-child{
        padding-top: 0;
    }
    .section-center.no-mid-pad .general-content.max350:first-child{
        padding-bottom: 0;
    }
    .section-center.no-mid-pad .general-content.max350:last-child{
        padding-top: 0;
    }
    .section-center.no-mid-pad .general-content.max650:first-child{
        padding-bottom: 0;
    }
    .section-center.no-mid-pad .general-content.max650:last-child{
        padding-top: 0;
    }

    .section-center.no-mid-pad > div:first-child{
    padding-bottom: 0;
    }
    .section-center.no-mid-pad > div:last-child{
        padding-top: 0;
    }
    
}


@media (max-width: 620px) { /* tablet mode */
    .footer-wrapper{
        flex-direction: column;
    }

    .footer-wrapper > div{
        padding-top: 20px;
    }

    .footer-dividing-line{
        border-bottom: 2px solid black;
        border-left: 0;
        height: 0;
        width: 100%;
    }
}

@media (max-width: 496px) { /* phone mode (??) */
    .contact-summary{
        flex-direction: column;
        align-items: center;
    }

    .menu-item{
        padding: 10px;
    }

    .menu-item .contact-us span {
        display: none;
    }

    .header {
        height: 50px;
    }

    .logo img{
        height: 40px;
    }

    .header .logo span{
        font-size: 1.17pc;
    }

    .banner-info .banner-title{ font-size: 1.5pc; }
    .banner-info .banner-desc{ font-size: 1.25pc; }
    .banner-center-wrapper .banner-contact{ padding: 7px;  }
    .banner-arrow{ margin-right: 6px; }

    .service-banner-title-wrap{
        text-align: center;
        max-width: 250px;
    }

}

@media (max-width: 350px) { /* to allow contact button to show */
    .header .logo{
        min-width: 0;
    }
    .footer-left .logo span{
        padding-left: 6px;
    }
}



/* Home */
.page-content-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.introduction-wrapper, .associations-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.general-content{
    padding: 20px;
    max-width: 1000px;

    
}
.general-content-child .wad, .general-content-child .ima, .general-content-child .cpirc{
    height: 200px;
}
.general-content-child.assoc {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
}
/* 
.general-content.home-about-us{
    flex-wrap: nowrap;
} */

.city-img::before{
    background-image: url('/images/home/city-img.jpg');
}
.mum-child-img::before{
    background-image: url('/images/home/mum-child-img.jpg');
    /* background-position-x: -435px; */
}
.peak-hour-img::before{
    background-image: url('/images/home/peak-hour-img.jpg');

}
.abuse-img::before{
    background-image: url('/images/home/abuse-img.jpg');
}

.page-banner::before{
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Adjust as needed, e.g., contain, 100% 100% */
    background-repeat: no-repeat;
    /* opacity: 0.75; */
    filter: opacity(75%);
    z-index: -1; /* Place the background behind the content */
    background-position: center;
}

.banner-arrow{
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 30px;
}
.banner-arrow .fa-chevron{
    scale: 2;
    cursor: pointer;
}

.banner-arrow .fa-chevron:hover{
    scale: 3;
}
.banner-arrow.left .fa-chevron{
    transform: rotate(90deg);
}
.banner-arrow.right .fa-chevron{
    transform: rotate(-90deg);
}

.page-banner{
    height: calc(100vh - 95px);
    min-width: 100vw;
    /* position: relative; */
    display: flex;
    justify-content: space-between;

    color: black;
}

.banner-center-wrapper{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    gap: 20px;

}

.banner-info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* align-items: center; */
    max-width: 500px;
}

.banner-title{
    font-size: 2pc;
    font-weight: 900;
}

.banner-desc{
    font-size: 1.5pc;
    font-weight: 900;
}

.banner-contact{
    background: black;
    text-decoration: none;
    color: inherit;
    color: white;
    padding: 10px;
    border-radius: 5%;
}

.banner-contact span{
    height: 20px;
    width: 50px;
}

.page-banner .fa-chevron{
    fill: black;
}

.some-services {
    /* padding: 20px; */
    /* max-width: 1000px; */
    display: flex;
    justify-content: space-around;
    background: black;
}

.service-container {
    display: flex;

    background: white;
    border-radius: 10px;
}

.service-summary {
    background: white;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-summary a div, .home-about-us .general-content-child a div {  /* .home-about-us .general-content-child a div */
    width: calc(100% - 20px);
    background: black;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    color: white;
}
.home-about-us .general-content-child a div{
    width: 150px;
    color: black;
    background: white;
}
.home-about-us .general-content-child a {
    text-decoration: none;
}

.home-flex-about-history{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.service-summary > div{
    /* height: 150px; */
    color: black;
}

.service-summary h3{
    color: black;
}

.service-summary{
    max-width: 220px;
}

.service-img{
    width: auto;
    display: block;
    border-radius: 5px;
}

@media (max-width: 1040px) { 
    .service-container{
        flex-wrap: wrap;
    }
    .service-pair .service-summary{
        max-width: unset;
        width: calc(50% - 20px);
    }

    .general-content.max650{
        flex-wrap: wrap;
    }
    section .general-content.max350{
        max-width: 500px;
    }
    section .general-content.max650{
        max-width: 500px;
    }
}

@media (max-width: 660px){
    .service-pair{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .service-pair .service-summary {
        max-width: unset;
        width: calc(100% - 20px);
    }
}

.service-summary{
    width: 90%;
}

.service-pair{
    display:flex;
}

.home-about-history{
    background: black;
    color: white;
    display: flex;
    justify-content: center;
}

.home-contact{
    background: white;
    color: black;
    display: flex;
    justify-content: center;
}

.home-about-us-child{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.general-content a{
    color: #c34c27;
    text-decoration: none;
    
}

.section-center{
    display: flex;
    justify-content: center;
    width: 100%;
}

.section-center.column{
    flex-direction: column;
    align-items: center;
}


/* services pages */

.service-banner.page-banner {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-banner.page-banner h1{
    border: 3px solid black;
    padding: 5px;
    background-color: rgb(128, 128, 128, 0.5);
}

.section-center.black{
    background: black;
    color: white;
}

.general-content.max500{
    max-width: 500px;
}

.general-content.max350{
    max-width: 350px;
}
.general-content.max650{
    max-width: 650px;
    display: flex;
    /* flex-wrap: wrap; */

}

.general-content.checks svg{
    height: 19px;
    transform: translate(0px, 4px);
}

.home-contact.service-page{
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 15px 15px rgb(0, 0, 0) inset, inset -15px -15px rgb(0, 0, 0);
}

.section-center.black .general-content.checks svg{
    fill: white;
}


.flex-center-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-center.column{
    flex-direction: column;
}

.flex-center-center.flex-children-450 > div{
    max-width: 450px;
}


/* heroes */
.missing-persons-img::before{
    background-image: url('/images/missing-persons/missing-persons.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.surveillance-and-investigations-img::before{
    background-image: url('/images/surveillance-and-investigations/surveillance-and-investigations.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.bug-sweeping-for-homes-img::before{
    background-image: url('/images/bug-sweeping-for-homes/bug-sweeping-for-homes.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.catch-a-cheating-partner-img::before{
    background-image: url('/images/catch-a-cheating-partner/catch-a-cheating-partner.jpg');
    height: 300px;
	/* min-height: 300px; */
    background-position: center 2px;
}

.background-checks-img::before{
    background-image: url('/images/background-checks/background-checks.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.due-diligence-img::before{
    background-image: url('/images/due-diligence/due-diligence.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.child-custody-img::before{
    background-image: url('/images/child-custody/child-custody.jpg');
    height: 300px;
	/* min-height: 300px; */
    background-position: center 100%;
}

.statement-taking-img::before{
    background-image: url('/images/statement-taking/statement-taking.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.criminal-and-civil-investigations-img::before{
    background-image: url('/images/criminal-and-civil-investigations/criminal-and-civil-investigations.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.elder-abuse-img::before{
    background-image: url('/images/elder-abuse/elder-abuse.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.office-bug-sweeping-img::before{
    background-image: url('/images/office-bug-sweeping/office-bug-sweeping.jpg');
    height: 300px;
	/* min-height: 300px; */
}

.workplace-theft-img::before{
    background-image: url('/images/workplace-theft/workplace-theft.jpg');
    height: 300px;
	/* min-height: 300px; */
}


.about-us-and-history-img::before{
    background-image: url('/images/about-us-and-history/about-us-and-history.jpg');
    height: 300px;
	/* min-height: 300px; */
}


.choosing-an-investigator-img::before{
    background-image: url('/images/choosing-an-investigator/choosing-an-investigator.jpg');
    height: 300px;
}


/* menu scrollbar */
/* For modern browsers (Chrome, Edge, Safari) */
.drop-menu {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow: auto; /* Enable scrolling */
}

/* Webkit browsers */
.drop-menu::-webkit-scrollbar {
  display: none;
}