* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body {

    font-family: 'Archivo', sans-serif;

}

a {

    text-decoration: none;

}



.header {

    background: :#fff;

    box-shadow: 0px 2px 2px #dfdfdf;

    padding: 10px 0;

}

.list-right {

    text-align: right;

}

.list-right a {

    padding: 0px 30px;

}

.list-right .tel-head {

    font-size: 24px;

    color: #000000;

    font-weight: 500;

    vertical-align: middle;

    text-decoration: none;

}

.tel-head i {

    color: #ff7d00;

}

.btn2 {



    color: #fff;

    padding: 10px 20px;

}

.banner-main {

    background: url(../img/hero-products.webp) center no-repeat;

    background-size: cover;

    position: relative;

    padding: 50px 0;

}

.banner-main::before {

    position: absolute;

    content: '';

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background: #442521c7;
    ;





}

.pos-inhe {

    /*position: inherit;*/

}

.img-banner {

    display: block;

    margin-left: 0;

    position: absolute;
    f bottom: 0;

    left: 0;

}

.img-banner img {

    width: 65%;

}

.cta-form-2 {

    padding: 20px 30px 20px 30px;

    border-radius: 7px;

}

.wrapper .radio1,
.radio2 {

    margin-bottom: 1rem;

}

input[type="radio"] {

    display: none;

}

#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2,
#option-3:checked:checked~.option-3 {

    border-color: #ff7d00;

    background: #ff7d00;

    color: #fff;

}

.wrapper .option {

    background: #fff;

    height: 100%;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    /* margin: 0 10px; */

    border-radius: 5px;

    cursor: pointer;

    padding: 5px 10px;

    border: 2px solid lightgrey;

    transition: all 0.3s ease;

}



.cta-form-main {

    background: #000000bf;

}



.cta-form-main h2 {

    margin-bottom: 0;

    color: #fff;

}

.cta-form-main h5 {

    margin-bottom: 20px;

    color: #fff;

}

.btn3 {

    background: none;

    color: #ff7d00;

    padding: 10px 20px;

    border: 1px soild #ddd;

    border: none;

    width: !00%;

    border-radius: 0.25em;

    width: 100%;

    border: 1px solid #ff7d00;

    -webkit-transition: all .3s ease-in-out;
    ;

    -moz-transition: all .3s ease-in-out;
    ;

    -ms-transition: all .3s ease-in-out;
    ;

    -o-transition: all .3s ease-in-out;
    ;

    transition: all .3s ease-in-out;
    ;

}

.btn3:hover {

    background: #ff7d00;

    color: #fff;

}

.tc-cc {

    font-size: 12px;

    color: #fff;
    margin-bottom: 0;

}

.tc-cc {
    text-align: left;
}

.tc-cc a {
    color: #fff;
}

.tc-cc a:hover {
    color: #ff7d00;
    text-decoration: none;
}

.btn.btn2 {

    font-size: 18px;

    font-weight: 600;

    color: #ff7d00;

    text-transform: uppercase;

}

/* ----- span0 ------- */

.span0 {

    padding: 70px 0;

}

.heading h2 {

    margin-bottom: 0;

}

.heading h2 .clr-heading {

    color: #ff7d00;

}

.line {

    width: 10%;

    height: 3px;

    background: #ff7d00;

    display: inline-block;

}

.why-us p {

    font-size: 22px;

}

.heading {

    margin-bottom: 30px;

}

.icon-box {

    border: 1px dashed #2d3e50;

    padding: 30px 30px;

    margin: 0 20px;

    border-radius: 5px;

    margin-top: 30px;



}

.icon-box img {

    width: 60px;

    margin-bottom: 20px;

}

/* ----------- Span1 ------------- */

.span1 {

    padding: 70px 0;

    background: url(../img/solar-banner.webp) center no-repeat;

    background-size: cover;

    position: relative;

}

.span1::before {

    position: absolute;

    content: '';

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background: #000000d9;

}

.white-heading {

    color: #fff;

}

.rate-box {

    color: #fff;

    border: 1px solid #fff;

    padding: 35px 40px;

    margin: 0 20px;

    min-height: 495px;

}

.rate-box h5 {

    margin-bottom: 30px;

}

.btn2:hover {

    color: #fff;

}

.rate-box h4 {

    border-bottom: 1px solid #939393;

    padding-bottom: 10px;

}



/* ---------------- span2 ---------------------- */

.span2 {

    padding: 70px 0;

}

.review-img-box {

    display: flex;

    margin-bottom: 10px;

}

.fa.fa-star {

    color: #deb621;

}

.review-img-box .p-img {

    padding-right: 10px;

}

.review-img-box .p-img img {

    border-radius: 50%;

}

.testi-box {

    padding: 15px 20px;

    background: #fbfbfb;

    box-shadow: 0px 1px 5px #cdcdcd;

    margin-bottom: 20px;

}

.rating-name h5 {

    margin-bottom: 0;

}

/* ---------- span3 ----------- */

.span3 {

    padding: 70px 0;

    background: #000000;

}

.map img {

    width: 100%;

}

.span3-box-content h2 {

    color: #fff;

    font-size: 35px;

    text-transform: uppercase;

    margin-bottom: 28px;

}

.span3-box-content p {

    color: #fff;

    font-size: 18px;

    line-height: 1.4;

}

.span3-box-content p a {

    color: #ff7d00;

    text-decoration: none;



}

.btn-box {

    margin-top: 30px;

}

/* ---------------- span4 ---------------- */

.span4 {

    padding: 70px 0;

}



.box42 {

    margin: 25px 15px;

    padding: 10px;

    text-align: center;

    border: 1px solid #ddd;

    -webkit-transition-duration: 0.3s;

    transition-timing-function: ease;

    cursor: pointer;

}

.box42 img {

    width: 100%;

}

/* ------------------- Footer ---------------- */

.footer {

    padding: 35px 0;

    background: url(../img/solar-banner-footer.webp) center no-repeat;

    background-size: cover;

    position: relative;

}

.footer::before {

    position: absolute;

    content: '';

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background: #1d1d1dd9;

}

.footer-widget.abt-footer {

    padding-left: 0;

    position: relative;

}

.footer-widget ul {

    list-style-type: none;

}

.link-footer {

    color: #fff;

}

.footer-widget ul li {

    color: #fff;

    line-height: 1.8;

}

.footer-widget ul li i {

    padding-right: 10px;

}

.footer-widget ul li a {

    color: #fff;

    text-decoration: none;

}

.footer-widget ul li a:hover {

    color: #ff7d00;

}

.footer-widget p {
    padding: 25px 25px 0 25px;
    color: #fff;
}


.footer-widget p a {
    color: #fff;
    text-decoration: none;
}

.footer-widget p a:hover {
    color: #FF7D00;
}

.copyright {

    background: #121212;

    color: #fff;

    padding: 15px 0 0;

}







.typ-subhed {



    font-size: 18px;

    line-height: 20px;

    letter-spacing: 0;

}



/*.ctrl-standard.fx-sliderIn {

  color: #81aaa4;

  border-color: #81aaa4;

}*/

.ctrl-standard.fx-sliderIn::after {

    background: #ff7d00;

}

.ctrl-standard.fx-sliderIn.is-reversed::after {

    width: 300%;

}

.ctrl-standard.fx-sliderIn.is-reversed:hover {

    color: #81aaa4;

}

.ctrl-standard.fx-sliderIn.is-reversed:hover::after {

    width: 0;

}

[class*="ctrl-"] {

    padding: 5ox 10px;

    border-radius: 2px;

    border: 1px solid #ff7d00;

}

[class*="ctrl-"][class*="fx-"]:hover,

[class*="ctrl-"][class*="fx-"].active {

    color: #fff;

}

[class*="ctrl-"][class*="fx-"].is-reversed {

    color: #231f20;

}



[class*="fx-"],

[class*="fx-"]:hover {

    transition: color 0.3s ease-in-out;

}

[class*="fx-"]:not(.fx-dyna) {

    position: relative;

    z-index: 1;



    overflow: hidden;

}

[class*="fx-"]:not(.fx-dyna)::after,

[class*="fx-"]:not(.fx-dyna)::before {

    content: "";

    display: block;

    position: absolute;

    z-index: -1;

}

[class*="fx-bubble"]::after {

    transition: height 0.3s ease-in-out;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    height: 0;

    width: 100%;

}

[class*="fx-bubble"]:hover::after,

[class*="fx-bubble"].active::after {

    transition: height 0.3s ease-in-out;

    height: 300%;

}

[class*="fx-bubble"]:disabled:hover::after {

    height: 0;

}

.fx-sliderIn::after {

    transition: width 0.3s ease-in-out;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: 0;

}

.fx-sliderIn:hover::after,

.fx-sliderIn.active::after {

    transition: width 0.3s ease-in-out;

    width: 100%;

}

:checked+.fx-sliderIn::after,

.fx-sliderIn.active::after {

    width: 300%;

}

.brand img {

    width: 172px;

}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    from {
        color: #f5973c;

    }

    to {
        color: #EF3F41;
    }
}

@-webkit-keyframes blink {
    from {
        color: #f5973c;
    }

    to {

        color: #fff;
    }
}

/* --------------- Responsive ----------------- */



@media(min-width:1200px) {

    .web-banner {

        position: absolute;



        width: 100%;

        top: -50px;

        right: 183px;

    }

    .web-banner img {

        width: 950px;

    }

}

@media (min-width: 1400px) {

    .web-banner img {

        width: 890px;



    }

    .web-banner {

        position: absolute;

        right: 91px;

    }

}

@media (min-width: 1600px) {

    .web-banner {

        position: absolute;

        right: 44px;

    }

    .banner-main {
        padding: 60px 0;
    }

    .web-banner img {

        width: 922px;

    }

}

@media (min-width: 1700px) {

    .web-banner {

        position: absolute;
        right: -14px;
        top: -60px;

    }

}

@media (min-width: 1900px) {

    .web-banner {

        position: absolute;

        right: -124px;
        top: -60px;

    }

    .web-banner img {

        width: 922px;

    }

}

@media(max-width:768px) {

    .list-right .tel-head {

        font-size: 18px;

    }

    .btn.btn2 {

        font-size: 15px;

    }

    .icon-box {



        margin: 20px 10px 20px;



    }

    .heading h2 {

        font-size: 27px;

    }

    .rate-box {



        margin: 0 10px 20px;

    }

    .span3-box-content h2 {

        font-size: 26px;

    }

    .web-banner img {

        width: 100%;

    }

    .small-dev {

        margin-top: 45px;

    }

    .web-banner {

        margin-right: -39px;

    }

}

@media(min-width: 1024px) and (max-width: 1100px) {

    .web-banner img {

        width: 100%;

    }

}

@media(min-width: 450px) {

    .web-banner2 {

        display: none;

    }

    .banner-mobile {

        display: none;

    }

    .mb-form {

        display: none;

    }



}

@media(max-width: 767px) {

    .top-head-btn2 {

        display: none;

    }

}



@media(max-width:450px) {

    .brand {

        text-align: center;

        margin-bottom: 10px;

    }

    .list-right .tel-head {

        font-size: 22px;

    }

    .list-right {

        text-align: center;

    }

    .mb-form {

        margin-top: 30px;

    }

    .banner-main {

        display: none;

    }

    /*.web-banner {

    margin-right: -15px;

}*/

    .web-banner {

        display: none;

    }

    .small-dev {

        padding: 0;

    }

    .banner-mobile img {

        width: 100%;

    }

    .web-banner2 img {

        width: 414px;

    }

    .icon-box {

        margin: 10px 10px;

    }

    .span0,
    .span1,
    .span2 {

        padding: 50px 0;

    }

    .heading h2 {

        font-size: 22px;

    }

    .span3-box-content p {

        font-size: 16px;

    }

    .footer-widget {

        text-align: center;

    }

    .footer-widget img {

        margin-bottom: 30px;

    }

    .row ul li:nth-child(3) {

        margin-bottom: -13px;

    }

    .ct-block {

        margin-top: 30px;

    }

}

@media(max-width:375px) {

    .list-right {

        text-align: center;



    }

    .list-right .tel-head {



        align-self: center;

    }

    .web-banner2 img {

        width: 375px;

    }

    .btn.btn2 {

        font-size: 14px;

    }

    .heading h2 {

        font-size: 21px;

    }

    .span3-box-content p {

        font-size: 18px;

    }

}

@media(max-width:320px) {

    .span3-box-content h2 {

        font-size: 23px;

    }

    .icon-box {

        margin: 10px 5px;

    }

    .heading h2 {

        font-size: 16px;

    }

    .cta-form-main h2 {

        font-size: 23px;

    }

    .web-banner2 img {

        width: 320px;

    }

    .btn.btn2 {

        font-size: 9px;

    }

}

.top-head-btn2 {

    padding: 10px 15px !important;

}