body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-style: normal;
}
.header-section {
    min-height: 80px;
    background-color: #f5f5f5;
    position: relative;
}
.mobile-menu-icon {
    display: none;
}
.before-mobile-menu  {
    display: none;
}
.mobile-menu {
    display: none;
}
.mobile-header-buttons {
    display: none;
}
.content {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
}
.header-content {
    display: flex;
    align-items: center;
    padding: 15px 0;
    justify-content: space-between;
}
ul.menu-list li a:hover {
    color: #780b0b;
}
.logo {
    width: 12%;
    margin-right: 20px;
}
.logo img {
    width: 100%;
}
.menu {
    width: 60%;
}
ul.menu-list {
    font-weight: 600;
    font-size: 13px;
    line-height: 15px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    height: auto !important;
    width: auto;
    cursor: pointer;
    padding: 0;
}
.menu-list li{
    list-style: none;
    /*padding-right: 12px;*/
}
.menu-list li a {
    color: #383838;
    text-decoration: none;
}
.header-buttons {
    width: 25%;
    display: flex;
    justify-content: space-between;
}
.header-button button {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    text-transform: uppercase;
    border: 1px solid #780B0B;
    box-sizing: border-box;
    padding: 11px 20px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.header-button {
    width: 47%;
}
.btn1 button  {
    background-color: white;
}
.btn2 button {
    background-color: #780B0B;
}
.btn1 button {
    color: #272727;
    text-decoration: none;
}
.btn2 button {
    color: #FFFFFF;
    text-decoration: none;
}
.btn1 button:hover {
    background-color: #780b0b;
    color: white;
}
.btn2 button:hover {
    background-color: white;
    color: #272727;
}
.main-section {
    background-image: url("../images/Group81.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 600px;

}
.main-section.roofing {
    background-image: url("../images/Group58(1).jpg");
}
.main-content {
    display: flex;
    padding: 80px 0;
    align-items: center;
}
.main {
    width: 50%;
}
.main-title {
    font-size: 70px;
    font-weight: 800;
    color: #FFFFFF;
}
ul.main-list-li li {
    list-style-image: url(../images/Vector.png);
    font-weight: 500;
    font-size: 25px;
    line-height: 29px;
    text-transform: capitalize;
    color: #FFFFFF;
    padding: 7px 4px;
}
.main-form-content {
    padding: 30px 50px;
    text-align: center;
}
.main-form {
    background: #FFFFFF;
    box-shadow: 12.3214px 12.3214px 22.4026px 3.36039px rgba(0, 0, 0, 0.3);
    border-radius: 13px;
    width: 90%;
    margin: 0 auto;
}
.form-title {
    font-weight: bold;
    font-size: 23px;
    line-height: 26px;
    color: #606060;
    text-align: center;

}
.main-form-inputs  {
    display: flex;
    flex-wrap: wrap;
}
.form-field {
    width: 50%;
    padding: 6px 0;
}
.form-field select {
    padding: 15px 10px;
    width: 96%;
    border: none;
    border-radius: 4px;
    background: #F3E5E5;
    color: #606060;
}
/*.form-field input {*/
/*    background: #F3E5E5;*/
/*    border-radius: 4px;*/
/*    border: none;*/
/*    padding: 15px 10px;*/
/*    width: 90%;*/
/*}*/
.form-field input::placeholder {
    font-weight: 300;
    font-size: 14px;
}
.submit-button input {
    padding: 17px 50px;
    background: #780B0B;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFFFFF;
    border: none;
    margin: 15px 0;
    cursor: pointer;
}
.submit-button input:hover {
    background-color: #500909;
    transition: 0.2s ease;
}
.form-call-nr {
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #780B0B;
}
.main-content-below {
    height: 100px;
    background-color: #780B0B;
}
.main-below-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
}
.certified-img img {
    width: 100%;
}
.certification-slider {
    display: none!important;
}
.service-content {
   padding: 50px 0 0;
}
.title-service {
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    text-transform: uppercase;
    color: #000000;

}
.service {
    width: 30%;
    background: #212121;
    border-radius: 10px;
    margin: 20px 0;
}
.all-services {
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.service-container {
    padding: 30px 8px;
}
.service-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    padding: 5px;
}
.service-lists {
    display: flex;
    justify-content: space-between;
    padding: 30px 15px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #FFFFFF;
}
.service-lists ul {
    padding: 0;
    margin: 0;
}
.service-lists ul li {
    list-style: none;
}
.service-border {
    border-bottom: 1px solid #960D0D;
    width: 80px;
    margin: 7px auto;
}
.roof-image-section {
    /*background-image: url(../images/blackblurredbackground.png);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
    height: 950px;
    display: flex;

}
.roof-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.roof-service {
    width: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 100px 0px;
    text-align: center;
}
.one {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)), url(../images/unsplash_oPPoyFHG11Q.jpg);
}
.two {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)), url(../images/decking-li.jpg);
}
.three {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)), url(../images/unsplash_sCq3bz253xs.jpg);
}
.four {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)), url(../images/unsplash_8zkTMZA2RI0.jpg);
}
.five {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)),url(../images/unsplash_iUlYdJiKO0E.jpg);
}
.six {
    background: linear-gradient( rgba(0, 0, 0,0), rgba(0, 0, 0,.3)), url(../images/unsplash_wedNOKRmd20.jpg);
}
.roof-service-title {
    font-weight: 800;
    font-size: 78px;
    font-variant: small-caps;
    color: #FFFFFF;
}
.roof-service-button button {
    background: transparent;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 10px 35px;
}
.roof-service-button button {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;

}
.roof-service-button button:hover {
    background-color: white;
    color: #272727;
}
.roofing-service-content {
    padding: 50px 0;
}
.roofing-container {
    margin: 30px 0;
    display: flex;
}
.roofing-service-image img {
    width: 100%;
}
.roofing-service-image {
    width: 40%;
}
.roofing-service-description {
    width: 60%;
    display: flex;
    align-items: center;
}
.roof-img {
    width: 90%;
}
.roofing-service-description-content {
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    color: #383838;
    width: 95%;
}
.rooofig-service-desc-title {
    text-transform: uppercase;
    font-weight: 600;
}
.gallery-image img {
    width: 100%;
}
.gallery-first-container {
    display: flex;
    margin: 30px 0 0;
}
.gallery-second-container {
    display: flex;
    margin-top: -5px;
}
.g-image {
    margin-bottom: -14px;
}
.all-logos-img img {
    width: 100%;
}
.all-logos-img {
    width: 80%;
    margin: 0 auto 50px;

}
.title-service.testimonials {
    color: #FFFFFF;
}
.service-border.testimonials {
    border: 1px solid #999999;
}
.testimonial-section {
    background-image: url(../images/Group37.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
.testimonial-content {
    padding: 30px 0;
}
.testimonial-slider .nav-button {
    height: 50px;
    width: 30px;
    cursor: pointer;
    position: absolute;
}
.testimonial-slider .owl-prev {
    background: url(../images/Vector9.png) no-repeat !important;
    left: 0;
    top: 20%;
    background-size: 100% 100% !important;
}
.testimonial-slider .owl-next {
    background: url(../images/Vector10.png) no-repeat !important;
    right: 0;
    top: 20%;
    background-size: 100% 100% !important;
}
.testimonial-description {
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    color: #FFFFFF;
    width: 70%;
    margin: 40px auto;

}
.testimonial-name {
    font-weight: 600;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    color: #FFFFFF;
}

.testimonial-rate img {
    width: 8% !important;
    margin: 0 auto;
}
.coupon-content {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
}
.coupon {
    width: 30%;
}
.coupon img {
    width: 90%;
}
.our-service-area-section {
    background-image: url(../images/requestareered.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 290px;
    margin: 20px 0 0;
}
.servises-list-all {
    display: flex;
    overflow: auto;
    height: 290px;
}
center {
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: black;
    width: 200px;
    padding: 5px 10px;
}
.block {
    width: 50%;
}
h6 {
    font-weight: 800;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    color: #000000;

}
ul.block-list {
    padding: 0;
}
.block-list li {
    font-weight: normal;
    font-size: 15px;
    line-height: 20px;
    color: #000000;
    list-style: none;
    float: left;
    width: 33.3%;
    padding: 5px 0;
}

.content-footer {
    display: flex;
    padding: 30px 0;
}
.logo-section {
    width: 30%;
}
.mobile-footer-content {
    display: none;
}
.menu-footer-section {
    width: 70%;
}
.footer-logo-img img {
    width: 50%;
    padding: 0 20px;
}
.footer-section {
    background-color: #212121;
}
.copyright-content {
    width: 70%;
}
.footer-desc {
    font-weight: bold;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    padding-bottom: 20px;

}

.header-menu-container {
    display: flex;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
    text-transform: uppercase;
    color: #FFFFFF;
}
.all-menu-content {
    display: flex;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #FFFFFF;
}
.all-menu-content a {
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #FFFFFF;
    text-decoration: none;
}
.footer-about {
    width: 20%;
}
.footer-service {
    width: 20%;
}
.footer-copyright {
    width: 40%;
}
.footer-follow {
    width: 20%;
}
.footer-logo-desc {
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    color: #FFFFFF;
    width: 60%;

}
.follow-content {
    display: flex;
}
.social img {
    width: 100%;
}
.social {
    width: 12%;
    margin: 0 5px;
}
/*page 2*/
.main-title.page2 {
    font-size: 50px;
}

.roofing-services-all {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
}
.roofing-service {
    width: 50%;
    position: relative;
    margin: 50px 0;
}
.roofing-service-photo {
    width: 80%;
    margin: 0 auto;
}
.roofing-service-photo img {
    width: 65%;
    box-shadow: 200px 4px 0px 39px rgba(236,236,236,0.81);
}
.roofing-service-desc {
    position: absolute;
    top: 11%;
    right: 24%;
}
.roofing-services-desc-content {
    width: 100%;
    font-weight: normal;
    font-size: 19px;
    line-height: 20px;
    color: #FFFFFF;
    border-radius: 5px;
    background: #212121;
    padding: 20px 30px;
    height: 185px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.need-container {
    background: #212121;
    color: white;
    margin: 40px 0;
}
.need-content {
    display: flex;
    padding: 30px;
    justify-content: space-between;
}
.need {
    width: 20%;
}
.need-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    color: #FFFFFF;

}
.short {
    width: 50%;
}
.short1 {
    width: 40%;
}
.hr-need {
    width: 80%;
    margin: 20px 0;
}
.need p {
    font-weight: normal;
    font-size: 15px;
    line-height: 23px;
    color: #FFFFFF;
    padding: 20px 0 0 0;

}
/*page3*/
.main-section-contact {
    background-image: url(../images/Rectangle3.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.main-content-content {
    font-weight: 800;
    font-size: 47.5806px;
    line-height: 97.9%;
    color: #FFFFFF;

}
/*page3*/
.contact-container {
    display: flex;
    margin: 50px auto;
}
.main-contact {
    width: 50%;
}
.aside-contact {
    width: 50%;
    padding: 0 40px;
}
.main-container-contact {
    border: 1px solid #ddd;
    border-radius: 15px;
    width: 90%;
    margin: 0 auto;
}
.icon-title {
    font-weight: 600;
    font-size: 25px;
    text-transform: uppercase;
    color: #000000;
    margin: 10px 0;
}
.form-container {
    padding: 40px;
}
.form-hr {
    border-bottom: 1px solid #dddddd;
    margin: 10px 0;
}
.icon-title img {
    width: 3%;
}
.select {
    padding: 10px 0;
}
.select p {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #383838;
}
input#date::placeholder {
    font-weight: normal;
    font-size: 16px;
    line-height: 14px;
    color: #969696;
}
input[type="date" i] {
    padding: 15px 15px;
    width: 80%;
    border: none;
    border-radius: 3px;
    background: #F7F7F7;
}
/*input[type="date"]::placeholder {*/
/*    color: #dddddd;*/
/*}*/

.select-desc {
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    color: #676767;
    margin: 0 0 30px 0;
}
.radio-buttons {
    padding: 10px 0;
}
.radio-buttons p {
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;
    color: #383838;
}
.radio-buttons label {
    font-weight: normal;
    font-size: 18px;
    line-height: 1.5;
    color: #383838;
}
.radio-desc p{
    font-weight: 600;
    font-size: 20px;
    line-height: 18px;;
    color: #383838;
}
.radio-desc textarea {
    padding: 15px 15px;
    width: 90%;
    border: none;
    border-radius: 3px;
    background: #F7F7F7;
}
.info-form {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
}
.info-field {
    width: 50%;
}
.info-field p {
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #383838;
}

 input[type="text" i] {
    padding: 15px 15px;
    width: 80%;
    border: none;
    border-radius: 3px;
    background: #F7F7F7;
}
.address-form {
    margin: 30px 0;
}
.address-form p {
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #383838;
}
.street-input input {
    width: 90%;
}
.form-field input {
    background: #F3E5E5;
    border-radius: 4px;
    border: none;
    padding: 15px 10px;
    width: 90%;
}
.zip-code input {
    width: 40%;
}
.address-info {
    display: flex;
    flex-wrap: wrap;
}
.address-input {
    width: 50%;
}
.below-form {
    margin: 30px 0;
    text-align: center;
}
.below-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #383838;
}
.below-desc {
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #676767;
    width: 60%;
    margin: 0 auto;
}
.below-button input {
    margin: 20px 0;
    padding: 15px 45px;
    background: #780B0B;
    border-radius: 3px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
}
.below-button input:hover {
    background-color: #500909;
    transition: 0.2s ease;
}
.question-description {
    width: 70%;
    background: #F7F7F7;
    padding: 80px 40px;
}
.question-title {
    font-weight: 600;
    font-size: 31px;
    line-height: 97.9%;
    color: #434343;
    align-items: center;
    display: flex;
}
.question-title img {
    width: 4%;
    padding: 5px;
}
.question-description p {
    font-weight: normal;
    font-size: 16px;
    line-height: 14px;
    color: #676767;
    margin-top: 30px;
}
.question-description button {
    font-weight: 600;
    font-size: 21px;
    line-height: 17px;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #900F0F;
    padding: 19px 29px;
    border: none;
    cursor: pointer;
}
.question-description button:hover {
    background-color: #500909;
    transition: 0.2s ease;
}
.question-description h2 {
    font-weight: 600;
    font-size: 31px;
    line-height: 26px;
    text-transform: uppercase;
    color: #B00505;
}
.question-content {
    position: relative;
}
.question-image {
    position: absolute;
    top: 21px;
    left: 310px;
    width: 60%;
}
.question-image img {
    width: 100%;
}
.certification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0;
}
.certification img{
    width: 45%;
}
@media screen and (max-width: 1024px) {

    .logo {
        margin-right: 20px;
    }
    .menu {
        width: 60%;
    }
    ul.menu-list {
        font-size: 10px
    }
    .menu-list li {
        padding-right: 8px;
    }
    .btn1 button {
        margin-right: 10px;
    }
    .header-button button {
        padding: 8px 6px;
        font-size: 9px;
    }
    .main-title {
        font-size: 40px;
    }
    .main-form {
        width: 100%;
    }
    .main-form-content {
        padding: 30px 30px;
    }
    .form-field input {
        width: 82%;
    }
    .service-lists {
        padding: 30px 8px;
        font-size: 11px;
    }
    .service-container {
    padding: 15px 8px;
    }
    .roof-service-title {
    font-size: 58px;
    }
    .roofing-service-description-content {
    font-size: 14px;
    }
    .roofing-service-image {
    display: flex;
    align-items: center;
    }
/*    page1*/
    .roofing-services-all {
        display: block;
    }
    .roofing-service {
        width: 90%;
        margin: 110px auto;
    }
    .need-title {
        font-size: 21px;
    }
    .need {
        width: 30%;
    }
/*    page3*/
    .contact-container {
        display: flex;
        flex-wrap: wrap;
    }
    .main-contact {
        order: 2;
        width: 100%;
    }
    .aside-contact {
        order: 1;
        width: 100%;
    }
    .question-image {
        width: 52%;
    }

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

    .header-content {
        padding: 10px;
        justify-content: right;
    }

    .before-mobile-menu {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .before-mobile-menu-image img {
        width: 100%;
    }

    .before-mobile-menu-image {
        width: 80%;
        margin: 10px auto;
    }

    .before-mobile-menu-description {
        color: #070707;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        margin: 20px 0;
    }
    .before-mobile-menu-description span {
        display: block;
        font-weight: 400;
        font-style: italic;
    }
    .mobile-menu-contact-container {
        color: #070707;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        margin: 20px 0;
    }
    .mobile-menu-phone-msg {
        color: #000;
        font-size: 25px;
        font-weight: 400;
    }
    .mobile-menu-phone {
      font-size: 50px;
      font-weight: 700;
      line-height: 1.4;
      text-shadow: 0 2px 0 #000;
      text-transform: uppercase;
  }
    .mobile-menu-phone a {
        color: #c1272d;
        text-decoration: none;
    }
    .mobile-menu-phone-button button {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        background: #5c768f;
        border-radius: 16px;
        border: 1px solid #fff;
        padding: 10px 20px;
        text-decoration: none;
        margin-bottom: 0;
        margin-top: 15px;
        cursor: pointer;

    }


    .logo {
        /*width: 40%;*/
        display: none;
    }

    .menu {
        display: none;
    }

    .header-buttons {
        display: none;
    }

    .mobile-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-menu-icon img {
        width: 90%;
    }

    .mobile-menu {
        position: absolute;
        background-color: #262525fa;
        top: 76%;
        width: 100%;
        right: 0;
        z-index: 100;
        height: 100vh;
    }

    ul.menu-list {
        display: block;
    }

    .menu-list li {
        font-size: 20px;
        border-bottom: 1px solid #484848;
        padding: 10px 0 10px 26px;
    }

    .menu-list li a {
        color: white;
    }

    .mobile-header-buttons {
        display: flex;
        margin: 0 0  15px 23px;
    }
    .header-button {
        width: 26%;
    }
    .header-button button {
        padding: 8px 7px;
        font-size: 13px;
    }
    .header-buttons {
        width: 50%;
        justify-content: flex-end;
    }
    .form-field select {
        width: 89%;
    }

    .main-section {
        background: linear-gradient( rgba(0, 0, 0,.4), rgba(0, 0, 0,.5)), url(../images/mobileCover.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        height: auto;
    }

    .main-content {
        display: block;
    }

    .main {
        width: 100%;
    }
    .certification-slider {
        display: block!important;
    }
    .certified-img img {
        width: 50% !important;
        margin: 0 auto;
    }
    .single img {
        width: 18% !important;
    }
    .main-content-below {
        height: 122px;
    }
    .owl-theme .owl-dots .owl-dot {
        zoom: 0.5!important;
    }
    .owl-theme .owl-nav.disabled+.owl-dots {
        margin-top: 0!important;
    }
    .main-below-content {
        display: none!important;
    }
    .service {
        width: 48%;
        margin: 15px 0px;
    }

    .roof-service-title {
        font-size: 48px;
    }

    .roofing-container {
        display: block;
    }

    .roofing-service-image {
        width: 100%;
    }

    .roofing-service-description {
        width: 100%;
        margin: 30px 0;
    }

    .testimonial-description {
        font-size: 15px;
        margin: 25px auto;
    }

    .testimonial-content {
        padding: 20px 0;
    }

    h6 {
        margin: 10px 0;
    }
    .all-menu-content a {
        font-size: 15px;
    }


    /*    page2*/
    .roofing-service-desc {
        right: 14%;
        top: 14%;
    }
    .roofing-service-photo img {
        width: 70%;
    }
    .roofing-services-desc-content {
        height: 160px;
        font-size: 18px;
        padding: 20px;
    }
    .need p {
        padding: 0;
    }
    .need-title {
        font-size: 15px;
        line-height: unset;
    }
/*    page3*/
    .question-image {
        top: 38px;
        left: 304px
    }
    .question-description {
        padding: 40px 40px;
    }

}
@media screen and (max-width: 420px) {
    body {
        font-family: 'Roboto', sans-serif;
        font-style: normal;
    }

    .mobile-menu-icon img {
        width: 60%;
    }

    .before-mobile-menu-description {
        font-size: 14px;
    }

    .mobile-menu-phone-msg {
        font-size: 18px;
    }

    .mobile-menu-phone {
        font-size: 32px;
    }

    .before-mobile-menu {
        width: 100%;
    }

    .mobile-menu-phone-button button {
        font-size: 13px;
    }

    .main-section {
        background-size: cover;
        background-position: 0% 100%;
    }

    .header-section {
        min-height: 49px;
        position: relative;
    }

    .main-title {
        font-size: 21px;
    }

    .header-button {
        width: 50%;
    }

    /*.mobile-menu {*/
    /*    top: 76%;*/
    /*}*/
    .menu-list li {
        font-size: 19px;
    }

    .mobile-header-buttons {
        margin: 0 0 15px 23px;
    }

    ul.main-list-li {
        padding: 0px;
        margin: 0 0 20px 0px;
    }

    ul.main-list-li li {
        font-size: 18px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul.main-list-li li::before {
        content: '';
        display: inline-block;
        background-size: 100% 100%;
        height: 14px;
        width: 17px;
        margin-right: 4px;
        background-image: url(../images/Vector.png);
        background-repeat: no-repeat;
    }

    .main-content {
        padding: 30px 0;
    }

    .form-title {
        font-size: 16px;
        margin: 0;
    }

    .submit-button input {
        padding: 17px 20px;
    }

    .form-field input {
        width: 74%;
    }

    .form-field select {
        width: 86%;
    }

    .main-form-content {
        padding: 20px 10px;
    }

    .submit-button button {
        font-size: 10px;
    }

    .main-content-below {
        height: auto;
    }

    .main-below-content {
        padding: 6px;
    }

    .service-content {
        padding: 20px 0 0;
    }

    .one {
        background-position: 81% 86%;
    }

    .two {
        background-position: 81% 86%;
    }

    .three {
        background-position: 64% 86%;
    }

    .four {
        background-position: 41% 36%;
    }

    .five {
        background-position: 71% 86%;
    }

    .six {
        background-position: 41% 86%;
    }

    .rooofig-service-desc-title {
        font-size: 21px;
        line-height: 1.4;
    }

    .roofing-service-description-content p {
        font-size: 16px;
        font-weight: 400;
    }

    .all-services {
        display: block;
        margin: 10px 0;
    }

    .need-container {
        margin: 40px 0 0;
    }

    .service {
        width: 100%;
    }

    .service-lists {
        padding: 20px 8px;
        font-size: 20px;
        display: block;
        width: 80%;
        margin: 0 auto;
        font-weight: 400;
    }
    .service-lists ul li {
        list-style: inherit;
        margin-bottom: 10px;
    }
    .service-title {
        font-size: 27px;
        text-align: left;
    }

    .roof-content {
        display: block;
    }

    .roof-image-section {
        height: auto;
    }

    .roof-service {
        width: 100%;
    }

    .roofing-service-content {
        padding: 20px 0;
    }

    .gallery-first-container {
        flex-wrap: wrap;
    }

    .gallery-image {
        margin-top: -6px;
    }

    .all-logos-img {
        width: 100%;
        margin: 0 auto 10px;
    }

    .testimonial-section {
        background-image: url(../images/Group371.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .testimonial-description {
        font-size: 13px;
        margin: 15px auto;
        width: 100%;
    }

    .testimonial-description {
        font-size: 14px;
        margin: 15px auto;
        width: 90%;
    }

    .owl-nav {
        display: none !important;
    }

    .testimonial-name {
        font-size: 15px;
    }

    .testimonial-rate img {
        width: 18% !important;
    }

    .content.coupon-content {
        display: block;
        text-align: center;
    }

    .coupon {
        width: 100%;
    }

    .block-list li {
        width: 99.3%
    }

    center {
        width: 100px;
        font-size: 9px;
    }

    .our-service-area-section {
        height: 200px;
    }

    .servises-list-all {
        height: 200px;
    }

    .content.content-footer {
        display: contents;
    }

    .logo-section {
        width: 100%;
        text-align: center;
    }

    .footer-logo-desc {
        width: 80%;
        margin: 0 auto;
    }

    .all-menu-content a {
        font-size: 11px;
    }

    .menu-footer-section {
        display: none;
    }
    .mobile-footer-content {
        display: block;
        text-transform: uppercase;
        color: #FFFFFF;
        width: 80%;
        margin: 20px auto 0;
    }
    .footer-call-number {
        text-align: center;
    }
    .call-number {
        font-size: 25px;
        font-weight: 700;
    }
    .call-title {
        font-size: 20px;
        font-weight: 300;
    }
    .footer-logo-img img {
        width: 70%;
        padding: 10px 20px;
    }
    .footer-mobile-menu {
        padding: 10px 0;
    }
    .footer-mobile-menu-list {
        padding: 0;
    }
    .footer-mobile-menu-list li {
        list-style: none;
        border: 1px solid #dddddd;
        padding: 10px 20px;
        text-align: center;
        font-size: 20px;
    }
    .footer-mobile-menu-list li a {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }
    .follow-footer p {
        text-align: center;
        margin: 5px 0;
    }
    .footer-follow {
        width: 100%;
        margin: 0 auto;
        justify-content: center;
    }
    .social {
        width: 25px;
    }
    .copyright-content {
        width: 100%;
    }
    .all-menu-content {
        text-align: left;
        padding: 0 10px;
        font-size: 11px;
    }
    .header-menu-container {
        font-size: 9px;
        padding: 0 10px;
    }
    .footer-desc {
        font-size: 17px;
        width: 80%;
        font-weight: 400;
        margin: 5px auto;
    }
    .main-title.page2 {
        font-size: 20px;
    }
    .roofing-service-photo img {
        box-shadow: none;
    }
    .roofing-service-photo img {
        width: 90%;
    }
    .roofing-service {
        width: 90%;
        margin: 0 auto 80px;
    }
    .roofing-services-desc-content {
        width: 90%;
        font-size: 15px;
        line-height: 1.2;
        /*padding: 10px 15px;*/
    }
    .gallery-section {
        margin: 20px 0 0;
    }
    .roofing-service-desc {
        right: 2%;
        top: 14%;
    }

    .roofing-service-photo {
        width: 90%;
    }
    .need-content {
        display: block;
        padding: 30px 0;
    }
    .need-title {
        font-size: 21px;
        line-height: 1.5;
    }
    .need {
        width: 90%;
        margin-bottom: 30px;
    }
    .need p {
        margin: 10px 0;
        font-size: 20px;
        font-weight: 300;
    }
    .short {
        width: 60%;
    }
    .short1 {
        width: 50%;
    }
/*    page3*/
    .main-section-contact {
        height: 100px;
    }
    .main-content-content {
        font-size: 27px;
    }
    .aside-contact {
        padding: 0;
    }
    .question-description {
        padding: 20px;
    }
    .question-title {
        font-size: 16px;
    }
    .question-description p {
        margin: 10px;
    }
    .question-description p {
        margin: 15px 0;
    }
    .question-description h2 {
        font-size: 14px;
    }

    .question-description button {
        font-size: 11px;
        padding: 9px 29px;
    }
    .question-image {
        top: 24px;
        left: 169px;
    }
    .certification {
        margin: 40px auto;
        width: 90%;
    }
    .main-container-contact {
        width: 100%;
    }

    .form-container {
        padding: 20px;
    }
    .icon-title img {
        width: 6%;
    }
    .address-info, .info-form {
        justify-content: space-between;
    }
    .address-input {
        width: 100%;
    }
    .street-input input {
        width: 80%;
    }
    .zip-code input {
        width: 80%;
    }
    .info-field {
        width: 100%;
    }




}