/* Reset */
:root {
  --color-primary: #2E4D48;
  --color-secondary: #E4E1D0;
  --color-custom: #767676;
  --color-white: #FFFFFF;
}

.page-template-template-home {
  background-color: #e4e1d0;

}

body:not(.page-template-template-home) footer {
  margin: unset !important;
}

body {
  font-family: 'Tajawal', sans-serif;
  color: var(--color-custom);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

p {
  line-height: 1.6;
  margin-bottom: 0;
}

#page {
  overflow: hidden;
}

.btn {
  border: none;
  padding: 12px 26px;
  border-radius: 50vmax;
  font-weight: 600;
}

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-outline-primary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.btn-link:hover {
  color: var(--color-secondary);
}

.head-section {
  color: var(--color-primary);
  font-weight: 400;
  margin-bottom: 50px !important;
  font-size: 24px;
  position: relative;
}

.head-section::after {
  content: '';
  height: 90px;
  width: 2px;
  background: #e4e1d0;
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  top: -30px;
  z-index: 0;
}

.head-section:not(.text-center) {
  text-align: start !important;
}

.nav-tabs {
  border: navajowhite;
  margin-block-end: 50px !important;
  gap: 16px;
}

.nav-tabs .nav-link {
  border-radius: 50px;
  border: 1px solid #E4E1D0 !important;
  color: #2E4D48 !important;
  font-weight: 500;
  font-size: 19px;
  padding: 10px 27px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  background: #E4E1D0;
}

/* 
*
##################### start Header
*
*/

.site-header {
  position: static;
  width: 100%;
  background: rgb(46 77 72);
  padding: 16px 0;
}

.container.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

button.menu-toggle {
  background: transparent;
  border: none;
  color: var(--color-secondary);
  padding: unset;
  width: 30px;
  height: 30px;
  font-size: 22px;
}

#primary-menu {
  position: fixed;
  width: 280px;
  top: 0;
  inset-inline-start: 0;
  height: 100vmax;
  background: var(--color-secondary);
  padding: 30px 0;
  transition: 300ms;
  transform: translateX(280px);
  z-index: 9;
}

#primary-menu>li>a {
  display: block;
  padding: 10px 32px;
}

#primary-menu.active {
  transform: translateX(0);
}

#primary-menu>li>a:hover {
  color: #000;
}


/* 
*
##################### home-slider
*
*/

#home-slider {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 91%);
}

#home-slider img {
  object-fit: cover;
  height: 360px;
}

#home-slider .slider-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  color: var(--color-white);
  text-align: center;
  width: 100%;
  padding: 0 30px;
}

.caption-swiper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 80%;
}

#home-slider .slider-caption h5 {
  color: var(--color-white);
  font-size: 24px;
  margin-block-end: 16px;
}

#home-slider .slider-caption p {
  font-size: 13px;
}

#home-slider .slider-caption a {
  margin-block-start: 30px;
  font-weight: 600;
}

/* About */
#about-us {
  background: var(--color-secondary);
  padding-block: 50px;
}

#about-us>img.img-fluid {
  display: none;
}

/* Services */

#services {
  padding-block: 110px;
  background: #FFF;
}

.services .box {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.services .box figure {
  position: relative;
  width: 60px;
  margin-inline: auto;
  margin-bottom: 0;
}

.services .box figure img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  transition: 300ms;
  position: relative;
}

.services .box:hover figure img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.services .box figure::before {
  content: '';
  position: absolute;
  height: 50px;
  aspect-ratio: 1;
  background: #E4E1D0;
  border-radius: 50%;
  opacity: 90%;
  z-index: 0;
  inset-inline-end: -5px;
  top: 4px;
}

/* Projects */
#projects {
  background: #FFF;
  padding-block-end: 90px;
}

.projects .card {
  border: none;
  border-radius: 19px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 0 10px 4px rgb(0 0 0 / 6%);
}

.projects .card figure {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin: 0;
}

.projects .card figure a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.projects .card figure a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.projects .card figure a:hover img {
  transform: scale(1.05);
}

.projects .card .card-body {
  padding: 20px;
  background: #FFF;
  position: relative;
  z-index: 1;
}

.projects .card .card-body .card-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-weight: 500;
}

.projects .card .card-body .card-title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.projects .card .card-body .card-title a:hover {
  color: var(--color-secondary);
}

.projects .card .card-body .card-text {
  color: var(--color-custom);
  margin-bottom: 20px;
}

.projects .card .card-body .btn {
  padding-inline: 0;
}

.projects .card .card-body .btn::after {
  content: '';
}

/* #contact-cta */

#contact-cta {
  background-image: url(../images/bg-contact.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-block: 100px;
  min-height: 290px;
  background-color: #FFF;
  display: grid;
  place-content: center;
}

#contact-cta .head-section::after {
  display: none
}

/* Footer */

footer {
  background: var(--color-primary);
  color: #FFF;
  text-align: center;
  padding: 70px 0;
  position: relative;
  padding-block-end: 30px;
  margin-top: -40px;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
  font-weight: 100;
}

footer figure img {
  min-width: 210px;
  display: inline-block;
  margin-bottom: 10px;
}

footer a {
  color: #E4E1D0;
}

footer h3 {
  color: #E4E1D0;
  margin-block-end: 14px;
}

footer .row {
  gap: 16px;
}

.copyright {
  border-top: 1px solid #3F5D58;
  padding-block-start: 20px;
  margin-block-start: 20px;
}

footer.entry-footer,
.page .post-thumbnail {
  display: none;
}

header.entry-header-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: grid;
  place-content: center;
}

header.entry-header-image .overlay {
  background: #2E4D48;
  position: absolute;
  inset: 0;
  opacity: 60%;
}

header.entry-header-image h1 {
  position: relative;
  z-index: 1;
  color: #FFF;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  direction: rtl !important;
}

.single .post-thumbnail img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 768px) {
  button.menu-toggle {
    display: none;
  }

  #primary-menu {
    position: static;
    width: auto;
    height: auto;
    transform: translateX(0);
    display: flex;
    gap: 2px;
    padding: 0;
    background: transparent;
    align-items: center;
  }

  #primary-menu>li {
    display: inline-block;
  }

  #primary-menu>li>a {
    padding: 10px 20px;
    color: var(--color-secondary);
    position: relative;
  }

  #primary-menu>li>a:hover {
    color: var(--color-white);
  }

  #primary-menu>li>a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    bottom: -5px;
    width: 23px;
    height: 13px;
    background: url('data:image/svg+xml;charset=utf-8,<svg width="23" height="13" viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.6433 7.22799C21.5018 7.08652 21.9523 6.66569 22.0489 6.52115C22.9025 5.24947 22.9429 3.39761 21.9168 2.21734C20.6206 0.726043 18.8765 1.55953 17.6567 2.65911L8.38436 11.9695C7.82794 12.4337 6.70032 12.7029 6.06652 12.3117L14.0614 4.39912C13.4296 4.56919 12.8323 4.89196 12.336 5.33067C10.3488 7.08652 8.54995 9.2918 6.58696 11.087C4.81569 12.7065 2.42048 12.8331 0.836981 10.8663C-0.275856 9.48434 -0.306412 7.12074 0.910414 5.79645C1.11691 5.57173 1.39586 5.55743 1.2623 5.86641C1.19774 6.01605 0.908443 6.31125 0.794104 6.5089C-0.0535843 7.97159 0.13961 10.1917 1.65116 11.1008C3.13904 11.996 4.66981 10.78 5.73484 9.7637C8.34 7.27855 10.7702 4.58247 13.3833 2.10345C13.9086 1.70305 14.847 1.47578 15.4709 1.68823C15.5892 1.72858 15.7435 1.77812 15.7652 1.92623C15.7947 2.12847 15.5951 2.91038 15.5286 3.1494C15.1935 4.34805 14.4098 5.54058 13.1147 5.67234C13.2073 5.83577 13.6514 5.72597 13.817 5.68868C14.8918 5.44916 15.6346 4.44049 15.9667 3.40731C16.1072 2.97116 16.1525 2.22704 16.2969 1.88741C16.4729 1.47322 17.5606 0.886919 17.976 0.735747C21.4821 -0.540025 24.4007 3.63458 22.2845 6.71625C22.1844 6.8618 21.8296 7.41491 21.6423 7.22696L21.6433 7.22799Z" fill="%23E4E1D0"/> </svg>');
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(10px);
  }

  #primary-menu>li>a:hover::after {
    opacity: 1;
    transform: translateY(0)
  }

  #primary-menu>li.current-menu-item>a::after {
    opacity: 1;
    transform: translateY(0)
  }

  #primary-menu>li:last-child>a {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    background: transparent;
    border-radius: 50vmax;
    padding: 9px 27px;
  }

  #primary-menu>li:last-child>a::after {
    display: none;
  }

  #primary-menu>li:last-child>a:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
  }

  #home-slider .slider-caption {
    width: 450px;
  }

  #home-slider .slider-caption a {
    margin-top: 50px;
  }

  #home-slider .slider-caption h5 {
    font-size: 54px;
    font-weight: 500;
    margin-bottom: 22px;
  }

  #home-slider .slider-caption p {
    font-size: 20px;
  }

  #home-slider img {
    height: 450px;
  }

  #about-us {
    position: relative;
  }

  #about-us::before {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    width: 50%;
    height: 50px;
    background-color: var(--color-primary);
    bottom: -50px;
    clip-path: polygon(0 0, 100% 0%, 100% 0%, 0% 100%);
  }

  #about-us>img.img-fluid {
    display: block;
    width: 45%;
    height: 549px;
    position: absolute;
    top: -140px;
    z-index: 1;
  }

  .icon-logo {
    background: url('data:image/svg+xml;charset=utf-8,<svg width="420" height="443" viewBox="0 0 420 443" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M824.878 247.885C819.488 242.673 836.656 227.168 840.337 221.843C872.87 174.989 874.41 106.759 835.303 63.2735C785.903 8.32831 719.428 39.0374 672.939 79.55L319.548 422.581C298.342 439.685 255.366 449.602 231.21 435.188L535.914 143.659C511.834 149.925 489.069 161.817 470.154 177.981C394.419 242.673 325.86 323.924 251.045 390.065C183.538 449.734 92.2505 454.4 31.8994 381.936C-10.5135 331.018 -11.6781 243.934 34.6981 195.142C42.5684 186.862 53.1998 186.336 48.1095 197.72C45.6488 203.233 34.623 214.109 30.2652 221.391C-2.04223 275.283 5.32087 357.079 62.9296 390.573C119.637 423.559 177.978 378.756 218.569 341.311C317.858 249.748 410.479 150.414 510.069 59.0773C530.092 44.3249 565.855 35.9514 589.635 43.7792C594.143 45.2657 600.022 47.091 600.849 52.5479C601.976 59.9993 594.368 88.8079 591.833 97.6142C579.06 141.777 549.194 185.715 499.832 190.569C503.363 196.591 520.287 192.545 526.598 191.171C567.565 182.346 595.871 145.183 608.531 107.117C613.884 91.0471 615.613 63.631 621.116 51.1178C627.822 35.8573 669.277 14.2556 685.111 8.68583C818.736 -38.3186 929.972 115.49 849.316 229.031C845.503 234.394 831.979 254.772 824.841 247.848L824.878 247.885Z" fill="%23E4E1D0"/> </svg>') no-repeat;
    width: 320px;
    height: 343px;
    position: absolute;
    inset-inline-start: 0;
    bottom: -70px;
    z-index: 11;
    background-size: contain;
  }

  #projects {
    position: relative;
  }

  #projects::after {
    content: '';
  }

  #projects::after {
    content: '';
    position: absolute;
    height: 253px;
    width: 206px;
    top: 60px;
    inset-inline-end: 0;
    z-index: 1;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="360" height="443" viewBox="0 0 360 443" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M307.878 247.885C302.488 242.673 319.656 227.168 323.337 221.843C355.87 174.989 357.41 106.759 318.303 63.2735C268.903 8.32831 202.428 39.0374 155.939 79.55L-197.452 422.581C-218.658 439.685 -261.634 449.602 -285.79 435.188L18.9145 143.659C-5.1658 149.925 -27.9313 161.817 -46.8462 177.981C-122.581 242.673 -191.14 323.924 -265.955 390.065C-333.462 449.734 -424.75 454.4 -485.101 381.936C-527.514 331.018 -528.678 243.934 -482.302 195.142C-474.432 186.862 -463.8 186.336 -468.891 197.72C-471.351 203.233 -482.377 214.109 -486.735 221.391C-519.042 275.283 -511.679 357.079 -454.07 390.573C-397.363 423.559 -339.022 378.756 -298.431 341.311C-199.142 249.748 -106.521 150.414 -6.93149 59.0773C13.0916 44.3249 48.8553 35.9514 72.6351 43.7792C77.1431 45.2657 83.0223 47.091 83.8488 52.5479C84.9758 59.9993 77.3685 88.8079 74.8327 97.6142C62.06 141.777 32.1944 185.715 -17.1684 190.569C-13.6371 196.591 3.28674 192.545 9.59796 191.171C50.5646 182.346 78.8712 145.183 91.5312 107.117C96.8845 91.0471 98.6125 63.631 104.116 51.1178C110.822 35.8573 152.277 14.2556 168.111 8.68583C301.736 -38.3186 412.972 115.49 332.316 229.031C328.503 234.394 314.979 254.772 307.841 247.848L307.878 247.885Z" fill="%23cccccc"/> </svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 30%;
  }

  #projects::before {
    content: '';
    position: absolute;
    height: 253px;
    width: 206px;
    bottom: 60px;
    inset-inline-start: 0;
    z-index: 1;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="436" height="443" viewBox="0 0 436 443" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M824.878 247.885C819.488 242.673 836.656 227.168 840.337 221.843C872.87 174.989 874.41 106.759 835.303 63.2735C785.903 8.32831 719.428 39.0374 672.939 79.55L319.548 422.581C298.342 439.685 255.366 449.602 231.21 435.188L535.914 143.659C511.834 149.925 489.069 161.817 470.154 177.981C394.419 242.673 325.86 323.924 251.045 390.065C183.538 449.734 92.2505 454.4 31.8994 381.936C-10.5135 331.018 -11.6781 243.934 34.6981 195.142C42.5684 186.862 53.1998 186.336 48.1095 197.72C45.6488 203.233 34.623 214.109 30.2652 221.391C-2.04223 275.283 5.32087 357.079 62.9296 390.573C119.637 423.559 177.978 378.756 218.569 341.311C317.858 249.748 410.479 150.414 510.069 59.0773C530.092 44.3249 565.855 35.9514 589.635 43.7792C594.143 45.2657 600.022 47.091 600.849 52.5479C601.976 59.9993 594.368 88.8079 591.833 97.6142C579.06 141.777 549.194 185.715 499.832 190.569C503.363 196.591 520.287 192.545 526.598 191.171C567.565 182.346 595.871 145.183 608.531 107.117C613.884 91.0471 615.613 63.631 621.116 51.1178C627.822 35.8573 669.277 14.2556 685.111 8.68583C818.736 -38.3186 929.972 115.49 849.316 229.031C845.503 234.394 831.979 254.772 824.841 247.848L824.878 247.885Z" fill="%23cccccc"/> </svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 30%;
  }

  .projects .card figure {
    height: 160px;
  }

  .projects .card .card-body .card-text {
    font-size: 13px;
  }

  .projects .card .card-body .card-title {
    font-size: 18px;
  }

  #contact-cta {
    padding-block: 160px !important;
    position: relative;
    height: 440px;
    background-color: #ffffff !important;
  }

  footer .row {
    gap: 0;
  }

  footer {
    text-align: start;
    clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
    margin-top: -70px;
  }

  footer h3 {
    font-size: 18px;
    font-weight: 500;
  }

  .copyright .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #projects>span {
    background-color: #2e4d48;
    display: block;
    width: 50%;
    height: 100px;
    clip-path: polygon(0 40%, 100% 0, 100% 70%, 0 40%);
    position: absolute;
    bottom: -94px;
    z-index: 12;
    inset-inline-end: 0;
  }

  .social-icons {
    justify-content: flex-start !important;
  }

  .entry-content.container.mb-3 {
    min-height: 600px;
  }
}

@media (min-width:1200px) {
  .site-header {
    background: rgb(46 77 72 / 77%);
    position: fixed;
    z-index: 1;
    top: 0;
  }

  .btn {
    min-width: 150px;
  }

  .head-section {
    font-size: 40px;
  }

  #home-slider .slider-caption {
    width: 590px;
    font-size: 18px;
  }

  #about-us {
    min-height: 540px;
    padding: 60px 0;
  }

  #about-us p {
    margin-bottom: 60px !important;
    padding-inline-end: 40px;
    font-size: 18px;
  }

  #about-us .head-section::after {
    content: '';
    position: absolute;
    top: -90px;
    height: 140px;
    width: 2px;
    background: #2e4d48;
    margin-inline: auto;
    inset-inline-start: -10px;
    inset-inline-end: auto;
  }

  #home-slider img {
    height: 630px;
  }

  #about-us>img.img-fluid {
    width: 510px;
    height: 819px;
    top: -240px;
    object-fit: scale-down;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 99%);
  }

  .icon-logo {
    width: 400px;
    height: 443px;
    bottom: -100px;
  }

  .projects .card figure {
    height: 200px;
  }

  #contact-cta {
    height: 670px;
    display: grid;
    place-content: center;
  }

  #contact-cta .head-section {
    max-width: 740px;
  }

  #contact-cta .head-section::after {
    display: none
  }

  .services .box h5 {
    font-size: 30px;
  }

  .services .box p {
    padding-inline: 50px;
  }

  #projects>span {
    background-color: #2e4d48;
    display: block;
    width: 50%;
    height: 130px;
    clip-path: polygon(0 40%, 100% 0, 100% 80%, 0 40%);
    position: absolute;
    bottom: -128px;
    z-index: 12;
  }

  footer {
    margin-top: -100px;
    padding-top: 130px;
  }

  footer::after {
    content: '';
    display: block;
    height: 110px;
    background: #2e4d48;
    position: absolute;
    top: -109px;
    width: 100%;
    clip-path: polygon(0 0, 100% 98%, 100% 100%, 0 100%);
  }

  header.entry-header-image {
    height: 340px;
    padding-top: 100px;
  }

  .entry-content.container.mb-3 {
    min-height: 250px;
  }
}

@media (min-width: 1400px) {

  #home-slider .slider-caption h5 {
    font-size: 60px;
  }

  #home-slider img {
    height: 940px;
  }

  #about-us>img.img-fluid {
    width: 530px;
    height: 850px;
    top: -250px;
  }

  .icon-logo {
    width: 500px;
    height: 543px;
    bottom: -150px;
  }

  #contact-cta {
    height: 1010px;
  }

  #projects>span {
    bottom: -197px;
    clip-path: polygon(0 40%, 100% 0, 100% 78%, 0 40%);
  }

  footer::after {
    top: -169px;
    height: 170px;
  }

  #about-us {
    min-height: 560px;
  }
}