@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    margin: 0px auto;
    font-family: 'Poppins', sans-serif !important;
}

.main-image{
    background-image: url(../images/welcome-image.jpg);width: 85%; background-repeat: no-repeat;background-position: left;position: relative;height: 488px;
}

.about-image{
    position: absolute;right: -50px;bottom: -100px;border: solid 20px #ffffff;
}

.welcome-text h5{
    color: #ee532a;font-weight: bold; font-size: 14px;margin-top: 10px;margin-bottom: 0px;
}

.welcome-text h1{
    color: #000000;margin-top: 5px;margin-bottom: 0px;
}

.welcome-text p{
    font-size: 16px;color: #ee532a;margin-top: 30px;margin-bottom: 30px;
}

.des-imp p{
    color: #b5b8bb; font-size: 14px;line-height: 25px;
}

.contact-image{
    background-image: url(../images/call.jpg);height: 69px;width: 69px; border-radius: 69px;background-position: center center;background-repeat: no-repeat;background-size: cover;
    float: left;margin-right: 20px;
}

.contact-details h5{
    color: #b5b8bb;font-weight: bold; font-size: 14px;margin-top: 20px;margin-bottom: 0px;
}

.contact-details p{
    font-size: 16px;color: #000000;font-weight: bold;margin-top: 5px;
}

.main-call{
   margin-top: 30px; display: flex;vertical-align: middle;align-items: center;
}

.el-button{
    background-color: #000000;margin-top: 30px;
}

.clear{
    clear: both;
}

.innovative-section{
    margin-top: 200px;
}

.innovative-image{
    background-image: url(../images/innovative-full.jpg);background-position: center center;background-size: cover;background-repeat: no-repeat;width: 100%;height: 474px;
}

.innovative-text{
    padding-left: 30px;
}

.innovative-bg{
    background-color: #1f1e23;height: 474px;;
}

.innovative-text h5{
    color: #ee532a; font-size: 14px;margin-top: 10px;margin-bottom: 0px;
}

.innovative-text h2{
    color: #ffffff;margin-top: 5px;margin-bottom: 0px;
}

.innovative-text p{
    font-size: 14px;line-height: 25px;;color: #7c7b7d;margin-top: 30px;margin-bottom: 30px;
}

.service-image-1{
    background-image: url(../images/service-1.jpg);height: 80px;width: 80px;background-position: center center;background-repeat: no-repeat;background-size: cover;margin-left: 30px;
}

.service-image-2{
    background-image: url(../images/service-2.jpg);height: 80px;width: 80px;background-position: center center;background-repeat: no-repeat;background-size: cover;margin-left: 30px;
}

.service-details h4{
    color: #ffffff !important; margin-left: 10px;
}

.innovative-bg{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.main-about-image{
    background-image: url(../images/about-image.jpg);width: 100%; background-repeat: no-repeat;background-position: center center;position: relative;height: 550px;
}

.about-image-2{
    position: absolute;left: -50px;bottom: -100px;width: 200px;
}

.about-text{
    background-color: #ffffff;position: relative;vertical-align: middle;
}

.main-about-text{
    background-color: #ffffff;position: absolute;left: -30px;padding: 30px;
}

.main-about-text p{
    color: #b5b8bb; font-size: 14px;line-height: 25px;
}

.main-about-text h5{
    color: #ee532a; font-size: 14px;margin-top: 10px;margin-bottom: 0px;
}

.main-about-text h2{
    color: #000000;margin-top: 5px;margin-bottom: 0px;
}

.top{
    margin-top: 85px;
}

.ft{
    margin-top: 50px;
}

.footer-bg{
    background-color: #373643;
}

.f-logo p{
    font-size: 14px;color: #8b8b95;
}

.f-logo p:nth-of-type(3){
    color: #ffffff;font-weight: bold;
}

.product-services-f, .f-pages, .newsletter{
    font-size: 14px;color: #8b8b95;
}

.product-services-f h4, .f-pages h4, .newsletter h4, .cr{
    color: #ffffff; font-weight: bold;
}

.product-services-f ul{
    list-style-type: none;margin: 0;padding: 0;font-size: 14px;line-height: 5px;
}

.product-services-f ul li{
    padding-bottom: 30px;
}

.f-pages ul{
    list-style-type: none;margin: 0;padding: 0;font-size: 14px;line-height: 5px;
}

.f-pages ul li{
    padding-bottom: 30px;
}

.f-line{
    height: 4px; width: 25px;background-color: #00996e;display: block;position: absolute; right: 120px;top: 40px;
}

.f-line-2{
    height: 4px; width: 25px;background-color: #00996e;display: block;position: absolute; right: 200px;top: 40px;
}

.f-line-3{
    height: 4px; width: 25px;background-color: #00996e;display: block;position: absolute; right: 250px;top: 40px;
}

.content {
    width: 360px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
  }
  
  .subscription {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .subscription .add-email{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 20px;
  }
  
  .subscription .submit-email {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(100% - 2px);
    width: 80px;
    border: none;
    border-radius: 5px;
    outline: none;
    margin: 1px;
    padding: 0 20px;
    cursor: pointer;
    background: #00996e;
    color: #FFFFFF;
    transition: width .35s ease-in-out,
      background .35s ease-in-out;
  }
  
  .subscription.done .submit-email {
    width: calc(100% - 2px);
    background: #ee532a;
  }
  
  .subscription .submit-email .before-submit,
  .subscription .submit-email .after-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 38px;
    transition: visibility .35s ease-in-out,
      opacity .35s ease-in-out;
  }
  
  .subscription.done .submit-email .before-submit,
  .subscription:not(.done) .submit-email .after-submit {
    visibility: hidden;
    opacity: 0;
  }
  
  .subscription .submit-email .after-submit {
    transition-delay: .35s;
  }
  
  .subscription:not(.done) .submit-email .before-submit,
  .subscription.done .submit-email .after-submit {
    visibility: visible;
    opacity: 1;
  }


.f-clr{
    background-color: #1d1d29;
}

.follow img {
    float: right;
}

@media screen and (max-width: 480px) {

    .main-call{
        display: flex;
        flex-wrap: wrap;
        vertical-align: middle;
        align-items: center;
        margin-top: 0px;
    }

    .innovative-section {
        margin-top: 100px;
    }
    .main-image{
        width: 100%;
    }
    .welcome-text{
        margin-top: 150px;
    }
    .about-image {
        right: 0;
        bottom: -100px;
        border: solid 20px #ffffff;
    }
    .innovative-bg{
        display: flex;
        justify-content: space-between;
    }
    .innovative-text {
        padding-left: 10px;
    }
    .service-image-2{
       margin-left: 10px;
    }
    .service-image-1{
        margin-left: 10px;
     }
     .main-about-text {
        background-color: #ffffff;
        padding: 30px;
    }
    .ft{
        margin-top: 461px;
        }
}

@media only screen and (width: 768px) {

    .main-call{
        display: flex;
        flex-wrap: wrap;
        vertical-align: middle;
        align-items: center;
        margin-top: 0px;
    }
    .service-details h4{
        font-size: 20px;
    }
    .innovative-text {
        padding-left: 15px;
    }
    .service-image-2, .service-image-1 {
        height: 60px;
        width: 60px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 15px;
    }
}