@font-face {
    font-family: "primaryfont";
    src: url("../fonts/alfont_com_MyriadArabic-Regular.otf");
}

@font-face {
  font-family: "Saudi";
  src: url("../fonts/SaudiWeb/SaudiWeb-Regular.woff");
}


:root{
  --primary-color: #34172C;
  --primary-light-color: #5D2A51;
  --sec-color:#B78831;
  --sec-light-color: #D7B15E;
  --white-color:#FEFEFE;
  --black-color:#000010;
  /* --gray-color:#848484; */
  --gray-color:white;
  --body-bg:#000010;
  --gr-bg-section:#E964FF;
  --border-raduis:8px;
  --border-color: var(--sec-light-color);
  --bg1:#231a2e;
  --bg2:#0f0a17;
  --card:#fff;
  --muted:#b7b7c0;
  --gap: 14px;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --overlay: rgba(0,0,0,.55);
}
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-behavior: smooth;
}

body{
  background-color:var(--primary-light-color);
  direction: rtl;
  font-family: 'primaryfont';
  color: var(--gray-color);
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
  font-family: 'Saudi';
}
body.open-mobile-menu{
  overflow: hidden;
}

body:not(.home) #MainPage{
  min-height: 100vh;
  padding-top: 120px !important;
  
}

@media screen and (max-width: 767px) {
  body:not(.home) #MainPage{
    padding-top: 70px !important;
  }
}


a{
  color:var(--sec-color);
  text-decoration: none;
}

img{
  width: 100%;
  height: 100%;
}



.bg-gr{
  background: var(--primary-color);
  background: linear-gradient(173deg, var(--primary-color) 52%, rgba(97, 29, 93, 1) 167%);

}

p{
  color: var(--gray-color);
  text-align: justify;
}

h1,h2,h3,h4,h5,h6{
  color: var(--sec-color) !important;
}


.theme{
  display: none;
}

.dark .theme.dark{
  display: block;
}

.light .theme.light{
  display: block;
}


input, textarea{
  background-color: var(--primary-color) !important;
  border: 1px solid;
  border-color: var(--sec-color);
  border-radius: var(--border-raduis);
  padding: 10px 20px;
  width: 100%;
  text-align: start;
  min-height: 40px;
  color: var(--white-color) !important;
  outline: none;
}

.wc-blocks-components-select .wc-blocks-components-select__select{
  color: white !important;
  background-color: var(--primary-color) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {

  box-shadow: 0 0 0 1000px var(--primary-color) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--primary-color) inset !important;


  border-color: var(--border-color) !important;
  -webkit-text-fill-color: inherit !important;

  transition: background-color 9999s ease 0s !important;
}


input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--border-color) !important;
  background-color: var(--primary-color) !important;
  color: inherit !important;
}


input:is(:-webkit-autofill, :autofill),
textarea:is(:-webkit-autofill, :autofill),
select:is(:-webkit-autofill, :autofill) {
  border-color: var(--border-color) !important;
  background-color: var(--primary-color) !important;
  -webkit-text-fill-color: var(--white-color) !important;
}


input[type="submit"]{
  margin-top: 20px;
}
.d-flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.d-flex-center-c{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}

input[type=checkbox]{
  width: auto;
  height: auto;
  min-height: auto;
  background-color: transparent;
}
.m-btn{
  padding: 10px 27px;
  background-color: var(--sec-color);
  border-radius: var(--border-raduis);
  text-align: center;
  vertical-align: middle;
  color: var(--white-color);
  outline: none;
  border: none;
  display: inline-block;
  min-width: 150px;
  cursor: pointer;
  height: fit-content;
}
.m-btn-outline{
  padding: 10px 27px;
  background-color: transparent;
  border-radius: var(--border-raduis);
  text-align: center;
  vertical-align: middle;
  outline: none;
  border: 1px solid var(--sec-color);
  color: var(--sec-color);
  display: inline-block;
  min-width: 150px;
  cursor: pointer;
}

.row{
  margin:  0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row.the-ticket > *{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ticket h1,
.ticket h2,
.ticket h3,
.ticket h4,
.ticket h5,
.ticket h6{
  color:var(--sec-color) !important;
}
.title-wrapper{
  display: flex;
  justify-content: space-between;
}
.the-title{
  width: fit-content;
  /* height: 100%; */
}
.section-title{
  font-size: 25px;
  line-height: 1.8;
  font-weight: bold;
  /* letter-spacing: 2px; */
  position: relative;
}
.title-wrapper svg{
    position: relative;
    top: -24px;
    width: 30%;
    /* height: 100%; */
}
.title-wrapper .m-btn{
  margin-top: 10px;
}
.overlay{
  position: relative;
}
.overlay::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00000073;
  z-index: 99;
}
.logo{
  display: flex;
  align-items: center;
}
.logo img{
  width: 140px;
  height: 80px;
}
[type=email], [type=number], [type=tel], [type=url]{
  direction: rtl;
}
input{
  padding: 10px;
  margin: 10px 0
}

label{
  font-size: 18px;
  color: var(--white-color);
  margin: 5px 0;
}
/* ======================================= Start Header ======================================================== */

header.main-header{
  padding: 30px 10px;
  position: fixed;
  width: 100%;
  z-index: 100;
  transition: all 300ms ease;
  top: 0;
  right: 0;
}

body:not(.home) header.main-header{
  background-color: var(--primary-color);
}



header.main-header.scrolling{
  box-shadow: 0px -4px 16px -3px var(--sec-light-color);
  position: fixed;
}

header.mai-header > .row:first-child{
  display: flex;
  justify-content: center;
  align-items: center;
}
.before-overlay{
  position: relative;
}
.before-overlay::before{
  content: '';
  position: absolute;
  background-color: rgba(233, 100, 255, 0.16);
  filter: blur(40px);
  z-index: -1;
}
header.main-header .logo img{
  width: 102px;
}
header.main-header .main-menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width:767px){
  header.main-header .main-menu{
    display: none !important;
  }

}
header.main-header .main-menu ul{
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0px;
  border-radius: 20px;
  /* background-color: #1A1918; */
  padding-left: 15px;
  
}
header.main-header .main-menu li a{
  font-size: 18px;
  color: var(--sec-color);
  font-weight: bold;;
}
@media screen and (max-width:1200px) {
  header.main-header .main-menu li a{
    font-size: 14px;
    text-wrap: nowrap;
  }
}

header.main-header .main-menu li.active{
  border-radius: 26px;
  position: relative;
}
header.main-header .main-menu li.active::before{
  content: '';
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translate(-50%, -50%);
}
header.main-header .main-menu li.active a{
  color: var(--white-color);
}

.header-actions{
  display: flex;
  justify-content: center;
  align-items: center;
}
header.main-header .header-actions .switch-mood{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;

}


@media screen and (max-width:500px){
  header.main-header .header-actions .switch-mood{
    gap:15px ;
  }
}
@media screen and (max-width:500px){

  header.main-header  .m-btn{
    min-width: unset;
    text-wrap: nowrap;
    padding: 8px 20px;
    font-size: 11px;
  }
}


#profileDropDown{
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    border-radius: 50%;
    border: 1px solid var(--sec-color);
    background-color: transparent;
    color: var(--primary-light-color);
}

.c-dropdown{
  background-color: var(--primary-color);
  color: var(--sec-color);
}
.c-dropdown li a{
  color: var(--sec-color);
}
.c-dropdown li a:hover{
  background-color: var(--primary-color);
  color: var(--sec-color);
  border: 1px solid var(--sec-light-color);
}
header.main-header .header-actions .theme-switch{
  display: flex;
  padding: 8px 10px;
  border-radius: 50%;
  color: var(--primary-light-color) !important;
}

@media screen and (max-width:500px){
  header.main-header .header-actions .theme-switch{
    padding: 8px 10px;
  }
  header.main-header{
    padding: 5px !important;
  }
}

header.main-header .header-actions .theme-switch svg path{
  fill: var(--primary-light-color);
}

@media screen and (min-width:992px) {
  .ToggleMenu-mobile{
    display: none;
  }
}

.ToggleMenu-mobile i,
.ToggleMenu-mobile svg{
  color:var(--sec-color);
  fill:var(--sec-color);
  font-size: 22px;
  cursor: pointer;
  /* margin-left: 20px; */
}
.mobile-collpase-section{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000000c9;
  z-index: 300;
  right: -100%;

  transition: right 1s  ease-in-out;
}

body.open-mobile-menu .mobile-collpase-section{
  right: 0;
  top: 0;
  transition: right 1s  ease-in-out;
}
.mobile-collpase-section .close-menu{
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 25px;
  color: var(--sec-light-color);
  background-color: var(--primary-light-color);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
}

.mobile-collpase-section .mobile-menu{
  width: 250px;
  height: 100%;
  border-left: 3px solid var(--sec-color);
  padding: 10px;
  border-top: 3px solid var(--sec-color);
  border-bottom: 3px solid var(--sec-color);
}
.mobile-menu .logo{
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-menu .logo img{
  width: 135px;
}
.mobile-collpase-section .mobile-menu ul li{
  margin: 5px 0;
  font-size: 25px;
  font-weight: bold;
  padding: 10px 0;
  
}
.mobile-collpase-section .mobile-menu ul li a{
  color: var(--gray-color);
  font-size: 18px;
}
.mobile-collpase-section .mobile-menu ul li.active a{
  color: var(--sec-color);
  position: relative;
}
.mobile-collpase-section .mobile-menu ul li.active a::before{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -29px;
  width: 13px;
  height: 3px;
  background-color:#AF4496;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 7px 2px #AF4496;
}
section{
  padding: 30px 0;
  position: relative;
  z-index: 2;
}

.breadcamp h1{
  font-size: 30px;
  color: white !important;
  text-align: center;
  margin-bottom: 20px;
}
.breadcamp h3{
  font-size: 20px;
  color:var(--gray-color) !important;
  text-align: center;
}
/* ======================================= End Header ========================================================== */

/* ==============================start  my account form ===================================================== */
.my-account-form {
  min-height: 100vh;
  overflow: hidden;
}
@media screen and (max-width:550px) {
  .my-account-form {
    height: auto;
  }
}
.my-account-form .row{
  height: 100%;
}

.my-account-form img{
  object-fit: fill;
  object-position: center;
}

.form-section{
  margin-top: 100px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.content-side{
  margin-top: 50px;
  padding: 30px !important;
}


.form-section h2{
  font-size: 40px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
}
.rembandforg{
  margin-top: 20px !important;
}
.forget-passwrd{
  color: var(--gray-color);
  width: 100%;
  text-align: end;
  display: block;
}

.ops-page{
  margin-top: 30px;
}
p{
  text-align: justify;
}

/* ==============================end  my account form ===================================================== */






/* ==================================== Start Home Page ================================================================ */
#MainPage{
  background-image: url(../images/bodybg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center center;
}
@media screen and (max-width:550px) {
  #MainPage{
        background-image: url(../images/bodybg2-mobile.jpeg);
        background-position: center center;
        background-size: auto;
    
  }
}

#MainPage::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 14%);
    position: absolute;
    /* filter: blur(100px); */
}

@media screen and (max-width:550px) {
  #MainPage::before{
    background-color: rgb(0 0 0 / 54%);
  }
}
.Home-Hero-section{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  background-image: url(../images/Hero3.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
}

@media screen and (max-width:550px) {
  .Home-Hero-section{
        background-image: url(../images/Hero3-mobile.jpeg);
        background-position: center;
        background-size: cover;
        background-color: #34172cb5;
  }
}

.Home-Hero-section .container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-direction: column;
  z-index: 2;
}

.Home-Hero-section::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #00000052;
}

.Home-Hero-section h1{
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  z-index: 2;
  text-shadow: 0px 5px black;
}

.Home-Hero-section .hero-btns a:nth-child(2){
  background-color: var(--primary-light-color);
  border-color: var(--primary-light-color);
  color: white;
}


@media screen and (max-width:550px) {
  .Home-Hero-section h1{
    font-size: 25px;
  }
  .Home-Hero-section p{
    font-size: 16px !important;
  }
}
.Home-Hero-section p{
  font-size: 20px;
  text-align: center;
  z-index: 2;
}

.Home-Hero-section .hero-btns{
  display: flex;
  gap: 15px;
  z-index: 2;
}
/* ==================================== End Home Page ================================================================ */


/* ============================== Start about-mofoon ===================================================== */
.about-mofoon p{
  width: 80%;
  font-size: 18px;
  line-height: 1.8;
}
@media screen and (max-width:550px) {
  .about-mofoon p{
    width: 18px;
    width: 100%;
  }
}
.about-mofoon .about-img .img-container{
  position: relative;
}
.about-mofoon .about-img img{
  width: 100%;
  /* transform: rotate(4deg); */
  border-radius: 20px;
  position: relative;
}
.about-mofoon .about-img img::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
}
/* .about-mofoon .about-img .bg1{
  width: 50px;
  display: block;
  position: absolute;
  height: 65px;
  background-color: var(--sec-color);
  left: 0;
  top: -28px;
  border-radius: 10px;
}
.about-mofoon .about-img .bg2{
  width: 50px;
  display: block;
  position: absolute;
  height: 65px;
  background-color: var(--primary-color);
  right: 0;
  bottom: -28px;
  border-radius: 10px;
  z-index: -1;
} */
/* ============================== End about-mofoon ======================================================= */
/* ============================== Start services-mofoon ======================================================= */
.single-service{
  border: 3px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
}
.single-service img{
  height: 300px;
  width: 100%;
  object-fit: cover;
}
.service-title{
  padding: 10px 20px;
  font-size: 18px;
}


  /* الخلفية الشفافة */
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  /* صندوق المحتوى */
  .popup-box {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    position: relative;
    animation: popup-appear 0.4s ease;
    margin-top: 119px;
    height: 72%;
  }

  /* زر الإغلاق */
  .popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: var(--sec-color);
    cursor: pointer;
    transition: color 0.2s;
  }
  .popup-close:hover {
    color: #d00;
  }

  /* الإطار */
  .popup-iframe {
    width: 100%;
    height: 80vh;
    border: none;
  }

  /* حركة الظهور */
  @keyframes popup-appear {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }


/* ============================== End services-mofoon ======================================================= */


/* ============================== Start Activity ======================================================= */
.single-activity{
  border: 3px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.single-activity img{
  height: 300px;
  width: 100%;
  object-fit: cover;
}
.single-activity h2{
  padding: 10px 20px;
  font-size: 18px;
}

.single-activity .details{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 20px;

}
.single-activity .details span{
  font-size: 16px;
  /* font-weight: bold; */
  display: flex;
  align-items: center;
}
.single-activity .details span svg{
  margin-left: 10px;
}

.single-activity .details span.price{
  color: var(--sec-light-color);
  font-size: 18px;
  font-weight: bold;

  
}

.single-activity .arrow-link{
  width: fit-content;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.single-activity .arrow-link a{
  padding: 10px;
  width: auto;
  height: auto;
  min-width: unset;
  border-radius: 3px;
}

.sm-scroll .single-activity{
  min-width: 300px;
}

/* ============================== End Activity ======================================================= */


/* ==================================== Start Calender =========================================================== */

    .calendar{

      padding:18px 18px 24px;
    }
    .calendar .cal-header{
      display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 4px 14px;
      border-bottom:1px solid var(--border-color);
    }
    .calendar .title{
      font-weight:700; font-size:1.3rem; letter-spacing:.3px; display:flex; align-items:center; gap:.6rem;
      color: var(--white-color);
    }
    .calendar .title .badge{
      font-weight:600; font-size:.9rem; color:var(--muted);
      display: none;
      
    }
    .calendar .nav{
      display:flex; align-items:center; gap:.5rem;
    }
    .calendar .btn{
      background:rgba(182, 139, 47, 0.32);
      outline: none;
      display:inline-flex; align-items:center; gap:.5rem;
      color: #FDD681;
    }
    .calendar .btn:hover{ outline:2px solid var(--ring) }
    .calendar .btn:active{ transform:translateY(1px) }
    .calendar .grid{
      margin-top:14px;
      display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
    }
    .calendar .dow{
      color:var(--muted); font-size:20px; text-align:center; padding:.6rem 0 .2rem;
    }

    @media screen and (max-width:550px) {
      .calendar .dow{
        font-size: 12px;
      }
      .monthLabel{
        font-size: 12px;
      }
    }
    .calendar .cell{
      position:relative; overflow:hidden;
      transition:border-color .2s, outline-color .2s;
      color: white;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
    }
    .calendar .cell.HaveEvent .date{
      padding: 10px;
      background-color: rgba(182, 139, 47, 0.32);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      color: #FDD681;;
    }
    .calendar .cell:hover{ outline:2px solid var(--ring) }
    .calendar .date{
      font-weight:700; font-size:1.05rem; color:var(--text);
      width:28px; height:28px; display:grid; place-items:center;
      border-radius:8px;
    }
    @media screen and (max-width:550px){
      .calendar .cell .date{
        font-size: 10px;
      }
    }
    .calendar .today .date{ background:var(--today) }
    .calendar .events{
      margin-top:.35rem; display:flex; flex-direction:column; gap:.35rem;
      display: none;
    }
    .calendar .event{
      display:flex; align-items:center; gap:.45rem;
      font-size:.9rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      background:rgba(169,124,255,.12); border:1px solid rgba(169,124,255,.25);
      padding:.28rem .45rem; border-radius:8px; cursor:pointer;
    }
    .calendar .event:hover{ background:rgba(169,124,255,.2) }
    .calendar .dot{
      width:.55rem; height:.55rem; border-radius:50%; background:linear-gradient(45deg,var(--accent),var(--accent-2));
      box-shadow:0 0 0 2px rgba(255,255,255,.08);
      flex:0 0 .55rem;
    }
    .calendar .more{
      color:var(--muted); font-size:.85rem; cursor:pointer; padding:.15rem .2rem;
    }
    .calendar a.event-link{ color:inherit; text-decoration:none }
    /* Popover */
    .calendar .popover{
      position:absolute; inset:auto 8px 8px auto; min-width:220px; max-width:95%;
      background:#0e1026; border:1px solid rgba(255,255,255,.12); border-radius:12px;
      padding:.6rem; display:none; z-index:5; box-shadow:0 10px 30px rgba(0,0,0,.4);
    }
    .calendar .popover h4{ margin:.2rem 0 .4rem; font-size:1rem }
    .calendar .popover a{ display:flex; align-items:center; gap:.5rem; padding:.35rem .4rem; border-radius:8px; text-decoration:none; color:var(--text) }
    .calendar .popover a:hover{ background:rgba(255,255,255,.05) }
    .calendar .close-pop{ position:absolute; top:6px; inset-inline-end:6px; cursor:pointer; font-size:1rem; color:var(--muted) }
    /* Responsive tweak */
    @media (max-width:700px){ .cell{ min-height:88px } .event{ font-size:.85rem } }
    .calendar #todayBtn{
      display: none;
    }
/* ==================================== End Calender =========================================================== */



/* ==================================== Start Ticket =========================================================== */
.the-ticket{
  padding: 20px !important;
  /* height: 250px; */
}

.the-ticket .the-bar{
  height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-light-color);
}

.the-ticket .the-bar h2{
  text-align: center;
  transform: rotate(90deg);
  text-wrap: nowrap;
  font-size: 16px;
}

.the-ticket .ticket-content{
  padding: 15px 20px !important;
  border: 1px solid var(--primary-light-color);
  border-right: transparent;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-left: transparent;
  gap: 15px;
  mask: 
    radial-gradient(circle 10px at 0 0, #0000 99%, #000 100%),
    radial-gradient(circle 10px at 0 100%, #0000 99%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;

  background-color: var(--body-bg);
}
.the-ticket .ticket-content h2{
  font-size: 16px;
}

@media screen and (max-width:776px) {
  .the-ticket .ticket-content h2{
    font-size: 14px;
  }
}


.the-ticket .ticket-content h2 h4{
  font-size: 16px;
}

@media screen and (max-width:776px) {
  .the-ticket .ticket-content h2 h4{
    font-size: 14px;
  }
}

.the-ticket .ticket-content span{
  font-size: 14px;
}

@media screen and (max-width:776px) {
  .the-ticket .ticket-content span{
    font-size: 12px;
  }
}

.the-ticket .ticket-content .bgtxt{
  width: fit-content;
  padding: 5px;
  background-color: rgba(93, 43, 81, 0.3);
  font-size: 16px;
}

@media screen and (max-width:776px) {
  .the-ticket .ticket-content .bgtxt{
    font-size: 12px;
  }
}

.the-ticket .ownerdetalis{
  display: flex;
  gap: 20px;
}

.the-ticket .qr-ticket{
  border: 1px solid var(--primary-light-color);
  border-right: transparent;
  background-color: var(--body-bg);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  mask: 
    radial-gradient(circle 10px at 100% 0, #0000 99%, #000 100%),
    radial-gradient(circle 10px at 100% 100%, #0000 99%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;

}

.the-ticket .qr-ticket .divder{
  position: absolute;
  width: 3px;
  height: 95%;
  right: -3px;
  top: 50%;
  border-left: 3px dotted #b68b2f4a;
  transform: translate(-50%, -50%);
}
.the-ticket .the-qr{
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.the-ticket .the-qr img{
  max-width: 100px !important;
  width: auto !important;
  height: auto !important;
  padding: 20px;
}

@media screen and (max-width:776px) {
  .the-ticket .qr-ticket span{
    font-size: 12px;
  }
}
/* ==================================== End Ticket =========================================================== */

/* ================================================== Start Testmonail ================================================= */
.single-testmonail{
  padding: 20px;
  border: 3px solid var(--border-color);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.single-testmonail .user-info {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.single-testmonail .user-info img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.single-testmonail .user-info .user-details h4{
  font-weight: normal !important;
  font-size: 16px;
}
.single-testmonail .user-info .user-details .user-email{
  color: var(--sec-color);
}

.single-testmonail .review-content p{
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray-color);
  margin-bottom: 10px;
    display: -webkit-box;
  -webkit-line-clamp: 6; /* عدد السطور */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sm-scroll .single-testmonail{
  min-width: 200px;
}

.stars {
  font-size: 18px;  
  color: var(--sec-light-color);
}
.stars .empty {
  color: var(--gray-color);
}
.Testmonail .before-overlay::before{
  top: -10%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  right: 0;
  filter: blur(150px);
}

/* ================================================== End Testmonail ================================================= */

/* ========================= Start client ==================== */
.single-client{
  background-color: white;
  height: 130px;
  border-radius: 8px;
  object-fit: contain;
  overflow: hidden;
  border: 3px solid var(--border-color);
}


.single-client img{
  object-fit: contain;
}
/* ========================= End client ==================== */

  /* ================================= Start Services page ========================== */
  .services .services-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .services  .services-img img{
    height: 300px;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .services .services-title{
    color: var(--sec-color) !important;
    text-align: center;
  }
    .services  p{
      color: var(--white-color) !important;
      line-height: 1.8;
    }

    .single-services{
      padding: 50px 0;
    }
  /* ================================= End Services page ========================== */

  /* ==========================  Start Contact Us ================================================ */

  .contact-section > .row{
    border: 1px solid var(--border-color);
    padding: 20px !important;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .contact-section .contact-deltains{
    padding: 20px 30px;
    background-color: var(--primary-color);
    margin:  0 20px;
  }

  .contact-section h2{
    font-size: 25px;
  }

  .contact-section p{
    font-size: 16px;
    margin-top: 10px;

  }
  .contact-section ul {
    margin-top: 40px;
    padding: 0 !important;
  }
  .contact-section ul li{
    margin: 20px 0;
  }
  /* ==========================  End Contact Us ================================================ */



/* ===================================== Start Footer =================================== */


#main_footer{
  position:relative;
  padding: 20px;
  background-color: var(--primary-color);
  overflow: hidden;
}
#main_footer .robe-img{
  width: 100px;
  height: auto;
  position: absolute;
  bottom: 4px;
  left: 7px;
}

#main_footer .logo img{
  width: 150px;
  margin-bottom: 50px;
}



#main_footer p{
  font-size: 16px;
  margin-bottom: 30px;
  color: var(--sec-color);
}

#main_footer ul{
  padding: 0;
}

.social-links ul{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
}
.social-links ul li a{
  background-color: var(--sec-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-links a{
  color: var(--black-color) !important;
}
.social-links ul li i{
  color: var(--black-color);
  font-size: 35px;
}


.footer-list{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer-list h3{
  font-size: 16px;
  position: relative;
  margin-bottom: 30px;
  width: fit-content;
}
.footer-list h3::before,
.footer-list h3::after{
  content: '';
  bottom: -20px;
  position: absolute;
  width: 100%;
  height: 2px;
  right: 0;
  background: #200122; 
  background: -webkit-linear-gradient(0 ,to right,  #A1CAFF, 100%, #B68B2F); 
  background: linear-gradient(90deg, #A1CAFF 0%, #b68b2f2b 60%);
}
.footer-list h3::before{
  width: 60%;
  background: var(--sec-color);
  z-index: 1;
  height: 4px;
  bottom: -21px;
  border: 15px;
}
.footer-list li{
  margin: 10px 0;

}

.contact h3::before,
.contact h3::after{
  width: 120%;
}
.contact h3::before{
  width: 80%;
}
.footer-list > .row{
  width: 100%;
  gap: 10px !important;
  padding: 0 10px !important;
}
.footer-list > .row > *{
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-list > .row > .col:nth-child(2){
  align-items: end;
}
.footer-list li a{
  font-size: 14px;
  text-align: start;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  text-wrap: nowrap;
}
.footer-list li a svg{
  width: 12px;
  fill: var(--sec-color);
}
.footer-list li a svg path{
  fill: var(--sec-color);
}


.footer-list.contact svg{
  width: 20px;
}

#main_footer > span{
  width: 100px;
  height: 100px;
  background-color: #611D5D;
  z-index: 3px;
  position: absolute;
  border-radius: 50%;
  opacity: .45;
}
#main_footer > span:first-child{
  top: -32px;
  right: -16px;
}
#main_footer > span:nth-child(2){
  top: -19px;
  left: -38px;
}

.footer_form form{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.footer_form #footer_form_submit{
  min-width: unset;
  position: relative;
  left: 0;
  position: absolute;
  width: auto;
  height: auto;
}
/* ===================================== End Footer =================================== */


/* ============ Custom Woocommerce =========================== */

.woocommerce-MyAccount-navigation ul{
  background-color: var(--primary-color);
  padding: 10px 0;
  border-radius: 8px;

}
.woocommerce-MyAccount-navigation ul li{
  margin: 10px;
  padding: 5px;
}

.woocommerce-MyAccount-navigation ul li.is-active{
  border: 1px solid var(--sec-color);
  border-radius: 7px;
}

.woo-wallet-my-wallet-container{
  border: 1px solid var(--sec-color);
}

.woocommerce-MyAccount-content{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
}

.woo-wallet-sidebar{
  background-color: var(--primary-color) !important;
}

.woo-wallet-sidebar ul li p{
  color: var(--sec-color) !important;
}

.woocommerce table.shop_table{
  border: 1px solid var(--sec-color);
}

tbody, td, tfoot, th, thead, tr{
  border-color: var(--sec-color);
}

.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th{
  border-top: 1px solid var(--sec-color);
}

.woocommerce table.shop_table td{
  border-top: 1px solid var(--sec-color);
}

.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout__sidebar.is-sticky{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wc-block-cart__main .wc-block-cart-items td{
  border-top: 1px solid var(--sec-color);
}

.wc-block-cart__submit-button{
  background-color: var(--sec-color);
  color: white;
  border-radius: 8px;
}

.woocommerce-table__product-name.product-name a{
  color: var(--sec-color) !important;
}

.copy-ticket-link{
  color:  var(--sec-color) !important;
}

form button{
  background-color: var(--sec-color) !important;
  color: white !important;
  border-radius: 8px !important;
  border: none;
}

.woocommerce-table__product-name.product-name img{
  width: 250px;
  height: 200px;
}

.bg-dark{
  background-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
  background-color: var(--sec-color) !important;
  color: white !important;
  border-radius: 8px;
}

.table>:not(caption)>*>*{
  background-color: transparent;
  color: var(--sec-color);
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
  background-color: var(--sec-color) !important;
  color: white !important;
  border-radius: 8px;
  width: fit-content;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
  padding: 0 !important;
}


.wc-block-components-radio-control .wc-block-components-radio-control__input{
  padding:  0 !important;
}


.wc-block-components-checkout-return-to-cart-button{
  color: var(--sec-color);
}

.woocommerce-cart .wp-block-woocommerce-product-new{
  display: none !important;
}
.wp-block-woocommerce-empty-cart-block h2:not(:first-child){
  display: none;
}

.tnp-subscription input[type=text], .tnp-subscription input[type=email], .tnp-subscription input[type=submit], .tnp-subscription select, .tnp-subscription textarea, .tnp-profile input[type=text], .tnp-profile input[type=email], .tnp-profile input[type=submit], .tnp-profile select, .tnp-profile textarea{
  background-color: #0D0D1C;
  border: 1px solid var(--border-color);
  color:white;
}

.tnp-field input[type="submit"]{
    background-color: var(--sec-color) !important;
    color: white;
    border: none;
    position: relative;
    right: -42px;
    border-radius: 3px;
    bottom: -2px;
    border: 1px solid var(--sec-color);
}

.with_frm_style .frm_primary_label{
  text-align: start !important;
  color: white;
}

.with_frm_style input[type=text], .with_frm_style input[type=password], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=phone], .with_frm_style input[type=search], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, .with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .with_frm_style .frm-card-element.StripeElement, .with_frm_style .frm_slimselect.ss-main,
.frm_style_formidable-style.with_frm_style .form-field input:not([type=file]):not([type=range]):not([readonly]):focus, .frm_style_formidable-style.with_frm_style select:focus, .frm_style_formidable-style.with_frm_style .form-field textarea:focus, .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=text], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=password], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=email], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=number], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=url], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=tel], .frm_style_formidable-style.with_frm_style .frm_focus_field input[type=search], .frm_form_fields_active_style, .frm_style_formidable-style.with_frm_style .frm_focus_field .frm-card-element.StripeElement{
  background-color: var(--black-color);
  color: white;
  border-color: var(--sec-color);
}

.frm_style_formidable-style.with_frm_style .frm_blank_field input[type=text], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=password], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=url], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=tel], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=number], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=email], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=checkbox], .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=radio], .frm_style_formidable-style.with_frm_style .frm_blank_field textarea, .frm_style_formidable-style.with_frm_style .frm_blank_field .mce-edit-area iframe, .frm_style_formidable-style.with_frm_style .frm_blank_field select:not(.ui-datepicker-month):not(.ui-datepicker-year), .frm_form_fields_error_style, .frm_style_formidable-style.with_frm_style .frm_blank_field .frm-g-recaptcha iframe, .frm_style_formidable-style.with_frm_style .frm_blank_field .g-recaptcha iframe, .frm_style_formidable-style.with_frm_style .frm_blank_field .frm-card-element.StripeElement, .frm_style_formidable-style.with_frm_style .frm_form_field :invalid{
  background-color: var(--black-color);
}

.page-id-215  .page-section,
.page-id-211  .page-section{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sm-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.sm-scroll .single-client{
  min-width: 200px;
}
@media screen and (max-width:550px) {
  .d-sm-none{
    display: none !important;
  }
  
}
@media screen and (min-width:551px) {
  .d-sm-none{
    display: flex !important;
  }
  .sm-scroll{
    display: none !important;
  }
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  background-color: var(--primary-color);
  color: white;
}

.wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label{
  color: gray !important;
}

.wc-blocks-components-select .wc-blocks-components-select__label{
  color: gray !important;
}

.woocommerce form .form-row .input-text, .woocommerce form .form-row select{
  background-color: #2b1224 !important;
}

#wpadminbar>#wp-toolbar>#wp-admin-bar-top-secondary>#wp-admin-bar-search #adminbarsearch input.adminbar-input{
  background-color: unset !important;
}


@media screen and (max-width: 550px) {
    .page-id-6 .single-services .services-img, 
    .page-id-373  .single-services .services-img {
        order: 1;
    }
}


@media screen and (max-width: 550px) {
    .page-id-6 .single-services .services-content, 
    .page-id-373  .single-services .services-content{
        order: 2;
        margin: 20px 0;
    }
}




.glass{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



.woo-wallet-sidebar ul li.card{
  background-color: var(--primary-color);
  border-color: var(--border-color);
}

.contact-deltains a{
  display: flex;
  gap: 10px;
}


/* ============================================================= Start Stroies =================================== */

.single-story{
  padding: 5px;
  border-radius: 20px;
  border: 3px solid var(--border-color);
}

.sm-scroll .single-story{
  min-width: 300px;
}
.single-story .stroy-header{
  position: relative;
  margin-bottom: 20px;
}
.single-story .stroy-header img{
  width: 100%;
  border-radius: 20px;
  position: relative;
}
.single-story .stroy-header::after{
  /* content: ''; */
  position: absolute;
  z-index: 2;
  width: 100%;
  right: 0;
  bottom: 3px;
  height: 20%;
  background-color: #2D0B2B;
  filter: blur(27px);
  border-top-right-radius: 39px;
}
.single-story .story-title{
  bottom: 0px;
  right: 20px;
  font-size: 30px;
  z-index: 4;
  line-height: 1.6;
  text-align: center;
}

.single-story .story-des{
  font-size: 20px;
  line-height: 1.6;
  min-height: 100px;
}
.single-story .stroy-link{
  width: 100%;
  margin: 20px 0;
  font-size: 18px;
}


.sm-scroll .single-story{
  min-width: 300px;
}
/* ============================================================= End Stroies ===================================== */


@media screen and (max-width:767px) {
  .breadcamp{
    padding-top: 30px;
    margin-top: 20px;
  }
    .about-content{
    order: 2;
  }
}



/* ============================================================= Start blogs ===================================== */
.blogs img{
  width: 100%;
  height: 100%;
}

.single-blog img{
  /* height: 100%; */
  width: 100%;
  object-fit: cover;
  height: 260px;
  object-position: center center;
}

.blog2{
  justify-content: space-between;
}
.bigger-blog img{
  width: 100%;
  height: 610px;
  object-fit: cover;
  object-position: center center;
}
@media screen and (max-width:767px){
  .bigger-blog img{
    height: 100%;
  }
}
.single-blog h6,
.bigger-blog h6{
  color: white;
  margin: 5px;
  font-size: 18px;
}
.single-blog p,
.bigger-blog p{
  font-size: 16px;
  line-height: 1.6;
}
.blogs .before-overlay::before{
  top: -10%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  right: 0;
  filter: blur(150px);
}
/* ============================================================= End blogs ======================================= */


.single-blog{
  padding: 10px;
  border: 3px solid var(--sec-color);
  border-radius: 8px;
}

.single-blog h5 a{
  color: var(--sec-color);
}

.sm-scroll .single-blog{
  min-width: 300px;
}

.woo-wallet-my-wallet-container .woo-wallet-balance-card{
  background-color: transparent !important;
}

.woo-wallet-my-wallet-container .woo-wallet-top-section{
  background-color: transparent !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tab.active{
  border: 1px solid var(--sec-color) !important;
  background-color: transparent !important;
  color: var(--sec-color) !important;
}

.woo-wallet-my-wallet-container .woo-wallet-nav-tabs,
.woo-wallet-my-wallet-container .woo-wallet-nav-tab{
  background-color: transparent !important;
  background: transparent !important;
  color: white;
  border: 1px solid;
}

.woo-wallet-my-wallet-container .woo-wallet-transactions-list{
  background-color: transparent !important;
  background: transparent !important;
}

.woo-wallet-my-wallet-container .woo-wallet-content-area{
  background-color: transparent !important;
  background: transparent !important;
}

.woo-wallet-my-wallet-container .woo-wallet-section-title{
  background-color: transparent !important;
  background: transparent !important;
}

.woo-wallet-my-wallet-container p{
  color: white !important;
}