@charset "UTF-8";

header{
    --height:100vh;
    --min-height:600px;

    height:var(--height);
    min-height:var(--min-height);
    position:relative;

    & .background{
        height:var(--height);
        min-height:var(--min-height);
        border-bottom-left-radius:15px;

        & img{
            object-position:center 15%;
        }
    }

    & h6{
        margin-top:var(--navigation-h-1);
    }

    & p{
        margin:1.5rem 0 2rem 0;
    }

    & > .social{
        --media-width:50px;

        width:var(--media-width);
        height:100%;
        display:flex;
        flex-wrap:nowrap;
        flex-flow:column;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:0;
        right:var(--zeta-density-1);
        z-index:9;

        & a{
            margin:.15rem 0;
            width:var(--media-width);
            height:var(--media-width);
            display:flex;
            align-items:center;
            justify-content:center;
            background-color:transparent;
            border-radius:50%;
            font-size:1.25rem;
            color:#fff;
            text-decoration:none;
            transition:all 0.3s ease-in-out;

            & > span{
                transition:transform 0.8s ease-out;
            }

            &:hover,
            &:focus,
            &:active{
                &:first-child{
                    background-color:var(--secondary-color);
                }

                &:nth-child(2){
                background-color:var(--tertiary-color);
                }

                &:nth-child(3){
                    background-color:#0077b5;
                }

                &:last-child{
                    background-color:#405de6;
                }

                & > span{
                    transform:rotateY(360deg);
                }
            }
        }
    }

    & > img{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:-25%;
        z-index:-1;
    }
}

#homeMain{
    & .col{
        & .box{
            padding:2rem 1.5rem;
            min-height:325px;
            display:flex;
            flex-flow:column nowrap;
            justify-content:center;
            background-color:#fff;
            box-shadow:0px 5px 60px 0px rgba(2, 24, 93, 0.15);
            border-radius:10px;

            & h4{
                margin:.5rem 0 1rem 0;
                text-transform:capitalize;
            }
        }

        &:nth-child(even){
            & .box{
                margin-top:60px;
            }
        }
    }
}

#homeAbout{
    & .container{
        position:relative;

        & .background{
            height:650px;
            border-radius:15px;
            position:relative;
            z-index:0;

            & img{
                filter:grayscale();
            }
        }

        & > span,
        &::before,
        &::after{
            position:absolute;
        }

        &::before{
            content:"";
            width:45px;
            height:65px;
            background-color:var(--light-color);
            right:55px;
            bottom:-30px;
            z-index:1;
        }

        &::after{
            content:"";
            background-color:#fff;
            width:50px;
            height:50px;
            right:-25px;
            top:135px;
            transform:rotate(45deg);
            z-index:1;
        }

        & > span:first-of-type{
            width:120px;
            height:125px;
            border:4px solid var(--light-color);
            top:-50px;
            right:-25px;
            z-index:-1;
        }

        & > span:last-of-type{
            width:85px;
            height:85px;
            background-color:var(--light-color);
            top:70px;
            left:-15px;
            z-index:1;
        }
    }
}

#homeExperience{
    & .box{
        min-height:200px;
        padding:2rem;
        display:flex;
        flex-flow:column nowrap;
        justify-content:center;
        border:1px solid rgba(255,255,255,.15);
        border-radius:10px;

        & h3{
            margin-bottom:.25rem;
            font-size:4rem;
            font-weight:400;
            color:#fff;
        }

        & h5{
            margin-bottom:0;
            font-weight:400;
            color:#fff;
        }
    }
}

#homeParallax{
    & .solar{
        & h2{
            color:#fff;
        }

        & p{
            color:rgba(255,255,255,.75);
        }
    }

    & .parallax-obj{
        & img{
            filter:brightness(.25);
        }
    }
}

#homeTestimonials{
    & figure{
        border-radius:10px;
        height:600px;
    }
}

#homeBrands{
    border-bottom:1px solid var(--zeta-theme-light);
}

#homeContact{
    & .box{
        min-height:200px;
        padding:1.5rem;
        border:1px solid var(--zeta-theme-light);
        border-radius:10px;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow-wrap:break-word;

        & h4{
            margin:.5rem 0 0 0;
            text-transform:capitalize;
        }
    }

    & form{
        margin-top:2rem;
    }
}

@media(max-width:991px){
    #homeMain{
        & .col{
            &:nth-child(even){
                & .box{
                    margin-top:0;
                }
            }
        }
    }
}

@media(max-width:767px){
    header{
        height:auto;

        & .background{
            height:50vh;
            margin-top:var(--navigation-h-2);
            border-radius:10px;
        }

        & h6{
            margin-top:0;
        }

        & > .social{
            height:auto;
            top:15%;

            & a{
                margin:0;
                border-radius:0;

                &:first-child{
                    border-top-right-radius:5px;
                    border-top-left-radius:5px;
                    background-color:var(--secondary-color);
                }

                &:nth-child(2){
                    background-color:var(--tertiary-color);
                }

                &:nth-child(3){
                    background-color:#0077b5;
                }

                &:last-child{
                    border-bottom-right-radius:5px;
                    border-bottom-left-radius:5px;
                    background-color:#405de6;
                }
            }
        }

        & > img{
            top:auto;
            bottom:0;
        }
    }
}

@media(max-width:575px){
    #homeAbout{
        & .container{
            & .background{
                height:450px;
            }
        }
    }

    #homeTestimonials{
        & figure{
            height:450px;
        }
    }
}