:root {
      --pri-color: #be9152;
      --light-color: rgb(239, 239, 239 0.756);
      --white: white;
      --black: rgb(18, 18, 18);
      --main-bg: rgb(18, 18, 18);
  }

  body {
      overflow-x: hidden;
      font-family: "Cairo";
      background: var(--main-bg);
      text-align: right;
  }

  main {
      min-height: 400px;
  }

  .text-pri {
      color: var(--pri-color);
  }

  .text-light {
      color: var(--light-color);
  }

  .text-white {
      color: var(--white);
  }

  .text-grey {
      color: var(--white);
      opacity: .7;
  }

  .text-black {
      color: var(--black);
  }


  .bg-pri {
      background-color: var(--pri-color);
  }

  .bg-light {
      background-color: var(--light-color);
  }

  .bg-white {
      background-color: var(--white);
  }

  .bg-black {
      background-color: var(--black);
  }

  .f-bold {
      font-weight: bold;
  }

  .f-bolder {
      font-weight: bolder;
  }

  .radius-5 {
      border-radius: 5px;
  }

  .radius-10 {
      border-radius: 10px;
  }

  .radius-20 {
      border-radius: 20px;
  }

  .radius-circle {
      border-radius: 50%;
  }

  .text-xlg {
      font-size: 2rem;
  }

  .text-lg {
      font-size: 1.6rem;
  }

  .text-md {
      font-size: 1rem;
  }

  .text-sm {
      font-size: .5rem;
  }

  .text-xsm {
      font-size: .3rem;
  }

  .jc {
      justify-content: center;

  }

  .ac {
      align-items: center;
  }

  .main-nav {
      /*background: rgba(0, 0, 0, 0.163);*/
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-inline: 20px;
      height: 60px;
      z-index: 55;
      position: absolute;
      top: 0;
      left: 0;
  }

  .main-nav ul {
      padding-inline-start: 0;
      list-style: none;
      display: flex;
      flex-direction: row;
      flex: 2;
      margin-block: auto;
      justify-content: start;
  }

  .main-nav ul li {
      margin-inline: 10px;
      color: white;
      font-size: .8rem;
  }

  .main-nav ul li a {
      text-decoration: none;
      color: inherit;
  }


  .main-nav img {
      margin-top: 50px;
      width: auto;
      margin-inline: auto;
      height: 80px;

  }

  .main-nav .actions {
      display: flex;
      flex-direction: row;
      flex: 2;
      margin-inline: auto;
      justify-content: end;
  }

  .main-nav .actions .btn {
      margin-inline: 5px;
      font-size: small;
      margin-block: auto;
  }

  header {
      width: 100%;
      height: 600px;
      position: relative;
  }

  .hero-swiper {
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .hero-swiper .swiper-slide {
      width: 100%;
      height: 100%;
  }

  .hero-swiper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      filter: brightness(40%);

  }

  .zoom-bg {
      animation: zoom-out ease-in-out 4s;
  }

  .about-swiper {
      width: 100%;
      max-height: 400px;
      position: relative;
  }

  .about-swiper::after {
      content: "";
      z-index: 1;
      width: 70px;
      height: 100%;
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      background: var(--main-bg);

  }

  .about-swiper .border {
      z-index: 2;
      content: "";
      border: thick solid #be9152;
      position: absolute;
      inset-inline-start: 5%;
      inset-block-end: 5%;
      width: 100%;
      height: 100%;
  }

  .about-swiper .inner {
      content: "";
      z-index: 3;
      width: 150px;
      min-height: 50%;
      position: absolute;
      padding: 5px;
      top: 50%;
      transform: translateY(-50%);
      inset-inline-start: 0;
      background: var(--pri-color);
      background-image: url('assets/images/black-effect.png');
      background-position: bottom;
      background-size: cover;
      opacity: 1;
  }

  .about-div {
      background-image: url('assets/images/black-effect.png');
      background-position: bottom;
      background-size: cover;
      background-attachment: fixed;
  }

  .row {
      background-image: url('assets/images/ptn-1.png');
  }

  @keyframes zoom-out {
      0% {
          scale: 1.4;
          transform: rotateZ(00deg);
      }

      30% {

          transform: rotateZ(-1deg);
      }

      60% {

          transform: rotateZ(1deg);
      }

      100% {
          scale: 1;
          transform: rotateZ(0deg);
      }
  }

  .hero-swiper .swiper-slide .caption {
      width: 60%;
      height: auto;
      padding: 20px;
      border: thin solid rgba(255, 255, 255, 0.5);
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
  }

  .hero-swiper .swiper-slide .caption span {
      width: 2px;
      ;
      height: 60px;
      background: var(--pri-color);
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
  }

  .hero-swiper .swiper-slide .caption h1 {
      font-size: 3rem;
      font-weight: bold;
  }

  .hero-swiper .swiper-slide .caption p {
      font-size: 1rem;
  }

  footer {
      width: 100%;
      position: relative;
      padding: 0;
      background: rgb(20, 20, 20);
  }

  footer .content {
      z-index: 2;
      width: 100%;
      height: auto;
      position: relative;
      padding: 2.6rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-size: cover;
      justify-content: start;
      align-items: start;
      color: white;
  }

  .overlay-bg {
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.2;
      width: 100%;
      height: 100%;

  }

  footer .overlay {
      z-index: 1;

      background-position: center center;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: .2;
      background-size: cover;
  }

  footer .content .col2 {
      flex: 2;
      padding-inline-end: 100px;
  }

  footer .content .col2 p {
      font-size: medium;
      color: grey;
  }

  footer .content .col1 {
      flex: 1;
  }

  footer .content .col1 p {
      font-size: x-large;
      font-weight: bolder;
      margin-bottom: 20px;
      color: white;
  }

  footer .content .col1 ul {
      list-style: none;
      font-size: large;
      color: white;
      padding-inline-start: 0;
  }

  footer .content .col1 ul li {
      margin-block: 10px;
  }

  footer .content .col1 ul li a {
      color: grey;
      text-decoration: none;
  }

  footer .content .col1 ul li a:hover {
      color: white;
      text-decoration: none;
  }

  footer .content .col1 ul li a span {
      color: var(--pri-color);
  }

  .socials a {
      color: grey;
      font-size: small;
      font-weight: bolder;
      text-decoration: none;
      margin-inline-end: 10px;
  }



  .title-text {
      color: var(--pri-color);
      font-weight: bold;
      position: relative;
      margin-bottom: 30px;
  }

  .title-text::after {
      content: "";
      display: inline;
      width: 50px;
      height: 3px;
      background: white;
      position: absolute;
      bottom: -20px;
      inset-inline-start: 0;
  }

  .service-row {
      height: 400px;
      width: 300px;
      position: relative;
      overflow: visible;
  }

  .service-row img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all ease-in-out 0.2s;
      z-index: 0;
      position: absolute;
      top: 0;
      left: 0;

  }

  .service-row .overlay {
      width: 100%;
      height: 100%;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.061));
  }

  .service-row .span1 {
      z-index: 3;
      opacity: 0;
      position: absolute;
      top: 0;
      inset-inline-start: 10px;
      width: 2px;
      height: 100%;
      transition: all ease-in-out 0.2s;
      background: white;
  }

  .service-row .span2 {
      z-index: 2;
      opacity: 0;
      position: absolute;
      top: 10px;
      inset-inline-start: 0;
      width: 100%;
      height: 2px;
      background: white;
      transition: all ease-in-out 0.2s;
  }

  .service-row:hover>.span1 {
      opacity: 1;
  }

  .service-row:hover>.span2 {
      opacity: 1;
  }



  .service-row:hover>img {
      filter: brightness(20%);
  }

  .service-row .caption {
      text-align: center;
      width: 50%;
      z-index: 4;
      opacity: 1;
      position: absolute;
      background: var(--pri-color);
      padding: 1rem;
      top: 50%;
      inset-inline-start: -10%;
      transform: translateY(-50%);
      color: white;
      transition: all cubic-bezier(0.19, 1, 0.22, 1) .4s
  }

  .service-row:hover>.caption {
      opacity: 1;
      color: white;
  }

  .service-row:hover>.overlay {
      width: 0;
  }

  .service-row .caption p {
      font-weight: bold;
      font-size: medium;
  }

  .service-row .action {
      position: absolute;
      z-index: 10;
      bottom: -40px;
      left: 0;
      width: 100%;
      text-align: center;
      height: auto;
      padding-block: 10px;
      ;
      opacity: 0;
      transition: all ease-in-out 0.2s;
      background: white;
      color: var(--main-bg);
      z-index: 6;
      text-decoration: none;
      padding-block: 5px;
  }

  .service-row:hover>.action {
      opacity: 1;
      bottom: 0;
  }


  .project-col {
      position: relative;
      width: 100%;
      height: 400px;

  }

  .project-col::after {
      content: "";
      width: 100px;
      height: 100%;
      background: var(--main-bg);
      position: absolute;
      z-index: 1;
      top: 0;
      inset-inline-start: 0;
  }

  .project-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(70%);
  }

  .project-col .rect {
      width: 80%;
      height: 80%;
      margin-block: auto;
      border: 10px white solid;
      position: absolute;
      z-index: 2;
      top: 10%;
      inset-inline-start: 10%;
      padding: 3rem;
      background: rgba(0, 0, 0, 0.3);
      color: white;
  }

  .project-col .rect h5 {
      font-weight: bold;
      color: white;
  }

  .project-col .date {
      position: absolute;
      z-index: 7;
      inset-inline-end: -10px;
      top: 20%;
      color: white;
      transform: rotate(90deg);
  }

  .project-col2 {
      position: relative;
      width: 100%;
      height: 190px;
      margin-block-end: 20px;
  }

  .project-col2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(70%);
  }

  .project-col2::after {
      content: "";
      width: 50px;
      height: 100%;
      background: var(--main-bg);
      position: absolute;
      z-index: 1;
      top: 0;
      inset-inline-end: 0;
  }

  .project-col2 .rect {
      position: absolute;
      width: 40%;
      z-index: 3;
      padding: 1rem;
      height: auto;
      left: 10px;
      bottom: 10px;
      background: var(--pri-color);
      color: var(--main-bg);
  }

  .bg-border {
      border: 10px white solid;
      padding: 2rem;

  }

  .team-col-main {
      width: 100%;
      position: relative;
      margin-block: 20px;
  }

  .team-col-main img {
      width: 100%;
      height: 600px;
      object-fit: cover;
      object-position: center;
  }

  .team-col-main .caption {
      text-align: center;
      width: 100%;
      color: white;
  }

  .team-col-main .caption h5 {
      margin-block: 15px;
      font-weight: bold;
      font-size: 1.4rem;
      color: var(--pri-color);
  }

  .team-col-main .caption p {
      margin-block: 15px;
      font-size: 1rem;
  }


  .team-col {
      width: 100%;
      position: relative;
      margin-block: 20px;
      overflow: hidden;
  }

  .team-col img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      object-position: center;
  }

  .team-col .caption {
      text-align: center;
      width: 100%;
      color: white;
  }

  .team-col .caption h5 {
      margin-block: 15px;
      font-weight: bold;
      font-size: 1.2rem;
  }

  .team-col .caption p {
      margin-block: 15px;
      font-size: 1rem;
  }



  .team-col .span1 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 50px;
      border-block-end: thick solid white;
      border-inline-end: thick solid white;
  }

  @media screen and (max-width: 767px) {
      .hero-swiper .swiper-slide .caption h1 {
          font-size: 1.5rem;
      }

      .hero-swiper .swiper-slide .caption h2 {
          font-size: 1.5rem;
      }

      .service-row {
          height: 400px;
          width: 250px;
          position: relative;
          overflow: visible;
      }

      .text-xlg {
          font-size: 1.6rem;
      }

      .text-lg {
          font-size: 1.3rem;
      }

      .text-md {
          font-size: .8rem;
      }

      .text-sm {
          font-size: .5rem;
      }

      .text-xsm {
          font-size: .3rem;
      }

      footer .content .col1 p {
          font-size: medium;
          font-weight: bolder;
          margin-bottom: 20px;
          color: white;
      }

      footer .content .col1 ul {
          list-style: none;
          font-size: .7rem;
          color: white;
          padding-inline-start: 0;
      }

      footer .content {
          padding: 1rem;
      }

      .team-col-main img {
          width: 100%;
          height: 500px;
          object-fit: cover;
          object-position: center;
      }

      .team-col img {
          width: 100%;
          height: 400px;
          object-fit: cover;
          object-position: center;
      }

      .main-nav img {
          margin-block: 50px;
          width: auto;
          margin-inline: auto;
          height: 50px;

      }
  }