/* 

Theme: Ecotek

Version: 1.0;

Date: 

Author: Ecotek

Fonts: "Open Sans", sans-serif; , "Roboto", sans-serif;

Domain:https://www.ecotek.com.cy





*/

body {

  margin: 0px;

}




ul {

  padding: 0px;

  margin: 0px;

  list-style: none;

}



:root {

  --green-color: #85c226;

  --black-color: #393536;

  --grey-color: #fafafa;

  --heading-font: "Roboto", sans-serif;

  --body-font: "Open Sans", sans-serif;

}

h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--black-color);

  font-family: var(--heading-font);

  margin-bottom: 0;

  font-weight: bold;

}

h1 {

  /*font-size: 2.813rem;*/

  font-weight: bold;

}



h2 {

  /*font-size: 2rem;*/

  font-weight: bold;

}

h5 {

  font-size: 1.625rem;

  font-weight: bold;

}



span {

  font-family: var(--body-font);

}



p {

  color: #555555;

  font-size: 1rem;

  font-family: var(--body-font);

  line-height: 1.7;

  margin-bottom: 0;

}

a {

  font-family: var(--body-font);

  font-weight: 600;

  color: var(--black-color);

  font-size: 1rem;

  text-decoration: none;

}

.p60 {

  padding: 3.75rem 0;

}

.pb60{

  padding-bottom: 3.75rem;

}

.greenColor {

  color: var(--green-color);

}

.websiteBtn {

  border-radius: 4px;

  background-color: var(--green-color);

  padding: 1.125rem 2.3rem;

  display: inline-block;

  color: #fff !important;

  text-transform: uppercase;

  transition: 0.5s;

  font-weight: bold;

  letter-spacing: 0.5px;

  font-family: var(--body-font);

}

.websiteBtn:hover {

  background-color: var(--black-color);

}

.topTag {

  font-family: var(--body-font);

  text-transform: uppercase;

  padding-bottom: 0.875rem;

  font-size: 1.25rem;

  font-weight: bold;

  color: var(--green-color);

  display: inline-block;

}

.subHeading {

  font-size: 1.25rem;

  font-weight: bold;

  text-transform: uppercase;

  color: var(--green-color);

  font-family: var(--body-font);

  margin-bottom: 1rem;

  display: block;

}

.titleSection {

  margin-bottom: 2.813rem;

}

.titleSection h1 {

  margin-bottom: 1rem;

}

.titleSection p {

  margin-bottom: 0;

}

/* Start Header CSS */

header {

  padding: 1rem 0;

  position: relative;

  width: 100%;

  background-color: rgb(255 255 255 / 97%);

  box-shadow: 0px 0px 10px 0px rgba(48, 49, 51, 0.1);

  z-index: 111;

}



.header-fixed {

  top: 0;

  position: fixed !important;

  animation: slideDown 0.35s ease-out;

  backdrop-filter: blur(10px);

  width: 100%;

  z-index: 111;

  background-color: #ffffff;

  padding: 0.7rem 0;

}

@keyframes slideDown {

    from {

      transform: translateY(-100%);

    }

    to {

      transform: translateY(0);

    }

  }

.header-fixed .logoWrap img {

    width: 110px;

}

.logoWrap img {

  width: 120px;

}



.submenuToggle {

  position: absolute;

  background: linear-gradient(

    360deg,

    rgb(255 255 255 / 114%) 94%,

    rgb(0 212 255 / 0%) 78%

  );

  width: 233px;

  left: auto;

  right: auto;

  padding: 3rem 0 0.5rem;

  border-radius: 0 0 8px 8px;

  top: 65%;

  transform: translateY(50px);

  opacity: 0;

  transition: 0.3s ease-in-out;

  visibility: hidden;

  z-index: 555;

}

.menuTitle {

  width: 100%;

  padding: 10px 0px;

}

.titleName {

    color: #fff;

}

.appMenuList {

  list-style: none;

  display: flex;

  justify-content: right;

  align-items: center;

  gap: 35px;

}

/*.appMenuList li:hover a img {

  transform: rotate(180deg);

}*/

.appMenuList li:hover .submenuToggle {

  transform: translateY(0px);

  opacity: 1;

  visibility: visible;

}

.appMenuList li a {

  position: relative;

  color: #000;

  font-size: 1rem;

  font-style: normal;

  font-weight: 600;

  line-height: 1.25rem;

  text-transform: capitalize;

}

.menu-item-has-children>a:after {

    content: '\f107 ';

    font-size: 20px;

    position: absolute;

    right: 0px;

    transition: all 0.3s;

    font-family: 'FontAwesome';

    top: 0px;

}

.menu-item-has-children>a {

    padding-right: 21px;

}



.menu-item-has-children>a:hover:after {

    rotate: 180deg;

}

.appMenuList li .active {

  color: var(--green-color);

  font-weight: bold;

}

.appMenuList li a img {

  transition: all 0.3s;

}

.appMenuList .submenuToggle ul li a {

  padding: 0.7rem 1rem;

  display: block;

}

.appMenuList .submenuToggle ul li a:hover {

  background-color: var(--green-color);

  color: #fff;

}

.downToggleBox {

  position: relative;

  display: flex;

  align-items: center;

}

.contactBtn {

  background-color: var(--green-color);

  border-radius: 4px;

  position: relative;

  z-index: 2222;

  transition: 0.5s;

}

.contactBtn:hover {

  background-color: var(--black-color);

}

.contactBtn a {

  padding: 0.938rem 1.625rem;

  display: block;

  color: #fff !important;

}



/* End Header CSS */

/* Start Banner CSS */

.bannerSwiper .swiper-slide {

  height: 78vh;

  position: relative;

  display: grid;

  align-items: center;

}

.bannerSwiper .swiper-slide:after {

    content: "";
    position: absolute;
    background-color: rgb(0 0 0 / 96%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    mix-blend-mode: hard-light;

}

.captionBox {

  position: relative;

  z-index: 1;

}

.bannerSwiper .swiper-slide .banner-caption .subheading {

  color: var(--green-color);

  font-family: var(--body-font);

  font-size: 1.5rem;

  font-weight: bold;

  padding-bottom: 1rem;

  display: block;

}

.bannerSwiper .swiper-slide .banner-caption h1 {

  color: #fff;

  text-transform: capitalize;

  padding-bottom: 2rem;

}

.bannerSwiper .swiper-slide .banner-caption p {

  color: #fff;

  font-size: 1.125rem;

}

.bannerSwiper .swiper-slide .banner-caption .websiteBtn {

  display: inline-block;

  margin-top: 3rem;

}

.bannerSwiper .swiper-pagination-bullet {

  width: 16px;

  height: 16px;

  background-color: #fff;

  opacity: 0.65;

}

.bannerSwiper .swiper-pagination-bullet-active {

  background-color: var(--green-color);

  width: 52px;

  height: 16px;

  border-radius: 21px;

  opacity: 0.75;

}

.bannerSwiper .swiper-pagination {

  display: flex;

  justify-content: left;

  gap: 14px;

  bottom: 7.5rem;

  left: 8px;

}

.language_dropdown img {

  border-radius: 8px;

}

/* End Banner CSS */

/* Start About CSS */

.aboutSection .aboutImage {

  position: relative;

  width: 100%;

  height: 600px;

}

.aboutSection .aboutImage img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/*.aboutSection .row:last-child {

  margin-top: 3.5rem;

}*/

.aboutSection .aboutdescription h2 {

  margin-bottom: 2.375rem;

}

.aboutSection .aboutdescription ul {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  column-gap: 32px;

  row-gap: 20px;

  margin-top: 2rem;

}

.aboutSection .aboutdescription ul li {

  font-family: var(--body-font);

  font-size: 1.125rem;

  font-weight: 500;

  color: var(--green-color);

}

.aboutBottom {

  display: flex;

  gap: 4.063rem;

  align-items: center;

  margin-top: 3.125rem;

}



.videoBox a {

  display: flex;

  align-items: center;

  gap: 15px;

}



.videoBox span {

  font-weight: bold;

}

/* End About CSS */



/*Start Why Ecoteck*/

.whyEcoteck {

  background-color: var(--grey-color);

}

.whyEcoteckBox {

  padding: 40px;

  border: 2px solid #6f6f6f;

  background-color: #fff;

  border-radius: 10px;

  height: 100%;

}

.whyEcoteckBox .whyEcoteckImage {

  padding-bottom: 30px;

}

.whyEcoteckBox .whyEcoteckImage img {

  width: 70px;

}

.whyEcoteckBox .whyEcoteckDescription h5 {

  margin-bottom: 1.25rem;

}

.showMoreBtn {

  margin-top: 3.75rem;

}

.boxHide .col-md-4:nth-child(1), .boxHide .col-md-4:nth-child(2), .boxHide .col-md-4:nth-child(3) {

    display: block;

}

.boxHide .col-md-4 {

    display: none;

}

.showHide {

    display: block !important;

}

/*End Why Ecoteck*/

/*Start Testimonials*/

.testimonialBox {

  position: relative;

  background-color: var(--grey-color);

  padding: 3.5rem 2rem 1.5rem 2rem;

  border-radius: 4px;

  text-align: center;

  display: grid;

  row-gap: 1.375rem;

  border-bottom: 3px solid var(--green-color);

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

.testimonialBox:after {

  content: "";

  position: absolute;

  background-image: url(../images/qoute.svg);

  background-repeat: no-repeat;

  background-size: auto;

  left: 2%;

  top: 2%;

  width: 100%;

  height: 100%;

  opacity: 0.4;

}

/*.testimonialBox .clientProfile {

    height: 160px;

}*/

.testimonialBox .clientProfile img {

  width: 74px;

  border-radius: 50px;

  margin-bottom: 10px;

}



.testimonialBox .clientProfile h6 {

  font-weight: bold;

  color: var(--green-color);

}



.testimonialBox .clientProfile span {

  font-style: italic;

}

.testimonialSwiper {

  padding-bottom: 70px;

}

.swiper-pagination-bullet {

  width: 19px;

  height: 19px;

}

.swiper-pagination-bullet-active {

  background-color: var(--green-color);

}

/*End Testimonials*/

/*Start Certificates*/

.certificateSection {

  background-color: var(--grey-color);

}

.certificatesSwiper .swiper-wrapper {

  align-items: center;

}

.certificatesSwiper .swiper-wrapper {

  align-items: center;

}

.certificatesBox {

  background-color: white;

  padding: 26px;

  height: 190px;

  width: 100%;

  border-radius: 10px;

}

.certificatesBox img {

  filter: grayscale(100%);

  transition: 0.5s;

  height: 100%;

  width: 100%;

  object-fit: contain;

}

.certificatesBox img:hover {

  filter: grayscale(0);

}

.sectionTitleAndButton {

  padding-bottom: 2.5rem;

  align-items: center;

}

.sectionTitleAndButton a {

  float: right;

}

/*End Certificates*/



/*Start Blogs*/

.blogBox {

  border-radius: 10px;

  /*background-color: var(--grey-color);*/

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  height: 100%;

  border-bottom: 3px solid var(--green-color);

}

.blogBox .blogImage {

  height: 250px;

}

.blogBox .blogImage img {

  border-radius: 10px 10px 0 0;

  height: 100%;

  width: 100%;

  object-fit: cover;

}



.blogBox .blogDescription {

  padding: 1.875rem;

}



.blogBox .blogDescription h5 a {

  margin-bottom: 1.25rem;

  font-size: 1.625rem;

  font-weight: bold;

  display: block;

  font-family: var(--heading-font);

}

.blogBox .blogDescription .readMore {

  text-transform: uppercase;

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 2.5rem;

  color: var(--green-color);

  transition: 0.5s;

}

.blogBox .blogDescription .readMore:hover {

  gap: 20px;

}

.blogBox .blogDescription .readMore i {

  font-size: 1.5rem;

}

/*End Blogs*/

/*Start Newsletter*/

.newsLetter {

  background-size: cover !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  position: relative;

}

.newsLetter:after {

  position: absolute;

  content: "";

  background-color: rgb(33 33 33 / 56%);

  height: 100%;

  width: 100%;

  left: 0;

  top: 0;

}

.newsLetter .contact_text {

  position: relative;

  z-index: 1;

  text-align:center;

}

.newsLetter .contact_text p {

  margin-bottom: 3rem;

  font-size: 1.125rem;

  color: #fff;

}

.newsLetter .contact_text h1 {

  margin-bottom: 1.5rem;

  color: #fff;

}

.newsLetter .contact_text .getButton {

  margin-top: 1.5rem;

}

/*End Newsletter*/



/*Start Footer*/

footer {

  background-color: var(--black-color);

  padding: 4rem 0 2rem;

}

.footer-logo img {

  width: 140px;

}

.footer-logo p {

  margin-top: 1.6rem;

  color: #fff;

}

.footer_menu ul {

  display: grid;

  row-gap: 1rem;

  margin-top: 1.25rem;

  padding-left: 1.5rem;

}

.footer_menu {

  display: grid;

  justify-content: center;

  margin-bottom: 20px;

}

.socialMedia ul li a {

  width: 34px;

  height: 34px;

  background-color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50px;

}

.footer_menu a {

  position: relative;

  display: flex;

  align-items: center;

  column-gap: 16px;

  font-size: 1rem;

  color: #fff;

  font-family: var(--body-font);

  font-weight: 400;

}

.footer_menu .menu-item a:after {

    content: '\f0de';

    position: absolute;

    left: -28px;

    font-family: 'FontAwesome';

    rotate: 90deg;

    font-size: 1.4rem;

}

.footer_menu a i {

  font-size: 1.6rem;

  rotate: 90deg;

}

.footer_menu h5,

.address_details h5 {

  color: var(--green-color);

  font-weight: bold;

}

.footerBottom {

  border-top: 1px solid var(--grey-color);

  padding-top: 2rem;

  margin-top: 4rem;

}

.footerBottom .copyrights p {

  color: #fff;

  margin-bottom: 0;

  text-align: center;

}

.socialMedia ul {

  display: flex;

  gap: 1.5rem;

  margin-top: 1.5rem;

}

.address_details ul {

  display: grid;

  row-gap: 1rem;

  margin-top: 1.5rem;

}

.address_details li {

  color: #fff;

  font-size: 1rem;

  display: flex;

  align-items: center;

  gap: 0.813rem;

  line-height: 1.6rem;

  font-weight: 400;

}

.address_details a {

  color: #fff;

}

.contactDetails .label {

  display: block;

  font-family: var(--heading-font);

  font-size: 1rem;

  text-transform: uppercase;

}

/*End Footer*/

/* Start Top Bar CSS */

.topBar {

  background-color: var(--green-color);

  padding: 1rem 0;

}



.topBarDetails ul {

  display: flex;

  gap: 80px;

  margin-top: 0;

}



.topBarDetails ul li img {

  filter: brightness(10);

}



.topBarDetails ul li span,

.topBarDetails ul li a {

  font-size: 0.875rem;

  font-weight: 400;

  line-height: normal;

}



.topBarDetails li {

  gap: 1rem;

}

.topBar .socialMedia ul {

  margin-top: 0;

}

.topBar .socialMedia ul i {

  color: #85c226;

}

/* End Top Bar CSS */

/* Start Our Work */

.ourWorkBox .ourWorkImage img {

  width: 100%;

  object-fit: cover;

  height: 100%;

  mix-blend-mode: luminosity;

  transition: 0.5s;

}

.ourWorkBox:hover img {

  mix-blend-mode: normal;

}

.ourWorkBox {

  position: relative;

  height: 100%;

}

.ourWork .ourWorkBox:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    background-color: black;

    width: 100%;

    height: 100%;

}



.ourWork .ourWorkBox:hover:before {

    background-color: transparent;

}

.ourWorkText {

  top: 50%;

  bottom: 0;

  left: 0%;

  width: 63%;

  height: fit-content;

  position: absolute;

}

.ourWorkLine {

  display: flex;

  align-items: center;

  gap: 28px;

}

.ourWorkText .linkBtn {

  font-size: 1.3rem;

  background-color: #fff;

  padding: 1rem 1.5rem;

  border-radius: 6px;

  line-height: normal;

  text-transform: uppercase;

  font-family: var(--heading-font);

  transition: all 0.5s ease-in-out;

  white-space: pre;

}

.ourWorkBox:hover .linkBtn {

  background-color: var(--green-color);

  color: #fff;

}

.ourWork .col-md-7 .ourWorkBox .ourWorkImage {

  height: 100%;

}

.ourWork .col-md-12 .ourWorkImage {

  height: 350px;

}

.ourWork .col-md-5 {

  display: grid;

  row-gap: 22px;

  /*height: 100%;*/

}

.ourWorkText line {

  height: 2px;

  background: #fff;

  width: 100%;

  display: block;

}

.viewDetail {

  font-size: 1.2rem;

  color: #fff;

  float: right;

  margin-top: 1rem;

  opacity: 0;

  transform: translateY(25%);

  transition: all 0.5s ease-in-out;

  position: absolute;

  bottom: -60px;

  left: 0;

  white-space: pre;

}

.ourWorkBox:hover .viewDetail {

  opacity: 1;

  transform: translateY(0%);

}



/* End Our Work */



/*Start Our Project*/

.ourProject {

  padding: 3.75rem 0;

}

.productSectionTitle h3 {

  margin-bottom: 1rem;

}



.productSectionTitle p {

  margin-bottom: 3.5rem;

}



.productSectionTitle img {

  margin-bottom: 3.5rem;

}

/*End Our Project*/



/*Start Project Single*/

.projectSingle {

    position: relative;

    margin: 3.75rem 0 3.75rem;

    height: 100%;

}



.projectSingleText h2 {

  font-size: 2rem;

  margin-bottom: 0rem;

}

.et_pb_section.et_pb_section_0.et_section_regular {
    padding: 0px;
}
.renovationList h6 {

    font-size: 1.125rem;

}

.projectSingleText p {

  margin-bottom: 1.25rem;

}

.renovationList ul {

  margin-top: 1.5rem;

  list-style: disc;

  margin-left: 1.5rem;

  line-height: 32px;

}

.projectSingleImage {

   position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

}

.projectSingleImage img {

        height: 100%;

    width: 100%;

    max-width: 100%;

    object-fit: cover;

}

.productDetailsList ul {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-top: 2rem;

}

.productDetailsList li span {

    font-weight: bold;

}

.projectVideoSection {

    padding-bottom: 3.75rem;

}

.projectVideo {

    position: relative;

}

.videoplay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 0 auto;

    width: 62px !important;

    height: 100%;

    z-index: 1;

}

.projectVideo iframe {

    border-radius: 15px;

}

/*Gallery Part*/

.portfolioSection{

  padding-bottom: 3.75rem;

}

.portfolioBox {

    position: relative;

    transition: 0.3s ease-in-out;

    height: 100%;

}

.portfolioBox img {

    height: 100%;

    width: 100%;

}

.portfolioBox>img {

    object-fit: cover;

}

.modalBtn {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 0 auto;

    width: 100% !important;

    height: 100%;

    z-index: 1;

    background-color: transparent;

    border: none;

}

.zoomImage {

    width: 62px !important;

}

.portfolioPopup .btn-close {color: #fff !important;opacity: 1;position: absolute;top: 0;right: 0;z-index: 11;background-color: var(--green-color);padding: 10px;border-radius: 10px;background-image: url(../images/close.svg);}

.portfolioPopup .btn-close:focus {

    box-shadow: none;

}

.portfolioBox:hover:after {

    content: '';

    position: absolute;

    background-color: #404040;

    mix-blend-mode: overlay;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.portfolioBox .modalBtn {

    opacity: 0;

}

.portfolioBox:hover .modalBtn {

    opacity: 1;

}

.portfolioSection .col-md-5 .portfolioBox {

    height: 658px;

}



.portfolioSection .col-md-7 .col-md-12 .portfolioBox {

    height: 370px;

}

.portfolioSection .col-md-7 .col-md-4 .portfolioBox, .portfolioSection .col-md-7 .col-md-8 .portfolioBox {

    height: 280px;

}

.portfolioSection .col-md-6 .portfolioBox {

    height: 100%;

}



/*End Project Single*/

/*Start Popup Portfolio*/

.projectSingleGrid{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}

.portfolioPopup .modal {background-color: rgb(255 255 255);}

.portfolioPopup .modal-content {position: relative;border: none;}

.portfolioPopup .modal-body {

    padding: 0 !important;

}

    .thumbSwiper2 {height: 95vh;/*border-radius: 8px 8px 0 0;*/}



    .thumbSwiper {

      height: 150px;

      box-sizing: border-box;

      padding: 8px 0 0;

    }



    .thumbSwiper .swiper-slide {

      width: 25%;

      height: 100%;

    }



    .thumbSwiper .swiper-slide-thumb-active {

      position: relative;

    }

.thumbSwiper .swiper-slide-thumb-active:after {

    content: '';

    position: absolute;

    background-color: #00000087;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

    .thumbSwiper .swiper-slide img, .thumbSwiper2 .swiper-slide img{display: block;width: 100%;height: 100%;object-fit: contain;}

body .portfolioPopup .modal-dialog {max-width: 90% !important;position: absolute;left: 50%;top: 50%;margin: 0 !important;transform: translate(-50%, -50%) !important;}



.thumbSwiper .swiper-slide img {

    cursor: pointer;

}

/*End Popup Portfolio*/



      ul.sub-menu {

    position: absolute;

    background: linear-gradient(360deg, rgb(255 255 255 / 114%) 94%, rgb(0 212 255 / 0%) 78%);

    width: 233px;

    left: auto;

    right: auto;

    padding: 3rem 0 0.5rem;

    border-radius: 0 0 8px 8px;

    top: 65%;

    transform: translateY(50px);

    opacity: 0;

    transition: 0.3s ease-in-out;

    visibility: hidden;

    z-index: 555;

}

.appMenuList li:hover .sub-menu {

    transform: translateY(0px);

    opacity: 1;

    visibility: visible;

}

.appMenuList ul li a {

    padding: 0.7rem 1rem;

    display: block;

}





.pagination {

    background: #85c226;

    padding: 10px 15px;

    color: #fff;

    border-radius: 10px;

}



span.page-numbers.current {

    background: #fff;

    color: #85c226;

    padding: 0px 5px;

    border-radius: 3px;

}



a.page-numbers {

    padding: 0px 14px;

    color: #fff;

}





a.zoomImage {

    background: #85c226;

    color: #fff;

    padding: 15px 30px;

    border-radius: 5px;

}



.view-more-sec {

    text-align: center;

    margin-top: 60px;

}



.single-cta {

    display: flex;

    justify-content: space-between;

}





.back-btn {

    margin-top: 60px;

}



.back-btn a {

    text-transform: uppercase;

    font-size: 1.2rem;

    color: var(--green-color);

    font-weight: 700;

}





.back-btn img {

    padding-right: 1rem;

    width: 50px;

}







footer.menu-item::after {

    position: absolute;

    content: 'abc';

}





footer.menu-item {position: relative;}
.swiper-button-next, .swiper-button-prev {
    color: #000;
}