/*
    Tamplete Name: Transfo
*/

/*
Table Of Content

1. header top area
2. main menu area
3. slider area
4. video slider area  
5. feature area
6. about area
7. service area
8. counter area
9. pricing area
10. team area
11. video area
12. testimonial area
13. faq area
14. contact area
15. brand area
16. blog area
17. subscribe area
18. map area
19. portfolio area
20. blog left area
21. project information area
22. footer area

*/

/* ======= site font family ==========*/

html,body{
    overflow-x: hidden;
}
/* defult css */
body{
    font-size: 16px;
    font-weight: 400;
    font-family: "Yantramanav", sans-serif;
    color: var(--paracolor);
    line-height: 1.6;
    margin: 0;
}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    font-size: 24px;
    font-weight: 900;
    color: var(--titlecolor);
    line-height: 1.2;
    font-family: "Yantramanav", sans-serif;
    margin-bottom: 10px;
    
}
h1{
    font-size: 30px;
}
h2{
    font-size: 24px;
}
h3{
    font-size: 22px;
}
h4{
    font-size: 18px;
}
h5{
    font-size: 16px;
}
h6{
    font-size: 15px;
}

.btn:focus {
    text-decoration: none;
    outline: none;
	box-shadow: none;
}

textarea:focus{
	border-color:transparent;
	outline-color:transparent;	
}
::-moz-placeholder {
    font-size: 16px;
}
::-webkit-input-placeholder {
    font-size: 16px;
}
:-ms-input-placeholder {
    font-size: 16px;
}
::placeholder {
    font-size: 16px;
}
a{
    transition: .5s;
	text-decoration:none;
	color:var(--titlecolor);
}
a:focus, 
a:hover {
    text-decoration: none;
	outline: none;
} 


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active{
  transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;	
}
p.form-messege{
    margin-top: 8px;
}
.witr_all_pd0{
    padding: 0;
}
/* highlight color css */
.highlight{
    color: var(--brcolor);
}


/*======== main menu area start ==========*/
.main_menu_area {
    padding: 25px 0 0 0;
}
.container{overflow: hidden;}
.w-l{float: left;width: 50%;}
.w-35{float: right;width: 17%;}
.f-r{float: right;}
.top h2{font-size: 16px;color: #939393;margin: 20px 0 0 0;font-weight: normal;}
.top p{font-size: 18px;}
.nav{background: #efa82c;box-shadow: 0 8px 6px -6px #ffff;}
.nav ul{width: 1200px;margin: 0 auto;list-style: none;}
.nav ul li{list-style: none;float: left;width: 25%;text-align: center;}
.nav ul li a{font-size: 16px;line-height: 42px;color: #fff;display: block;}
.nav ul li a:hover,.nav ul li a:active{border-bottom: solid 1px #fff;}
.a_btn{background: #e8edf1;display: block;width: 45%;padding: 15px;margin:60px 0 60px 15px;border-radius: 50px;}
.cent-top {text-align: center;margin-top:35px;}
.cent-top h2{font-size: 18px;font-weight: normal;border-bottom: solid 1px #efa82c;line-height: 42px;display: block;width: 50%;margin: 50px auto 0 auto;}
.ng-untouched{padding: 60px 20px 20px 20px;}

.form-con{font-size: 16px;line-height:42px;border:none;border-bottom: solid 1px #000000;background: none;display: block;width: 100%;margin-bottom: 20px;}
.login-button{background: #efa82c;border: none;color: #fff;width: 100%;border-radius: 50px;line-height: 36px;margin: 80px 0;}
.about_right_text h2{font-weight: normal;font-size: 18px;line-height: 36px;color: #939393;}
.us{text-align: center;color: #efa82c;}
.cont-us{line-height: 48px;font-size: 18px;}
.cont-us dd{border-bottom: solid 2px #121212;}
.f_middle_cont {color: #fff;font-size: 14px;}
.f_middle_cont ul{margin: 0;padding: 0;}
.f_middle_cont ul li{list-style: none;line-height: 42px;}
.d-us{line-height: 42px;}
.d-us dd{font-size: 14px;}
.fixed-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;background: #fff;
}


.main_nav_area{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_menu_all_item{
    align-items: center;padding: 20px 0 30px 0;
}



.about_area {
    padding: 20px 0 20px;
    position: relative;
    z-index: 1;
}
.inner_about_left_img p{
    margin-top: 30px;
}



@keyframes witr_movelr_box45 {
    0%{
                transform: translateX(0px);
      }
    100%{
                transform: translateX(45px);
      }
}
/*======== about area end ========*/


/*===== counter area start  ====*/
.counter_area {
    margin: 30px 0 50px;
    padding: 65px 0 80px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.inner_counter_sub_cont {
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.inner_counter_sub_cont h3, .inner_counter_sub_cont span{
    color: #efa82c;
    font-size: 80px;
    font-weight: 700;
}
.inner_counter_area h2 {
    font-size: 20px;
    text-transform: uppercase;
    margin-top:15px;
    color: #fff;
}
/*===== counter area end  ====*/

/* ====== pricing area start  =========*/
.pricing_area {
    padding: 65px 0 55px;
}



/*======== single page price area end  ==========*/

@keyframes witr-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
   }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
   }
}



/*===== single page testimonial end  ====*/

/*======== faq area start  ==========*/
.faq_area {
    padding: 70px 0 0px;
    position: relative;
}
.inner_ac_img img {
    width: 100%;
}
.inner_faq_area{
    padding: 30px 0 30px;
}


.faq_left_shap{
    position: absolute;
    top: 0;
    left: 100px;
    z-index: -1;
    animation: witr_movelr_box46 5s linear 1s infinite alternate running;
}
@keyframes witr_movelr_box46 {
    0%{
                transform: translateY(0px);
}
    100%{
                transform: translatey(45px);
}
}
/*========  faq area end ==========*/

/*======== contact area start  ==========*/

.inner_contact_left_img img{
    width: 100%;
    border: 8px solid var(--whitec);
}



/*======== contact area end  ==========*/

/*======== brand area start ==========*/



/*======== blog area start  ==========*/
.blog_area {
    padding: 80px 0 50px;
}
/* inner blog area css */
.inner_blog_area {
    overflow: hidden;
    background-color: var(--whitec);
}
/* inner blog thumb css */
.inner_blog_thumb{
    position: relative;
    overflow: hidden;margin-top: 25px;
}
.inner_blog_img img{
    width: 100%;
    transition: .5s;
}
.inner_blog_area:hover .inner_blog_img img{
    transform: scale(1.2);
}
/* blog overlay css */
.blog_overlay{
    position: absolute;
    bottom: 0;text-align: center;color: #8e4923;
    left: 0;
    width: 100%;font-size: 24px;
    height: 40px;line-height: 40px;font-weight: bolder;
    background-color: rgb(255 255 255 / 80%);
    
}


/*inner blog content css */
.inner_blog_content {
    padding: 10px 0px 0px;
}
.inner_blog_content h3 {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 8px;font-weight: normal;color: #8b8b8b;line-height: 19px;
}
.inner_blog_content p{
    font-size: 14px;
    width: 90%;
}






/*======== footer area start  ==========*/
.footer_area {
    padding: 90px 0 65px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
   
    margin-top:50px;
    z-index: 9;
}
.footer_middle {
    padding-bottom: 20px;
    margin-bottom: 45px;
    border-bottom: 1px solid var(--whitec);
}
.f_middle_cont h2{
    font-size: 36px;
    color: var(--whitec);
}



#scrollUp {
    bottom: 30px;
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    right: 40px;
    text-align: center;
    border-radius: 5px;
    width: 40px;
    background: var(--brcolor);
    color: var(--whitec);
    box-shadow: 0 0 10px #601c1c47;
}