/*======= font =========*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


/*========== vars =======*/

:root {
  --primary: #384B43;
  --secondary: #AF8A53;
  --white: #FFFFFF;
  --card: #FAFAFA;
  --black: #000;
  --green: #2AA81A;
  --c-one: #384B43;
  --c-two: #85673D;
  --c-three: #4B4037;
  --c-four: #AF8A53;
  --section:#F5F2F2;
}

@font-face {
  font-family: 'bahij';
  src: url('./Bahij/Bahij_TheSansArabic-ExtraBold.ttf');
  font-weight: bolder;
  font-style: normal;
}
@font-face {
  font-family: 'bahij';
  src: url('./Bahij/Bahij_TheSansArabic-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'bahij';
  src: url('./Bahij/Bahij_TheSansArabic-Light.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'bahij';
  src: url('./Bahij/Bahij_TheSansArabic-Plain.ttf');
  font-weight: normal;
  font-style: normal;
}

/*======= global ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none !important;
  list-style: none !important;
  outline: none;
  border: none;
  scroll-behavior: smooth;
 
}

::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.4rem;
  background-color: var(--primary);
}

::-webkit-scrollbar-thumb {
  background: var(--secondary);
}

body {
  font-family: 'bahij', sans-serif;
  text-transform: capitalize;
  direction: rtl;
  background-color: var(--white);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: middle;
  overflow-x: hidden;
}

a {
  color: var(--white);
}

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

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

html,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: middle;
  background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

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

section {
  padding-block: 3rem;
  margin-block: 3rem;
}


.white-space {
  white-space: pre-line !important;
}













.btn {
  padding: .6rem 3rem;
  border-radius: 11px;
  font-weight: 300;
  transition: .3s;
  font-size: 1rem;
  border: none;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -ms-border-radius: 11px;
  -o-border-radius: 11px;
}

@media(max-width: 991px) {
  .btn {
    padding: .3rem 1.5rem;
  }
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.main-btn {
  background: var(--primary);

  color: var(--white);
}

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



















.for-mobile {
  display: none;
}

.for-pc {
  display: flex;
}

@media(max-width: 991px) {
  .for-pc {
    display: none !important;
  }

  .for-mobile {
    display: flex !important;
  }
}





/*===============================
==============================*/


/**===============================
  ==============* RTL *===========
===============================**/
html[dir=ltr] {
  body {
    direction: ltr;
  }
}

html[dir='rtl'] [type=email],
html[dir='rtl'] [type=number],
html[dir='rtl'] [type=tel],
html[dir='rtl'] [type=url] {
  direction: rtl;
}

/**===============================
  ================================
=============================== **/

.whatsapp{
  position: fixed;
  bottom: 1rem;
  inset-inline-start: 1rem;
  z-index: 333;
  background: var(--green);
  color: var(--white);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
}




.sec-title{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 2rem;
}

.sec-title .title{

  font-weight: bold;
  padding-bottom: .2rem;
  position: relative;
  color: var(--secondary);
}
.sec-title .title::after{
  margin-top: .5rem;
  margin-inline: auto;
  content: '';
  display: block;
  width: 160px;
  height: 20px;
  background: url("../images/section-style.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.sec-title .main-desc{
  font-weight: bold;
}

.sec-title .sub-desc{
  width: clamp(200px,100%,500px);
  margin: auto;
}



/**===============================================================
  ==========================* header *============================
===============================================================**/



header {
  height: 100dvh;
  position: relative;
  overflow-x: inherit;
}

header .video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

header .overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}

header .content {
  position: relative;
  z-index: 1;
  /* Keeps content on top of the video */
  color: white;
  padding-top: 3rem;
  
}

header .content .title{
  font-size: 2rem;
  font-weight: bold;
  padding-bottom: 1rem;
  position: relative;
}
header .content .title::after{
  margin-top: 1rem;
  content: '';
  display: block;
  width: 260px;
  height: 30px;
  background: url("../images/Layer_2-2\ \(2\).svg");
  background-repeat: no-repeat;
  background-size: contain;
}

header .content .desc {
  /* font-size: 1rem; */
  font-weight: 300;
}

header nav {
  position: absolute;
  top: 1rem;
  z-index: 9999;
  width: 100%;
}

header nav .nav-container {
  padding: .8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 23px;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  -ms-border-radius: 23px;
  -o-border-radius: 23px;
}

@media(max-width:625px){
  header nav .nav-container {
    padding: .2rem 1rem;
  }
  header nav .logo{
    max-width: 110px;
  }
}

header nav .logo {
  height: 70px;
  
  display: block;

  img {
    object-fit: contain;
  }
}

header nav .actions{
  display: flex;
  align-items: center;
  gap: 1rem;
  
}

header nav .lang {
  color: var(--white);
}

@media(max-width:625px){
  header nav .actions{
    gap: .5rem;
    
  }
  header nav .lang {
    font-size: .8rem;
  }
}


.rights{
  padding-block: 1rem;
}
.rights .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap-reverse;
  color: var(--black);

  p{
    font-weight: bold;
  }

  img{
    width: 120px;
    height: 50px;
    object-fit: contain;
  }
}


@media(max-width:625px){
  .rights .container {

    gap: .5rem;
  
    p{
      font-size: .8rem;
    }
  
    img{
      width: 130px;
      height: 40px;
    }
  }
}









/**===============================================================
  ================================================================
===============================================================**/



/**========================================================================
==========================* main *=======================================
========================================================================**/



/* =========================================
       =========== about =============
========================================== */

.about .services{
  background-color: var(--primary);
  margin-top: 3rem;
  border-radius: 49px;
  -webkit-border-radius: 49px;
  -moz-border-radius: 49px;
  -ms-border-radius: 49px;
  -o-border-radius: 49px;
}
.about .services img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  /* max-height: 500px; */
  border-radius: 49px;
  -webkit-border-radius: 49px;
  -moz-border-radius: 49px;
  -ms-border-radius: 49px;
  -o-border-radius: 49px;;
  -webkit-border-radius: 49px;
  -moz-border-radius: 49px;
  -ms-border-radius: 49px;
  -o-border-radius: 49px;
}

.about .content{
  padding: 2rem 1rem;
}
@media(max-width:625px){
  .about .content{
    padding: 2rem .5rem;
  }
}
.about .content .content-heading{
  color: var(--white);
  border-color: var(--white);
}
.about .content .content-body-item .title{
  font-size: 1.2rem;
}
.about .content .content-heading .desc{
  opacity: .8;
  font-size: .7rem;
}

.about .content .content-body{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--white);
  padding-inline-end: 0rem;
 
}
.about .content .content-body-item{
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* .about .content .content-body-item .desc{
  opacity: 0;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

.about .content .content-body-item.active .desc{
  opacity: 1;
} */

.nav-pills .nav-link.content-body-item {
  color: #fff;
  background-color: transparent;
  text-align: unset;
  opacity: .6;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

.nav-pills .nav-link.content-body-item.active , .nav-pills .nav-link.content-body-item:hover{
  opacity: 1;
}

/* .nav-pills .nav-link.content-body-item:not(:hover){
  opacity: .6;
} */

/* global for section */
.about .content  .title-border {
  border-bottom: 2px solid;
  width: fit-content;
  padding-block: 0 .7rem;
  margin-bottom: .7rem;
  
}

/* ===================================================
==========================* passion *===================
=================================================== */
.passion .content.sec-title{
  justify-content: unset;
  align-items: unset;
  padding-inline: 0;
  text-align: unset;
  margin-inline-end: 2rem;
}
@media(max-width:991){
  .passion .content.sec-title{
    margin-inline-end: 0;
  }
}
.passion .content .title{
  padding-bottom: 1rem;
  position: relative;
  width: clamp(200px,100%,300px);
  color: var(--secondary);
  font-weight: bold;
}


.passion .content.sec-title .title::after{
  margin-top: .5rem;
  content: '';
margin-inline: unset;
  display: block;
  width: clamp(100px,100%,260px);
  height: 30px;
  background: url("../images/section-style.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.passion .content.sec-title .main-desc ,.passion .content.sec-title .sub-desc{
  text-align: unset;
  margin: unset;
}


.passion .imgs {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.passion .imgs img {
  aspect-ratio: 3/4;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  max-height: 430px;
  object-fit: cover;
}
/*.passion .imgs img:nth-child(1){*/
/*  margin-top: 2.5rem;*/
/*}*/
.passion .imgs img:nth-child(2n){
  margin-top: -2.5rem;
}


/* ===================================================
======================* projects *===================
=================================================== */

.projects{
  background: var(--section);
}

.projects .card{
  border: none;
  overflow: hidden;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  position: relative;
}

.projects .card .title-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(180deg, #384B4300 0%, #384B43 100%) 0% 0% no-repeat padding-box;
  color: var(--white);
  z-index: 1;
  display: flex;
  justify-content:  flex-end;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  opacity: 0;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  .title{
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
  }
}
.projects .card:hover .title-overlay{

  opacity: 1;

}
.projects .card video,
.projects .card img{
  width: 100%;
  height: 100%;
  max-height: 450px ;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition:.3s;
  -webkit-transition: .3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
  -o-transition:.3s;
  -webkit-transition:.3s;
}


/* ===================================================
======================* proccess *===================
=================================================== */

.proccess .card-col{
  position: relative;
}

.proccess .card-col:not(:last-child)::after{
  content: '';
  display: block;
  position: absolute;
  top: 20%;
  inset-inline-end: -24%;
  transform: translate(-0%,20%);
  width: 50%;
  height: 1px;
  border-top: 2px dashed rgba(128, 128, 128, 0.381);
  -webkit-transform: translate(-0%,20%);
  -moz-transform: translate(-0%,20%);
  -ms-transform: translate(-0%,20%);
  -o-transform: translate(-0%,20%);
}

@media(max-width:991px){
  .proccess .card-col:nth-child(2)::after{
    content: unset !important;

  }
}
@media(max-width:625px){
  .proccess .card-col::after{
    content: unset !important;

  }
}

.proccess .card{
  border: none;
  background: transparent;
}

.proccess .card .card-icon {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 1.5rem;
  margin: auto;
}

.proccess .card-col:nth-child(2) .card .card-icon{
  background: var(--c-two);
}
.proccess .card-col:nth-child(3) .card .card-icon{
  background: var(--c-three);
}
.proccess .card-col:nth-child(4) .card .card-icon{
  background: var(--c-four);
}

.proccess .card .card-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.proccess .card .card-body{
  text-align: center;
}

.proccess .card .card-body .title{
  font-weight: bold;
  color: var(--primary);
  margin-bottom: .7rem;
}










/* ===================================================
======================* packages *===================
=================================================== */

.packages .card{
  background: var(--card);
  border: none;
  border-radius: 34px;
  padding: 2rem 1rem;
  box-shadow: 0px 0px 15px #7E737329;
  transition: .3s;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}



.packages .card .card-header {
  border-bottom: 2px solid #e0bf8d66;
  margin: 0 auto 1rem auto;
  width: fit-content;
  padding-block: 0 1rem ;
  color: var(--primary);
}

.packages .card .card-header .title{
  margin-bottom: .5rem;
}
.packages .card .card-header .price {
  font-size: 1rem;
}
.packages .card .card-header .price span{
  font-size: 2.3rem;
}

.packages .card .card-body{
  color: var(--secondary);
}

.packages .card .card-body li{
  font-weight: 300;
  padding: .5rem 2rem;
  position: relative;
}
.packages .card .card-body li::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('../images/list-style-price.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
html[dir=ltr]{
  .packages .card .card-body li::before{
    transform: translateY(-50%) scale(-1);
    -webkit-transform: translateY(-50%) scale(-1);
    -moz-transform: translateY(-50%) scale(-1);
    -ms-transform: translateY(-50%) scale(-1);
    -o-transform: translateY(-50%) scale(-1);
}
}

.packages .card .card-header , .packages .card .card-footer{
  background: transparent;
 
  text-align: center;
}

.packages .card .card-footer{
  border: none;
}

.packages .card-cont:nth-child(2) .card{
  background: var(--c-three);
  color: var(--white);

  .card-body , .card-header{
    color: var(--white);
  }

  .card-footer .main-btn{
    background: var(--white);
    color: var(--c-three);
  }

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

}








/* ======================================
      =========== footer =============
====================================== */ 


footer {
  background: var(--primary);
  padding-block: 3rem;
  color: var(--white);
}

footer .footer-logo{
  display: block;
  width: clamp(250px,100%,300px);
  position: relative;
  margin: auto;
}

footer .footer-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding-inline:2rem;
}

footer .footer-logo::after,footer .footer-logo::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 30px;
  background: url('../images/Layer_2-2\ \(2\).svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

footer .footer-logo::after{
  inset-inline-start: -100%;
}

footer .footer-logo::before{
  inset-inline-end: -100%;
}

@media(max-width:991px){
  footer .footer-logo::before{
    display: none;
  }
  
 

  footer .footer-logo::after{

    position: relative;
    top: unset;
    transform: unset;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
}
  

  
  footer .footer-logo::after{
    margin-top: 1rem;
    inset-inline-start: unset;
  }
}

footer .footer-desc{
  font-size: 1rem;
  font-weight: 300;
}

footer .social {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;

  a{
    font-size: 1rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px  ;
    -webkit-border-radius: 13px  ;
    -moz-border-radius: 13px  ;
    -ms-border-radius: 13px  ;
    -o-border-radius: 13px  ;
    background: var(--white);
    color: var(--primary);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
}

footer .social a:hover{
  background: var(--secondary);
  color: var(--white);
}

footer .info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer .info .info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

footer .info .info-item:hover i {
  background: var(--secondary);
  color: var(--white);
} 

footer .info .info-item span{
  font-size: .9rem;
  font-weight: 300;
}

footer .info .info-item i{
  transition: .3s;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px  ;
  -webkit-border-radius: 13px  ;
  -moz-border-radius: 13px  ;
  -ms-border-radius: 13px  ;
  -o-border-radius: 13px  ;
  background: var(--white);
  color: var(--primary);
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}