/* *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} */

/* body{
    padding: 0;
    margin: 0;
} */

/* Ensures Footer is on the bottom always */
/* #about-b{
    min-height: 100vh; 
    display: flex; 
    flex-direction: column;
} */

.phone-icon-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#circle {
    position: absolute;
    right: 20px;
    top: 75%;
    display: inline;
    width: 50px;
    height: 50px;
    transform: scale(1.3, 1.3);
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.8);
}

.phone-icon-container-2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20px;
    z-index: 10;
}

#phone-circle-2 {
    position: absolute;
    left: 0px;
    top: 180px;
    display: inline;
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid rgb(0, 0, 0);
    border-left: none;
    border-radius: 0px 10px 10px 0px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#phone-circle-2:hover{
    transform: scale(1.1); 
}

#phone-circle-2:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.f-icon {
    position: absolute;
    left: 0px;
    /* top: 240px; */

    top: 360px;
    display: inline;
    border: 1px solid rgb(0, 0, 0);
    border-left: none;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;    
}

.f-icon img{
    padding: 5px;
    min-width: 16px;
}

.f-icon:hover {
    transform: scale(1.1); 
}

.f-icon:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}

#insta-icon {
    border-radius: 0px 10px 10px 0px;
    background-color: rgba(255, 255, 255, 0.6);
    display: inline;
    width: 50px;
    height: 50px;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 300px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#insta-icon img{
    padding: 5px;
    min-width: 29px;
    min-height: 29px;
}

#insta-icon:hover {
    transform: scale(1.1);
}

#insta-icon:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}

#google-reviews-icon {
    border-radius: 0px 10px 10px 0px;
    background-color: rgba(255, 255, 255, 0.6);
    display: inline;
    width: 50px;
    height: 50px;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    position: absolute;
    left: 0px;
    /* top: 360px; */
    top: 240px;
}

#google-reviews-icon img{
    padding: 5px;
    min-width: 29px;
    min-height: 29px;
}

#google-reviews-icon:hover {
    transform: scale(1.1);
}

#google-reviews-icon:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}

/* #insta-icon svg:hover {
    transform: scale(1.1);
    cursor: pointer;
}
*/

/* START of Not Active */
.image-link #logo-photo {
    transition: transform 0.3s ease;
}

.image-link:hover #logo-photo {
    transform: scale(1.1); /* Adds a zoom effect on hover */
}

#logo-img-container{
    /* justify-content: center; */
    /* background-color: red; */
    /* padding: 0px 0px 0px 20px; */
    /* position: absolute;
    top: 0px;
    left: 0px; */
    /* background-color: rgb(0, 191, 255); */
    /* display: flex;
    align-items: center; */
    /* background-color: red; */
    /* padding-left: 10px; */
    /* background-color: red; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#logo-photo{
    /* position: absolute;
    top: 6px;
    right: 10px; */
    /* box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.8); */
    /* display: flex; */
    /* box-shadow: 0px 0px 10px 5px rgb(251, 255, 0); */
    max-width: 70px;
    height: auto;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    animation: logo_pulse 1.3s infinite alternate;
}

/* #logo-photo {
    animation:  transition_opacity 1.3s alternate , logo_pulse 1.3s infinite alternate;
} */


/* END of Not Active */

.header-nav {
    /* justify-content: space-between;
    align-items: center; */
    /* padding: 10px 20px; */
    /* background-color: rgb(51, 51, 51); */
    /* background: linear-gradient(45deg, #acc9ff, rgb(244, 244, 244), #acc9ff); */
    /* padding: 20px 20px 40px 20px; */
    /* background-color: lightblue; */
    /* background: linear-gradient(90deg, rgb(65, 63, 248), rgb(255, 255, 255), rgb(65, 63, 248)); */
    /* background-color: rgb(65, 63, 248); */
    /* background-color: rgba(51, 51, 51, 0.2); */
    /* background-color: rgba(123, 157, 230, 0.4); */
    /* background-position: 0px 0px; */
    /* min-height: 50vh; */
    /* background: linear-gradient(200deg, rgb(228, 236, 255), rgb(190, 211, 255), rgb(123, 157, 230)); */
    /* background-color: green; */
    /* padding-right: 60px; */
    /* padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px; */
    /* background-size: 310px; */
    /* background-position: 20px 30px; */
    /* background-size: 100px; */
    /* min-height: 120px; */
    /* min-height: 15vh; */
    /* min-height: 25vh; */
    /* background-image: url('imgs/Logopit_1588569210626 Jason Hauk2.png'); */
    /* min-height: 280px; */
    display: flex;
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center 90%;
    transition: background-image 0.3s ease;
}

#nav-wrapper{
    /* background: linear-gradient(200deg, rgba(20, 94, 255, 0.8), rgba(190, 211, 255, 0.0), rgba(20, 94, 255, 0.8)); original */
    /* background: linear-gradient(45deg, rgba(108, 184, 255, 0.8), rgba(255, 255, 255, 0.0),rgba(108, 184, 255, 0.8)); */
    /*background: linear-gradient(45deg, rgba(20, 94, 255, 0.8), rgba(255, 255, 255, 0.0),rgb(255, 255, 255));*/
    /* padding: 40px; */
    /* padding: 40px 20px 40px 40px; */
    /* padding: 20px; */
    /* background-color: blue; */
    /* background: linear-gradient(45deg, rgba(0, 81, 255, 0.8), rgba(255, 255, 255, 0.0),rgba(0, 81, 255, 0.8)); */
    /* background: linear-gradient(45deg, rgba(109, 109, 109, 0.8), rgba(255, 255, 255, 0.0),rgba(109, 109, 109, 0.8)); */
    /* min-height: 140px; */
    /* min-height: 360px; */
    display: flex;
    width: 100%;
    /* background: linear-gradient(45deg, rgba(20, 94, 255, 0.8), rgba(255, 255, 255, 0.0),rgba(20, 94, 255, 0.8)); */
}

/* .hamburger-self{
    background-color: coral;
    align-self: flex-start;
    margin-top: 20px;
    margin-right: 20px;
    
} */

.hamburger {
    /* display: flex; */
    /* margin-top: 30px; */
    background: none;
    border: none;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}
  
.hamburger .line {
    /* background-color: black; */
    /* transition: all 0.3s ease; */
    /* height: 4px; */
    /* background-color: white; */
    width: 30px;
    padding-top: 4px;
    background-color: black;
}

.nav {
    /* background-color: rgb(51, 51, 51); */
    /* background-color: aqua; */
    /* padding: 20px; */
    /* background-color: white; */
    /* background-image: url('/imgs/my_lightning.svg');
    background-repeat: no-repeat; */
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: start;
}

.nav li{
    /* justify-content: center; */
    /* background-color: red; */
    display: flex;
    list-style: none;
    padding: 30px;
    align-items: center;
    justify-content: center;
}

.nav li a{
    /* color: black; */
    /* background-color: red; */
    /* background-color: #333; */
    padding: 10px;
    text-decoration: none;
    color: white;
    display: inline-block;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    font-size: 1.2rem;
    font-weight: bold;
}

#nav_ul{
    /* background-color: lightblue; */
    /* margin: 10px; */
    /* background-color: lightgreen; */
    /* padding: 100px; */
    /* background-color: rgba(240, 248, 255, 0.8); */
    /* background-color: rgba(0, 0, 0, 0.8); */
    /* background: linear-gradient(90deg, rgba(2, 0, 124, 0.4), rgba(255, 255, 255, 0.4), rgba(2, 0, 124, 0.4)); */
    /* background-size: 100% 100%; */
    /* font-family: 'Times New Roman', Times, serif; */
    /* margin-left: 10px;
    margin-right: 10px; */
    /* font-size: xx-large;
    font-weight: bolder; */
    /* background-image: url('/imgs/my_lightning9.svg'); */
    /* background-repeat: no-repeat;
    background-position: 90px 20px; */
    /* background-position: center; */
    /* background-size: contain; */
    /* clip-path: polygon(50% 0%, 100% 15%, 100% 85%, 50% 100%, 0% 85%, 0% 15%); */
    /* border-radius: 10px 10px 10px 10px; */
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
    margin-bottom: 40px;
    transition: padding 0.3s ease;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.8);    
}

#nav_ul li:nth-child(n+2) a{
    transition: transform 0.3s ease;
}

#nav_ul li:nth-child(n+2) a:hover{
    transform: scale(1.2, 1.2);
}

/* #bottom-bolt{
    display: none;
} */

.display-none{
    display: none;
}

.display-flex{
    display: flex !important;
}

.padding-50px-10px-20px-10px{
    padding: 50px 10px 20px 10px;
}

.padding-50px-0px-20px-0px{
    padding: 50px 0px 20px 0px;
}

.padding-10px{
    padding: 10px;
}

.padding-20px{
    padding: 20px;
}

.padding-30px{
    padding: 30px;
}

.padding-40px{
    padding: 40px;
}

.padding-50px{
    padding: 50px;
}

/* Animation Classes */
.rotate_bar_1{
    animation: rotate_bar_1 0.3s forwards;
}

.rotate_bar_1_back{
    animation: rotate_bar_1_back 0.3s forwards;
}

.rotate_bar_2{
    animation: rotate_bar_2 0.3s forwards;
}

.rotate_bar_2_back{
    animation: rotate_bar_2_back 0.3s forwards;
}

.fade_bar_3{
    animation: fade_bar_3 0.3s forwards;
}

.fade_bar_3_back{
    animation: fade_bar_3_back 0.3s forwards;
}

.add-opacity{
    animation: transition_opacity 0.3s forwards;
}

.remove-opacity{
    animation: transition_opacity_reverse 0.3s forwards;
}

.background-image-unset{
    background-image: unset !important;
}

.header-background{
    background-image: url('imgs/Logopit_1588569210626_2.png');
    /* transition: background-image 0.3s ease; */
}

.fade-header-background-image{
    /* background-image: url('imgs/Logopit_1588569210626 Jason Hauk2.png'); */
    animation: fade_header_background_image 2s forwards;
}

.fade-header-background-image-Back{
    /* background-image: url('imgs/Logopit_1588569210626 Jason Hauk2.png'); */
    animation: fade_header_background_image_Back 2s forwards;
}

@keyframes fade_header_background_image_Back {
    0%{
        background-image: url('imgs/Logopit_1588569210626_2.png');
        /* background: linear-gradient(45deg, rgba(20, 94, 255, 0.0), rgba(255, 255, 255, 0.0),rgba(20, 94, 255, 0.0)); */
    }
    100%{
        background-image: url('imgs/Logopit_1588569210626_2.png');
        /* background: linear-gradient(45deg, rgba(20, 94, 255, 0.0), rgba(255, 255, 255, 1.0),rgba(20, 94, 255, 0.0)); */
    }
}

/* Toggled off because entire background is gradient */
@keyframes fade_header_background_image {
    0%{
        /* background-image: url('imgs/Logopit_1588569210626 Jason Hauk2.png'); */

        /* background: linear-gradient(45deg, rgba(20, 94, 255, 0.0), rgba(255, 255, 255, 0.0),rgba(20, 94, 255, 0.0)); */
    }
    100%{
        /* background-image: url('imgs/Logopit_1588569210626 Jason Hauk2.png'); */

        /* background: linear-gradient(45deg, rgba(20, 94, 255, 0.0), rgba(255, 255, 255, 1.0),rgba(20, 94, 255, 0.0)); */
    }
}

/* Key Frame Animations */
@keyframes logo_pulse {
    0%{
        /* box-shadow: 0px 0px 10px 0px rgba(182, 140, 70, 0.0); */
        /* box-shadow: 0px 0px 10px 0px rgba(251, 255, 0, 0.0);  */
        box-shadow: 0px 0px 10px 5px rgba(140, 186, 255, 0.0);
    }

    100%{
        /* box-shadow: 0px 0px 10px 0px rgba(182, 140, 70, 0.0); */
        /* box-shadow: 0px 0px 10px 5px rgba(251, 255, 0, 1.0);  */
        box-shadow: 0px 0px 10px 5px rgba(140, 186, 255, 1.0);
    }
}

@keyframes transition_opacity {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes transition_opacity_reverse {
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

@keyframes transition_opacity_logo {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes transition_opacity_logo_back {
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}

@keyframes rotate_bar_1 {
    0%{
        transform: rotate(0deg) ;
    }

    100%{
        transform: rotate(45deg) ;
    }
}

@keyframes rotate_bar_1_back {
    100%{
        transform: rotate(0deg) ;
    }

    0%{
        transform: rotate(45deg) ;
    }
}

@keyframes rotate_bar_2 {
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

@keyframes rotate_bar_2_back {
    100%{
        transform: rotate(0deg);
    }

    0%{
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

@keyframes fade_bar_3 {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes fade_bar_3_back {
    100%{
        opacity: 1;
    }
    0%{
        opacity: 0;
    }
}

@keyframes grow2{
    0%{
        height: 0px;
        opacity: 0;
    }

    100%{
        /* height: 1.55cm; */
        /* height: 65px; */
        height: 65px;
        opacity: 1;
    }
}

@keyframes grow3{
    100%{
        /* height: 0px; */
        height: 0px;
        opacity: 0;
    }

    0%{
        /* height: 60px; */
        /* height: 1.55cm; */
        /* height: 65px; */
        height: 65px;
        opacity: 1;
    }
}

@keyframes grow4{
    0%{
        /* height: 0px; */
        height: 0px;
        opacity: 0;
    }

    100%{
        /* height: 60px; */
        /* height: 1.55cm; */
        /* height: 65px; */
        height: 95px;
        opacity: 1;
    }
}

/* Media Queries */
@media (max-width: 1140px) {
    .phone-icon-container-2 {
        /* top: 160px; */
        top: 40px;
    }
}

@media (max-width: 880px) {

    #nav_ul li:nth-child(n+2) a{
        transition: transform 0.3s ease;
    }    

    #nav_ul li:nth-child(n+2) a:hover{
        transform: scale(1.1, 1.1);
    }

    #nav-wrapper{
        min-height: 140px;
    }
    .phone-icon-container-2 {
        position: relative;
        display: flex;
        background-color: coral;
        justify-content: center;
        align-items: center;
        top: 140px;
    }
    #phone-circle-2 {
        left: 0px;
        top: 10px;
    }
    .f-icon{
        left: 0px;
        /* top: 70px; */
        top: 190px;
    }
    #insta-icon {
        left: 0px;
        top: 130px;
    }
    #google-reviews-icon {
        left: 0px;
        /* top: 190px; */
        top: 70px;
    }
    #logo-img-container{
        padding: 10px;
    }
    .hamburger {
        display: flex; /* Show hamburger menu */
        margin-top: 60px;
        margin-bottom: 60px;
        margin-right: 20px;
    }
    .header-nav {

        background-size: 125px;
        background-position: center center;
    }
    #nav_ul{
        flex-direction: column;
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.8);
        margin-left: 60px;
        margin-right: 0px;
    }
    .nav li{
        display: none;
        list-style: none;
        padding: 0px;
        white-space: nowrap;
    }
    .animate_grow2{
        animation: grow2 0.3s forwards;
    }
    .animate_grow3{
        animation: grow3 0.3s forwards;
    }
    .animate_grow4{
        animation: grow4 0.3s forwards;
    }
}

@media (max-width: 288px){
    .nav li{
        white-space: wrap;
        justify-content: flex-start;
    }
}