/************************************************
 The All In One Group, LLC
 Master Style Sheet
************************************************/

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#081826;
    color:#fff;
    line-height:1.6;
}

/************************************************
 HOME PAGE HERO
************************************************/

.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    background-image:url("../images/hero-desktop.jpeg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

/************************************************
 iPAD LANDSCAPE
************************************************/

@media only screen
and (min-width:768px)
and (max-width:1366px)
and (orientation:landscape){

.hero{
    min-height:66.67vw;
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    background-color:#081826;
}

}

/************************************************
 MOBILE HERO
************************************************/

@media (max-width:768px){

.hero{
    background-image:url("../images/hero-mobile.jpeg");
    background-position:top center;
    background-repeat:no-repeat;
    background-size:contain;
    background-color:#081826;
}

}

/************************************************
 CLICKABLE SERVICE AREAS
************************************************/

.service-links{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
}

.service-links a{
    position:absolute;
    display:block;
    text-decoration:none;
    transition:none;
    background:transparent !important;
    border:none;
    outline:none;
    pointer-events:auto;
}

/************************************************
 DESKTOP CLICK ZONES
 INVISIBLE / ANGLED TO MATCH HERO
************************************************/

/******** Plumbing ********/

.service-links a:nth-child(1){
    left:0%;
    top:64%;
    width:17%;
    height:36%;

    clip-path:polygon(
        0% 0%,
        100% 0%,
        82% 100%,
        0% 100%
    );
}

/******** Electrical ********/

.service-links a:nth-child(2){
    left:10%;
    top:64%;
    width:24%;
    height:36%;

    clip-path:polygon(
        27% 0%,
        100% 0%,
        79% 100%,
        0% 100%
    );
}

/******** HVAC ********/

.service-links a:nth-child(3){
    left:29%;
    top:64%;
    width:23%;
    height:36%;

    clip-path:polygon(
        22% 0%,
        100% 0%,
        78% 100%,
        0% 100%
    );
}

/******** Landscaping ********/

.service-links a:nth-child(4){
    left:46%;
    top:64%;
    width:23%;
    height:36%;

    clip-path:polygon(
        18% 0%,
        100% 0%,
        80% 100%,
        0% 100%
    );
}

/******** Carpentry ********/

.service-links a:nth-child(5){
    left:63%;
    top:64%;
    width:23%;
    height:36%;

    clip-path:polygon(
        17% 0%,
        100% 0%,
        82% 100%,
        0% 100%
    );
}

/******** Technology ********/

.service-links a:nth-child(6){
    left:80%;
    top:64%;
    width:20%;
    height:36%;

    clip-path:polygon(
        18% 0%,
        100% 0%,
        100% 100%,
        0% 100%
    );
}

/************************************************
 KEEP SERVICE BUTTONS COMPLETELY INVISIBLE
************************************************/

@media (hover:hover){

.service-links a:hover{
    background:transparent !important;
    box-shadow:none;
}

}

.service-links a:focus,
.service-links a:active{
    background:transparent !important;
    outline:none;
    box-shadow:none;
}

/************************************************
 PHONE CLICK ZONES
************************************************/

@media (max-width:768px){

.service-links{
    pointer-events:none;
}

.service-links a{
    pointer-events:auto;
}

/******** Plumbing ********/

.service-links a:nth-child(1){
    left:0%;
    top:51%;
    width:33.333%;
    height:21%;
}

/******** Electrical ********/

.service-links a:nth-child(2){
    left:33.333%;
    top:51%;
    width:33.333%;
    height:21%;
}

/******** HVAC ********/

.service-links a:nth-child(3){
    left:66.666%;
    top:51%;
    width:33.334%;
    height:21%;
}

/******** Landscaping ********/

.service-links a:nth-child(4){
    left:0%;
    top:72%;
    width:33.333%;
    height:21%;
}

/******** Carpentry ********/

.service-links a:nth-child(5){
    left:33.333%;
    top:72%;
    width:33.333%;
    height:21%;
}

/******** Technology ********/

.service-links a:nth-child(6){
    left:66.666%;
    top:72%;
    width:33.334%;
    height:21%;
}

}

/************************************************
 PAGE HEADER
************************************************/

.page-header{
    background:#10263b;
    text-align:center;
    padding:70px 20px;
    border-bottom:4px solid #d4af37;
}

.page-header h1{
    font-size:3rem;
    color:#d4af37;
    letter-spacing:2px;
    margin-bottom:15px;
}

.page-header p{
    font-size:1.2rem;
}

/************************************************
 CONTENT
************************************************/

.page-content{
    max-width:1200px;
    margin:auto;
    padding:60px 25px;
}

.page-content h2{
    color:#d4af37;
    margin-bottom:20px;
}

.page-content p{
    margin-bottom:18px;
}

/************************************************
 SERVICES
************************************************/

.services{
    max-width:1300px;
    margin:auto;
    padding:60px 25px;
}

.services h2{
    text-align:center;
    color:#d4af37;
    margin-bottom:35px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

/************************************************
 CARDS
************************************************/

.card{
    background:#11273b;
    padding:30px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 0 20px rgba(212,175,55,.30);
}

.card h3{
    color:#d4af37;
    margin-bottom:15px;
}

.card p{
    color:#f0f0f0;
}

/************************************************
 WHY US
************************************************/

.why-us{
    max-width:1100px;
    margin:auto;
    padding:60px 25px;
}

.why-us h2{
    color:#d4af37;
    text-align:center;
    margin-bottom:30px;
}

.why-us ul{
    list-style:none;
}

.why-us li{
    background:#10263b;
    margin-bottom:15px;
    padding:18px;
    border-left:5px solid #d4af37;
    border-radius:6px;
}

/************************************************
 BUTTONS
************************************************/

.goldButton{
    display:inline-block;
    background:#d4af37;
    color:#081826;
    text-decoration:none;
    padding:15px 35px;
    border-radius:8px;
    font-weight:bold;
    transition:.3s;
}

.goldButton:hover{
    background:#f5d76e;
    transform:translateY(-2px);
}

/************************************************
 CALL TO ACTION
************************************************/

.cta{
    text-align:center;
    padding:80px 20px;
    background:#0d1e30;
}

.cta h2{
    color:#d4af37;
    margin-bottom:20px;
}

.cta p{
    max-width:700px;
    margin:auto auto 30px;
}

/************************************************
 FOOTER
************************************************/

footer{
    background:#07131f;
    text-align:center;
    padding:30px;
    color:#ccc;
    border-top:3px solid #d4af37;
}

/************************************************
 FADE ANIMATION
************************************************/

.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.visible{
    opacity:1;
    transform:translateY(0);
}

/************************************************
 RESPONSIVE
************************************************/

@media (max-width:900px){

.page-header h1{
    font-size:2.2rem;
}

.page-content,
.services,
.why-us{
    padding:40px 20px;
}

}

@media (max-width:600px){

.page-header h1{
    font-size:1.8rem;
}

.page-header p{
    font-size:1rem;
}

.service-grid{
    grid-template-columns:1fr;
}

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

}

/************************************************
 SUBPAGE HERO
************************************************/

.subpage-hero{
    width:100%;
    overflow:hidden;
    background:#081826;
}

.subpage-hero-image{
    display:block;
    width:100%;
    height:auto;
}

/* Phone */

@media (max-width:768px){

.subpage-hero-image{
    width:100%;
}

}