/*=============================
    General ****
==============================*/


/*=============================



font-family: 'dunbar-tall', sans-serif; 900
font-family: 'dunbar-low', sans-serif; 400, 500, 600, 700


==============================*/
:target {
  scroll-margin-top: 120px;
}


#careers {
    background: #b2c499;
}



@media screen and (max-width: 600px) {
#wpadminbar {
    position: fixed!important;

    }
}


html {
    margin: 0;
    padding: 0;
    line-height: 0;
        scroll-behavior: smooth;
        overflow-x: hidden;

    }


body {
    color: #000;
    font-family: 'dunbar-low', sans-serif;
    font-weight:  400;
    overflow-x: hidden;


    }


    img {
        max-width:  100%;
    }



        .fade, :hover, a {
            -webkit-transition: all .3s ease;
               -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                 -o-transition: all .3s ease;
                    transition: all .3s ease;
            }


        .bg-cover {
            overflow: hidden;
              background-repeat: no-repeat;
              background-position: center;
                  -webkit-background-size: cover;
                     -moz-background-size: cover;
                       -o-background-size: cover;
                          background-size: cover;
            }

            .bg-contain {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }




            .clearfix:after {
                display: block;
                clear: both;
                content: ' ';
                }


                ::selection {
                    background: #f7948b;
                    color: #fff;
                }



                strong {
                    font-weight:  600;
                }


/*=============================
    Headings & Text
==============================*/

h1, h2, h3, h4, h5, h6, body, p, a {
    transition: font-size 500ms;
    text-decoration: none;
    font-family: 'dunbar-low', sans-serif;


    /* default resets */

    line-height: 100%;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    }


        ul {
            /* default resets */
            display: block;
            list-style-type: none;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
        }

        a:focus, input:focus, textarea:focus {
            outline: none;
            }


h1, h2, h3, h4, h5, h6 {
    }

        h1 { 
            color: #fff;
            font-family: 'dunbar-tall', sans-serif;
            font-size: 5rem;
            font-weight: 900;  
            line-height: 100%;  
                    }

                    h1.title {
                        margin-bottom:  20px;
                    }

        h2 {
            color: #fff;
            font-family: 'dunbar-low', sans-serif;
            font-size: 2rem;
            text-transform: uppercase;
            font-weight: 400;  
            line-height: 100%; 
            text-align:  center;
            letter-spacing:  1px;

            }

        h3 {  
            color: #4173b0;
            text-transform: uppercase;
            font-size: 2rem;
            font-weight: 700;
            font-family: 'dunbar-low', sans-serif;
            letter-spacing:  1px;
            }


        h4 {
            font-family: 'dunbar-low', sans-serif;
            font-weight: 400;
            font-size:  2rem;
            color:  #fff;
        }

        h5 {
            color: #fff;
            font-family: 'dunbar-low', sans-serif;
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: 400;  
            line-height: 100%; 
            text-align:  center;
            letter-spacing:  1px;

            }
    
        h6 {
            font-size: 2rem;
            text-transform: uppercase;
            font-family: 'dunbar-low', sans-serif;
            font-weight: 500;
            letter-spacing: 1px;
            }

            a {
                cursor:  pointer;
            }


        p {
            font-family: 'dunbar-low', sans-serif;
            font-weight: 400;
            font-size:  1.2em;
            line-height:  120%;
            letter-spacing: 1px;
        }


        .hover-inner p {
            font-size: 1.5em;
        }


        .button {
            background:#e5c167;
            color:  #fff;
            padding:  10px 15px;
            border-radius:  10px;
            display: inline-block;
        }

        .button:hover {
            background:  #f7948b;
            transform:  scale(1.05);
        }


        @media all and (max-width: 900px) {
            h1 {
                font-size:  3rem;
            }

            h3 {
                font-size:  1.5rem;
            }

            h4 {
                font-size: 1.5rem;
            }

            h6 {
                font-size: 1.5rem;
            }
        }


        @media all and (max-width: 600px) {

            h1 {
                font-size: 2.5rem;
            }

            h3 {
                font-size: 1.2rem;
            }



            h6 {
                font-size: 1.2rem;
            }
            p {
                font-size: .9rem;
            }

            .hover-inner p {
                font-size: 1.2rem;
            }
        }



/*=============================
    Header
==============================*/

header {
    position: fixed;
    z-index: 999;
    width: 100%;
    background-color: #fff;
    height:  100px;
    top: 35px;
    }






    #logo {
        float: left;
        height: 30px;
        width: 200px;
        z-index: 999;
        padding-top: 13px;
        position: relative;
        }

            #logo img {
                width: 100%;
                height: auto;
                position: absolute;
                }

     
@media all and (max-width: 900px) {
    header {
        height: 77px;
    }


    #logo {
        width: 120px;
    }
}



/*=============================
    Menu
==============================*/



    .menu-wrapper.regular {
        display:  inline-block;
        vertical-align: middle;
        float:  right;
        top:  34px;
    }



       #primary-menu {
        margin-left:  20px;
        display: inline-block;

                }

                .menu-regular a {
                    font-family: 'dunbar-low', sans-serif;
                    font-weight: 500;
                    font-size: 1.5em;
                    color: #4173b0;
                    margin-left:  20px;
                    }

   

                .menu-regular a:hover {
                    color: #f7948b;
                    }



        #primary-menu ul {
        }

                .menu-regular li {
                    position: relative; /* this is needed in order to position sub menus */
                    display: inline-block;
                    }

                    .menu-regular .primary-menu > li {
                        margin:  0 20px;
                        padding:  20px 0;
                    }



        .menu-icons-inline {
          display: inline-block;
          vertical-align: top;
          margin-left: 15px;
        }

                .menu-icons-inline a {
                  display: inline-block;
                  margin-left: 10px;
                }

                .menu-icons-inline img {
                  width: 30px;
                  height: auto;
                  display: block;
                  transition: opacity 0.3s ease;
                }

                .menu-icons-inline img:hover {
                  opacity: 0.7;
                }




            /** mobile **/
            .menuIcon {
                    cursor: pointer;
                display: inline-block;
                position: relative;
                z-index: 2;
                position: absolute;
                right: 0;
                top: 31px;
            }

            @media all and (max-width: 900px) {
                .menuIcon {
                    top: 21px;
                }
            }

            .menuBar {
                display: block;
                width: 30px;
                height: 3px;
                background-color: #23503d;
                margin: 6px 0;
                transition: 0.4s;
                right:  0;
            }

            #menuToggle {
                display: none;
            }

            #menuToggle:checked + .menuIcon .menuBar:nth-child(1) {
                transform: rotate(-45deg) translate(-6px, 6px);
            }

            #menuToggle:checked + .menuIcon .menuBar:nth-child(2) {
                opacity: 0;
            }

            #menuToggle:checked + .menuIcon .menuBar:nth-child(3) {
                transform: rotate(45deg) translate(-6px, -6px);
            }

            .menu {
                max-height: 0;
                overflow: hidden;
                position: absolute;
                top: 100px;
                left: 0;
                width: 100%;
                background-color: #23503d;
                box-shadow: none;
                padding: 0;
                margin: 0;
                opacity: 0;
                transition: max-height 0.4s ease, opacity 0.4s ease;
            }

            @media all and (max-width: 900px) {
                .menu {
                    top: 77px;
                }
            }

            .menu li {
                list-style: none;
            }

            .menu li a {
                display: block;
                color: #fff;
                padding: 20px 10px;
                font-size:  1.4em;
                text-align:  center;
                text-decoration: none;
                border-bottom: 1px solid #aaa;
                letter-spacing: 1px;
            }

            .menu li a:hover:not(.no-hover) {
                background-color: #f7948b;
            }

            #menuToggle:checked ~ .menu {
                max-height: 500px; /* Adjust as needed */
                opacity: 1;
            }



            .mobile-social-icons {
              text-align: center;
              padding: 0px 0;
              border-top: 1px solid #aaa;

              display: flex;
              justify-content: center;
              gap: 20px; /* optional: adjust spacing between icons */
            }

            .mobile-social-icons a {
              display: inline-block;
              margin: 0 10px;
              border-bottom: 0!important;
            }

            .mobile-social-icons img {
              width: 28px;
              height: auto;
              display: inline-block;
              transition: opacity 0.3s ease;
            }

            .mobile-social-icons img:hover {
              opacity: 0.7;
            }


        @media all and (min-width: 960px) {
            .menu-wrapper.mobile {
                display:  none;
            }

            .menu-wrapper.regular {
                display:  inline-block;
            }
        }



        @media all and (max-width: 960px) {
            .header-inner.margin {
                width:  100%;
                padding-left:  0;
                padding-right:  0;
            }

            .menu-wrapper.mobile {
                display:  block;
            }

            .menu-wrapper.regular {
                display:  none;
            }

            #logo {
                margin-left: 7%;
            }

            .menuIcon {
                margin-right: 7%;
            }


        }





/*=============================
    Hero
==============================*/







/*=============================
    Videos
==============================*/
#videos {
            padding:  80px 0;
}




/*=============================
    Resources
==============================*/






/*=============================
    Bubbles
==============================*/

.disclaimer p {
    text-align: center;
    margin: 0 auto;
    padding-top: 40px;
    letter-spacing: 0px;
}



/*=============================
    Layouts
==============================*/



    #main-wrapper {
        position: relative;
        z-index: 1;
        margin-top:  135px;
        }

@media all and (max-width: 900px) {
    #main-wrapper {
        margin-top: 77px;
    }
}

        .margin {
            width:  86%;
            padding-left:  7%;
            padding-right:  7%;
            max-width:  1300px;
            margin-left:  auto;
            margin-right:  auto;
        }


/*=============================
    Portraits
==============================*/

      

/*=============================
    Forms
==============================*/

#contact {
    background-color:  #4173b0;
    padding: 80px 0;
}


#contact .col2 {
    width:  47%;
    display:  inline-block;
    margin-bottom: 30px;
    vertical-align:   top;
}

#contact .col1of2 {
    margin-right:  5%;
}

@media all and (max-width:  900px) {
    #contact .col2 {
        width:  100%;
    }
}




    form {
        margin-top:  50px;
    }

    form p label {
        font-family: 'dunbar-low', sans-serif;
        font-weight: 400;
        font-size:  1.2em;
        line-height:  120%;
        color:  #fff;
    }

    input[type='submit'], input[type='text'], input[type='number'], textarea, select {
            width: 100%;
             }


        input[type=text], input[type='tel'], input[type='number'], input[type='email'], textarea, select {
                
                padding: 10px 0px 10px 0px;
                display: inline-block;
                border: 1px solid transparent;
                border-bottom: 2px solid #fff;
                background: none;
                color: #fff;
                font-size: .9em;
                font-family: 'dunbar-low', sans-serif;
                font-weight: 400;
                width: 100%;
                margin-bottom: 30px;
                letter-spacing: 1px;

                  -webkit-box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  box-sizing: border-box;

        }

        option {
            font-size: .9em;
            letter-spacing: 2px;
            color: #01377f;
            text-align: center;
        }

        select {
        color: #fff;
        -moz-appearance: none;
           text-align-last: left;
           text-align: left;
           -ms-text-align-last: left;
           -moz-text-align-last: left;
        }


        input::placeholder, textarea::placeholder {
            color: #fff;
            opacity: 1;
        }







            input[type='submit'] {
                text-transform: uppercase;
                background: #e5c167;
                padding: 13px 22px;
                border-radius: 5px;
                color: #fff;
                width:  auto;
                letter-spacing: 1px;
                font-family: 'dunbar-low', sans-serif;
                font-weight: 500;
                font-size: 1em;
                display: inline-block;
                text-align:  center;
                max-width:  200px;
                border:  0;
                cursor:  pointer;
                position:  relative;
                bottom:  -30px;


                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease; 
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            input[type='submit']:hover {
                background: #b2c499;
                transform: scale(1.05);
                                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease; 
                -o-transition: all .3s ease;
                transition: all .3s ease;
            }

            .submit p {
                text-align:  right;
            }


.wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    position: absolute;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 25px 24px;
    position: absolute;
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: red;
    color: white;
}

.wpcf7 form.sent .wpcf7-response-output {
    color:  #fff;
}

/*=============================
    Footer
==============================*/


        #footer {
          background-color: #eaeaea;
          padding: 30px;
        }

        #footer p {
          color: #666;
          margin: 0;
          font-size: 1.1rem;
        }

        .footer-flex {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 1rem;
        }

        .footer-left {
          flex: 1;
        }

        .footer-right {
          display: flex;
          align-items: center;
          gap: 10px;
          text-align: right;
          flex-wrap: wrap;
          justify-content: flex-end;
        }

        .footer-text-social {
          color: #666;
        }

        .footer-text-social a {
            color: #666;
        }

        .footer-text-social a:hover {
            color: #009a70;
        }


        .footer-social-icons {
            margin-bottom: -4px;
        }

        .footer-social-icons a {
          display: inline-block;
          margin-left: 6px;
        }



        .footer-social-icons img {
          width: 22px;
          height: auto;
          display: inline-block;
          transition: opacity 0.3s ease;
        }

        .footer-social-icons img:hover {
          opacity: 0.7;
        }

        @media (max-width: 1100px) {
          .footer-flex {
            flex-direction: column;
            align-items: center;
            text-align: center;
          }

          .footer-left,
          .footer-right {
            width: 100%;
            justify-content: center;
          }

          .footer-social-icons {
            justify-content: center;
          }
        }


                .footer-disclaimer {
            padding-bottom: 20px;

            margin-bottom: 20px;
            border-bottom: 1px solid #aaa;
        }

        @media all and (max-width:1100px) {
            .footer-disclaimer {
                text-align: center;
            }
        }


/*=============================
    Arrow
==============================*/


            .arrow-container {
                width:  50px;
                height:  50px;
                border-radius:  100%;
                margin:  0px auto;
            }

            .arrow-container.blue {
                background-color:  #fff;
            }

            .arrow-container.purple {
                background-color: #7200d9;
            }


            @keyframes bounce {
                0%, 100% {
                transform: translateY(3px) scale(.8);
                }
            50% {
                transform: translateY(-3px) scale(.8);
                }
            }


            .arrow {
                position: relative;
                width: 2.5rem;
                height: 2.5rem;
                display: inline-block;
                z-index:  99;
                left:  5px;
                top:  12px;
                animation: bounce 1s infinite; /* Apply the animation */
            }

            .arrow:before,
            .arrow:after {
                content: "";
                position: absolute;
                border-radius: 0.2rem;
                display: block;
            }

            .blue .arrow:before,
            .blue .arrow:after {
                background:  #4173b0;
            }

            .purple .arrow:before,
            .purple .arrow:after {
                background:  #fff;
            }



            .arrow.down {
                height:  1.667em;
            }

            .arrow.down:before,
            .arrow.down:after {
                transform: rotate(45deg);
                top:  -5%;
                height:  110%;
                width:  25%;

            }

            .arrow.down:before {
                transform:  rotate(45deg);
                    left:  55%;
            }

            .arrow.down:after {
                transform:  rotate(-45deg);
                right:  55%;

            }