/*
Theme Name: Ecoba
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

@font-face {
  font-family: 'URW DIN Arabic Regular';
  src: URL('./fonts/URW_DIN_Arabic_Regular.ttf') format('truetype');
}
button.scroll-for-more{font-weight: normal}
body{font-family: 'URW DIN Arabic Regular'; }
.cv-sidebar span.widget-title,strong, b, button{font-family: urw-din-arabic-bold, sans-serif;}
.home-post-big .col{padding-bottom: 0}
label, legend{font-weight: normal;}
.wpcf7 form .wpcf7-response-output{margin: 0}
.wpcf7-form .wpcf7-submit{border-width: 0; margin: 0}
.wpcf7-spinner{display: none}
.wpcf7-form p{margin-bottom: 0}
.row.hwp-form-lh .col{padding-bottom: 0}
.hwp-form-lh label{text-align: left}
.hwp-form-lh .hwp-input{margin-top: 5px;background-color: #f2f2f2; border-radius: 5px; border-width: 0; box-shadow: none; height: 40px; margin-bottom: 10px}
.hwp-form-lh .wpcf7-textarea{min-height: 60px}
.button.is-outline, input[type=button].is-outline, input[type=reset].is-outline, input[type=submit].is-outline{border-width: 1px; border-color: #C2C2C2; padding-top: 4px; padding-bottom: 3px}
.button, button, input[type=button], input[type=reset], input[type=submit]{letter-spacing: 0}
.uppercase, h6, span.widget-title, th{letter-spacing: 0; }
.back-to-top.button.is-outline{padding-top: 0; padding-bottom; 0}

/*************** ADD CUSTOM CSS HERE.   ***************/
img.size-full.alignnone{margin-bottom: 0}
.polylang-flags{margin: 0; padding: 0; list-style: none}
.polylang-flags li{display:inline-block; margin-bottom: 0px}
.polylang-flags li img{height: 15px !important; width: auto !important}

/**PAGE**/
 .dark .nav-vertical-fly-out>li>a:hover, .dark .nav>li.active>a, .dark .nav>li>a.active, .dark .nav>li>a:hover, .nav-dark .nav>li.active>a, .nav-dark .nav>li.current>a, .nav-dark .nav>li>a.active, .nav-dark .nav>li>a:hover, .nav-dark a.plain:hover, .nav-dropdown.dark .nav-column>li>a:hover, .nav-dropdown.dark>li>a:hover{color: #ffcf0e}

.hwp-head1 .menu-item, .hwp-head2 .nav-left > .html{display: none}
.hwp-head2{position: absolute; top: 0; left: 0; width: 100%; height: 90px; top: -100%; transition:all ease 0.5s;}
.hwp-head2.active{top: 0}
.exit-nav{margin-right: 20px}
.hwp-show{cursor: pointer}
.hwp-head2.active .hwp-show img{animation: zoom-in-zoom-out 2s ease}
.scroll-for-more span{font-family: 'URW DIN Arabic Regular'; font-weight: 400; font-size: 18px; letter-spacing:  0}
.scroll-for-more i{
	display:block;
    animation: up-down linear 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: up-down linear 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: up-down linear 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: up-down linear 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: up-down linear 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}
.mobile-sidebar .searchform .submit-button, .header-search-form .searchform .submit-button{background-color: #006F3B}
.mobile-sidebar .nav > li:hover > a{color: #006F3B}
.header-search-form .searchform


.hwp-video{z-index: 1}
.hwp-video:before{content: ''; position: absolute; width: 100%; height: 100%; top: -25px; left: -25px; background-color: #006F3B}

.hwp-e1{position: absolute; top: 0; left: 0; width: 77px; background: #fff}
.hwp-e2{position: absolute; bottom: 0; right: 0; padding-top: 15px; background: #fff}

.hwp-bh > .col-inner{background: url('./images/bg/bg-bh.png') no-repeat bottom right;}

.hwp-gallery .box-image{padding: 25px; }
.box-image{position: relative}
.hwp-img-view{position: absolute; width: 100%; height: 100%; z-index: 1; top:0; left: 0; bottom: 0; border: 1px solid  #DFDFDF}
.hwp-img-view:hover{border-color: #006F3B}


.hwp-portfolio-list{background: url('./images/bg/bg-port.png') no-repeat top left; background-size: contain;}
.hwp-portfolio-list .portfolio-box{border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.01)}
.hwp-portfolio-list .portfolio-box .box-text{padding: 20px 0}
.hwp-portfolio-list .portfolio-box .box-text .portfolio-box-title{padding: 0 20px; letter-spacing: 0; color: #212121; opacity: 1}
.hwp-portfolio-sumo .portfolio-box .box-text{padding-right: 60px} 
.portfolio-vm{position: absolute; right: 10px; top: 20px; font-size: 15px}
.portfolio-vm i{width: 20px; height: 20px; border-radius: 50%; background-color: #006F3B; display: inline-block; font-size: 11px; text-align: center; line-height: 20px; color: #fff; margin-left: 3px}
.hwp-pagination {margin-top: 20px}
.hwp-pagination span{display: inline-block; color: #C2C2C2; font-size: 18px}
.hwp-pagination span:hover{color: #006F3B}
.hwp-pagination span:first-child{margin-right: 5px}

.hwp-box-hover:hover{background: #f5f5f5; cursor: pointer;}


/******POST*****/
.hwp-breadcrumb a, .single-page-header .page-title a, .hwp-page-breadcrumb a{color: #fff}
.blog-archive{padding-top: 0; }
.blog-archive .page-title, .single-page-header .page-title, .bg-page-cv .page-title, .bg-page-project .page-title{opacity:1;font-size: 48px; margin-bottom: 10px; color: #fff}
.bg-page-post, .bg-page-cv, .bg-page-project{padding: 100px 0; background-size: cover; margin-bottom: 30px; color: #fff}
.bg-page-post{background: url('./images/bg/bg-post.jpg') no-repeat center center;}
.bg-page-cv{background: url('./images/bg/bg-cv.jpg') no-repeat center center;}
.bg-page-project{background: url('./images/bg/bg-project.jpg') no-repeat center center;}
.bg-page-post .col{padding: 0}

.hwp-list-cat{margin-bottom: 10px; margin-top: 10px}
.hwp-list-cat ul{margin: 0; padding: 0; list-style: none}
.hwp-list-cat ul li{display: inline-block; margin: 0 10px 30px 0}
.hwp-list-cat ul li a{font-family: urw-din-arabic-bold, sans-serif; font-size: 1.1em;display: block; color: #006F3B; border: 1px solid #006F3B; border-radius: 10px; text-transform: uppercase; padding: 5px 30px; position: relative}
.hwp-list-cat ul li a:before{content:''; position: absolute; width: calc(100% - 20px);height: calc(100% + 20px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #006F3B; border-radius: 10px}
.hwp-list-cat ul li.active a, .hwp-list-cat ul li:hover a{background-color: #006F3B; color: #fff}

.nav-pagination>li>a, .nav-pagination>li>span{border-width: 0; box-shadow: 0 3px 6px rgba(0,0,0,.16); padding-top: 2px}

.post-meta{margin: 5px 0}
.post-meta i{margin-right: 5px}

.box-overlay.box-blog-post{border-radius: 15px; overflow: hidden}
.box-overlay .overlay{background-color: transparent;}
.box-overlay .box-text{padding-top: 80px; padding-bottom: 10px; padding-left: 20px;background: rgb(255, 255, 255);background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgba(0,0,0, .9) 60%);}
.box-overlay.dark .box-text{text-shadow: none}
.hwp-box-text .box-text .post-title a{ overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;}
.hwp-box-text .box-text{padding-bottom: 0; padding-left: 0}
.block-post-big .col{padding-bottom: 0}
.block-post-big .cat-label a{border-radius: 15px; background-color: #006F3B; color: #fff; padding: 3px 15px; margin-right: 5px}

.posted-on i{margin-right: 5px}
.blog-single article{padding: 20px 125px 50px 125px; border-radius: 20px; box-shadow: 0 3px 20px rgba(0,0,0,0.1); margin-top: -70px; background-color: #fff}
.blog-single h1.entry-title{font-size: 36px;margin-top: 10px}

.hwp-meta-list{display: table; width: 100%;border-bottom: 1px solid #E8E8E8; padding-bottom: 30px; }
.hwp-single-tags{float: left}
.hwp-single-tags a:before{content:'#'}
.hwp-single-share{float: right}
.hwp-single-tags a{ margin-right: 10px; color: #1A1818; padding-top: 2px}
.hwp-single-tags a:hover{color: #283E80}
.hwp-single-share .share-icons a{margin-bottom:0; border:0; min-width:0; width: 33px; height: 30px; line-height: 25px; display: inline-block;background-color: #006F3B; color: #fff}
.hwp-single-share .share-icons a i{top: 0}

.hwp-related-title{position: relative}
.hwp-related-post{margin: 50px 0;}
.hwp-relate-box .post-title, .box-normal .post-title {margin-top: 10px; font-size: 20px; }
.hwp-relate-box .post-title a, .box-normal .post-title a, .portfolio-box-title{display: block;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
.hwp-related-title p{font-size: 36px; font-weight: bold; color: #212121; margin-bottom: 20px; position: relative; padding-bottom: 10px; margin-bottom: 30px}
.hwp-related-title p:before{content:''; position: absolute; width: 110px; height: 3px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #006F3B}
.hwp-related-control span{background-color: #fff;position:absolute;height: 40px; width: 40px; text-align: center; line-height: 40px;  border-radius: 50%; border: 1px solid #E2EFFF; box-shadow: 0 3px 6px rgba(0,0,0, 0.1); cursor: pointer; color: #006F3B; z-index: 1; top: 50%; transform: translateY(-50%);}
.hwp-related-control span:hover{color: #2B85BD}
.hwp-related-control span.hwp-button-next{right: -50px}
.hwp-related-control span.hwp-button-prev{left: -50px}

/*CV*/
.hwp-cv{padding-bottom: 30px}
.hwp-cv-box .page-numbers{margin-top: 30px}
.hwp-cv-box table{ border-collapse: collapse; }
.hwp-cv-box table tr td{padding: 20px 10px}
.hwp-cv-box table tr td:first-child{padding-left: 0}
.hwp-cv-box table tr td .cv-title, .hwp-cv-box table tr td .button{margin-bottom: 0}
.hwp-cv-box table tr td .cv-title a{color: #212121}
.hwp-cv-box table tr:hover td .cv-title a{color: #ffcf0e}
.hwp-cv-box table tr:first-child{border-bottom: 2px solid #006F3B}
.hwp-cv-box table tr:first-child td strong{color: #006F3B; font-size: 30px}

.hwp-cv-single-title{font-size: 45px; color: #006F3B }
.hwp-cv-top{border-bottom: 1px solid #E1E1E1; margin-bottom: 20px; padding-bottom: 10px}
.single-cv-meta{list-style: none; margin: 0; padding: 0}
.single-cv-meta li{display:inline-block; margin-right: 25px;}
.single-cv-meta li:last-child{margin-right: 0}
.single-cv-meta li i{color:#006F3B; margin-right: 5px}
.hwp-cv-cb{margin-top: 30px}
.hwp-cv-cb a{border: 1px solid #006F3B; color: #006F3B; padding: 10px; display: inline-block;}
.hwp-cv-cb a:hover{background-color: #006F3B; color: #fff}

.cv-sidebar .widget_text{border: 2px solid #006F3B; padding: 25px}
.cv-sidebar form{margin: 0}
.cv-sidebar span.widget-title{ font-size: 35px; color: #006F3B; display: block; margin-bottom: 15px; padding-bottom: 10px;position: relative }
.cv-sidebar span.widget-title:before{content: ''; position: absolute; left: 0; bottom: 0; width: 180px; height: 4px; background-color: #ECEDEE}
.cv-sidebar .wpcf7-form label{margin-bottom: 0}

/*Project*/
.portfolio-box .portfolio-box-title:hover{color: #006F3B }
.da-page-numbers{margin: 20px 0}
.da-page-numbers .page-numbers{border-radius: 99px;display: inline-block;font-size: 1.1em;height: 2.1em;line-height: 2.2em;min-width: 2.1em;padding: 0 7px;text-align: center;vertical-align: center;box-shadow: 0 3px 6px rgba(0, 0, 0, .16);margin: 0 3px}
.da-page-numbers a{color: currentColor;}
.da-page-numbers .page-numbers:hover, .da-page-numbers .page-numbers.current{background-color: var(--fs-color-primary);border-color: var(--fs-color-primary);color: #fff;}

.single-project-title{position: relative; font-size: 45px; padding-bottom: 15px; margin-bottom: 40px}
.single-project-title:before{content: ''; position: absolute; width: 90px; height: 3px; background-color: #006F3B; left: 50%; transform: translateX(-50%);bottom: 0; }
.single-project-meta{margin: 0; padding:0; list-style: none}
.single-project-meta li{width: 100%; display: block; position: relative; padding-left: 30px}
.single-project-meta li img{position: absolute; left: 0; top: 3px}
.single-project-meta li p{margin-bottom: 10px}

/*FOOTER*/
.hwp-ft-info ul{margin:0; padding: 0;}
.hwp-ft-info ul li{list-style: none; display: block; margin: 0 0 10px 0}
.hwp-ft-info ul li strong{float: left; width: 80px}
.hwp-ft-info ul li span{display: table}

.hwp-link-float{position: fixed; width: 45px; right: 10px; top: 50%; transform: translateY(-50%); z-index: 999}
.hwp-link-float a{display: block}
.hwp-link-float a:first-child{margin-bottom: 10px}
.hwp-link-float img{
  animation: rung-lac 2s ease infinite;
}

@media only screen and (min-width: 1920px){
    .hwp-portfolio-list{background-position: 15%}
    .hwp-portfolio-list .hwp-da-homepage{padding-left: 15%}
}
@media screen and (max-width: 1919px) and (min-width: 1700px){
    .hwp-portfolio-list{background-position: 10%}
    .hwp-portfolio-list .hwp-da-homepage{padding-left: 10%}
}
@media screen and (max-width: 1699px) and (min-width: 1500px){
    .hwp-portfolio-list{background-position: 6%}
    .hwp-portfolio-list .hwp-da-homepage{padding-left: 6%}
}
@media screen and (max-width: 1499px) and (min-width: 1400px){
    .hwp-portfolio-list{background-position: 6%}
    .hwp-portfolio-list .hwp-da-homepage{padding-left: 6%}
}
@media screen and (max-width: 1399px){
    .hwp-portfolio-list .hwp-da-homepage{padding-left: 20px}
}
@media only screen and (max-width: 1199px){
  .blog-single h1.entry-title{ font-size: 38px }
  .blog-single article{padding: 20px 80px 30px 80px}
  .hwp-cv-box table tr:first-child td strong{font-size: 20px}
}
@media only screen and (max-width: 1200){
  .hwp-cv-box table tr:first-child td strong.hwp-cv-text1{font-size: 40px}
  .hwp-slide-2row .swiper .swiper-slide{width: 400px !important}
}
@media only screen and (min-width: 850px){
    .hwp-portfolio-list .hwp-slide-2row{padding-left: 20px}
    .hwp-portfolio-list .hwp-slide-2row .swiper{padding-left: 20px}
    .toppro.row-small>.col{padding-bottom: 0}
    .block-post-big .box-text .post-title {font-size: 30px}
    .from_the_blog_excerpt{font-size: 18px}
}
@media only screen and (max-width: 849px){
  .hwp-pagination{text-align: right; padding-right: 10px}
  .hwp-portfolio-list{background-position: -75%}
  .hwp-portfolio-list .hwp-da-homepage{padding-left: 0}
  .hwp-slide-2row{padding: 0 10px}
  .lv-title .icon-box-img{width: 80px !important}
  .hwp-relate-box .post-title, .box-normal .post-title, .post-title{font-size: 1.3em}

  .blog-single h1.entry-title, .single-project-title, .hwp-cv-single-title{ font-size: 38px }
  .blog-single article{padding: 20px 50px 30px 50px}
  .hwp-btn-vmp.button{margin-left: 10px; margin-top: -30px}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
  .hwp-text-br br{display: none}
  .bg-page-post, .bg-page-cv, .bg-page-project{padding: 50px 0}
  .blog-archive .page-title, .single-page-header .page-title, .bg-page-cv .page-title, .bg-page-project .page-title, .hwp-cv-single-title{font-size: 30px}
  .hwp-list-cat ul li a{font-size: 14px; padding: 5px 20px}
  .blog-single h1.entry-title, .single-project-title{ font-size: 30px }
  .blog-single article{padding: 20px 20px 30px 20px}


  .hwp-meta-desc{width: 100%; float: none}
  .hwp-single-share{margin-top: 10px}
  .hwp-custom-meta ul li{font-size: 12px; padding: 0 5px}

  .hwp-related-title p{font-size: 30px}

  .hwp-related-control span.hwp-button-next{right: -10px}
  .hwp-related-control span.hwp-button-prev{left: -10px}

}

@media only screen and (max-width: 540px){
    .hwp-portfolio-list{background-position: -210px}
    .hwp-video:before{top:-15px}
    #logo{width: 168px !important}
    .polylang-flags li img{height: 13px !important}
    .nav>li.header-search{margin-right: 0}

    .lv-title .icon-box-img{width: 70px !important}
    .hwp-cv-box table tr:first-child td strong{font-size: 18px}
    .hwp-cv-box table tr td .cv-title a{font-size: 0.85em}
    .button.cvvm{font-size: 12px; padding: 5px 8px; line-height: 1.5em}
    .hwp-cv-box table tr td:last-child{padding:0; width: 60px}
}

@-webkit-keyframes rung-lac {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

@keyframes zoom-in-zoom-out {
  0% {
    scale: 0%;
  }
  100% {
    scale: 100%;
  }
}


@keyframes up-down{
  0% {
    transform:  translate(1px,20px)  ;
  }
  24% {
    transform:  translate(1px,30px)  ;
  }
  50% {
    transform:  translate(1px,12px)  ;
  }
  74% {
    transform:  translate(1px,22px)  ;
  }
  100% {
    transform:  translate(1px,22px)  ;
  }
}

@-moz-keyframes up-down{
  0% {
    -moz-transform:  translate(1px,20px)  ;
  }
  24% {
    -moz-transform:  translate(1px,30px)  ;
  }
  50% {
    -moz-transform:  translate(1px,12px)  ;
  }
  74% {
    -moz-transform:  translate(1px,22px)  ;
  }
  100% {
    -moz-transform:  translate(1px,22px)  ;
  }
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform:  translate(1px,20px)  ;
  }
  24% {
    -webkit-transform:  translate(1px,30px)  ;
  }
  50% {
    -webkit-transform:  translate(1px,12px)  ;
  }
  74% {
    -webkit-transform:  translate(1px,22px)  ;
  }
  100% {
    -webkit-transform:  translate(1px,22px)  ;
  }
}

@-o-keyframes up-down {
  0% {
    -o-transform:  translate(1px,20px)  ;
  }
  24% {
    -o-transform:  translate(1px,30px)  ;
  }
  50% {
    -o-transform:  translate(1px,12px)  ;
  }
  74% {
    -o-transform:  translate(1px,22px)  ;
  }
  100% {
    -o-transform:  translate(1px,22px)  ;
  }
}

@-ms-keyframes up-down {
  0% {
    -ms-transform:  translate(1px,20px)  ;
  }
  24% {
    -ms-transform:  translate(1px,30px)  ;
  }
  50% {
    -ms-transform:  translate(1px,12px)  ;
  }
  74% {
    -ms-transform:  translate(1px,22px)  ;
  }
  100% {
    -ms-transform:  translate(1px,22px)  ;
  }
}