/* banner */

.banner{width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
animation: img 5s infinite;
background-image: url(../img/home/banner/4.jpg); 

}

a{text-decoration: none;
color:auto;  
display: block;}
 
/* @keyframes img {  

   
    0%{background-image: url(../img/home/banner/3.jpg);}
   
    30%{background-image: url(../img/home/banner/3.jpg);}


    100%{background-image: url(../img/home/banner/4.jpg);}
    
} */


.background-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10% 0px 5% 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.322);
}

.first-banner{width:50%;}

.first-banner h1{    color: #FFFFFF;
    font-size: 59px;
    text-transform: uppercase;
    line-height: 85px;
    font-family: 'montserrat';}

.first-banner h2{
    color: #FFFFFF;
    font-size:23px;
    text-transform: uppercase;
    line-height:36px;
    font-family: 'montserrat';
    margin-top:30px;
}

.button-banner{margin-top: 30px;
width: 100%;
display: flex;}

.button-banner a{    text-decoration: none;
    display: block;
    color: white;
    font-family: 'Rubik';
    text-transform:capitalize;
    margin-left: 22px;
    padding: 16px 21px;
    background-color: orangered;
    transition: all .5s ease-out;
    background-position: right bottom;}

    .button-banner .a2{background-color:white;
        color: black;}

.button-banner a:hover{  background-position: left bottom;
    background: linear-gradient(to right, #171717 50%, white 50%);
    background-size: 200% 100%;
    color: white;
   
}

#margin{margin-left: 0px;}

.second-banner{
    width: 30%;
    display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 5%;
}

.banner-form{
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.938);
    padding:9% 5%;
    font-family: 'montserrat';
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 2px;
    display: none;
}

.banner-form h2{text-align: center;
text-transform: uppercase;
margin-bottom: 10px;}

.banner-form input{    padding: 10px 15px;
    margin-top: 10px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid transparent;
    outline: 1px solid transparent;
background-color: #ddd;}

.banner-form textarea{    padding: 10px 15px;
    margin-top: 10px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    background-color: #ddd;

}

#banner-submit{    background-color: orangered;
    background-image: linear-gradient(43deg, orangered 0%, orangered 46%, #e59a12 100%);
    padding: 10px;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    margin-top: 10px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    font-family: 'montserrat';
    letter-spacing: 1px;}



/* end banner */
 

/* start div services */
.services{width: 100%;
    display: flex;
    flex-direction: column;
    /* background-image: url(../img/overlay/bg-pattern1.png); */
    /* background-repeat: repeat-x;
    background-position: center; */
    position: relative;
    margin-top: 5%; 
    margin-bottom: 5%;
    padding: 5% 0%;
    }
    
    #background-img{width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    filter: contrast(121%);
    /* background-color: rgba(0, 0, 0, 0.781); */
    background-color:#193952;
    /* display: none; */
    z-index:-1;}
    
    .background-services{width: 100%;
    display:flex;
    flex-direction: column;
    padding: 0% 4%;
    }
    
    .first-services{width: 100%;
        display: flex;
        color: white;
        align-items: center;
    }
    
    .first-services-content{width: 50%;
    display: flex;
    font-family: 'montserrat';
    align-items: center;
    
    }
    
    .first-services-content h2{    font-family: 'Rubik';
        text-transform: uppercase;
        font-size: 17px;
        color: orangered;
        margin-bottom: 10px;
    letter-spacing: 1px;}
    
    .first-services-content h3{    font-size: 38px;
        line-height: 40px;
        font-family: 'Rubik';
    letter-spacing: 1px;}
    
    .first-services-content p{    font-family: 'Rubik';
        display: none;
        font-size: 15px;
    color: #a9a9a9;
    line-height: 25px;}
    
    /* start second div services */
    
    .second-services{display: flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
    /* align-items: center; */
    padding:2% 0px;}
    
    .second-services-copy{width: 31%;
    border: 1px solid;
    margin:1%;
    position: relative;
    display: flex;
    justify-content: center;
    /*trasition effect for background*/
    background-repeat: no-repeat;
        transition: background .5s;
        background-size: 100% 0%; 
        background-position:top;
    
    }

    .second-copybg{ 
          /* background-image: linear-gradient(to bottom right, #000 60%, #745523);  */
          background-image: linear-gradient(white, white);
        background-repeat: no-repeat;
        transition: background .5s;
        background-size: 100% 100%; 
        cursor: pointer;
        width: 100%;
    height: 100%;
    padding: 7%;
       }
    
    
    /* .overlay{  position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color:rgb(255, 68, 0);
        overflow: hidden;
        width: 100%;
        height: 100%;
        transition: .5s ease;
    z-index: -1;}
    
        .second-services-copy:hover .overlay{height: 100%;} */
    
    .second-services-copy:hover{
         background: linear-gradient(#426f86,#426f86);
        background-size: 100% 100%; 
        background-repeat: no-repeat;
    
    }

    .second-services-copy:hover .second-copybg{background-image: none;}
    
    .second-services-copy img{position: absolute;
    top: 0px;
    left: 0px;}
    
    .services-copy-content{width: 100%;
    color: white;
    background-color: transparent;
    }
    
    .services-copy-content h4 a{
        font-family:'Rubik';
        font-size: 18px;
        color: black;
        display: block;
    }


    .second-copybg:hover .services-copy-content h4 a{color: white;}
    
    .line-s{width: 90%;
    border-bottom:2px solid #2f2f2f;
    text-align: right;
    }
    
    .services-number{font-family: 'Rubik';
    padding: 3px 2px;
    text-align: right;
    background-color: #2f2f2f;}
    
    .second-services-copy:hover .line-s{border-bottom: 2px solid white;}
    
    .second-services-copy:hover .services-number{background-color:white;
    color: black;}
    
    
    .icon-services svg{    width: 62px;
        position: unset;
        margin: 15px;
        margin-left: 0px;}

        .second-copybg:hover #color-svg{fill: white;}


    
        .services-copy-content p a{font-family:'Rubik';
        color: black;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* number of lines to show */
                line-clamp: 2; 
        -webkit-box-orient: vertical;}

        .second-copybg:hover .services-copy-content p a{color: white;}
    
    
    .down-head-services{width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    }
    
    .down-head-services h5{    font-size: 18px;
        font-family: 'Rubik';
        color: white;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight: normal;}
    
    .down-head-services a{   font-size:18px;
        font-family: 'Rubik';
        color: white;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight:bold;
        margin-left: 5px;
    }
    /* end second div services */
    
    /* end div services */
    
    
/* start about section */

.about-section{display: flex;
width: 100%;
margin-top: 5%;
margin-bottom: 5%;
border:none;
justify-content: center;
padding-bottom: 3%;
padding-top: 4%;
}

.about-section-first{width: 42%;
border:none;
position: relative;
/* height: 650px; */
}

.about-section-first img{position: absolute;
}

.img1-about{top: 0px;
right: 0px;
z-index: 1;}


.img2-about{
    bottom: 0px;
    left: 0px;
    z-index: -1;
    height: 63%;
    width: 71%;
}

.bulb-icon{    color: white;
    background-color: #171717;
    display: inline-block;
    padding: 34px;
    font-size: 25px;
    margin-left: 11%;
margin-top: -10px;
}

.flip i{transition: transform .2s ease-in-out;
cursor: pointer;
display: block;}

.bulb-icon:hover .flip i{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);}

.dot-overlay{position: absolute;
bottom: 0px;
right: 0px;
margin-right: 4%;
animation: dots 2s infinite;
}

@keyframes dots {

    0%{bottom: 13px;}
    25%{bottom: 12px;}
    50%{bottom: 8px;}
    75%{bottom: 4px;}
    100%{bottom: 0px;}
    
}

/* start second about */

.about-section-second{width: 43%;
border:none;
margin-left: 3%;}

.h2-one-about{display: flex;
align-items: center;}

.h2-one-about h4{font-family: 'Rubik';
font-size: 18px;
letter-spacing: 1px;
word-spacing: 2px;
color: orangered;}

.h2-one-about span{    width: 75px;
    height: 2px;
    background-color: orangered;
    margin-left: 4%;}

.about-section-second h2{    font-family: 'Rubik';
    font-size: 46px;
    line-height: 69px;
    margin-top: 20px;
    text-transform: uppercase;
    color: #171717;}

    .about-section-second h3{    font-family: 'Rubik';
        font-size: 23px;
        line-height: 30px;
        margin-top: 10px;
        color: orangered;}

.about-section-second p{    font-family: 'Rubik';
    margin-top: 22px;
    line-height: 34px;
    font-size: 16px;
    color: #483c3c;}

    /* progress */
    .w3-light-grey{width:90%; 
border-radius: 8px;
background-color: #ddd;
display: flex;
overflow: hidden;
display: none;}

.w3-container{background-color:orangered;
text-align: center;
font-family: 'Rubik';
color: white;

}

.progress-bar34 h5{    font-family: 'Rubik';
    font-size: 17px;
    margin-top: 10px;
    line-height: 30px;
    margin-bottom: 10px;
    color: #171717;}

    /* progress */

/* year */
.yearofex{display: flex;
width: 100%;
margin-top: 20px;
}

.year-firstex{width: 50%;
display: flex;
flex-direction: column;}

.copy-year{font-family: 'Rubik';
font-size: 15px;
line-height: 35px;}

.copy-year span{font-size: 15px;
margin-right: 10px;
color:orangered;}

.explore-button-a a{    margin-top: 15px;
    text-decoration: none;
    color: white;
    background-color: orangered;
    display: inline-block;
    padding: 16px 20px;
    font-family: 'Rubik';
    text-transform: uppercase;
    transition: all .5s ease-out;
    background-position: right bottom;}

    .explore-button-a a:hover{ background-position: left bottom;
        background: linear-gradient(to right, #171717 50%, #ddd 50%);
        background-size: 200% 100%;
        color: white;}



   .year-secondex{
width: 50%;

background-color: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
} 

.year-border{
    display: flex;
    flex-direction: column;
margin: 7%;
padding: 5%;
border: 1px solid orangered;}

.year54{display: flex;
width: 100%;
justify-content: center;
font-family: 'Rubik';
margin-top: 14px;
}

.year541{width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'montserrat';
font-size: 48px;}

.year541 img{width: 65%;}

/* year */


/* end second about */

/* end about section */
 

/* start recent work @@@@@ */
.recent-work{width: 100%;
display: flex;
padding: 3% 0px 0px 0px;
flex-direction: column;
background-color:#f6f6f6;
}

.recent-work-one{width: 100%;
font-family: 'Rubik';
padding: 0px 3%;
position: relative;
}

.our-projectbt{
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 15px;
    text-decoration: none;
    color: white;
    background-color: orangered;
    display: inline-block;
    padding: 16px 20px;
    font-family: 'Rubik';
    text-transform: uppercase;
    transition: all .5s ease-out;
    background-position: right bottom;
    margin-right: 2%;
    border-radius: 37px;
}

.our-projectbt:hover{
    background-position: left bottom;
    background: linear-gradient(to right, #171717 50%, #ddd 50%);
    background-size: 200% 100%;
    color: white;
}

.work-two-one{display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 40px;}

.recent-work-one h2{    font-size: 17px;
    color: orangered;
margin-top: 10px;
line-height: 35px;}

.recent-work-one h3{    font-size: 37px;
    line-height: 50px;}

.recent-work-two{width: 100%;
margin-top: 20px;
}

.img-work-slick{width: 33%;
    height: 400px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}


.img1-work{background-image: url(../img/client/thanchospitalcom.jpg);}

.img2-work{background-image: url(../img/client/ubmindiabiz.jpg);}

.img3-work{background-image: url(../img/client/fabseating.jpg);}

.img4-work{background-image: url(../img/client/vishveshtextiles.jpg);}

.img-work-slick img{width: 100%;
}

.content-recent-work{width: 100%;
    border: 1px solid white;
height: 100%;
background-color: rgba(0, 0, 0, 0.329);
display: flex;
flex-direction: column;
justify-content: flex-end;
transition:all .5s;
background-size: 100% 200%; 
}

.img-work-slick h4{    font-family: 'Roboto';
    font-size: 31px;
    color: white;
    margin-left: 15px;
    font-weight: 500;
    margin-bottom: 15px;
text-transform: capitalize;}

.content-recent-work:hover{  background-image: linear-gradient(transparent,transparent 5%, rgba(255, 68, 0, 0.534) 50%, rgba(255, 68, 0, 0.534), rgba(255, 68, 0, 0.534));
    background-size: 100% 100%; }

.img-work-slick:hover{ 
    animation-fill-mode: forwards;
    animation: zoomin 1s linear;
}


@keyframes zoomin {
    0% {
        
      /* -webkit-transform: scale(1);
      transform: scale(1); */
      background-size: 100% auto;

    }
    100% {
      /* -webkit-transform: scale(1.1);
      transform: scale(1.); */
      background-size: 105% auto;

    }
  }

/* end recent work @@@@@ */


/* why choose us experts section */
.chooseus{width: 100%;
display: flex;

background-image: url(../img/overlay/bg-dot.png);
background-repeat: no-repeat;

}

.chooseone{
width:55%;
padding: 7% 5%;
}

.chooseone h2{    font-family: 'Rubik';
    font-size: 18px;
    line-height: 35px;
    color: orangered;}

.chooseone h3{    font-family: 'Rubik';
    font-size: 44px;
    line-height: 55px;
    color: #171717;
    margin-top: 5px;
    margin-bottom: 10px;}

.paragraph-choose{    font-family: 'Rubik';
    line-height: 29px;
    font-size: 17px;
    color: #877979;}

    /* icon */
.icon-choose{display: flex;
margin-top: 30px;
margin-bottom: 30px;}

.icon-one-choose{width: 50%;
display: flex;
align-items: center;}

.icon-one-choose img{width: 60px;
}

.icon-one-choose h5{    font-family: 'montserrat';
    font-size: 20px;
    margin-left: 12px;
    font-weight: 600;}

    /* icon */


.point-para{font-family: 'Rubik';
color: black;
font-size: 16px;
line-height: 28px;
margin-top: 10px;}

.point-para span{color: orangered;}

.explore{    margin-top: 15px;
    text-decoration: none;
    color: white;
    background-color: orangered;
    display: inline-block;
    padding: 16px 20px;
    font-family: 'Rubik';
    text-transform: uppercase;
    transition: all .5s ease-out;
    background-position: right bottom;}

.explore:hover{
    background-position: left bottom;
    background: linear-gradient(to right, #171717 50%, #ddd 50%);
    background-size: 200% 100%;
    color: white;
}


/* choose two here */
.choosetwo{background-image: linear-gradient(141deg, orangered, black);
width: 50%;}

.choosetwo-img{
background-repeat: no-repeat; 
background-size:195% auto;
background-position: center;
width: 97%;
margin-left: 3%;
height: 100%;
position: relative;}

.box-happy-costomer{position: absolute;
bottom: 0px;
left: 0px;
margin-bottom: 10%;
margin-left: -15%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index: 1;
background-color: white;
display: flex;
align-items: center;
padding:15px 25px 15px 15px; }

.happy-costomer-one{display: flex;
align-items: center;}

.happy-costomer-one img{width: 80px;
margin: 10px;}

.happy-costomer-two{display: flex;
flex-direction: column;}

.happy-costomer-two h5{font-family: 'montserrat';
font-size:30px;
line-height: 35px;
}

.happy-costomer-two p{    font-family: 'Rubik';
    font-size: 13px;
    color: #706c6c;
margin-top: 5px;}


/* start testimonials  */
.testimonial{background-image:url(../img/home/testimonial/testimonial-bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
display: flex;
height: 550px;}

.testimon-bgl{background-color: #000000af;
width: 100%;
 height: 100%;
display: flex;
justify-content: center;
padding:5% 0%;
align-items: center;}

.testi-first{width: 30%;
padding-left: 3%;
padding-right: 5%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.first-testimonialal{display: flex;
align-items: center;
justify-content: center;
width: 100%;}

.testi-first-one{
    border-radius: 100%;
    height: 128px;
    width: 128px;
    border: 2px solid orange;
    padding: 5px;
    box-sizing: border-box;
}

.testi-first-one img{width: 100%;
    width: 114px;
    height: 114px;
    border-radius: 100%;
    border: 4px solid white;}

.testi-first-two{display:flex;
width: 76%;
margin-top: 20px;
align-items: center;
justify-content: center;}


.slide-testi{margin-left: 5px;
    margin-right: 5px;}

.slide-testi img{
width: 65px;
height: 65px;
border-radius: 100%;
border: 4px solid white;}



.testi-second{width: 65%;
margin-right: 5%;
margin-top: 1%;
}

.testi-second h3{    font-family: 'Rubik';
    font-size: 30px;
    color: white;
    line-height: 43px;
    font-weight: 400;}

.testi-second h4{    font-family: 'Montserrat';
    color: orange;
    margin-top: 20px;
    margin-bottom: 5%;}



/*end testimonials  */

.testimonial-button{display: flex;
flex-direction: column;
width: 100%;
margin-top: -5%;
padding-left: 5%;
padding-right: 5%;
/* background-color: #222020;} */}

.first-testimonial{background-color: #171717;
display: flex;
}

.first-testimonial div{    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-family: Rubik;
    letter-spacing: 1px;
    word-spacing: 2px;
background-color: orangered;
margin-left: 10px;
cursor: pointer;}

#testimonial-ida1{margin-left: 0px;
background-color: transparent;}

.two-testimonial{background-color: #171717;
padding: 5%;}

.copy-testimonial-lay{display: flex;
width: 100%;

}

.copy-testi-first{width:30%;
position: relative;
margin-right: 5%;}

.copy-testi-first img{width: 100%;}

.rocket-img{position: absolute;
right: 0px;
display:block;
top: 0px;
padding-bottom: 2px;
background-color: #171717;}

.rocket-img img{width:75px;
    transition: transform .2s ease-in-out;
    cursor: pointer;
    display: block;}



.rocket-img img:hover{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);}


.copy-testi-second{width:30%;
display: flex;
justify-content: center;
}

.copy-testi-second p{    font-family: 'Rubik';
    color: #717070;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 28px;}

.copy-testi-third{width:30%;
display: flex;
flex-direction: column;
margin-left: 3%;}

.circle-span{color: orangered;
margin-right: 5px;}

.copy-testi-third p{    color: white;
    font-family: 'Rubik';
    line-height: 40px;
    letter-spacing: 1px;}

    #copytestimonialid2{display: none;}
    #copytestimonialid3{display: none;}



/* choose two here */
.expert-team{width: 100%;
flex-direction: column;
padding: 5% 0px;}

.expert-tem-one{width: 100%;}

.expert-tem-one h2{    text-align: center;
    font-family: 'Rubik';
    color: orangered;
    font-size: 16px;
line-height: 35px;}

.expert-tem-one h3{    font-family: 'Rubik';
    text-align: center;
    font-size: 40px;
    line-height: 53px;
    margin-top: 5px;
    margin-bottom: 5px;}



.expert-tem-two{display: flex;
width: 100%;
justify-content: center;
flex-wrap: wrap;}

.expert-copy{border:none;
width: 28%;
margin-left: 1%;
cursor: pointer;
margin-top: 50px;
}

.copy-expert-img {display: flex;
position: relative;}

.copy-expert-img img{width: 100%;}

.expert-social{    position: absolute;
    width: 50px;
    height:44px;
    right: 2px;
    bottom: 0px;
    background-color: white;
    display: flex;
    flex-direction:column-reverse;
    overflow: hidden;
    transition: all .5s;
    cursor: pointer;
 
}

.expert-copy:hover .expert-social{height: 176px;}

.expert-copy:hover .text-expert-copy h4{color: orangered;}

.one-social-23{
font-size: 100%;
text-align: center;
padding: 12px;
display: block;
text-decoration: none;

}

.i1{border-top: 1px solid #ddd;}

.text-expert-copy{width: 100%;
border: 1px solid black;
border-top: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 4%;
}

.text-expert-copy h4{font-family: 'Rubik';
color: #171717;
transition: all .5s;}

.text-expert-copy p{    font-family: 'Rubik';
    color: #9f9898;
    margin-top: 5px;
    font-size: 13px;}

/* end why choose us section */ 
 
/* start blog section here */
.blog-section{width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
 background-color: #222020;
 display: none;
}

.blog-section-one{width:100%;
    margin-bottom: 4%;
text-align: center;}

.blog-section-one h3{    font-family: 'Montserrat';
    color: orangered;
    margin-top: 3%;
    margin-bottom: 10px;}

.blog-section-one h2{    font-family: 'Rubik';
    color: white;
    font-size: 33px;}

.blog-section-two{width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.copy-blog{width:31%;
    margin-left: 1%; 
}

.one-img{width: 100%;
    height: 252px;
    position:relative;
}

.one-img img{width: 100%;
    height: 100%;
}

.date-blog{    position: absolute;
    text-align: center;
    font-family: Rubik;
    left: 0px;
    top: 0px;
    margin-left: 10px;
    width: 60px;
    background-color: orangered;
    color: white;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;}

.blog-two{width: 100%;
    display: flex;
    justify-content: center;
}

.blog-two-one{background-color: #171717;
width: 90%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: -7%;
z-index: 1;
border-top: 4px solid orangered;}

.blog-two-one img{    border-radius: 100%;
    border: 4px solid orangered;
    height: 80px;
    width: 80px;
    margin-top: -11%;}

.data-blog{width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;}

.data-blog-one{width: 28%;
/* color: #e9a233; */
color: orangered;
display: flex;
align-items: center;
justify-content: center;
font-family:'Montserrat';
font-weight: 300;
font-size: 14px;
text-transform: capitalize;
}

.blog-icon{margin-right: 6px;}

.h2-heading-blog{    font-family: 'Rubik';
    color: #fff;
    text-align: center;
margin: 0px 5%;}

.blog-para{font-family:'Rubik';
font-size: 17px;
text-align: center;
color: #6a6969;
margin:20px 5% 10px 5%;
line-height: 32px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.button-blog{display: flex;
width: 90%;
margin: 10px 5%;
background-color: #232222;
transition: all 1s;
}

.button-blog-one{width: 75%;
    margin-left: 10%;
}

.button-blog-two{width: 10%;
margin-right: 5%;}

.blog-a-b{text-decoration: none;
font-family:'Rubik';
padding:10px;
color: #717070;
display:block;
transition: all 1s;
}

.button-blog:hover .blog-a-b{color: white;}

.button-blog:hover{background-color: orangered;
color: white;}

/* end blog section here */

/* client  */
.client{display: flex;
flex-wrap: wrap;
background-color:#f1f1f1;}

.client-one{display: flex;
    align-items: center;
    padding: 2% 3%;}

    .client-one:hover{background-color: #ddd;}

.client-one img{width: 100%;}


/* client  */


/* start contact section here */
.contact{width:100%;
    background-image: url(../img/overlay/white-pattern-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
padding-top: 5%;
    padding-bottom: 10%;
    position: relative;
    overflow: hidden;
    }

    
.background-girl{background-image:url(../img/overlay/beti-images.png);
    background-size: 100% 100%;
 position: absolute;
 width: 675px;
height: 814px;
bottom: 0px;
right: -357px;
z-index: 1;}
    
    
    .contact-one{width: 45%;
    margin-left: 5%;
    }

    .contact-one h2{font-family: 'montserrat';
    font-size: 16px;
color: orangered;
line-height: 40px;
}

.contact-one h3{    font-family: 'Rubik';
    font-size: 39px;
    line-height: 50px;
    font-weight: 500;
    margin-bottom: 35px;
}

.img-contact-first{display: flex;
margin-top: 20px;}

.first-one-c{width: 45%;
margin-right: 5%;}

.first-two-c{width: 45%;
margin-right: 5%;}

.contact-para{    font-family: 'Rubik';
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 30px;
    color: #717070;
    line-height: 34px;}

.check-contact p{    color:#171717;
    font-family: 'Rubik';
    line-height: 40px;
    letter-spacing: 1px;}


.contact-two{width: 40%;
margin-right: 5%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
padding: 10px;
position: relative;
background-color: white;}

.layer-two-bg{width: 95%;
height: 95%;
background-image: url(../img/overlay/contact-line.png);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 1;
position: absolute;
}

.contact-form{width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.contact-form h2{    font-family: 'Roboto';
    text-align: center;
    font-size: 44px;
    font-weight: 500;
    margin-bottom: 26px;
    margin-top: 15px;}

.input-contact{padding: 26px 15px;
    width: 90%;
font-family: 'Rubik';
margin-top: 10px;
background-color: #F6F6F6;
color: #686a6f;
border: 1px solid rgba(241, 238, 246, 0.5);
border-radius: 8px;
}

#textarea-c{padding: 26px 15px;
    width: 90%;
    height: 100%;
font-family: 'Rubik';
margin-top: 10px;
background-color: #F6F6F6;
color: #686a6f;
border-radius: 8px;
border: 1px solid rgba(241, 238, 246, 0.5);}

.input-contact:focus{outline: 2px solid orangered;}
   
#textarea-c:focus{outline: 2px solid orangered;
}

.submit-dc{width: 90%;}

#submit{    background-color: orangered;
    color: white;
    border: transparent;
    font-family: 'rubik';
    padding: 23px 56px;
    text-transform: uppercase;
    font-size: 15px;
    margin-top: 20px;
    transition: all 1s;
    cursor: pointer;
}

#submit:hover{background-color: #171717;}



    /* end contact section here */


@media(max-width:900px){

    /* banner */

    .first-banner{width: 100%;
    padding-left: 8%;
padding-top:50px;}

    .first-banner h1{font-size: 32px;
    line-height: 45px;
    }
    
    .first-banner h2{font-weight: 500;}

    /* end banner */


    /* get know us start here  */
    .about-section{flex-direction: column;}

    .about-section-first{width:100%;
    height: 650px;}

    .about-section-second{width: 100%;
    margin-top: 20px;
margin-right: 10px;
margin-right: 2%;}

.year-secondex{width: 45%;}

.bulb-icon{margin-left: 1%;}


    /* get know us end here  */

    /* services start here ` */

    .first-services-content{width: 100%;}

    .first-services-content p{display: none;}

    #secp-services{display: none;}

    .second-services{flex-direction: column;}

    .second-services-copy{width: 100%;}

    .down-head-services{ flex-direction: column;}

    /* services end here ` */



    /* start why choose us here */

    .chooseus{flex-direction: column;}

    .chooseone{width: 100%;}

    .choosetwo{width: 100%;
    height: 650px;}

    .box-happy-costomer{margin-left: -3%;}

    /* end why choose us here */

    /* start tesimonial here  */

    .testimon-bgl{flex-direction: column;}

    .testimonial{height: auto;}

    .testi-first{width: 60%;}

    .testi-second{
    width: 100%;}

    .testi-second h3{margin: 1% 5%;
    font-size: 25px;
line-height: 38px;}

.testi-second h4{margin-left: 5%;}

.copy-testimonial-lay{flex-direction: column;}

.copy-testi-first{width: 100%;}
.copy-testi-second{width: 100%;}
.copy-testi-third{width: 100%;
margin-left: 0px;}


    /* end tesimonial here  */


    /* start blog section here */
    .blog-section-two{flex-direction: column;}

    .copy-blog{margin-left: 1%;
    margin-right: 1%;
width: 100%;
margin-top: 20px;}

.work-two-one{flex-direction: column;}
    /* end blog section here */


    /* start contact here */

    .contact{flex-direction: column;}

    .contact-one{width: 100%;}

    .contact-two{width: 100%;}

    .layer-two-bg{position:unset;}

    .background-girl{display: none;}

/* end contact section here */

.img2-about{width: 88%;}
.img1-about{width: 90%;}

.bulb-icon{z-index: 2;
    position: absolute;}

}
/* End media 900px here */


@media(max-width:600px){

    /* start banner here */
    .first-banner{padding-left: 1%;}

    .second-banner{display: none;}

.first-banner h1{line-height: 45px;
font-size: 27px;
}

.first-banner h2{font-size: 18px;}

    /* end banner here */


    /* get know us start here */
    .about-section-second h2{font-size: 30px;
    line-height: 50px;}

    .yearofex{flex-direction: column;}

    .year-firstex{width: 100%;
    margin: auto 1%;}

    .year-secondex{width: 92%;
    margin: auto 1%;
margin-top:20px;}

    /* get know us end here */

/* start services here */
.first-services-content h3{font-size: 25px;
line-height: 35px;}

/* end services here */

/* why choose us start here */

.chooseone h3{font-size: 30px;
line-height: 45px;}

.icon-choose{flex-direction: column;
}
.icon-one-choose{width: 100%;
margin-top: 20px;}
/* why choose us end here */

/* recent work start here */

.recent-work-one h3{font-size: 23px;
line-height: 45px;
}
/* recent work end here */

/* testimonials start here */
.testi-first{width: 100%;}

.testi-second h3{margin: 2% 5%;
    font-size: 18px;
    line-height: 27px;}

    .testimonial-button{padding-left:0%;
    padding-right:0%;}

    .first-testimonial{font-size: 14px;
    padding: 10px;}
/* testimonials end here */

/* start blog section here */
.data-blog-one{width: 50%;}

/* end blog section here */

/* start contact here */
.contact-one h3{font-size: 25px;
line-height: 40px;
}
.contact-one{margin-right: 5%;}
/* end contact here */

    
}