/*
    Template  Name: Drone
*/

/*
Table Of Content

1. header top area
2. main menu area
3. slider area
4. video slider area  
5. breadcum area
6. feature area
7. about area
8. service area
9. project area
10.counter area
11. call to action area
12. contact area
13. contact service
14. map area
15. testimonial area
16. team area
17. pricing area
18. faq area
19. blog area
20. brand area
21. portfolio area
22. project information area
23. single blog page area 
24.  footer area

*/

/* ======= site font family ==========*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');
:root{
    --blackc: #000;
    --whitec: #fff;
    --bgcolor: #333;
    --bg2color: #F1F1F1;
    --brcolor: #d62222;
    --paracolor: #555;
    --titlecolor: #303030;
}

/* defult css */
body{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    font-family: "Barlow Condensed", sans-serif;
    color: var(--paracolor);
}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    font-size: 24px;
    font-weight: 700;
    color: var(--titlecolor);
    line-height: 1.2;
    font-family: "Barlow Condensed", sans-serif;
    padding: 0;
    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;
}
a{
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    color: var(--blackc);
    transition: .5s;
}
a:hover{
    color: var(--brcolor);
}
/* highlight color css */
.highlight{
    color: var(--brcolor);
}
/*======= header top area start =====*/
.header_top_area {
    padding: 10px 115px ;
    background-color: var(--brcolor);
}
/* header left */
.header_left span, .header_right span, .header_left a{
    font-size: 15px;
    font-weight: 500;
    color: var(--whitec);
}
.header_left span, .header_left a {
    margin: 0 22px 0 0;
}
.header_left span i,
.header_left a i{
    color: var(--whitec);
    margin-right: 6px;
}
/* header top middle css */
.header_top_middle{
    text-align: center;
}
/* header right */
.header_right a {
    font-size: 15px;
    font-weight: 600;
    margin-left: 12px;
    color: var(--whitec);
}
.header_right a:hover{
    color: var(--brcolor);
}
.header_right span i{
    margin-right: 5px;
}
/*======= header top area end ======*/

/*======== main menu area start ==========*/
.main_menu_area {
    padding: 0px 115px;
    border-bottom: 1px solid #CCCCCC;
    transition: .5s;
}
.main_menu_area.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgb(0 0 0 / 70%);
}
.main_menu_area .sticky_logo{
    display: none;
}
.main_menu_area.sticky .main_logo{
    display: none;
}
.main_menu_area.sticky .sticky_logo{
    display: block;
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a:hover{
    color: var(--brcolor);
}
.main_menu_area.sticky .inner_main_nav_area >ul >li >a i{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_icons >i{
    color: var(--whitec);
}
.main_menu_area.sticky .main_nav_right_text h3,
.main_menu_area.sticky .main_nav_right_text h3 a{
    color: var(--whitec);
}
.site_logo_area{
    margin-right: 15px;
}
/* main nav area css */
.main_nav_area {
    display: flex;
    align-items: center;
    justify-content: end;
}
.main_menu_all_item {
    position: relative;
    align-items: center;
}
/* inner main nav area css */
.inner_main_nav_area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_main_nav_area >ul >li {
    display: inline-block;
    position: relative;
}
.inner_main_nav_area >ul >li >a {
    display: inline-block;
    margin: 35px 12px;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}
.inner_main_nav_area >ul >li >a>i {
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
}
.inner_main_nav_area >ul> li> a:hover{
    color: var(--brcolor);
}
/* main nav icons together */
.main_nav_right_together {
    display: flex;
    align-items: center;
}
/* drop down menu css */
.inner_main_nav_area ul li .sub_menu{
    position: absolute;
    top: 130%;
    left: 0;
    width: 200px;
    text-align: left;
    margin: 0;
    padding: 15px 5px 14px;
    z-index: 9999;
    box-shadow: 0 0 30px rgb(0 0 0 / 9%);
    background-color: var(--whitec);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li{
    position: relative;
}
.inner_main_nav_area ul li .sub_menu li a {
    display: inline-block;
    font-size: 18px;
    padding: 8px 17px;
    text-transform: uppercase;
}
.inner_main_nav_area ul li .sub_menu li a:hover{
    color: var(--brcolor);
    margin-left: 5px;
}
.inner_main_nav_area >ul >li:hover .sub_menu{
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.inner_main_nav_area .sub_menu >li > ul.sub_menu{
    top: 130%;
    left: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.inner_main_nav_area ul li .sub_menu li:hover  ul.sub_menu{
    top: 0;
    opacity: 1;
    visibility: visible;
}
/* main menu socail css */
.main_menu_socail a{
    display: inline-block;
    font-size: 22px;
    height: 35px;
    line-height: 35px;
    margin: 0 3px;
    width: 35px;
    border-radius: 100%;
    text-align: center;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.main_menu_socail a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* main nav icons together */
.gogrin_right_area {
    display: flex;
    align-items: center;
}
.main_nav_icons_together {
    display: flex;
    align-items: center;
}
/* main nav icons */
.main_nav_icons >i {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--brcolor);
    color: var(--whitec);
    font-size: 17px;
    cursor: pointer;
    transition: .5s;
}
.main_nav_icons >i:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* nav icon popup css */
.nav_icon_popup {
    position: fixed;
    top: -110%;
    left: 0%;
    background: #000000f0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}
.nav_icon_popup.icon_popup {
    opacity: 1;
    visibility: visible;
    top: 0;
}
/* inner nav icon popup */
.inner_nav_icon_popup {
    width: 47%;
    margin: 0 auto;
    position: relative;
}
.inner_nav_icon_popup input{
    font-size: 30px;
    font-weight: 500;
    padding: 17px 40px 15px 15px;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: 0px 0px 30px 0px #dddddd45;
    background: var(--whitec);
    border-radius: 10px;
}
.inner_nav_icon_popup input::placeholder{
    font-size: 30px;
}
/* inner nav popup form icons css */
.inner_nav_popup_form_icons {
    position: absolute;
    top: 35%;
    right: 10px;
    transform: translateY(-50%);
}
.inner_nav_popup_btnicon{
    font-size: 40px;
    border: none;
    outline: none;
    background: none;
}
.inner_nav_icon_popup i{
    display: inline-block;
    margin-top: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--whitec);
    color: var(--blackc);
    font-size: 25px;
    cursor: pointer;
    transition: 1s;
}
/* main nav icons middle css */
.main_nav_icons_middle {
    margin-left: 18px;
    position: relative;
}
.main_nav_icons_middle a {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    background: var(--whitec);
    box-shadow: 0 0 5px #64333338;
    border-radius: 100%;
}
.main_nav_icons_middle a span {
    position: absolute;
    top: 0;
    right: -5px;
    width: 18px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: var(--brcolor);
    border-radius: 100%;
    color: var(--whitec);
}
.main_nav_middle_box_item {
    overflow: scroll;
    position: absolute;
    right: 0;
    top: 130%;
    width: 300px;
    height: 300px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    background-color: var(--whitec);
    transition: .5s;
}
.main_nav_icons_middle:hover .main_nav_middle_box_item{
    top: 180%;
    opacity: 1;
    visibility: visible;
}
.main_nav_middle_box_item p{
    padding: 20px;
}
/* main nav btn css */
.main_nav_btn {
    margin-left: 10px;
}
.main_nav_btn a {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.main_nav_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* absolute menu css */
.absolute_menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent;
    padding: 0 115px 0;
    border: none;
}
.absolute_menu .inner_main_nav_area >ul >li >a{
    color: var(--whitec);
    margin: 35px 0px 35px 25px;
}
/*======== main menu area end ==========*/

/*======== hamburger menu start ========*/
.dvrm {
    opacity: 0;
    -webkit-transition: .7s;
    transition: .7s;
    position: relative;
    left: 600px
}
.dvrm {
    margin-right: 80px;
    top: 0
}
.dvrm.nav-show {
    opacity: 1;
    left: 0;
    transition: .5s
}
.hamburger {
    background: transparent;
    border: 2px solid var(--whitec);
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    margin: 0;
    overflow: visible;
    padding: 20px 15px;
    position: absolute;
    right: 0;
    text-transform: none;
    top: 50%;
    transform: translateY(calc(-50%));
    transition-duration: .5s;
    transition-property: opacity,filter,-webkit-filter;
    transition-timing-function: linear;
    z-index: 99;
    outline: 0;
}
.hamburger.is-active .hamburger-box {
    height: 17px
}
.hamburger-box {
    display: inline-block;
    height: 16px;
    position: relative;
    width: 36px;
    margin: auto
}
.hamburger-inner {
    display: block;
    top: 50%
}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before {
    background-color: var(--whitec);
    border-radius: 4px;
    height: 3px;
    position: absolute;
    transition-duration: .15s;
    transition-property: transform,-webkit-transform;
    transition-timing-function: ease;
    width: 35px
}
.hamburger-inner::after,.hamburger-inner::before {
    content: "";
    display: block
}
.hamburger-inner::before {
    top: -10px
}
.hamburger-inner::after {
    bottom: -10px
}
.hamburger--slider .hamburger-inner {
    top: 2px
}
.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
    transition-timing-function: ease;
    transition-duration: .2s
}
.hamburger--slider .hamburger-inner::after {
    top: 20px
}
.hamburger--slider.is-active .hamburger-inner {
    -webkit-transform: translate3d(0,10px,0) rotate(45deg);
    transform: translate3d(0,10px,0) rotate(45deg)
}
.hamburger--slider.is-active .hamburger-inner::before {
    -webkit-transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
    transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
    opacity: 0
}
.hamburger--slider.is-active .hamburger-inner::after {
    -webkit-transform: translate3d(0,-20px,0) rotate(-90deg);
    transform: translate3d(0,-20px,0) rotate(-90deg)
}
.hamburger--slider-r .hamburger-inner {
    top: 2px
}
.hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
    transition-timing-function: ease;
    transition-duration: .2s
}
.hamburger--slider-r .hamburger-inner::after {
    top: 20px
}
.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0,10px,0) rotate(-45deg)
}
.hamburger--slider-r.is-active .hamburger-inner::before {
    -webkit-transform: rotate(45deg) translate3d(5.71429px,-6px,0);
    transform: rotate(45deg) translate3d(5.71429px,-6px,0);
    opacity: 0
}
.hamburger--slider-r.is-active .hamburger-inner::after {
    -webkit-transform: translate3d(0,-20px,0) rotate(90deg);
    transform: translate3d(0,-20px,0) rotate(90deg)
}
/*======== hamburger menu end ========*/

/*======== mobile menu area start ==========*/
.mobile_logo_area{
    padding: 20px 0;
    display: none !important;
}
.mean-container a.meanmenu-reveal {
    display: none !important;
}
.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}
.mean-container .mean-bar {
    background: #fff;
    padding: 0;
}
.mean-container .mean-nav ul li {
    border-top: 0px solid #ddd;
}
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav ul li a {
    color: #444;
}
.mean-container .mean-nav ul li li a {
    border-top: 1px solid #ddd;
}
.mean-container .mean-nav ul li a:hover {
    color: #ff4a17;
}
.mobile_p {
    position: fixed;
    right: 0;
    width: 300px;
    padding: 80px 20px 0px;
    overflow-y: scroll;
    top: 0;
    height: 100%;
    z-index: 9999;
    display: block;
    transition: 0.5s all;
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
    transform: translateX(100%);
    background: var(--whitec);
}
.tx-s-open {
    transform: translateX(0);
}
.mobile_p .tuetion_theme_widget > div.widget_block {
    padding: 0;
}
.mobile_p .tuetion_theme_widget > div {
    padding: 20px 0px 20px;
    box-shadow: none;
}
.mean-container .mean-nav ul li a {
    border: 0;	
    width: 100%;
    border-top: 1px solid #ddd;	
    font-size: 14px;
    padding: 12px 5px;
    font-weight: 500;
    display: block;
}
.mean-container .mean-nav ul li a.mean-expand {
    width: auto;
}
.mobile_opicon {
    text-align: right;
    padding: 4px 0;
}
.mean-container .mean-nav > ul > li:first-child > a {
    border-top: 0;
}
.mobilemenu_con {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mobile_menu_o  i {
    font-size: 26px;
}
.mobile_menu_content .mobile_menu_logo {
    margin-bottom: 20px;
}
.mobile_cicon {
    position: absolute;
    right: 30px;
    top: 50px;
}
.mobile_overlay {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease-out 0s;
}
.mobile_overlay.mactive {
    opacity: 1;
    visibility: visible;
}
/*======== mobile menu area end ==========*/

/*======== slider area start  ==========*/
.inner_slider_area {
    height: 900px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center;
    position: relative;
}
.inner_slider_content {
    width: 81%;
    margin: -60px auto 0;
    text-align: center;
}
.inner_slider_content h1 {
    font-size: 18px;
    font-weight: 500;
    color: var(--whitec);
    letter-spacing: 3px;
    margin: 0;
}
.inner_slider_content h2 {
    font-size: 117px;
    color: var(--whitec);
}
.inner_slider_content p {
    font-size: 18px;
    margin: 20px 0 35px;
}
/* home 2 inner slider */
.h2_inner_slider{
    height: 800px;
}
.h2_inner_slider .inner_slider_content {
    text-align: left;
    width: 59%;
    position: relative;
    z-index: 1;
}
.h2_inner_slider .inner_slider_content h1,
.h2_inner_slider .inner_slider_content h2{
    color: var(--titlecolor);
}
.h2_inner_slider .inner_slider_content h1 {
    margin-bottom: 15px;
}
.h2_inner_slider .inner_slider_content h2{
    font-size: 80px;
    letter-spacing: 10px;
    margin-bottom: 5px;
}
.witr_swipers_title {
    position: absolute;
    top: -100px;
    z-index: -1;
}
.witr_swipers_title h4{
    -webkit-text-stroke-color: #ECECEC;
    -webkit-text-fill-color: #ECECEC;
    font-size: 160px;
    opacity: 0.8;
}
/* home 3 slider area */
.h3_inner_slider{
    height: 950px;
}
.h3_inner_slider .h3_slider_all {
    text-align: left;
    width: 62%;
    margin: 0 auto;
}
.h3_slider_all .inner_slider_content {
    width: 100%;
    margin: 95px 0 0;
    text-align: left;
}
.h3_inner_slider .inner_slider_content h2{
    text-transform: uppercase;
    font-size: 80px;
    margin: 0;
}
/* inner slider btn area css */
.inner_slider_btn_area {
    margin-top: 25px;
    padding: 0px 0px 0 150px;
}
.inner_slider_btn_area p{
    color: var(--whitec);
    width: 45%;
    font-size: 18px;
}
/* golobal btn css */
.g_btn a {
    display: inline-block;
    position: relative;
    padding: 20px 70px 20px 70px;
    font-size: 18px;
    background-color: var(--brcolor);
    color: var(--whitec);
    margin-right: 15px;
    transition: all 0.5s linear;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 0 10px #efe3e3;
}
.g_btn a:hover {
    color: var(--brcolor);

    &::before {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    }

    &::after {
        transform: translate3d(0, 0, 0);
        transition-duration: 0.05s;
        transition-delay: 0.4s;
        transition-timing-function: linear;
    }
}
.g_btn a:before {
    position: absolute;
    content: '';
    background-color: var(--whitec);
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    top: -110%;
    left: -10%;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
    z-index: -1;
}
.g_btn a:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: var(--whitec);
    transform: translate3d(0, -100%, 0);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    z-index: -1;
}
.g_btn.mar_top{
    margin-top: 30px;
}
.inner_slider_area .g_btn a{
    box-shadow: none;
}
.h2_inner_slider .inner_slider_content .g_btn{
    margin-top: 45px;
}
.h2_inner_slider .inner_slider_content .g_btn a{
    letter-spacing: 5px;
}
.h2_inner_slider .g_btn a{
    box-shadow: 0 0 10px #efe3e3;
}
/* golobal slick defult arrow css */
.slick-prev , .slick-next{
    position: absolute;
    top: 50%;
    width: 55px;
    height: 55px;
    line-height: 55px;
    z-index: 9999;
    outline: none;
    border: none;
    font-size: 0;
    background: none;
    transform: translateY(-50%);
    transition: 1s;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}
.slick-prev{
    left: -60px;
}
.slick-next{
    right: -40px;
}
.slick-prev::before ,.slick-next::before{
    content: '\ea93';
    font-family: IcoFont;
    display: inline-block;
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 40px;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: 1s;
}
.slick-next::before{
    content: '\ea94';
}
.slick-prev:hover::before ,.slick-next:hover::before{
    background-color: var(--bgcolor);
    color: var(--whitec)
}
/* slider defult arrow css */
.slider_area:hover .slick-prev, .slider_area:hover .slick-next {
    background: none;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
}
.slider_area .slick-prev{
    left: 0;
}
.slider_area .slick-next{
    right: 10px;
}
.slider_area .slick-prev::before ,.slider_area .slick-next::before{
    content: '\eac9';
    font-family: IcoFont;
    color: var(--whitec);
    display: inline-block;
    background: 0 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 0;
    font-size: 50px;
    font-weight: 700;
}
.slider_area .slick-next::before{
    content: '\eaca';
}
.slider_area .slick-prev:hover::before ,.slider_area .slick-next:hover::before{
    color: var(--whitec);
}
/*======== slider area end  ==========*/

/*======== breadcum area start  ==========*/
.breadcum_area {
    background-size: cover;
    background-position: center center;
    padding: 140px 0 90px;
}
.inner_breadcum_area h1{
    font-size: 30px;
    color: var(--whitec);
}
.inner_breadcum_area ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.inner_breadcum_area ul li{
    display: inline-block;
    color: var(--whitec);
}
.inner_breadcum_area ul li a{
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
.inner_breadcum_area ul li i, .inner_breadcum_area ul li a i {
    font-size: 22px;
}
/*======== breadcum area end  ==========*/

/*======== video slider area start  ==========*/
.video_slider_area{
    position: relative;
    height: 100%;
    overflow: hidden;
}
.video_slider_area::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #00000057;
}
.witr_youtube_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -99;
    transform: scale(1.2);
}
.witr_youtube_video iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.video_slider_area .inner_slider_content h1,
.video_slider_area .inner_slider_content h2,
.video_slider_area .inner_slider_content h3,
.video_slider_area .inner_slider_content p{
    color: var(--whitec);
}
/*======== video slider area end  ==========*/


/*========  feature area start ========*/
.feature_area {
    padding: 120px 0 50px;
}
.inner_feature_area{
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.inner_feature_area img {
    margin-bottom: 15px;
}
.feature_text {
    position: absolute;
    top: -70px;
    right: 40px;
    z-index: -1;
}
.feature_text h3{
    color: #eeeeee87;
    font-size: 200px;
}
/*========  feature area end ======*/

/*======== home 2 feature start ======*/
.h2_feature_area{
    padding: 0 0 70px;
}
.h2_single_feature_all {
    padding: 85px 90px 80px 90px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var(--bg2color);
    background: var(--bg2color);
    transition: .5s;
}
.h2_single_feature_all.style2{
    background-color: var(--whitec);
}
.h2_single_feature_all:hover{
    background: var(--whitec);
}
.h2_single_feature_all.style2:hover{
    background-color: var(--bg2color);
}
.h2_single_fea_content h1{
    color: #E3E3E3;
    font-size: 90px;
}
.h2_single_fea_content h2{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
}
.h2_single_fea_content h3{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 7px;
}
/*======== home 2 feature end ======*/

/*======= about area start  ========*/
.about_area {
    padding: 70px 0 50px;
    position: relative;
}
/* service about */
.service_about{
    padding: 50px 0 50px;
}
.inner_about_img{
    margin-bottom: 20px;
}
@keyframes witr_movelr_box45 {
    0%{
         transform: translateX(0px);
      }
    100%{
        transform: translateX(45px);
      }
}
@keyframes witr_movelr_box46 {
    0%{
         transform: translateY(0px);
}
    100%{
        transform: translateY(45px);
}
}
.inner_about_right {
    padding: 85px 0 0;
}
/* sectio title all */
.section_bottom{
    margin-bottom: 30px;
}
.section_title_area{
    position: relative;
    margin-bottom: 60px;
}
.section_title_area.margin_00{
    margin-bottom: 0;
}
.about_area .section_title_area{
    margin-bottom: 0;
}
.section_title_area h2{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--brcolor);
}
.section_title_area h3 {
    font-size: 48px;
    text-transform: uppercase;
}
/* section style 2 */
.section_title_area.style2 h2{
    color: var(--titlecolor);
    letter-spacing: 3px;
}
.section_title_area.style2 h3{
    letter-spacing: 10px;
}
.section_title_area.style2 p {
    width: 40%;
    margin: 12px auto 0;
}
.section_title_para p{
    width: 90%;
}
/* witr title shap css */
.witr_title_shap {
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
.about_area .section_title_area {
    margin-bottom: 30px;
}
.inner_about_list h2 {
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 1px solid var(--brcolor);
}
.inner_about_list h2.border_none{
    border-bottom: none;
}
.about_shap_top , .about_shap_bottom{
    position: absolute;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/* about shap css */
.about_shap_top {
    top: -50px;
    left: 80px;
}
.about_shap_bottom {
    top: 320px;
    right: 50px;
}
/*======== about area end  ==========*/

/*======== home 3 about start =======*/
.h3_about_area{
    padding: 120px 0 50px;
}
.h3_about_area .section_title_area h4 {
    padding: 10px 0 20px;
    font-size: 16px;
}
.h3_about_area .inner_about_img img {
    max-width: 150%;
}
.h3_about_name_title {
    display: flex;
    align-items: center;
    margin-top: 45px;
}
.h3_about_name{
    margin-left: 20px;
}
/* home 3 about shap css */
.h3_about_leftshap , .h3_about_rightshap{
    position: absolute;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
.h3_about_leftshap{
    top: 90px;
    left: 30px;
}
.h3_about_rightshap {
    right: 35px;
    top: 35px;
}
/*======= home 3 about end ========*/

/*========  service area start =======*/
.service_area {
    position: relative;
    padding: 100px 0 50px;
}
.single_service {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    padding: 45px 30px 45px 40px;
    background-color: var(--whitec);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.17);
}
.single_service::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 3px;
    height: 0%;
    background-color: var(--brcolor);
    transition: .5s;
    z-index: -1;
}
.single_service:hover::before{
    height: 40%;
}
.single_service>i {
    display: inline-block;
    font-size: 50px;
    margin-bottom: 30px;
    color: var(--blackc);
    transition: .5s;
}
.single_service:hover>i{
    color: var(--brcolor);
}
.single_service h2 a{
    text-transform: uppercase;
}
/* service btn css */
.ser_btn {
    margin: 60px 0 0 0;
}
.ser_btn a{
    display: inline-block;
    padding: 10px 15px 10px 15px;
    background-color: var(--brcolor);
    color: var(--whitec);
    font-size: 22px;
}
.ser_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* service shap */
.service_shap {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
/*========  service area end =======*/

/*===== video area start ====*/
.video_area{
    padding: 50px 0 50px;
}
.video_width {
    max-width: 1530px;
}
.inner_video {
    padding: 230px 0;
    background-position: center center;
    background-size: cover;
}
.inner_video a{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 28px;
    text-align: center;
    animation: witr-shadow 1s linear infinite;
    background-color: var(--brcolor);
    color: var(--whitec);
    z-index: 1;
}
@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);
    }
}
/* home 2 video area */
.h2_video_area {
    margin: 80px 0 0px;
    padding: 230px 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.h2_video_area .inner_video{
    padding: 0 0;
}
/* home 3 video area */
.h3_video_area {
    padding: 230px 0 145px;
    margin: -145px 0 70px;
}
.h3_video_area .inner_video h3 {
    margin-top: 40px;
    font-size: 48px;
    color: var(--whitec);
}
/*===== video area end ====*/

/*===== testimonial area start ====*/
.testimonial_area{
    padding: 40px 0 0px;
    position: relative;
}
/* site page testimonial */
.site_page_testimonial {
    padding: 120px 0 85px;
}
.inner_testimonial{
    padding-bottom: 40px;
}
.testi_icon i{
    color: var(--brcolor);
}
.inner_testi_para p {
    width: 60%;
    margin: auto;
    font-size: 24px;
    font-weight: 600;
}
.inner_testi_title{
    margin-top: 30px;
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    transition: 3s;
}
.inner_testi_title h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.inner_testi_title p{
    color: var(--brcolor);
}
.inner_testi_title img{
    margin: auto;
}
.testimonial_area .slick-center .inner_testi_title{
    transform: scale(1.1);
    opacity: 1;
    visibility: visible;
}
.testimonial_area .slick-prev {
    left: 10%;
}
.testimonial_area .slick-next{
    right: 10%;
}
.testimonial_area:hover .slick-prev ,.testimonial_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
/* testimonial shap css */
.testi_right_shap, .testi_left_shap{
    position: absolute;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
.testi_left_shap {
    top: -150px;
    left: -90px;
}
.testi_right_shap{
    bottom: 0;
    right: 0;
}
/*===== testimonial area end ====*/

/*======= home 2 testimonial start =======*/
.h2_testimonial_area .testi_icon i{
    color: var(--brcolor);
    font-size: 54px;
}
.h2_testimonial_area .inner_testi_title{
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}
.h2_testimonial_area .inner_testi_para p {
    width: 70%;
    letter-spacing: 1px;
}
/*======= home 2 testimonial end =======*/

/*======= home 3 testimonial start =======*/
.h3_testimonial {
    padding: 105px 0 0;
}
.h3_testi_main {
    margin-top: 20px;
    padding: 35px 20px 35px 50px;
    background-color: var(--bg2color);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
}
.h3_sub_testi_img img {
    width: 100%;
}
.h3_sub_testi_content p{
    font-size: 24px;
    font-weight: 600;
}
.h3_sub_testi_title h2{
    margin: 0;
}
.h3_sub_testi_title p{
    font-size: 18px;
    font-weight: 600;
    color: var(--brcolor);
}
.h3_testimonial .slick-prev{
    left: -70px;
}
.h3_testimonial .slick-next{
    right: -50px;
}
/*======= home 3 testimonial end =======*/

/*======== team area start ==========*/
.team_area{
    padding: 80px 0 20px;
}
/* about team */
.about_team{
    padding: 30px 0 70px;
}
/* service team */
.service_team{
    padding: 70px 0 70px;
}
/* site page team */
.site_page_team{
    padding: 120px 0 50px;
}
.inner_team_area{
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.team_img_area{
    position: relative;
    overflow: hidden;
}
.team_img_area img{
    width: 100%;
    transition: .5s;
}
.inner_team_area:hover .team_img_area img{
    transform: scale(1.2);
}
/* team overlay css */
.team_overlay {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: .5s;
    background-color: #00000047;
}
.inner_team_area:hover .team_overlay{
    left: 0;
}
/* inner team content css */
.inner_team_content {
    background-color: var(--whitec);
    padding: 30px 30px 20px;
}
.inner_team_content h2 {
    margin-bottom: 5px;
}
.inner_team_content h2 a{
    text-transform: uppercase;
}
.inner_team_content p{
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 0;
}
/* inner team absoute icon css */
.inner_team_absol_icon {
    position: absolute;
    bottom: 25px;
    right: 20px;
    transition: .5s;
}
.inner_team_absol_icon a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
    color: var(--whitec);
    background-color: var(--brcolor);
}
.inner_team_absol_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* team socail css */
.team_socail {
    position: absolute;
    bottom: -200px;
    right: 20px;
    display: grid;
    transition: .5s;
} 
.team_socail a{
    display: inline-block;
    margin: 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
    color: var(--whitec);
    background-color: var(--brcolor);
}
.team_socail a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.inner_team_area:hover .team_socail{
    bottom: 65px;
}
/*======== team area end ==========*/

/*======== home 3 team start ==========*/
.h3_team_area{
    padding: 65px 0 0px;
}
.site_page_h3_team {
    padding: 20px 0 110px;
}
/* inner team area css */
.h3_inner_team {
    position: relative;
    margin-bottom: 60px;
}
.h3_inner_team_img{
    position: relative;
    overflow: hidden;
}
.h3_inner_team_img img{
    width: 100%;
    height: 100%;
}
/* team overlay css */
.h3_team_overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000062;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
.h3_inner_team:hover .h3_team_overlay{
    opacity: 1;
    visibility: visible;
}
.h3_team_socail{
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    transition: .5s;
}
.h3_inner_team:hover .h3_team_socail{
    bottom: 60px;
}
/* team socail icon css */
.h3_team_socail a {
    display: inline-block;
    background-color: #02010100;
    color: var(--whitec);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--whitec);
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    margin: 0 3px;
}
.h3_team_socail a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* inner team content css */
.h3_inner_team_content {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: 0 20px;
    padding: 20px 0 20px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
    background-color: var(--whitec);
    transition: .5s;
}
.h3_inner_team_content h2{
    margin: 0;
}
.h3_inner_team_content p{
    color: var(--brcolor);
    margin: 0;
}
/* team slick arrow */
.h3_team_area .slick-prev ,.h3_team_area .slick-next{
    opacity: 1;
    visibility: visible;
    top: -100px;
}
.h3_team_area .slick-prev {
    left: 88%;
}
.h3_team_area .slick-next {
    right: 30px;
}
/*======== home 3 team end =======*/

/*======= project area start =======*/
.project_area {
    margin: 50px 0px 50px 200px;
    padding: 100px 0px 110px 200px;
    background-color: var(--bg2color);
}
.single_project{
    position: relative;
    overflow: hidden;
}
.inner_pro_img img{
    width: 100%;
    transition: .5s;
}
.single_project:hover .inner_pro_img img{
    transform: scale(1.2);
}
/* project img overlay css */
.project_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    transform: scale(0);
    transition: .5s;
}
.single_project:hover .project_overlay{
    transform: scale(1.2);
}
/* inner project content css */
.inner_pro_content {
    position: absolute;
    bottom: -200px;
    left: 30px;
    right: 70px;
    transition: .5s;
}
.single_project:hover .inner_pro_content{
    bottom: 30px;
}
.inner_pro_content h2,
.inner_pro_content p{
    color: var(--whitec);
}
.inner_pro_content h2 a{
    text-transform: uppercase;
    color: var(--whitec);
}
.inner_pro_content h2 a:hover{
    color: var(--brcolor);
}
.project_absol_icon {
    position: absolute;
    top: 50px;
    right: 30px;
}
.project_absol_icon a{
    display: inline-block;
    color: var(--whitec);
    font-size: 20px;
    background-color: var(--brcolor);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.project_absol_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* slick dots css */
.slick-dots {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.slick-dots li{
    display: inline;
    margin: 0 10px 0 0;
}
.slick-dots li button{
    border: none;
    outline: none;
    font-size: 0;
    width: 100px;
    height: 2px;
    background-color: var(--bgcolor);
}
.slick-dots li.slick-active button{
    background-color: var(--brcolor);
}
/*======= project area end ========*/

/*======= choose area start ========*/
.choose_area{
    padding: 50px 0 50px;
}
.inner_choose_img img{
    width: 100%;
}
.inner_choose_area {
    padding: 145px 230px 0 60px;
}
.choose_all {
    padding: 25px 0 0;
}
.inner_choose_list{
    margin-bottom: 30px;
}
.inner_choose_list h2{
    text-transform: uppercase;
}
.inner_choose_list img{
    margin-right: 10px;
}
/*======= choose area end ========*/


/*======= product area start =======*/
.product_area{
    padding: 50px 0 50px;
}
.inner_product_all {
    padding: 130px 0 130px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.single_product_img{
    position: relative;
    overflow: hidden;
}
.single_product_img img{
    opacity: .3;
    margin: auto;
    transition: 1s;
}
.product_area  .slick-center .single_product_img img{
    opacity: 1;
}
/* product icon css */
.product_icon{
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    transition: .5s;
}
.single_product:hover .product_icon{
    bottom: 20px;
}
.product_icon a{
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 100%;
    text-align: center;
    background-color: var(--whitec);
    color: var(--titlecolor);
}
.product_icon a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/* single product content */
.single_product_content {
    background-color: var(--whitec);
    padding: 20px 20px 20px;
    margin: 0 70px;
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
    transition: 2s;
}
/* product area defult arrow */
.product_area  .slick-center .single_product_content{
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}
.single_product_content h2 a{
    font-size: 20px;
}
.single_product_content p{
    font-weight: 700;
    color: var(--brcolor);
    margin: 0;
}
.product_area .slick-prev ,.product_area .slick-next{
    height: 550px;
    line-height: 550px;
    opacity: 1;
    visibility: visible;
}
.product_area .slick-prev::before, .product_area .slick-next::before{
    height: 550px;
    line-height: 550px;
}
/*======= product area end =======*/

/*======= home 2 product start =======*/
.h2_product_area{
    padding: 30px 0 50px;
}
.h2_product_area .slick-prev ,.h2_product_area .slick-next{
    height: 55px;
    line-height: 55px;
    opacity: 1;
    visibility: visible;
}
.h2_product_area .slick-prev::before, .h2_product_area .slick-next::before{
    height: 55px;
    line-height: 55px;
}
/*======= home 2 product end =======*/

/*======= offer area start =======*/
.offer_area {
    padding: 40px 0 70px;
}
.inner_offer_all {
    background-color: var(--bg2color);
    padding: 70px 50px 70px 60px;
}
.inner_offer_area h2{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
}
.inner_offer_area h3{
    font-size: 30px;
    letter-spacing: 5px;
}
.inner_offer_area p{
    width: 60%;
}
/* inner offer btn css */
.inner_offer_btn {
    margin-top: 40px;
}
.inner_offer_btn a{
    font-size: 18px;
    color: var(--brcolor);
}
/*======= offer area end =======*/

/*===== counter area start  ====*/
.counter_area {
    padding: 70px 0px 50px;
    position: relative;
}
.inner_counter_area {
    position: relative;
    text-align: center;
    background-color: var(--whitec);
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
    padding: 20px 30px 25px;
    margin-bottom: 20px;
    z-index: 1;
}
.inner_counter_thumb{
    display: flex;
    align-items: center;
    justify-content: center;
}
.inner_counter_thumb h2,
.inner_counter_thumb h4{
    font-size: 72px;
    color: var(--brcolor);
    margin: 0;
}
.inner_counter_area h3 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* counter all shap css */
.counter_shap {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: -1;
}
.counter_leftshap, .counter_rightshap {
    position: absolute;
    z-index: -1;
    animation: witr_movelr_box45 5s linear 1s infinite alternate running;
}
.counter_leftshap{
    top: -145px;
    left: -50px;
}
.counter_rightshap {
    bottom: -170px;
    left: 74%;
}
/*===== counter area end  ====*/

/*======== shop area start ======*/
.shop_area{
    padding: 40px 0 50px;
}
/* about shop css */
.about_shop{
    padding: 60px 0 50px;
}
/* why choose shop css */
.why_choose_shap{
    padding: 115px 0 55px;
}
.inner_shop_area {
    padding: 20px 20px 45px;
    margin-bottom: 20px;
    background: var(--bg2color);
}
.inner_shop_content h2 a{
    text-transform: uppercase;
}
/* single shop page */
.single_shop_page{
    padding: 120px 0 100px;
}
.single_shop_page .inner_shop_area{
    box-shadow: 0px 0px 10px 0px rgba(148, 146, 245, 0.2);
    background-color: var(--whitec);
}
/* cart area css */
.cart_area{
    padding: 120px 0 120px;
}
/* product checkout css */
.product_checkout {
    padding: 110px 0 105px;
}
/* my account area css */
.my_accout_area {
    padding: 110px 0 100px;
}
/* portfolio area css */
.portfolio_area {
    padding: 115px 0 120px;
}
/*======== shop area end ======*/


/*======== pricing area start ==========*/
.pricing_area{
    padding: 110px 0 100px;
}
.inner_pricing_area {
    position: relative;
    text-align: left;
    background-color: var(--whitec);
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.1);
    padding: 50px 50px 50px 60px;
    border-radius: 5px;
    margin-bottom: 20px;
    z-index: 1;
}
.inner_pri_sm_title h3{
    color: var(--brcolor);
}
/* inner pricing big title css */
.inner_pri_big_title {
    padding: 5px 0 10px;
}
.inner_pri_big_title h2{
    font-size: 60px;
}
/* inner pricing icons css */
.inner_pri_icons {
    position: absolute;
    right: 40px;
    top: 55px;
    z-index: -1;
}
.inner_pri_icons i{
    color: #F7E7E1;
    font-size: 100px;
}
/* inner pricing list css */
.inner_pricing_list {
    padding: 10px 0 20px;
}
.inner_pricing_list ul{
    list-style: none;
    padding: 0;
}
.inner_pricing_list ul li {
    padding: 15px 0 0;
    font-size: 14px;
    font-weight: 500;
}
.inner_pricing_list ul li i{
    color: var(--brcolor);
    font-size: 16px;
    margin-right: 10px;
}
/* inner pricing btn css */
.inner_pricing_btn {
    margin-top: 30px;
}
.inner_pricing_btn a{
    display: inline-block;
    border-radius: 50px;
    padding: 12px 50px 12px 50px;
    font-size: 14px;
    font-weight: 700;
    background-color: var(--brcolor);
    color: var(--whitec);
}
.inner_pricing_btn a:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/*======== pricing area end ==========*/


/*======= contact service start ====*/
.contact_service_area {
    padding: 120px 0 50px;
}
.inner_contact_service {
    padding: 50px 30px 65px 30px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}
.inner_contact_service i {
    font-size: 30px;
    height: 80px;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    line-height: 80px;
    display: inline-block;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_service:hover i{
    background-color: var(--bgcolor);
    color: var(--whitec);
    border-radius: 50%;
}
.inner_contact_service h3 a {
    display: inline-block;
    font-size: 22px;
    margin: 12px 0 10px;
}
.inner_contact_service p{
    margin: 0;
}
.inner_contact_area p.form-messege{
    color: var(--brcolor);
}
/*======= contact service end ======*/

/*======== contact area start  ==========*/
.contact_area {
    padding: 50px 0 120px;
}
.inner_contact_area {
    padding: 60px 30px 50px 30px;
    box-shadow: 0 0 30px rgb(0 0 0 / 6%);
}
.inner_contact_area .section_title_area{
    margin-bottom: 40px;
}
/* inner contact form */
.inner_contact_form input {
    border: 1px solid #ddddddcc;
    outline: none;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    padding: 0 20px;
    margin-bottom: 23px;
}
.inner_contact_form textarea {
    width: 100%;
    border: 1px solid #ddddddcc;
    outline: none;
    padding: 20px 20px;
}
textarea::placeholder {
    color: var(--paracolor);
}
.inner_contact_form button {
    margin-top: 18px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_form button:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.inner_contact_map{
    width: 100%;
    height: 100%;
}
.inner_contact_map iframe {
    width: 100%;
    height: 100%;
}
/*======== contact area end  ==========*/

/*===== faq area start  ====*/
.faq_area{
    padding: 120px 0 100px;
}
.inner_faq_img {
    margin-bottom: 20px;
}
.accordion-item {
    margin-bottom: 20px;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: var(--brcolor);
    color: var(--whitec);
}
.accordion-item .accordion-button {
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    border: none;
    box-shadow: 0 0 5px #dddddd7d;
}
/*===== faq area end  ====*/

/*======= contact service start ====*/
.contact_service_area {
    padding: 130px 0 45px;
}
.inner_contact_service {
    padding: 50px 30px 65px 30px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}
.inner_contact_service i {
    font-size: 30px;
    height: 80px;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    line-height: 80px;
    display: inline-block;
    background-color: var(--brcolor);
    color: var(--whitec);
    transition: .5s;
}
.inner_contact_service:hover i{
    background-color: var(--bgcolor);
    color: var(--whitec);
    border-radius: 50%;
}
.inner_contact_service h3 a {
    display: inline-block;
    font-size: 22px;
    margin: 12px 0 10px;
}
.inner_contact_service p{
    margin: 0;
}

/*======= contact service end ======*/

/*======== map area start  ==========*/
.map_area {
    margin: 75px 0  55px;
}
.inner_map_area {
    width: 100%;
    height: 500px;
}
.inner_map_area iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}
/*======== map area end  ==========*/

/*======== blog area start  ==========*/
.blog_area {
    padding: 45px 0 45px;
}
/* home 3 blog */
.h3_blog_area{
    padding: 50px 0 100px;
}
/* blog grid page */
.blog_grid_page{
    padding: 110px 0 100px;
}
/* inner blog area css */
.inner_blog_area {
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2);
    transition: .5s;
}
.inner_blog_area:hover {
    background: transparent;
}
.blog_main_all {
    padding: 20px 25px 20px;
}
.inner_blog_thumb{
    position: relative;
    overflow: hidden;
}
.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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    transform: scale(0);
    transition: .5s;
}
.inner_blog_area:hover .blog_overlay{
    transform: scale(1.2);
}
.inner_blog_text span {
    margin-right: 5px;
    color: var(--brcolor);
}
.inner_blog_text span i{
    margin-right: 6px;
    color: var(--brcolor);
}
/*inner blog content css */
.inner_blog_content {
    padding: 15px 0px 5px;
}
.inner_blog_content h2 a{
    text-transform: uppercase;
}
.inner_blog_content h2 a:hover{
    color: var(--brcolor);
}
.inner_blog_content p {
    padding-top: 10px;
}
.blog_btn a{
    font-size: 18px;
    color: var(--brcolor);
}
.blog_btn a:hover{
    color: var(--bgcolor);
}
.blog_area:hover .slick-prev ,.blog_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
.yblog_left {
    padding: 120px 0 90px;
}
.yblog_left_inner{
    margin-bottom: 30px;
    box-shadow: 0 0 10px #dddddd9b;
}
.yblog_left_sub h2 a{
    text-transform: inherit;
}
/*======== blog area end  ==========*/

/*======== brand area start  ==========*/
.brand_area {
    padding: 50px 0 120px;
    position: relative;
}
.h2_brand_area{
    padding: 50px 0 60px;
}
.inner_brand_area img{
    margin: 0 auto;
}
.brand_area:hover .slick-prev ,.brand_area:hover .slick-next{
    opacity: 1;
    visibility: visible;
}
/*======== brand area end  ==========*/

/*======== footer area start  ==========*/
.footer_area {
    padding: 95px 0 85px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.footer_widget p,
.footer_widget h2{
    color: var(--whitec);
}
.footer_widget img {
    margin-bottom: 25px;
}
/* footer socail icon css */
.footer_socail_icons {
    padding: 10px 0 0;
}
.footer_socail_icons a {
    display: inline-block;
    color: var(--whitec);
    background-color: var(--bgcolor);
    font-size: 20px;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 5px;
}
.footer_socail_icons a:hover{
    background-color: var(--brcolor);
    color: var(--whitec);
}
/* footer address area css */
.footer_address {
    margin-top: 25px;
}
.footer_address ul{
    list-style: none;
    padding-left: 0;
}
.footer_address ul li {
    padding: 0 0 9px;
    color: var(--whitec);
}
.footer_address ul li i{
    margin-right: 10px;
    color: var(--whitec);
}
/* footer nav css */
.footer_nav {
    margin-top: 25px;
}
.footer_nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_nav ul li a{
    display: inline-block;
    padding: 0 0 9px;
    color: var(--whitec);
}
.footer_nav ul li a:hover{
    color: var(--brcolor);
}
/* inner footer form css */
.witr_form{
    margin-top: 25px;
}
.inner_footer_form{
    position: relative;
    margin-top: 25px;
}
.inner_footer_form input{
    width: 100%;
    font-size: 16px;
    border: none;
    outline: none;
    padding: 15px 15px;
    height: 50px;
    background: transparent;
    color: var(--whitec);
    border: 1px solid #ffffff66;
}
.inner_footer_form input::placeholder{
    color: var(--whitec);
}
.inner_footer_form button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    outline: none;
    padding: 11px 20px;
    background-color: var(--brcolor);
    color: var(--whitec);
    font-size: 18px;
    font-weight: 400;
    transition: .5s;
}
.inner_footer_form button:hover{
    background-color: var(--bgcolor);
    color: var(--whitec);
}
/*======== footer area end  ==========*/


/*======== copyright area start  ==========*/
.copy_right_area {
    padding: 25px 0 25px;
    background-color: var(--brcolor);
}
.inner_copy_right_area p{
    color: var(--whitec);
    margin: 0;
}
.copy_right_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.copy_right_menu ul li {
    display: inline-block;
    margin-left: 15px;
}
.copy_right_menu ul li a{
    font-size: 16px;
    font-weight: 400;
    color: var(--whitec);
}
/*======== copyright area end  ==========*/

/*======== scroll top btn css  ==========*/
#scrollUp {
    bottom: 40px;
    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 #0000002e;
}

/* blog and portfolio all color css */
.portfolio_nav ul li.current_menu_item,
.portfolio_nav ul li:hover,
.port_content_center a:hover,
.inner_portfolio_lower_nav ul li a.current,
.inner_portfolio_lower_nav ul li a:hover,
.ycalender_inner h5,
.ycalender_inner td.active,
.inner_project_in_icon a:hover,
.inner_sin_com_btn button,
.pay_sub_btn button,
.inner_my_accout_form_btn a ,
.inner_cart_btn a,
.shop_quenty button,
.shop_btn_area a  {
    background-color: var(--brcolor);
    color: var(--whitec);
}
.pay_sub_btn button:hover,
.inner_my_accout_form_btn a:hover,
.inner_cart_btn a:hover,
.tab_list_socail_icon a:hover,
.shop_btn_area a:hover,
.inner_shop_icons a:hover {
    background-color: var(--bgcolor);
    color: var(--whitec);
}
.port_content_center h2 a:hover{
    background: none;
    color: var(--brcolor);
}
.port_content_center p{
    color: var(--whitec);
}
.yblog_left_text_sub span i{
    color: var(--brcolor);
}