@charset "UTF-8";
header{
    height:400px;
}

header .content{
    height:inherit;
    display:flex;
    align-items:center;
}

header h1,
header h6{
    color:#fff;
}

header h6{
    margin-top:5rem;
    text-transform:uppercase;
}
header h1{
    text-transform:capitalize;
    font-family:var(--primary-font);
}

header .breadcumb{
    display:inline-block;
    width:auto;
    padding:0.5rem 1rem;
    background-color:var(--tertiary);
    border-radius:8px;
}

header .breadcumb p{
    margin:0;
    color:#fff;
    font-weight:600;
}

header .breadcumb p span{
    margin:0 0.25rem;
}

header .breadcumb p a{
    color:#fff;
    text-decoration: none;
    font-weight:400;
}

#about #whyAbout h4{
    margin:1rem 0;
    color:#fff;
}

#services #mainServices .box{
    position:relative;
    height:350px;
}

#services #mainServices .box .background{
    height:inherit;
}

#services #mainServices .box .solar{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background:
        linear-gradient(
            180deg, rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.7) 100%
        );
    border-radius:10px;
}

#services #mainServices .box .solar::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:3;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    border-radius:10px;
    transition: opacity 0.5s ease-in;
    opacity:0;
}

#services #mainServices .box:hover .solar::before,
#services #mainServices .box:focus .solar::before,
#services #mainServices .box:active .solar::before{
    opacity:1;
}

#services #mainServices .box .solar .tag{
    position:absolute;
    top:20px;
    left:20px;
    z-index:3;
    width:auto;
    height:auto;
    padding:0.5rem 1rem;
    background-color:var(--tertiary);
    border-radius:5px;
    color:#fff;
    font-weight:500;
}

#services #mainServices .box .solar .content{
    position:absolute;
    bottom:0;
    left:0;
    z-index:3;
    height:auto;
    padding:20px;
}

#services #mainServices .box .solar .content h4{
    color:#fff;
    margin-bottom:0;
}

#services #mainServices .box .solar .content a{
    display:inline-flex;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid #fff;
    align-items:center;
    justify-content:center;
    text-decoration: none;
    color:#fff;
    font-size:1.5rem;
    transition:all 0.3s ease-in;
}

#services #mainServices .box .solar .content a:hover,
#services #mainServices .box .solar .content a:focus,
#services #mainServices .box .solar .content a:active{
    border-color:var(--primary);
    background-color:var(--primary);
}

#services #mainServices .box .solar .content a span{
    margin-left:3px;
}

#contact #mainContact .box{
    padding:1.5rem;
    background-color:#fff;
    border:2px dashed #ddd;
    border-radius:10px;
    text-align:center;
    transition:border-color 0.3s ease;
}

#contact #mainContact .box:hover,
#contact #mainContact .box:focus,
#contact #mainContact .box:active{
    border-color:var(--primary);
}

#contact #mainContact .box span{
    font-size:3rem;
    color:var(--secondary);
    transition:color 0.3s ease-in;
}

#contact #mainContact .box:hover span,
#contact #mainContact .box:focus span,
#contact #mainContact .box:active span{
    color:var(--primary);
}

#contact #mainContact .box h5{margin-top:1.5rem;color:#222;}

#contact #formContact .form-box{
    margin-top:3rem;
}

#contact #formContact .form-box fieldset label span{
    color:var(--primary);
}

#iframe-tms{height:89vh;width:100%;}