* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    letter-spacing: 0.12rem;


    word-spacing: 0.23rem;




}



.never-shown {
    display: none;
}





:root {
    --pht-green: #003c1c;
    --pht-orange: #f99366;
    --pht-white: #fffefd;
    --pht-black: #151515;
    --pht-gray: #191919;
    --footer-white: rgba(255, 255, 255, 0.503)
}

.wrapper {
    padding-left: 35px;
    padding-right: 35px;
}



li {
    list-style-type: none;

}

a {
    text-decoration: none;

    color: var(--pht-black)
}

.contact-page-intro {
    color: var(--pht-black)
}









/*====FONTS=====*/




@font-face {
    font-family: "Aktiv-reg";
    src: url(../fonts/AktivGrotesk-Regular.ttf);
}

@font-face {
    font-family: "Aktiv-bold";
    src: url(../fonts/AktivGrotesk-Bold.ttf);
}

@font-face {
    font-family: "Beauty";
    src: url(../fonts/BeautyLuxury-Regular.otf);
}

.small-spaced {

    line-height: 3rem;

    font-size: 1.5rem;





}






html {
    font-size: 10px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    /*background-color: #fff7e4;*/
    background-color: var(--pht-white);
    color: var(--pht-black);


}

/*========*/
a, li, label, button, h1, h2, h3 {
    letter-spacing: 0.12rem;


}





/*

.selected {

    padding-bottom: 6px;
    border-bottom: 2px solid var(--pht-orange);


}
    */




/*=====NAV AND TOP SECTION======*/

.top-container {
    width: 100%;
    display: flex;
    height: 30px;
    position: absolute;
    z-index: 20;

}

.sticky {
    padding-top: 15px;
}

.contact-info-top {
    background-color: var(--pht-green);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;

    height: 100%;
    padding-right: 10px;








}

#contact-info-top-left {

    width: 50%;

    height: 100%;
}





#contact-info-top-content {
    display: flex;
    justify-content: center;
    justify-content: space-between;
    width: 390px;
    color: var(--pht-white);
    font-size: 1.4rem;
    letter-spacing: 0.075rem;



}

.fa-phone, .fa-envelope {
    color: var(--pht-orange);



}

.nav-top {
    display: flex;
    justify-content: space-between;

    position: absolute;
   width: 100%;
    background-color: transparent;
    z-index: 3;
    margin-top: -7px;
}


#nav-top-links {

    display: flex;
    align-items: center;
    justify-content: flex-end;
   
    color: var(--pht-white);
    padding: 20px 10px;



}

#nav-logo {
    width: 200px;
}







#nav-top-ul {
    display: flex;
    align-items: center;
    width: 59%;
    min-width: 400px;
  
    font-size: 1.5rem;

    font-weight: 300;
}

#nav-top-ul a {
    color: var(--pht-white);
}

.nav-top-li {
    padding: 6px 21px;
   
   


}



/*=======dropdown menu======*/
.dropdown-menu-container {

    position: absolute;

    background-color: rgba(0, 0, 0, 0.6);

    



    z-index: 800;
    margin-top: 6px;
    





}



.dropdown-menu {
    display: flex;
    flex-direction: column;

    justify-content: space-around;



}





.dropdown-menu a {
    
    font-size: 1.5rem;
    


}





.dropdown-menu li, .hamburger-menu li {

    border-bottom: 1px solid transparent;

}

.dropdown-menu li {
    padding: 14px;
}




.dropdown-menu li:hover, .hamburger-menu li:hover {

   
    background-color: var(--pht-orange);


}


/*====hamburger menu====*/


.hamburger-menu-container {
    width: 100%;
    height: 100vh;

    position: absolute;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    overflow: auto;
    z-index: 1000;




}

.hamburger-menu {





    background: transparent;
    font-size: 1.5rem;
    
    display: flex;
    flex-direction: column;


    height: 100%;









}

.hamburger-button-container:hover {
    cursor: pointer;
}


.hamburger-menu-container .x-container {
    color: rgba(255, 255, 255, 0.593);

    height: 10%;
    position: absolute;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    right: 0;
    padding-right: 30px;


}






#hamburger-x-button {
    color: rgba(255, 255, 255, 0.593);

    position: absolute;
    margin-bottom: 15px;
    top: 15px;

}

.home-page-hamburger-button {
    margin-top: 7px;

}






.hamburger-menu li {
    color: var(--pht-white);
    padding: 15px 0 15px 15px;


}

.hamburger-menu a {
    font-weight: 300;
    font-size: 1.5rem;

}

/*=====*/











#logo-container {
    display: flex;
    width: 50%;
    justify-content: flex-start;
    padding: 20px 10px;




}

#hero-badge-logo {
    min-width: 200px;
}

#hero {
    position: relative;
    height: 620px;




}

.contact-us-link-div {

    padding-left: 10px;

    border-left: 5px solid var(--pht-orange);


    min-height: 40px;
    display: flex;
    align-items: center;



}

.contact-us-link {

    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--pht-white);

    text-decoration: underline;
    text-transform: uppercase;
    
    line-height: 2.5rem;




}







.intro-section {
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro-section h1 {
    font-size: 5.25rem;
    text-align: center;
    padding: 30px;
    font-weight: 200;
}

/*hero form*/

.form-image-container {
    width: 15%;
    height: auto;
}

.form-header-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 15px;
}



#hero-form-container {
    position: absolute;
    position: fixed;
    display: flex;


    width: 100%;
    z-index: 100;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    overflow: auto;

}

.home-page-hours-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;


}

#home-page-info-container {

    border: 1px solid var(--pht-white);
    width: 75%;
}

.hero-form .small-spaced {
    color: var(--pht-white);
    font-weight: 500;
    font-size: 1.4rem;

}

.home-page .bold {
    color: var(--pht-black);
    font-weight: 600;
    font-size: 1.4rem;
}



#hidden-form {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    width: 49%;



}

#hero-form {

    padding-top: 15px;

    position: relative;




    padding: 30px 15px;
    width: 90%;


}

#hero-form label, #hero-form legend {

    color: #F8F8F8;
}








#hero .form-header {
    font-size: 2rem;
}

#hero form input {
    margin-bottom: 15px;
}



#hero-form .contact-submit-button {
    height: 50px;

    color: var(--pht-black);
}

#hero-form .form-p {
    color: var(--pht-white);
}

.x-container {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 15px;

}



.x-button {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 2rem;
}

.x-button:hover {
    cursor: pointer;
}

.home-page .x-container {
    color: var(--pht-white);
    top: 10px;


}





/*=======*/

#hero-content-container {


    width: 80%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 90px;

}









#hero-text {
    font-size: 5.25rem;
    font-weight: 200;
    color: var(--pht-white);
    opacity: 0.95;
    padding: 20px 0;
    text-transform: uppercase;




}

#hero-description {
    color: var(--pht-white);
    font-weight: 300;
    font-size: 1.5rem;
    padding-right: 30px;
    line-height: 2.5rem;

    padding-bottom: 20px;
}


#hero-left {

    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.6);





}

.life {
    border-bottom: 1px solid var(--pht-orange);


}




#hero-button-container {
    height: 70px;
    display: flex;
    width: 100%;
    justify-content: center;
}

/*
* {
    border: 1px solid pink;
}
*/

#hero-contact {
    font-size: 1.5rem;
    font-weight: 300;
    width: 30%;
    min-width: 165px;
    border-radius: 40px;
    background-color: transparent;
    color: var(--pht-white);
    opacity: 0.95;
    border: 1px solid var(--pht-orange);
    font-family: "Roboto";





}




#hero-video-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;

}


#hero-background {

    filter: brightness(0.9);
    object-fit: cover;
    height: 100%;

}

/*==HOME PAGE TRANSITION SECTION==*/

#transition-section {
    height: 1000px;
    display: flex;
    justify-content: center;
    margin-top: 300px;

}

#ts-wrapper {
    width: 85%;

    display: flex;

}

#ts-left {
    width: 50%;
}

#ts-right {
    width: 50%;
}

.ts-div {
    height: 10%;

}

/*===HOME PAGE SOULUTIONS SECTION===*/

.solutions-section {

    width: 100%;
    height: auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}



.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 30px;
    width: 100%;

}

.categories {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    justify-content: center;




}

.category {
    margin: 10px 10px 10px 0;
    /*
    background-color: #f29d7879;
    */
    color: #f29d7879;
    color: var(--pht-orange);

    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    border-radius: 20px;
    padding: 10px;



}

.category-icon {
    display: flex;
    justify-content: center;
}


.category-title {

    font-size: 1.6rem;
    font-weight: 300;

    text-align: center;
    color: var(--pht-black);




}


.cat-pic {
    font-size: 5rem;

}

.category:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform .15s ease;


}

.submitted-page .content-container h3 {

    margin-bottom: 10px;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 2px;
    padding-left: 8px;
    border-left: 3px solid var(--pht-orange);

}

/*===REVIEWS SECTION====*/

#reviews-section {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--pht-gray);
    color: var(--pht-white);
   
    padding-bottom: 200px;
    padding-top: 100px;
}

#reviews-header {
    text-align: center;


}

.reviews-container {
    display: flex;
    justify-content: space-around;
    width: 75%;
    min-width: 870px;
    align-items: center;
    margin-top: 50px;

}

.review-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    height: 350px;
    width: 400px;
    background-color: var(--pht-white);
    color: var(--pht-white);
    background-color: var(--pht-gray);
    border: 1px solid var(--pht-white);
    border-radius: 20px;

}

.stars-container {
    display: flex;
}





.fa-google {
    color: var(--pht-green);

}

.fa-star {


    color: var(--pht-orange);
    font-size: 1.75rem;
}

/*==ANIMATED IMAGE CONTAINER===*/

.grid {



    display: grid;
    margin-top: 50px;
    width: 100%;
    grid-template-columns: repeat(11, 1fr);
    gap: 15px;
    grid-auto-rows: minmax(100px, auto);
    padding: 0 15px 200px;
    
   



}





.grid-image-container {

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    




}

.grid-link {
    width: 100%;
    height: 100%;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 300;
    color: transparent;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;

    letter-spacing: 0.12rem;
}

.grid-image-container, .grid-link {
    border-radius: 20px;
}

.grid-link:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--pht-white);

}



#grid-1 {
    background-image: url(../images/grid_images/finalAiryLivingAV.jpeg);
    grid-column: 9/12;
    grid-row: 4/10;


}

#grid-2 {
    background-image: url(../images/grid_images/finalBonusRoomTv.jpeg);
    grid-column: 6/9;
    grid-row: 6/8;



}

#grid-3 {

    background-image: url(../images/grid_images/FinalGreyHomeTheater.jpeg);
    grid-column: 1/6;
    grid-row: 1/4;

}

#grid-4 {

    background-image: url(../images/grid_images/FinalGreyHomeTheater2.jpeg);

    grid-column: 6/12;
    grid-row: 1/4;
}

#grid-5 {

    background-image: url(../images/grid_images/finalLivingRoomTv.jpeg);

    grid-column: 6/9;
    grid-row: 4/6;

}

#grid-6 {
    background-image: url(../images/grid_images/finalOutdoorTv.jpeg);
    grid-column: 6/12;
    grid-row: 10/13;

}

#grid-7 {

    background-image: url(../images/grid_images/finalPoolLighting.jpeg);
    grid-column: 6/12;
    grid-row: 13/15;

}

#grid-8 {
    background-image: url(../images/grid_images/finalPorchTv.jpeg);
    grid-column: 1/6;
    grid-row: 11/15;


}

#grid-9 {
    background-image: url(../images/grid_images/finalRedTheater.jpeg);
    grid-column: 1/6;
    grid-row: 8/11;

}

#grid-10 {
    background-image: url(../images/grid_images/finalSmallTheater.jpeg);
    grid-column: 6/9;
    grid-row: 8/10;


}

#grid-11 {
    background-image: url(../images/grid_images/finalUpstairScreen.jpeg);
    grid-column: 1/6;
    grid-row: 4/8;

}



/*CONTACT SECTION*/


#contact-section {

  
    
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--pht-gray);
    color: var(--pht-white);
    border-top: 1px solid var(--pht-white);
    border-bottom: 1px solid var(--pht-white);
    background-image: url(../images/grid_images/floorplan.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;











}

#contact-section-wrapper {
    height: 90%;


    display: flex;
    justify-content: center;

    align-items: center;
    width: 100%;

}

.service-list {
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
   
}

.service-list-item {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.25rem;
   
    
}

.home-page-contact-header {
    font-size: 5.25rem;
    font-weight: 200;

    border: 1px solid var(--pht-white);
    word-spacing: 0.5rem;
    text-align: center;
    line-height: 8rem;
    width: 75%;
    background-color: var(--pht-gray);
    border-radius: 25px;
    margin-bottom: 15px;






}

.you {
    font-weight: 500;
    background-color: var(--pht-orange);
    padding: 10px 20px;
    border: 2px solid var(--pht-black);
}

.contact-section-header-p {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    
    width: 80%;
    text-align: center;
    padding: 15px 30px;
    
}

#contact-section .contact-section-header-p {
    background-color: var(--pht-gray);
    border-radius: 25px;
    border: 1px solid var(--pht-white);
}




form {

    width: 80%;
    min-width: 350px;
    display: flex;
    flex-direction: column;









    font-weight: 300;
    padding: 30px 15px 50px;




}

#contact-page-form {
    width: 95%;
    border: 1px solid var(--pht-black);
    color: var(--pht-black);
    
    
}

.contact-page .form-p {
    color: var(--pht-black);
}

.contact-page .radio-fieldset input {
    accent-color: var(--pht-black);
}

.contact-page .required-star {
    color: var(--pht-orange);
}



.contact-page input, .contact-page textarea {
    background-color: var(--pht-white);
    color: var(--pht-black);
    border: 1px solid var(--pht-black);
}

.contact-page .contact-submit-button {
    background-color: var(--pht-white);
    border: 1px solid var(--pht-black);
    color: var(--pht-black);
}

.contact-page .contact-submit-button:hover {
    background-color: var(--pht-orange);
    color: var(--pht-black);
    border: 1px solid var(--pht-black);
    
}

.contact-page footer {
    background: var(--pht-green);
}



label, legend {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 8px;



}









#contact-now-button {



    position: fixed;
    bottom: 10px;
    right: 18px;
    display: block;
    width: 200px;
    height: 50px;
    font-size: 1.6rem;
    z-index: 200000;
    border-radius: 25px;
    font-weight: 500;
    border: 2px solid var(--pht-black);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pht-black);
    background-color: var(--pht-white);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    

}

#contact-now-button:hover {

    background-color: var(--pht-orange);
    
}

.call-button {
    display: block;
    width: 200px;
    height: 50px;
    border-radius: 25px;
    font-size: 1.6rem;
    
    font-weight: 500;
    
    background-color: var(--pht-white);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pht-black);
}

.call-button:hover {
    background-color: var(--pht-orange);
}

.call-button-container {
    margin-top: 35px;
}

.small {
    font-size: 1.3rem;
}

.review-p {

    line-height: 2.5rem;

    font-weight: 300;
    text-align: center;
    font-size: 1.5rem;
}

.review-name {
    text-transform: capitalize;
    font-size: 1.5rem;

    font-weight: 300;

}

.input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

}

.contact-form-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.contact-form-container {
    border: 1px solid var(--pht-white);
    border-radius: 25px;
    background-color: var(--pht-gray);
    padding-top: 0;
}

.contact-submit-button {
    background-color: var(--pht-gray);
    border: 1px solid var(--pht-orange);
    color: var(--pht-white);
}

input {
    background-color: var(--pht-gray);
    border: 1px solid var(--pht-white);
   
    color: var(--pht-white);
}

textarea {
    background-color: var(--pht-gray);
    border: 1px solid var(--pht-white);
    color: var(--pht-white);
}





input {

    height: 38px;


    margin-bottom: 25px;

    border: none;
    width: 100%;

    padding: 15px 10px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    background-color: var(--pht-gray);
    border: 1px solid var(--pht-white);




}



.name-container div {
    position: relative;
}

.form-icon {
    position: absolute;
    top: 37px;
    left: 12px;
    font-size: 1.5rem;
    color: #757575;
}

fieldset {
    border: none;



}





.name-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;

}

.name-container div {

    width: 49%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


}





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

textarea {
    resize: none;
    padding: 7px 10px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    background-color: var(--pht-gray);
    color: var(--pht-white);
    border: 1px solid var(--pht-white);
    font-size: 1.5rem;





}

label {
    text-transform: capitalize;
}

.form-p {
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

#reviews-section .contact-section-header-p {
    border: none;
}

.contact-submit-button {
    
    
    border-radius: 25px;
    height: 50px;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    width: 200px;
    
    
 
    
    margin: 0 auto;
    margin-top: 35px;
    

}



.form-submit-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
}



.contact-submit-button:hover {
    cursor: pointer;
    background-color: var(--pht-orange);
    border: none;
    color: var(--pht-white);





}

.required-star {
    color: var(--pht-orange)
}








/*==FOOTER==*/
footer {
    background: var(--pht-green);
    padding: 50px 50px 100px;

    
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    





}





footer #home-page-info-container {
    width: auto;
    border: none;
    padding-left: 0;
    padding-right: 0;


}

footer #home-page-info-container p, footer #home-page-info-container h3 {
    color: var(--pht-white);
    opacity: 0.7;
    font-weight: 400;
}



footer a {

    color: var(--pht-white);
}

#footer-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    display: none;



}














.contact-info {
    color: var(--pht-white);
    font-size: 1.3rem;
    font-weight: 400;
    word-spacing: normal;
}

#footer-nav {
    width: 100%;


    display: flex;





    padding-bottom: 10px;

}

.contact-page-info-container img {
    padding-bottom: 5px;
    margin-left: -5px;
}

#footer-nav-list {
    color: var(--pht-white);
    font-size: 1.5rem;
    font-weight: 300;
    
    text-align: center;
    opacity: 0.7;
    height: 100%;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;




}

footer .contact-page-contact-info {
    padding-left: 0;
}















.footer-services-list {
    color: var(--pht-white);
    opacity: 0.7;
    font-weight: 400;
    letter-spacing: 0.125rem;

    font-size: 1.3rem;
    margin-left: calc(20% + 2vw);
    /*
    position-anchor: --footer-services;
    left: anchor(left);
    */
}

/*
.footer-services-link {
    anchor-name: --footer-services;

}
    */


.fa-brands {

    font-size: 2.25rem;
}

.footer-socials-container {

    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 40px;


}

.contact-footer-socials-container {

    margin-top: 20px;
    justify-content: flex-end;
    width: 100%;
    display: flex;

}

.footer-services-header {
    font-size: 1.3rem;
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.footer-services-list ul {
    font-size: 1.3rem;
    font-weight: 300;
    text-transform: uppercase;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.footer-socials {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*padding: 25px 25px 0 0;*/

    width: 11%;
    min-width: 125px;
    align-items: flex-end;

}









#pht-footer-icon {
    width: 100%;
    height: 100%;

    object-fit: contain;
    opacity: 0.2;
}

#footer-images {
    display: flex;
    width: 100%;

}

.footer-logo-container {

    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}


.orange-link {
    color: var(--pht-orange);
}

.green-link {
    color: var(--pht-green);
}

/*==ABOUT US PAGE====*/

.about-us-p {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.5rem;

    margin-bottom: 15px;
    width: 100%;
    text-align: center;
    padding: 15px 30px;
    line-height: 3rem;
    font-weight: 300;


}



/*==ANIMATIONS AND HOVER==*/

#hero-contact:hover {
    cursor: pointer;
    background-color: var(--pht-orange);
}

.service-section:hover {


    cursor: pointer;




}

.cat-li a:hover {
    color: var(--pht-orange);
}






/*==CONTACT PAGE==*/

.contact-page-section {
    width: 100%;


    display: flex;
    flex-direction: column;
    align-items: center;




}

#contact-hero-image-container {
    margin-top: 0;
}

.contact-page-intro {
    border: 1px solid var(--pht-black);
    padding: 20px;
}

#contact-page-info-wrapper {
    width: 100%;
    display: flex;
   
    
    padding-bottom: 150px;
    padding-top: 50px;


}



.contact-page-info-container {
    border: 1px solid var(--pht-black);

}



#contact-page-contact-form-container {
    width: 50%;
    display: flex;
    justify-content: center;
    
    


}




#hero-form-container .contact-page-contact-info {
    color: var(--pht-white);
}

.hours-container {
    width: 49%;
    height: 100%;



}

.hours-container p {

    margin-bottom: 9px;


}




.form-header {
    font-size: 3rem;
    font-family: "Roboto", Arial, Helvetica, sans-serif;

    margin-bottom: 25px;
    font-weight: 300;
    border-bottom: 1px solid var(--pht-orange);
    word-spacing: 0.5rem;
    line-height: 4rem;
    letter-spacing: 0.12rem;
}

.radio-fieldset input {
    height: auto;
    margin-bottom: 0;
    width: 50px;
    margin-right: 25px;
    accent-color: var(--pht-orange);

}

.radio-inputs {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 15px 10px;

}

.radio-fieldset {
    /*background-color: #f8f8f8;*/
    margin-bottom: 20px;
}

.radio-fieldset label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}



.contact-page-header-container {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;


}



.contact-page-info-top {
    padding-top: 15px;
}



.contact-page-header {
    width: 100%;
    font-family: "Homemade Apple", Arial, Helvetica, sans-serif;

    font-size: 7rem;
    text-align: center;
    margin-bottom: 30px;
}

.contact-page .contact-page-header {
    margin-bottom: 0;
}

.chev {
    margin-top: 80px;

}




.fa-chevron-down {

    font-size: 2.5rem;
    color: var(--pht-black);


}

.contact-page #contact-page-form, .contact-page .hours-container .contact-page-info-container, .contact-page .hours-container .footer-socials {
    background: var(--pht-white);
}

.contact-page .hours-container .footer-socials {
    
    border-radius: 25px;
    padding: 7px;
}



.highlighted {
    
    width: fit-content;
    padding: 2px 8px;
    padding-left: 0;
    border-bottom: 1px solid var(--pht-black);
}

.contact-page .hours-container .small-spaced {
    width: fit-content;
    background: var(--pht-white);
    border-radius: 25px;
}




#contact-page-info-wrapper {
    background-image: url(../images/grid_images/floorplan.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 1px solid var(--pht-black);
    border-bottom: 1px solid var(--pht-black);
}

.contact-page-info-container {
    display: flex;
    flex-direction: column;
   
    


}

#contact-page-info-wrapper .contact-page-info-container {
    padding: 10px;
    color: var(--pht-black);
}

.hours-container .small-spaced {
    color: var(--pht-black);
}

.contact-page-contact-info {
    color: var(--pht-black);
    font-weight: 300;

    letter-spacing: 0.125rem;
    display: block;
    width: fit-content;
    padding-top: 10px;
    font-weight: 500;
    font-size: 1.3rem;


}



.contact-page-socials {
    color: var(--pht-black);
}

.home-page-socials {
    color: var(--pht-white);

}

.home-page-socials:hover {
    color: var(--pht-orange);
}

.home-page-socials-container {
    width: 75%;
    justify-content: flex-end;
}

/*==Solutions page==*/

.solutions-page {
    margin-top: 7px;

}

/*====SERVICE PAGES====*/

.hero-button {
   
    display: block;
    width: 200px;
    height: 50px;
    font-size: 1.6rem;
    
    text-transform: capitalize;
    font-weight: 500;
    border: 2px solid var(--pht-black);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--pht-black);
    background-color: var(--pht-white);
   
   

}

.hero-button:hover {
    background-color: var(--pht-orange);
    
}



.service-included .hero-button {
    background-color: var(--pht-white);
   border: 2px solid var(--pht-black);
    color: var(--pht-black);
    width: 45%;
    max-width: 170px;
    
}

.service-included .hero-button:hover {
    background-color: var(--pht-orange);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-page-hero-image-container {
    position: relative;
    color: var(--pht-white);
}



.service-page .hero-content-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.hero-content-container p {
    font-size: 1.8rem;
    font-weight: 300;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 5px;
    line-height: 3rem;
}


.hero-title {
    font-size: 6rem;
    color: var(--pht-white);
    font-weight: 300;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;

}

.service-page .contact-page-header-container {
    position: relative;
}

.service-page .contact-page-header-container div {
    position: absolute;
    top: -40px;
    background-color: var(--pht-white);
}

.contact-page .about-intro div {
    position: absolute;
    top: 608px;
    background-color: var(--pht-white);
}

.service-page .contact-page-header {
    margin-bottom: 15px;
}







.service-page-hero-image-container {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;

}

.service-description-header {
    text-transform: uppercase;
    font-size: 5rem;
    text-align: center;
}

.fa-circle {
    font-size: .6rem;
    padding-right: 5px;
}

.service-list-item {
    display: flex;
    
    align-items: center;
    
}

.service-description-section {
    padding: 0 0 100px;
}



.service-included {
    display: flex;
    height: 650px;
   padding-left: 30px;
   padding-right: 30px;
    
}

.submitted-page footer h3 {
    padding-bottom: 0;
}

.pad {
    padding-left: 30px;
    padding-right: 30px;
}

.services-included-container {
    margin-top: 50px;

}



.service-included div {
    width: 50%;
    padding: 15px 20px;
   
}



.service-included p {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 3rem;
    
}


.service-title {
    font-weight: 300;
    font-size: 3.5rem;
    letter-spacing: 0.12rem;
    color: #343434;
    padding-left: 15px;
    border-left: 4px solid var(--pht-orange);
    
}

.service-description-p {
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: 300;
    padding-left: 30px;
    padding-right: 30px;
}

.fa-circle {
    color: var(--pht-green);
}

.service-description-section-content-container {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.service-image-container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#service-home-theater {
    background-image: url(../images/grid_images/rtihometheatbackrow.jpg);
}

#service-screens {
    background-image: url(../images/theaterBanner.jpg);
}

#service-speakers {
    background-image: url(../images/grid_images/rtihometheatbackrow.jpg);
}

#service-acoustic {
    background-image: url(../images/grid_images/starry.jpg);
}

#service-theaterlighting {
    background-image: url(../images/grid_images/theatlight.jpg)
}

#service-seating {
    background-image: url(../images/grid_images/FinalGreyHomeTheater.jpeg);
}

#service-tv-projectors {
    background-image: url(../images/grid_images/projector.jpeg);
}

#service-homeauto {
    background-image: url(../images/grid_images/automation.jpeg);
    background-position: left;
}

#service-tv-mounting {
    background-image: url(../images/grid_images/finalLivingRoomTv.jpeg);
}

#service-mraudio {
    background-image: url(../images/grid_images/mra.jpeg);
    background-position: right;
}

#service-outdoorlight {
    background-image: url(../images/grid_images/backyrdlight.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#service-outdooraudio {

    background-image: url(../images/grid_images/backyrdspeak.webp);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

#service-mraspeakers {
    background-image: url(../images/grid_images/theatlight.jpg);
}

#service-mrasources {

    background-image: url(../images/grid_images/rack.jpeg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

}

#service-mraamps{
    background-image: url(../images/grid_images/mra.jpeg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

#service-cctv {
    background-image: url(../images/grid_images/cctv.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#service-touchpads {
    background-image: url(../images/grid_images/automation.jpeg);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

#service-automation {
    background-image: url(../images/grid_images/automation.jpeg);
    background-position: left;
}

#service-app {
    background-image: url(../images/grid_images/app.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

#service-remote {
    background-image: url(../images/grid_images/rtiremote.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#service-router {
    background-image: url(../images/grid_images/router.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#service-outdoor {
    background-image: url(../images/grid_images/finalOutdoorTv.jpeg);
}

#service-lightserv {
    background-image: url(../images/grid_images/kitchenlight2.jpeg);
}

#service-light {
    background-image: url(../images/grid_images/lighting.jpeg);
}

#service-shading {
    background-image: url(../images/grid_images/shades2.jpeg);
}

#service-av {
    background-image: url(../images/grid_images/finalAiryLivingAV.jpeg);
}

#service-network {
    background-image: url(../images/grid_images/rack.jpeg);
}

#service-camera {
    background-image: url(../images/securityCam.jpeg);
    background-position: right;
}

#service-shades {
    background-image: url(../images/grid_images/shades.jpeg);
}

.service-included div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#grid-bottom-p {
    height: 300px;
    padding-top: 50px;
}


/*========*/
.home-theater-page .service-page-hero-image-container {

    background-image: url(../images/grid_images/rtihometheat.jpg);

}

.wifi-networking-page .service-page-hero-image-container {
    background-image: url(../images/network.jpeg);
}

.home-automation-page .service-page-hero-image-container {
    background-image: url(../images/homeAutomation.jpeg);
}

.multi-room-audio-page .service-page-hero-image-container {
    background-image: url(../images/grid_images/mra.jpeg);
    background-position: top;
}

.security-cameras-page .service-page-hero-image-container {
    background-image: url(../images/securityCam.jpeg);
}

.lighting-control-page .service-page-hero-image-container {
    background-image: url(../images/grid_images/kitchenlight1.jpeg);
}

.outdoor-lighting-sound-page .service-page-hero-image-container {
    background-image: url(../images/grid_images/finalPoolLighting.jpeg);
}

.av-page .service-page-hero-image-container {
    background-image: url(../images/grid_images/finalAiryLivingAV.jpeg);
}

.shades-page .service-page-hero-image-container {
    background-image: url(../images/grid_images/shades.jpeg);
}





.contact-page .service-page-hero-image-container {
    background-image: url(/images/contact.jpeg);
}

.service-video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}









.sticky-nav {
    background-color: var(--pht-green);
    position: static;




}



.centered {
    text-align: center;
}

#f-button:hover {

    cursor: pointer;

}


.hidden {
    display: none;
}



/*==ABOUT PAGE==*/

.intro-hero {
    font-size: 5.25rem;
    font-weight: 200;
    margin: 50px;
    text-align: center;
    

}



.about-page .content-section div {
    width: 50%;
}

.about-page .image-container {
    height: 300px;
    background-image: url(../images/grid_images/aboutPic.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 50px;
    margin-bottom: 50px;
    border-radius: 25px;
    box-shadow: -40px 40px var(--pht-gray);
    float: right;
    margin-right: 30px;
    
    
}

.about-us-p {
    text-align: left;
    padding-top: 0;
}

.page-title {
    font-size: 2rem;
    font-weight: 300;
    word-spacing: 0.5rem;
    line-height: 4rem;
    letter-spacing: 0.12rem;
    text-transform: capitalize;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    color: var(--pht-black);
    text-align: left;
    padding-left: 30px;





}

.page-title a {
    color: var(--pht-black);
}

.home-page .page-title {
    font-size: 2.5rem;
    font-weight: 300;
    text-align: center;
}

/*Solutions ul===*/

.cat-ul {
    display: flex;
    height: 41px;



}

.cat-li {
    border: none;

    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.4rem;
    font-weight: 300;
    word-spacing: 0.5rem;
    letter-spacing: 0.12rem;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 2px solid transparent;




}

.cat-ul .selected {
    padding-bottom: 0;
    border-left: 2px solid var(--pht-orange);
    border-right: 2px solid var(--pht-orange);


}

.selected {
    border-left: 2px solid var(--pht-orange);
    border-right: 2px solid var(--pht-orange);

}

.service-included div .option-buttons {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    
    justify-content: space-between;
   
    width: 80%;
    
   
   
    
    
}



/*+++SCROLLER*/

.scroller {
    max-width: 100%;
    background-color: var(--pht-white);


}

.scroller-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1rem;

}

.scroller[data-animated="true"] {

    overflow: hidden;
    padding: 15px 0;
    -webkit-mask: linear-gradient(90 deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90 deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.25rem));
    }
}




.home-page-hours-container .contact-info {
    color: var(--pht-white);
}

/*==SUBMITTED PAGE==*/

.submitted-text {
    height: 1300px;
}

.submitted-space {
    height: 283px;
}

.submitted {
    text-align: center;
    line-height: 4rem;
}

.center-align {
    text-align: center;
    width: 100%;
}

.submitted-page .content-container {
    display: flex;
    width: 100%;
    padding-bottom: 50px;
    justify-content: space-around;
    padding: 30px;
}

#submitted-page-footer {

    background: var(--pht-green);
}

.submitted-page .end-text {
    
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 3rem;
    letter-spacing: 0.12rem;
    word-spacing: 0.23rem;
    
    text-align: center;
    padding: 15px 30px;
}

.submitted-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
   
}




.content-container div {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
}

.submitted-page .content-container ul {
    padding: 25px;
}

.submitted-page .content-container ul li {
    padding-top: 30px;

}



.submitted-page-wrapper .content-container div, .submitted-page-wrapper h1, .submitted-page-wrapper .center-align p {
    background: var(--pht-white);
    /*
    border: 1px solid var(--pht-black);
    */

    
}



.submitted-page-wrapper .content-container div {
    width: 40%;
    padding: 30px;
}




.submitted-page h2 {
    font-size: 3rem;
    font-weight: 300;
}

.submitted-page .content-container p {
    font-size: 1.5rem;
    font-weight: 300;
}

.submitted-page .content-container div:last-of-type{
    padding-bottom: 50px;
}

.submitted-page .center-align {
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
}





#sub-menu {
    height: auto;
   

}

#sub-menu li {
    padding-left: 30px;
}

.hero-title, .hero-p {
    margin-bottom: 15px;
}


.contact-section-intro-overlay {
   

    
    height: 800px;
    width: 100%;
   
    position: relative;
   

}

/*
.w {
    border-bottom: 1px solid var(--pht-white);
}
    */

 
    .contact-section-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
   
    color: var(--pht-white);
    width: 100%;
    height: 100%;
    top: 0;
    
   
}

.dark-overlay .service-bold {
    font-weight: 500;
    font-size: 1.6rem;
}

.dark-overlay .service-wrapper {
    width: 100%;
    height: 100%;
}

.dark-overlay {
    height: 100%;
}

.submitted-page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.shades-page .service-included, .wifi-networking-page .service-included {

    height: 760px;

}

.services-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pht-black);
    width: 85%;
    
    margin: 0 auto;
    padding-top: 50px;
}

/*=======THEATER PROCESS SECTION====*/

.process-wrapper {
    display: flex;
    height: 400px;
    width: 100%;
  padding-bottom: 15px;
    
}

.process-wrapper div {
    width: 50%;
    display: flex;

}

.home-theater-process-container {
    padding-top: 50px;
  
}



.home-theater-process-container .service-title, .home-theater-process-container p {
    height: fit-content;
}

.process-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--pht-green);
    padding: 30px;

}

.process-title .service-title {
    padding: 0;
    border: 0;
    
    text-align: center;
}



.process-description {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 30px;
}

.outdoor-lighting-sound-page .process-description {
   
    justify-content: space-evenly;
    
    
}

.outdoor-lighting-sound-page .process-wrapper .service-list {
    
    height: 50%;
    width: 80%;
}

.outdoor-lighting-sound-page .process-wrapper {
    height: 500px;
}



.process-description p {
    width: 80%;
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: 300;
}

.outdoor-lighting-sound-page .process-wrapper {
    height: 400px;
}

.process-title h3 {
    font-size: 3.5rem;
    color: var(--pht-white);
    text-transform: uppercase;
    font-weight: 300;
    
}

.service-description-section .service-description-section-content-container .services-included h1 {
   margin-bottom: 50px;
}

.outdoor-lighting-sound-page .process-description {
    flex-direction: column;
}











/*==MEDIA QUERIES==*/




@media (max-width: 1160px) {










    .footer-section {
        padding-bottom: 20px;
        width: 100%;

    }





    footer p {
        text-align: center;
    }

    #footer-nav-container {
        min-width: 378px;
    }

    .footer-nav-li {
        padding-bottom: 8px;
        text-align: center;
    }



    .footer-socials {
        width: 15%;

        padding-bottom: 0;
    }








}

@media (max-width: 1040px) {


    .contact-info-top {
        display: none;
    }



    .service-section-row-container {
        flex-direction: column;
        padding-top: 0;
        justify-content: space-around;
        min-width: 100%;

    }

    .service-section-row-container:last-of-type {
        justify-content: flex-start;
        padding-top: 25px;
    }



    #services-section {
        height: 4000px;
        padding-bottom: 0;


    }


    .service-section {
        height: 45%;
    }






}

@media (max-width: 1010px) {

    #hero-text {
        padding-bottom: 40px;
    }
}

@media (max-width: 940px) {

    #hero-left {
        padding-bottom: 0;

    }

    #to {
        border-bottom: none;
    }

    .reviews-container {
        flex-direction: column;
        min-width: auto;

    }

    .review-card {
        margin-bottom: 100px;
    }

}

@media (max-width: 930px) {

}



@media (max-width: 1050px) {

    .home-theater-page #contact-section {
        margin-top: 50px;
    }

    .service-included div .option-buttons {
        
       
        padding-left: 30px;
        width: 100%;
       
    }

   

    .contact-section {
        padding-top: 50px;
    }

    .services-included-container {
        padding-left: 0;
        padding-right: 0;
    }

    
    .dark-overlay .service-wrapper {
        height: 85%;
    }

    .shades-page .dark-overlay .service-wrapper {
        height: 100%;
    }
        

    #mobile-homeauto {

        background-image: url(../images/grid_images/automation.jpeg);
        
        background-repeat: no-repeat;
        background-size: cover;



    }

    #mobile-theaterlighting {
        background-image: url(../images/grid_images/theatlight.jpg);
        background-position: center;
    }

    #mobile-acoustic {
        background-image: url(../images/grid_images/starry.jpg);
        background-position: center;
    }

    #mobile-projectors {
        background-image: url(../images/grid_images/projector.jpeg);
        background-position: center;
        background-size: 80%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-screens {
        background-image: url(../images/theaterBanner.jpg);
        background-size: 210%;
        background-position: center;
    }

    #mobile-speakers {
        background-image: url(../images/grid_images/rtihometheatbackrow.jpg);
        background-position: center;
    }

    #mobile-seating {
        background-image: url(../images/grid_images/FinalGreyHomeTheater.jpeg);
        background-position: center;
        background-size: cover;
    }

    #mobile-tv-mounting {
        background-image: url(../images/grid_images/finalLivingRoomTv.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        
    }

    #mobile-mraudio {

        background-image: url(../images/grid_images/mra.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }

    #mobile-mraspeakers {
        background-image: url(../images/grid_images/theatlight.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;


    }

    #mobile-router {
        background-image: url(../images/grid_images/router.jpeg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-outdoorlight {

        background-image: url(../images/grid_images/backyrdlight.jpeg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

    }

    #mobile-outdooraudio {
        background-image: url(../images/grid_images/backyrdspeak.webp);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-mraamps {
        background-image: url(../images/grid_images/mra.jpeg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    }

    #mobile-mrasources {
        background-image: url(../images/grid_images/rack.jpeg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-cctv {
        background-image: url(../images/grid_images/cctv.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #mobile-touchpads {
        background-image: url(../images/grid_images/automation.jpeg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-remote {
        background-image: url(../images/grid_images/rtiremote.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #mobile-app {
        background-image: url(../images/grid_images/app.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

    }

    #mobile-hometheater {
        background-image: url(../images/grid_images/rtihometheatbackrow.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #mobile-outdoor {

        background-image: url(../images/grid_images/finalPorchTv.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #mobile-network {

        background-image: url(../images/grid_images/rack.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }

    #mobile-shading {
        background-image: url(../images/grid_images/shades2.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 850px;
    }

    #mobile-shades {
        background-image: url(../images/grid_images/shades.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #mobile-cams {
        background-image: url(../images/securityCam.jpeg);
       background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #mobile-lightserv {

        background-image: url(../images/grid_images/kitchenlight2.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

    }

    #mobile-lighting {
        background-image: url(../images/grid_images/lighting.jpeg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

   

    .service-included .service-image-container {
        display: none;
        
    }

    .dark-overlay {
        background: rgba(0, 0, 0, 0.75);
    }

    .fa-circle {
        color: var(--pht-orange);
    }

    .service-included {
        flex-direction: column;
        
        border-bottom: 1px solid var(--pht-white);
        padding-left: 0;
        padding-right: 0;

        
    }

    .service-included {
        color: var(--pht-white);
    }

    .service-title {
        color: var(--pht-white);
    }
   .service-included .hero-button {
    background: var(--pht-white);
    color: var(--pht-black);
   }

    .service-included .hero-button:hover {
        background-color: var(--pht-orange);
        
        
    }

   .service-included a, .service-included p, .service-included ul{
        padding-left: 30px;
        padding-right: 30px;
    }

    .service-included h3 {
        margin-left: 30px;
    }

   

    .service-included div {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .service-included .option-buttons {
        height: auto;
    }

    .service-included:nth-of-type(even) {
        flex-flow: column-reverse;
        
    }

  

    /*
    .service-included:nth-of-type(odd) {
        background-color: var(--pht-gray);
        color: var(--pht-white);

    }
        */

    .service-description-section {
        padding: 0;
    }

    .white {
        color: var(--pht-white);
    }









    #hero-content-container {
        margin-top: 0;
        align-items: center;
    }

    #hero-description {
        text-align: center;
        padding: 10px 10px 30px;
    }


    #hero {
        height: auto;
    }

    #hero-left {
        position: relative;
        width: 100%;
        height: 90%;
        padding: 30px 30px 60px;
        background-color: var(--pht-gray);
    }

    form {
        width: 95%;
    }

    #hidden-form {
        width: 100%;

    }





    #hero-right {
        width: 100%;

    }

    #hero-video {
        width: 100%;
    }







    #hero {
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;

    }

    #hero-video-container {
        height: 319px;
    }

    #hero-video {
        border-radius: 0;

    }



    #hero-text-container {

        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 25px;

    }

    #hero-text {
        justify-content: center;
        text-align: center;
    }

    #hero-button-container {
        padding-right: 0;

    }





    #services-section-content-container {

        height: 100%;
        justify-content: space-around;
    }





    .service-section-row-container {

        justify-content: space-around;

    }









    #hero-form-container {

        flex-direction: column;
        align-items: center;


    }

    .grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;

    }

    .grid-image-container {
        width: 90%;
        height: 350px;
    }


    /*==CONTACT PAGE==*/



    #contact-page-info-wrapper {
        flex-direction: column;
        justify-content: center;
    }

    #contact-page-contact-form-container {
        width: 100%;
    }

    .hours-container {

        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 400px;
    }

    .contact-page .hours-container {
        padding-top: 50px;
    }

    .contact-page-info-container {
        width: 90%;
        min-width: 265px;
    }

    .contact-footer-socials-container {
        justify-content: center;
    }

}

@media (max-width: 800px) {



    #nav-top-links {
        display: none;
    }

    #hero-form-container {
        top: 0;
    }



    .home-page .nav-top {
        position: relative;
        background-color: rgb(25, 25, 25);
    }

    #hero-left {
        background-color: rgb(25, 25, 25);
    }


    .top-container {
        display: none;
    }


    .hamburger-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .hamburger-button-container {

        display: flex;


        width: 40px;
        height: 40px;


        justify-content: center;
        align-items: center;
        border-radius: 10px;



        position: absolute;
        right: 15px;
        top: 15px;







    }







    .line {
        height: 45%;
        width: 65%;
        display: flex;
        flex-direction: column;


        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }

    .inner-line {
        height: 50%;

        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }

    #logo-container {

        display: flex;
        justify-content: center;


        width: 100%;
    }

    .page-title {
        text-align: center;
        padding-left: 0;
        font-size: 2.5rem;
        font-weight: 300;
        margin-top: 15px;
       
    }

   

    /*==CONTACT PAGE==*/



    /*
    .contact-page-header-container {

        height: 500px;
    }
    */
}


@media (max-width: 780px) {
    #ga-biz {
        flex-direction: column;
    }







}

@media (max-width: 700px) {

    
.about-page .content-section div {
    width: 85%;
    
    margin: 0 auto;
    margin-bottom: 50px;
}
    

    .about-page .image-container {
        
        float: none;
      
        margin: 0;
        box-shadow: none;
        
    }

    .about-us-p {
        text-align: center;
    }

    .about-page .content-section {
        display: flex;
        flex-direction: column;
        flex-direction: column-reverse;

    }
    .submitted-page .content-container {
        flex-direction: column;
        width: 100%;
        align-items: center;

        
       
    }

    

    

   

    .submitted-page .content-container div {
        padding-top: 50px;
        width: 100%;
    }

    /*==theater process section===*/

    .process-wrapper .process-title {

        display: none;
        
        
    }

    

    .process-wrapper {
        margin: 0;
        border-bottom: 1px solid var(--pht-white);
    }

    .process-wrapper .process-description {
        width: 100%;
       
        background: #343434;
        background: var(--pht-gray);
        color: var(--pht-white);

    }

    .process-description .hidden {
        display: block;
        color: white;
    }

    .process-description {
        flex-direction: column;
        justify-content: space-evenly;
        padding-left: 30px;
        padding-right: 30px;
        align-items: flex-start;
    }

    .process-description p {
        text-align: start;
        width: 100%;
    }

    .service-title .hidden {
        padding: 2px 10px;
        border-left: 4px solid var(--pht-orange);
    }




}

@media (max-width: 600px) {

    html {
        font-size: 9px;
    }

    .center-text{
        border-left: none;
        
        text-align: center;
        
    }

   

    

   

    .call-button-container {
        display: block;
    }
    #contact-section-wrapper {
        padding: 0;
    }





    .review-card {
        width: 90%;
    }

    .reviews-container {
        width: auto;
    }

    #contact-intro-p {
        margin-top: 100px;
    }



    .image-container {
        width: 100%;
    }

    .intro-section h1 {
        font-size: 4rem;
    }

    footer {
        padding-left: 25px;
        padding-right: 25px;
    }




    #contact-page-form {
        width: 100%;

    }

    .contact-page-header-container {
        height: auto;
    }

    #contact-page-info-wrapper {
        margin-top: 50px;
    }

    .contact-page-intro {
        width: 85%;
        min-width: fit-content;
        text-align: center;
    }

    .contact-page-header-container div:first-of-type {
        display: flex;
        justify-content: center;
    }

    .contact-page-info-container img {
        margin-left: 30px;
    }




    #hidden-form {
        width: 100%;


    }



    .category {
        margin: 10px;
    }



    .chev {
        display: none;
    }

    .footer-socials-container {
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: space-around;
    }

    .footer-socials {
        height: auto;
        padding-top: 25px;
    }

    footer #home-page-info-container p, footer #home-page-info-container h3 {
        width: 100%;
        text-align: center;



    }

    .contact-form-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

   

   
    .av-page .service-included:first-of-type .hero-button {
        margin: 0;
       
    }

   

    .contact-section-intro-overlay {
        height: 850px;
    }

    


    
}