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

/* Start Variables */
:root {
   --main-color: #10cab7;
   --secondary-color: #2c4755;
   --section-padding: 60px;
   --section-background: #f6f6f6;
   --main-duration: 0.3s;
}

/* End Variables */
/* Start Global Rules */
* {
   padding: 0;
   margin: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Cairo', sans-serif;
   position: relative;
   height: 100vh;
   overflow: hidden;
}

a {
   text-decoration: none;
}

.work-card .work-text a {
   color: #fff !important;

}

.container {
   padding-left: 65px;
   padding-right: 65px;
   padding-top: 50px;
   padding-bottom: 50px;
   margin-left: auto;
   margin-right: auto;
}


.looder {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9999999;
   background-color: #fff;
   height: 100vh;
}

.cssload-loader {
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 49px;
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: helvetica, arial, sans-serif;
   text-transform: uppercase;
   font-weight: 900;
   font-size: 18px;
   color: rgb(206, 66, 51);
   letter-spacing: 0.2em;
}

.cssload-loader::before,
.cssload-loader::after {
   content: "";
   display: block;
   width: 15px;
   height: 15px;
   background: rgb(206, 66, 51);
   position: absolute;
   animation: cssload-load 0.81s infinite alternate ease-in-out;
   -o-animation: cssload-load 0.81s infinite alternate ease-in-out;
   -ms-animation: cssload-load 0.81s infinite alternate ease-in-out;
   -webkit-animation: cssload-load 0.81s infinite alternate ease-in-out;
   -moz-animation: cssload-load 0.81s infinite alternate ease-in-out;
}

.cssload-loader::before {
   top: 0;
}

.cssload-loader::after {
   bottom: 0;
}



@keyframes cssload-load {
   0% {
      left: 0;
      height: 29px;
      width: 15px;
   }

   50% {
      height: 8px;
      width: 39px;
   }

   100% {
      left: 229px;
      height: 29px;
      width: 15px;
   }
}

@-o-keyframes cssload-load {
   0% {
      left: 0;
      height: 29px;
      width: 15px;
   }

   50% {
      height: 8px;
      width: 39px;
   }

   100% {
      left: 229px;
      height: 29px;
      width: 15px;
   }
}

@-ms-keyframes cssload-load {
   0% {
      left: 0;
      height: 29px;
      width: 15px;
   }

   50% {
      height: 8px;
      width: 39px;
   }

   100% {
      left: 229px;
      height: 29px;
      width: 15px;
   }
}

@-webkit-keyframes cssload-load {
   0% {
      left: 0;
      height: 29px;
      width: 15px;
   }

   50% {
      height: 8px;
      width: 39px;
   }

   100% {
      left: 229px;
      height: 29px;
      width: 15px;
   }
}

@-moz-keyframes cssload-load {
   0% {
      left: 0;
      height: 29px;
      width: 15px;
   }

   50% {
      height: 8px;
      width: 39px;
   }

   100% {
      left: 229px;
      height: 29px;
      width: 15px;
   }
}







@media screen and (max-width: 520px) {
   .container {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 35px;
      padding-bottom: 35px;
   }
}

.text {
   text-align: center;
   padding-bottom: 24px;
}

.text .title {
   font-size: 21px;
   font-weight: 700;
}

.text .description {
   font-size: 21px;
   font-weight: 500;
}

/* Scroll */
::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
   background-color: #eee;
}

::-webkit-scrollbar-thumb {
   background-color: rgba(255, 0, 101, .5);
   border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover {
   background-color: rgba(255, 0, 101, 1);
}

::-webkit-scrollbar-corner {
   background-color: #10cab7;
}

/* End Global Rules */
/*---------------- Start Header ----------------*/
.h-top {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   padding: 5px 30px;
   align-items: center;
   position: relative;
   top: 0;
   z-index: 99999;
   background: #fff;
}

.h-top .left {
   display: flex;
   flex-direction: row-reverse;
   gap: 15px;
}

.weather {
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
   font-size: 19px;
   gap: 5px;
}

.h-top .right {
   display: flex;
   gap: 8px;
}

.h-top .right a {
   display: inline-flex;
   flex-direction: row-reverse;
   color: rgba(0, 0, 0, 1);
}

.h-top .right img {
   width: 30px;
   height: 30px;
}

.header {
   width: 100%;
   height: 800px;
   background: no-repeat center center / cover;
   padding-top: 12px;
   position: relative;
}



.title-page {
   position: absolute;
   bottom: 70px;
   right: 70px;
   color: #fff;
   font-size: 24px;
}

.header .logo-2 {
   width: 50px;
   height: 50px;
   background-color: #152031;
   color:white;
   border-radius: 50%;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.19);
   position: relative;
}

.header .logo-2 img {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.header .nav-bar {
   display: flex;
   align-items: center;
   gap: 20px;
   background-color: #152031;
   color:white;
   width: fit-content;
   margin: 0 auto;
   padding: 6px 30px;
   border-radius: 20px;
   position: absolute;
   top: 0;
   z-index: 9999;
   left: 50%;
   transform: translateX(-50%);
   width: max-content;
   margin-top: 40px;
}

.header .nav-bar nav ul {
   list-style: none;
   display: flex;
   gap: 20px;
   transition: all ease .3s;
}

.header .nav-bar nav ul li {
   font-size: 19px;
}

.header .nav-bar nav ul li a {
   text-decoration: none;
   color: #fff;
   font-weight: 500;
}

.header .nav-bar nav ul li .nav__link.active {
   background: linear-gradient(102.6deg, #FF0065 -7.7%, #179AD7 110.07%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   position: relative;
}

.header .nav-bar nav ul li .nav__link.active::after {
   content: '';
   position: absolute;
   border: 15px solid transparent;
   border-bottom-color: #152031;
   bottom: -37px;
   left: 50%;
   transform: translateX(-50%);
}

.header .nav-bar nav ul .submenu {
   position: absolute;
   width: 200px;
   background-color: #152031;
   box-shadow: 0 20px 45px #00000020;
   margin-top: -20px;
   /* opacity: 0; */
   z-index: -99;
   transition: all ease 0.5s;
   display: flex;
   flex-direction: column;
   border-radius: 10px 0 10px 10px;
   gap: 0;
   display: none;
}

.header .nav-bar nav ul .submenu li a {
   transition: 0.3s;
   -webkit-transition: 0.3s;
}

.header .nav-bar nav ul .submenu li:hover a {
   padding-right: 10px;
   transition: 0.3s;
}

.header .nav-bar nav ul li:hover .submenu {
   z-index: 99;
   display: flex;
   margin-top: 0;
   width: max-content;
}

.header .nav-bar nav ul .submenu li {
   border-bottom: 1px solid #c4bfbf;
   padding: 5px 10px;
}

.header .nav-bar nav ul .submenu li:last-child {
   border-bottom: 0;
}

.header .nav-bar .btn-bar {
   display: none;
}

.header .nav-bar .bg-btn-bar,
.header .nav-bar .bg-logo {
   display: none;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #152031;
   color:white;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
   position: relative;
   z-index: 9;
}

@media screen and (max-width: 1140px) {
   .header .nav-bar nav ul li:hover .submenu {
      opacity: 0;
   }

   .header .nav-bar .bg-logo {
      display: none;
   }

   .header .nav-bar {
      left: 0;
      transform: none;
   }

   .logo-mobile {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .header .nav-bar .bg-logo.active {
      display: block;
   }

   .icon-bar {
      display: flex;
      gap: 10px;
   }

   .header .nav-bar .bg-btn-bar {
      display: block;
   }

   .header .nav-bar {
      padding: 6px 15px;
   }

   .header .logo-2 {
      display: none;
   }

   nav.active {
      display: block;
   }

   .logo {
      width: 50px;
   }

   .header .nav-bar {
      width: auto;
      margin: 0 10px;
      justify-content: space-between !important;
   }

   .header .nav-bar .btn-bar {
      display: block;
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .header .nav-bar nav ul li a.active::after {
      display: none;
   }

   .header .nav-bar {
      position: absolute;
      top: 0;
      width: 100%;
      margin: 0;
      border-radius: 0;
   }

   .header .nav-bar .navbar p {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .header .nav-bar nav .navbar {
      position: fixed;
      width: 100%;
      height: 100vh;
      background: #152031;
      top: 0;
      right: 0;
      flex-direction: column;
      padding: 60px;
      justify-content: center;
      color: #fff;
      list-style-type: square;
      z-index: 7;
      transition: all .5s linear;
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
   }

   .header .nav-bar nav.active .navbar {
      transform: translateX(0%);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }

   .header .nav-bar nav.active ul a {
      color: #fff;
   }

   .header .nav-bar nav ul li .submenu {
      display: none;
   }

   .header .nav-bar nav ul li:hover .submenu {
      opacity: 0;
   }

   .header .nav-bar nav ul li:hover .submenu.active {
      opacity: 1;
   }

   .header .nav-bar nav ul li .submenu.active {
      display: block;
      position: relative;
      background-color: inherit;
      box-shadow: none;
   }

   .header .nav-bar nav ul li .submenu.active a {
      color: #929292;
      font-size: 17px;
      font-weight: 600;
   }

   .header .nav-bar nav ul li .submenu {
      z-index: 99;
      opacity: 1;
      margin-top: 0;
   }

   .header .nav-bar nav ul .submenu {
      transition: none;
   }

   .header .nav-bar nav ul .submenu li {
      border-bottom: 0;
   }

   .h-top .right {
      justify-content: space-between;
   }
}

@media screen and (max-width: 520px) {
   .logo-1 {
      width: 50px;
   }

   .h-top {
      padding: 5px 15px;
   }

   .h-top .right {
      width: 100%;
   }

   .h-top .left {
      display: none;
   }
}

.nav-bar.sticky {
   position: fixed;
   top: 0;
   width: 100%;
   margin: 0;
   border-radius: 0;
   justify-content: center;
   z-index: 100;
   background-color: #152031;
   color:white;
   transition: all 1s ease-in;
}

/*---------------- End Header ----------------*/

/*---------------- Start Footer ----------------*/
footer {
   position: relative;
   width: 100%;
   height: auto;
   color: #fff;
}

footer .top {
   background-color: #152031;
}

footer .top .container {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   gap: 20px;
}

footer .top .container .contact {
   display: flex;
   flex-direction: column;
   width: fit-content;
   gap: 25px;
}

footer .top .container .contact .logo {
   width: 150px;
}

footer .top .container .map .row {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: flex-end;
}

footer .top .container .map .row a {
   color: #fff;
}

footer .top .sci {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
}

footer .top .sci img {
   width: 36px;
   height: 36px;
}

footer .top .container .quick-links .links {
   display: flex;
   justify-content: center;
   margin: 0 20px;
   flex-wrap: wrap;
   gap: 25px;
}

footer .top .container .numbers {
   color: #fff !important;
   font-size: 19px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 30px;
}

footer .top .container .numbers a {
   color: #fff;
}

footer .top .container .map .numbers {
   display: none;
}

footer .top .container .quick-links ul {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
   flex-direction: row;
   justify-content: center;
}

footer .top .container .quick-links .links li {
   list-style: none;
   font-size: 19px;
   margin-top: 8px;
   color: #fff;
}

footer .top .container .map {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

footer .top .container .subscribe p {
   font-size: 19px;
   padding-block: 10px;
   text-align: center;
}

footer .top .container .subscribe input {
   font-family: 'Cairo', sans-serif !important;
}

footer .top .container .subscribe input[type='email'] {
   border-radius: 0px 5px 5px 0px;
   font-size: 17px;
   border: none;
   outline: none;
   padding-block: 5px;
   padding-inline: 20px;
   width: 260px;
}

footer .top .container .subscribe input[type='submit'] {
   font-size: 17px;
   padding: 5px 25px;
   border: 0;
   outline: 0;
   position: relative;
   right: -4px;
   color: #fff;
   border-radius: 5px 0px 0px 5px;
   background: var(--menu, linear-gradient(129deg, #FF0065 0%, #179AD7 100%));
}

footer .top .container .quick-links {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 80px;
}

footer .bottom {
   color: #000;
   text-align: center;
}

@media screen and (max-width: 1480px) {
   footer .top .container .quick-links {
      gap: 20px;
   }

   footer .top .container {
      grid-template-columns: repeat(2, 1fr);
   }

   footer .top .container .quick-links ul {
      flex-direction: column;
      gap: 15px;
   }

   footer .top .container .map {
      grid-column: span 2;
      align-items: center;
   }

   footer .top .container .quick-links .numbers {
      display: none;
   }

   footer .top .container .contact .subscribe {
      display: none;
   }

   footer .top .container .quick-links .subscribe {
      display: block;
      margin: 30px 0;
   }

   footer .top .container .subscribe input[type='email'] {
      width: 60%;
   }

   footer .top .container .quick-links .links {
      justify-content: normal;
      margin: 0 30px;
   }
}

@media screen and (max-width: 700px) {
   footer .top .container {
      grid-template-columns: 1fr;
   }

   footer .top .container .contact {
      margin: 0 auto;
      align-items: center;
   }

   footer .top .container .map {
      grid-column: auto;
   }

   footer .top .container .contact .numbers {
      display: none;
   }

   footer .top .container .map .numbers {
      display: block;
      margin-top: 0;
   }
}

@media screen and (max-width: 520px) {
   footer .top .container .contact .logo {
      width: 135px;
   }

   footer .top .container .map .map-image {
      width: 275px;
   }
   footer .top .container .numbers {
       text-align: center;
   }

}

/*---------------- End Footer ----------------*/

/*---------------- Start Button Top ----------------*/
.btn-top {
   display: none;
   position: fixed;
   bottom: 35px;
   left: 35px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: none;
   outline: none;
   background: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
   box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.40);
   z-index: 15;
   cursor: pointer;
}

.btn-top.show {
   display: block;
}

@media screen and (max-width: 520px) {
   .btn-top {
      bottom: 18px;
      left: 50px;
   }
}

/*---------------- End Button Top ----------------*/

/*---------------- Start Customer Support ----------------*/
.cust-support {
   position: fixed;
   bottom: 35px;
   right: 35px;
   z-index: 6;
}

.cust-support:after {
   content: '\f590';
   font-family: 'FontAwesome';
   cursor: pointer;
   transition-duration: 2s;
}

.cust-support:after:hover {
   transform: translateY(150px);
}

.cust-support>a:nth-child(1) {
   transition-delay: 150ms;
}

.cust-support>a:nth-child(2) {
   transition-delay: 100ms;
}

/* .cust-support > a:nth-child(1) {
    transition-delay: 150ms;
} */
.cust-support>a:nth-child(1):hover {
   background-color: #179AD7;
}

.cust-support>a:nth-child(2):hover {
   background-color: #FF0065;
}

.cust-support>a:nth-child(3):hover {
   background-color: #25d366;
}

.cust-support>a {
   position: absolute;
   bottom: 0;
   opacity: 0;
   transition: .25s ease-out;
   transform: rotate(60deg);
}

.cust-support:hover>a {
   opacity: 1;
}

.cust-support>a:nth-child(1) {
   transform: translate(-80px, 10px);
}

.cust-support>a:nth-child(2) {
   transform: translate(-60px, -50px);
}

.cust-support>a:nth-child(3) {
   transform: translateY(-70px);
}

.cust-support:after,
.cust-support>a {
   display: block;
   height: 50px;
   width: 50px;
   background: #fff;

   display: flex;
   justify-content: center;
   align-items: center;

   text-decoration: none;
   font-size: 28px;
   box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, .7);
   border-radius: 50%;

   position: absolute;
   bottom: 0;
   right: 0;
}

.cust-support::after {
   color: #fff;
   background: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
}

@media screen and (max-width: 520px) {
   .cust-support {
      bottom: 18px;
      left: 18px;
   }
}


/* Change Language */
.menu-lang {
   border-radius: 5px;
   border: 1px solid #F5F5F5;
   background: #FCFCFC;
   padding: 0 8px;
   position: relative;
}

.selected-lang {
   cursor: pointer;
   display: flex;
   gap: 5px;
   align-items: center;
}

.selected-lang::after {
   content: '';
   width: 25px;
   height: 18px;
   background-image: url(../images/ar.svg);
}

.menu-lang ul li a {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 5px;
}

.menu-lang ul li a::after {
   content: '';
   display: inline-block;
   width: 25px;
   height: 18px;
   background-image: url(../images/ar.svg);
}

.menu-lang .en::after {
   background-image: url(../images/en.svg);
}

.menu-lang img {
   width: 25px;
}

.menu-lang ul {
   list-style-type: none;
   text-align: left;
   position: absolute;
   top: 40px;
   background: #FCFCFC;
   width: 100%;
   padding: 10px 0;
   border-radius: 10px;
   left: 0;
   display: none;
   z-index: 10;
}

.menu-lang ul li {
   padding: 0 5px;
}

.menu-lang ul li:hover {
   width: 100%;
   background: #fff;
}

.menu-lang ul a {
   padding-left: 5px;
}

.menu-lang .selected-lang:hover>.menu-lang ul {
   display: block;
}

.menu-lang.active ul {
   display: block;
}

.nav-bar .weather {
   display: none;
}

@media screen and (max-width: 675px) {
   .left .weather {
      display: none;
   }

   .nav-bar.sticky {
      /*top: 40px;*/
   }

   .header .nav-bar nav.active .navbar {
      top: 0;
   }

   .nav-bar .weather.active {
      display: flex;
      z-index: 99;
      color: #fff;
      position: absolute;
   }
}





/* ---------------- About Page ---------------- */
.header.sub-page {
   width: 100%;
   height: 480px;
   /* background: linear-gradient(345deg, rgba(91, 33, 182, 0.1), rgba(179, 33, 182, 0.1), rgba(75, 27, 152, 0.1), rgba(14, 2, 33, 0.1), transparent), url('../images/bg-about.png') no-repeat center center / cover; */
}

.about-us {
   margin-top: 20px;
}

.about-us .container,
.say .container {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
}

.say .container .right img:nth-child(2) {
   width: 414px;
   height: 381px;
   position: relative;
}

.about-us .container .left p {
   font-size: 21px;
}

.about-us .container .left h1,
.say .container .left h1 {
   font-size: 21px;
}

.about-us .container .left,
.say .container .left {
   width: 50%;
   font-size: 19px;
}

.about-us .container .right,
.say .container .right {
   position: relative;
}

.about-us .container .right .about-img {
   width: 550px;
   height: 500px;
   border-radius: 20px;
}

.about-us .container .right .half {
   width: 195px;
   rotate: 180deg;
   position: absolute;
   top: -105px;
   right: -105px;
}

.story .text .description {
   width: 95%;
   margin: 0 auto;
}

.story img {
   width: 100%;
}

.say {
   background-color: #FCFCFC;
}

.say .container .left {
   width: 60%;
}

.say .container .right .half {
   width: 160px;
   rotate: 0deg;
   position: absolute;
   bottom: -70px;
   left: -64px;
   z-index: 0;
}

/* Tabs */
.sec-tabs .tabs {
   list-style-type: none;
   display: flex;
   gap: 50px;
   font-size: 19px;
   padding-bottom: 10px;
   border-bottom: 1px solid #BABABA;
   width: 35%;
}

.sec-tabs .tabs li {
   cursor: pointer;
}

.sec-tabs .tabs li.active {
   background: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
   padding: 1px 35px;
   border-radius: 10px;
   color: #fff;
}

.sec-tabs .tab-content {
   margin-top: 30px;
}

.sec-tabs .tab-content .text p {
   width: 70%;
   font-size: 21px;
   font-weight: 500;
   margin: 0 auto;
}

/* .sec-tabs .tab-content .one, */
.sec-tabs .tab-content .two,
.sec-tabs .tab-content .three {
   display: none;
}

.sec-tabs .tab-content .three .three-cont {
   display: flex;
   gap: 20px;
}

.sec-tabs .tab-content .three img {
   width: 40%;
}

.sec-tabs .tab-content .three .three-title {
   background: linear-gradient(223.6deg, #FF0065 -42.7%, #179AD7 110.07%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 21px;
}

.sec-tabs .tab-content .three .three-para {
   font-size: 21px;
   font-weight: 400;
   color: #152031;
}

.sec-tabs .tab-content .three .three-cont img {
   border-radius: 10px;
}

@media screen and (max-width: 1180px) {

   .about-us .container,
   .say .container {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-direction: column-reverse;
      align-items: center;
   }

   .sec-tabs .tab-content .three .three-cont {
      flex-direction: column;
      align-items: center;
   }

   .sec-tabs .tab-content .three .three-cont img {
      width: 80%;
   }
}

@media screen and (max-width: 786px) {
.blog-detail p:nth-child(2) {
        text-align: justify;
    }
   .about-us .container .left,
   .say .container .left {
      width: 100%;
   }

   .about-us .container .right .about-img {
      width: 450px;
   }

   .say .container .right .about-img {
      width: 380px !important;
      height: 350px !important;
   }

   .about-us .container .right .half {
      width: 115px;
      top: -65px;
      right: -65px;
   }

   .say .container .right .half {
      width: 115px;
      bottom: -54px;
      left: -57px;
   }

   .sec-tabs .tab-content .three .three-cont img {
      width: 100%;
   }
}

@media screen and (max-width: 520px) {
   .about-us .container .right .about-img {
      width: 303px;
      height: 271px;
   }

   .say .container .right .about-img {
      width: 234px !important;
      height: 215px !important;
   }

   .about-us .container .right .half {
      width: 140px;
      top: -65px;
      right: -65px;
      z-index: -1;
   }

   .say .container .right .half {
      width: 108px;
      bottom: -50px;
      left: -59px;
   }

   .sec-tabs .tabs {
      border-bottom: none;
      width: 100%;
      justify-content: center;
   }

   .story img {
      width: 100%;
      height: 224px;
      object-fit: cover;
      border-radius: 10px;
   }

   .about-us .container,
   .say .container {
      gap: 45px;
   }
}





/* ---------------- Service Page ---------------- */
.service .swiper {
   background-color: #fff;

}

.sec-1 .description {
   width: 62%;
   margin: 0 auto;
}

.video {
   display: block;
   margin: 30px auto;
   border-radius: 20px;
   width: 100%;
}

.form-booking h2 {
   font-size: 21px;
   font-weight: 700;
}


.booking .form-booking {
   width: 100%;
   height: 1330px;
   border-radius: 20px;
   background: linear-gradient(345deg, rgba(91, 33, 182, 0.1), rgba(179, 33, 182, 0.1), rgba(75, 27, 152, 0.1), rgba(14, 2, 33, 0.1), transparent);
   padding: 60px 55px;
   color: #fff;
}

.form-booking input,
.form-booking textarea,
.form-booking select {
   display: block;
   outline: none;
   border: none;
   padding: 8px 10px;
   font-size: 16px;
   border-radius: 10px;
   margin-top: 7px;
   font-family: 'Cairo';
   width: 50%;
}

.form-ser .form-booking input,
.form-ser .form-booking textarea,
.form-ser .form-booking select {
   width: 100%;
}

.form-ser .form-booking .row {
   gap: 10px;
}

.form-booking .row {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.form-booking .row .col-1 {
   display: block;
   width: 100%;
   margin-block: 10px;
}

.booking-page .form-booking input,
.booking-page .form-booking textarea,
.booking-page select {
   height: 64px;
}

.booking-page textarea {
   height: auto !important;
}

.form-booking input[type='submit'] {
   width: 25%;
   background-color: #152031;
   color: #fff;
}

@media screen and (max-width: 786px) {
   .form-ser .form-booking .row {
      flex-direction: column;
   }

   .booking .form-booking {
      height: auto;
   }

   .form-booking input,
   .form-booking textarea {
      width: 70%;
   }

   .form-booking input[type='submit'] {
      width: 35%;
   }

   .sec-1 .description {
      width: 100%;
      margin: 0 auto;
      font-size: 17px;
   }
}

@media screen and (max-width: 520px) {
   .service .description {
      width: 100%;
      margin: 0 auto;
      font-size: 19px;
   }

   .video {
      height: 100%;
   }

   .form-booking input,
   .form-booking textarea {
      width: 100%;
   }

   .form-booking input[type='submit'] {
      width: 50%;
   }

   .booking-page .form-booking input,
   .booking-page .form-booking textarea,
   .booking-page select {
      height: 40px;
   }
}


.ser-text h2 {
   font-size: 21px;
   color: #fff !important;
   font-weight: bold;
}

.header.sub-product {
   width: 100%;
   height: 480px;
   /* background: linear-gradient(345deg, rgba(91, 33, 182, 0.1), rgba(179, 33, 182, 0.1), rgba(75, 27, 152, 0.1), rgba(14, 2, 33, 0.1), transparent), url('../images/bg-product.png') no-repeat center center / cover; */
}

.tools .content .ser-card {
   height: 400px;
   position: relative;
}



.ser-card .bg-overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   /*background-image: linear-gradient(129deg, #ff006653 0%, #179ad75d 100%);*/
}













.tools {
   background: #fff !important;
}

.tools.tools-1 {
   background: #f5f5f5 !important;
}

@media screen and (max-width: 820px) {
   .tools .content .ser-card {
      height: 400px !important;
   }
}


.sub-product-d {
   background-image: none;
   height: auto;
}

.sub-product-d .title-page {
   display: none;
}

.sub-product-d .nav-bar {
   width: 100%;
   border-radius: 0;
   justify-content: center;
   background-color: #FCFCFC;
}

.content-tool-d {
   display: flex;
   gap: 20px;
   font-size: 21px;
   font-weight: 500;
}

.content-tool-d .left img {
   width: 500px;
   height: 551px;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20);
   border-radius: 10px;
}

.content-tool-d .right .price {
   font-weight: 700;
   color: #FF009D;
}

.tool-d .para {
   text-align: right;
   font-size: 21px;
   font-weight: 500;
   padding: 0 30px;
   width: 50%;
}

@media screen and (max-width: 990px) {
   .content-tool-d {
      flex-direction: column;
      align-items: center;
   }

   .tool-d .para {
      margin-top: 20px;
      padding: 0;
      width: 100%;
   }
}

@media screen and (max-width: 940px) {
   .sub-product-d .nav-bar {
      margin: 0;
      justify-content: space-between;
   }
}

@media screen and (max-width: 786px) {
   .content-tool-d .left img {
      width: 100%;
   }
}


.page-work {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
}

.page-work .work-card {
   width: 423px !important;
   height: 423px !important;
}

.work-hover {
   display: flex;
   align-items: center;
   justify-content: space-around;
   font-size: 19px;
   display: none;
}

.work-hover a {
   color: #fff;
   border: 2px solid;
   padding: 0 24px;
   border-radius: 10px;
}

.work-hover a:hover {
   background-color: #fff;
   color: #152031 !important;
}

.page-work .work-text:hover h3 {
   display: none;
}

.page-work .work-text:hover .work-hover {
   display: flex;
}

@media screen and (max-width: 520px) {
   .page-work .work-card {
      width: 350px !important;
      height: 350px !important;
   }
}

.lang-02 {
   border-radius: 5px;
   border: 1px solid #F5F5F5;
   background: #FCFCFC;
   padding: 0 8px;
   position: relative;
   color: #152031;
   list-style-type: none;
   width: max-content;
   display: none;
}

.lang-02 ul {
   position: absolute;
   top: 40px;
   flex-direction: column;
   background-color: #FCFCFC;
   width: 100%;
   left: 0;
   right: 0 !important;
   border-radius: 10px;
   gap: 0 !important;
   justify-content: center;
   align-items: center;
   display: none !important;
}

.lang-02:hover ul {
   display: flex !important;
}

.lang-02 ul li a {
   color: #152031 !important;
   display: flex;
   align-items: center;
   gap: 10px
}

.lang-02 ul li a::after {
   content: '';
   display: inline-block;
   width: 25px;
   height: 18px;
   background-image: url(../images/ar.svg);
}

.lang-02 ul li:nth-child(2) a::after {
   background-image: url(../images/en.svg);
}

@media screen and (max-width: 520px) {
   .lang-02 {
      display: block;
   }
}



/* ---------------- Work Details Page ---------------- */
.works-image {
   background-color: #fff !important;
}

.h-bottom .container {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-top: 20px !important;
   padding-bottom: 20px !important;
   background-image: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
   font-size: 20px;
   font-weight: 600;
}

.about-work .container {
   display: flex;
   gap: 20px;
   align-items: center;
}

.about-work img {
   width: 628px;
   height: 536px;
}

.text-about-work h2 {
   font-size: 21px;
   margin-bottom: 20px;
}

.about-work .container h1,
.about-work .container p {
   font-size: 21px;
}

@media screen and (max-width: 1120px) {
   .about-work .container {
      flex-wrap: wrap;
      justify-content: center;
   }
}

@media screen and (max-width: 520px) {
   .about-work img {
      width: 100%;
      height: auto;
   }

   .h-bottom .container {
      font-size: 17px;
   }
}

.client-page {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
}

.client-page .success-slide {
   border: 2px solid transparent;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, rgba(255, 0, 101, 1), rgba(23, 154, 215, 1)) border-box !important;
}

.success-partners .swiper-wrapper {
   transition-timing-function: linear !important;
}



/* ---------------- Blog Page ---------------- */
.blog-content .container {
   display: flex;
   justify-content: space-between;
   flex-direction: row-reverse;
   gap: 10px;
}

.side {
   flex: 32% 0;
   position: sticky;
   top: 150px;
   padding-top: 50px;
   height: max-content;
}

.blog-content .side-content {
   width: 100%;
   border-radius: 10px;
   background: #F6F6F6;
   padding: 30px 15px 15px 15px;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
   position: relative;
   margin-bottom: 50px;
}

.blog-content .side-content .side-title {
   position: absolute;
   top: -25px;
   width: 80%;
   background: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
   color: #fff;
   font-size: 22px;
   padding: 3px;
   text-align: center;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 10px;
}

.blog-content .side-content .blog-card {
   display: flex;
   flex-direction: row;
   gap: 10px;
   background-color: #fff;
   border-radius: 5px;
   align-items: center;
}

.blog-content .side-content .blog-added {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.blog-card-cont {
   font-size: 19px;
}

.blog-card-cont a p {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.blog-content .side-content .blog-card img {
   width: 100px;
   border-radius: 5px;
}

.side-content form {
   text-align: center;
   padding-top: 10px;
}

.side-content input[type='email'] {
   border-radius: 0px 5px 5px 0px;
   font-size: 17px;
   border: none;
   outline: none;
   padding: 5px;
   width: 220px;
}

.side-content input[type='submit'] {
   font-size: 17px;
   padding: 5px 25px;
   border: 0;
   outline: 0;
   position: relative;
   right: -4px;
   color: #fff;
   border-radius: 5px 0px 0px 5px;
   background: #152031;
}

.content-area {
   flex: 60% 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

.content-area img {
   width: 100% !important;
   height: 450px;
   border-radius: 20px;
}

.content-area .swiper-slide {
   width: 100% !important;
}

.blog-img,
.blog-slide {
   position: relative;
}

.blog-des {
   border-radius: 15px;
   background: rgba(0, 0, 0, 0.50);
   padding: 20px 30px;
   position: absolute;
   bottom: 20px;
   width: 95%;
   left: 50%;
   transform: translateX(-50%);
   color: #fff;
}

.title-and-date {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-size: 20px;
}

.title-and-date p:first-child {
   display: -webkit-box;
   -webkit-line-clamp: 1 !IMPORTANT;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-weight: 700;
}

.blog-des p {
   font-size: 19px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.blog-des a {
   border: 2px solid #fff;
   border-radius: 5px;
   color: #fff;
   padding: 0 10px;
   float: left;
}

.blog-des a:hover {
   color: #000;
   background-color: #fff;
   font-weight: 600;
}

.blog-detail p {
   font-size: 19px;
}

.blog-detail p:nth-child(2) {
   padding-bottom: 60px;
}

.content-area .swiper-button-next,
.content-area .swiper-button-prev {
   position: absolute;
   bottom: 0 !important;
   top: auto;
   width: 40px;
   height: 40px;
   border: 2px solid;
   border-radius: 50%;
}

.content-area .swiper-button-next:after,
.content-area .swiper-button-prev:after {
   font-size: 19px;
}

.booking-page .two {
   display: none;
}

.blog-content .more {
   flex-direction: column;
   background: #FCFCFC;
}

.blog-content .more h1 {
   font-size: 21px;
   margin-bottom: 20px;
}

.blog-content .more-pro {
   display: flex;
   flex-direction: row;
   gap: 20px;
}

.blog-content .more-pro .blog-img {
   flex: 50% 0;
}

.blog-content .more-pro .blog-img img {
   width: 100%;
   height: 400px;
}

@media screen and (max-width: 1140px) {
   .blog-content .container {
      flex-direction: column-reverse;
   }

   .blog-content .more {
      flex-direction: column;
   }
}

@media screen and (max-width: 786px) {
   .content-area {
      grid-template-columns: 1fr;
   }

   .blog-content .more-pro {
      flex-direction: column;
   }
}

@media screen and (max-width: 520px) {
   .blog-content .container.more {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 35px;
      padding-bottom: 35px;
   }

   .content-area img {
      height: auto;
   }

   .content-area .swiper-button-next::before {
      left: -6px;
      width: 150px;
      font-size: 16px;
   }

   .content-area .swiper-button-prev::before {
      font-size: 16px;
   }

   .side-content input[type='email'] {
      width: 60%;
   }
}




.tabs-booking {
   list-style-type: none;
   display: flex;
   gap: 50px;
   font-size: 19px;
   padding-bottom: 10px;
}

.tabs-booking li {
   cursor: pointer;
}

.tabs-booking li.active {
   background: linear-gradient(129deg, #FF0065 0%, #179AD7 100%);
   padding: 1px 35px;
   border-radius: 10px;
   color: #fff;
}

.booking-page form {
   width: 45%;
}

.booking-page .form-booking {
   height: auto;
}

.booking-page .tabs-booking {
   width: 45%;
}

.booking-page .tabs-booking li {
   width: 50%;
   height: 69px;
   text-align: center;
   font-size: 25px;
   line-height: 60px;
}

.select-location {
   position: relative;
   width: 100%;
}

.booking-page .form-booking input,
.booking-page .form-booking textarea,
.booking-page select {
   width: 100%;
}

.booking-page input[type='submit'] {
   border-radius: 60px;
   background: var(--menu, linear-gradient(129deg, #FF0065 0%, #179AD7 100%));
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
   width: 50%;
   margin: 0 auto;
   margin-top: 10px;
   cursor: pointer;
   padding: 0;
}

.select-location input {
   width: 100% !important;
}

.btn-sel-loc {
   border-radius: 6px;
   color: #fff;
   background: #142030;
   padding: 1px 30px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 20px;
}

@media screen and (max-width: 786px) {

   .booking-page .form-booking input,
   .booking-page .form-booking textarea,
   .booking-page form,
   .booking-page .tabs-booking {
      width: 100%;
   }

   .booking-page input[type='submit'] {
      width: 50% !important;
   }
}

@media screen and (max-width: 650px) {
   .booking .form-booking {
      padding: 35px 22px;
   }

   .booking-page .btn-sel-loc {
      padding: 1px 8px;
      left: 5px;
      font-size: 14px;
   }

   .booking-page .tabs-booking li {
      cursor: pointer;
      width: 50%;
      text-align: center;
      height: 44px;
      font-size: 21px;
      line-height: normal;
   }

   .booking-page form,
   .booking-page .form-booking input,
   .booking-page .form-booking textarea,
   .booking-page .tabs-booking {
      width: 100% !important;
   }

   .booking-page input[type='submit'] {
      width: 50% !important;
   }
}



/* Content US Page */
.type-contact {
   background-color: #f5f5f5;
}

.content {
   /* background-color: #fff; */
   padding-bottom: 30px;
}

.cont-box {
   width: 381px;
   height: 324px;
   flex-shrink: 0;
   border-radius: 10px;
   border: 1px solid rgba(20, 32, 48, 0.50);
   background: #FFF;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 21px;
   transition: all ease 1s;
}

.cont-box:hover {
   transform: scale(1.04);
}

.cont-box .img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: linear-gradient(129deg, rgba(255, 0, 101, 0.50) 0%, rgba(23, 154, 215, 0.50) 100%);
   position: relative;
}

.cont-box .img img {
   width: 48px;
   height: 48px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.cont-box a {
   color: #000;
   font-size: 19px;
   font-weight: 600;
}

.cont-box .tit {
   font-size: 21px;
   font-weight: 600;
}

.type {
   width: 282px;
   height: 239px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 21px;
   font-weight: 600;
   border-radius: 10px;
   border: 1px solid rgba(20, 32, 48, 0.50);
   background: #FFF;
   transition: all ease 1s;
}

.type:hover {
   transform: scale(1.06);
}

.type.active {
   border: 2px solid transparent;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, rgba(255, 0, 101, 1), rgba(23, 154, 215, 1)) border-box !important;
}

.form-contact {
   margin-top: 30px;
}

.type-contact .row {
   display: flex;
   gap: 20px;
}

.type-contact .row .col-1 {
   flex: 50% 0;
}

.alert {
   padding: 15px;
   border-radius: 4px;
   margin-bottom: 15px;
}

.alert ul {
   display: flex;
   justify-content: space-between;
}

.form-booking .alert {
   display: none;
}

.form-booking .alert ul {
   display: none;
}

.alert-danger {
   color: #721c24;
   background-color: #f8d7da;
   border-color: #f5c6cb;
}

.alert-success {
   color: #155724;
   background-color: #d4edda;
   border-color: #c3e6cb;
}

.content-slogun {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #000000c0;
   z-index: 100;

}

.slogun-text {
   position: absolute;
   top: 35%;
   left: 0;
   right: 0;
}

.slogun-text h1 {
   position: relative;
   text-align: center;
   margin: 0;
   color: #ffffffc4;
   text-shadow: -3px -1px 20px #46b5a1b7;
   font-size: 49px;
   font-weight: 900;
   z-index: 99;
   /* font-family: 'Arya', sans-serif; */
   overflow: hidden;
}


body {
   overflow-x: hidden;
}


.bg-header {
   position: absolute;
   top: -60px;
   bottom: 0;
   right: 0;
   left: 0;
   pointer-events: none;
   z-index: -1;
}

.type-contact .row .col-1 select {
   direction: ltr;
   width: 100%;
   display: block;
   outline: none;
   border: none;
   padding: 8px 10px;
   font-size: 16px;
   border: 1px solid rgba(21, 32, 49, 0.30);
   border-radius: 10px;
   margin-top: 7px;
   font-family: 'Cairo';
}

.type-contact .row .col-1 label {
   display: block;
}

textarea {
   resize: none;
}

.type-contact .row .col-1 input,
.type-contact .row .col-1 textarea {
   width: 100%;
   display: block;
   outline: none;
   border: none;
   padding: 8px 10px;
   font-size: 16px;
   border: 1px solid rgba(21, 32, 49, 0.30);
   border-radius: 10px;
   margin-top: 7px;
   font-family: 'Cairo';
}

.type-contact input[type='submit'] {
   border-radius: 10px;
   background: #152031;
   color: #fff;
   border: none;
   padding: 10px;
   width: 25%;
   margin-top: 20px;
   font-size: 18px;
   font-family: cairo;
}

@media screen and (max-width: 786px) {
   .type-contact .row {
      flex-direction: column;
      gap: 0;
   }

   .type-contact input[type='submit'] {
      width: 50% !important;
   }
}

@media screen and (max-width: 520px) {
   .cont-box {
      width: 275px;
      height: 234px;
   }

   .type {
      width: 165px;
      height: 142px;
   }

   .type-contact .row {
      gap: 0;
   }

   .type-contact input[type='submit'] {
      width: 100% !important;
   }

   .type-contact label {
      display: none !important;
   }

   .tab-content .container {
      padding-left: 0;
      padding-right: 0;
   }

   .form-contact {
      padding-left: 20px;
      padding-right: 20px;
   }
}

/* Policy Page */
.policy {
   font-size: 21px;
   background-color: #FCFCFC !important;
}

.policy .container {
   padding-top: 0;
   position: relative;
   top: -50px;
}

.content-policy {
   padding: 10px 20px;
   border-radius: 20px;
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: transparent;
   background: linear-gradient(#fff, #fff) padding-box, linear-gradient(117deg, rgba(255, 0, 101, 1), rgba(23, 154, 215, 1)) border-box !important;
   color: #152031;
   box-shadow: 0px 0 35px 0px rgba(7, 0, 59, 0.06);
}

.content-policy h1 {
   background: linear-gradient(102.6deg, #FF0065 -7.7%, #179AD7 110.07%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 24px;
}

.policy ul {
   font-size: 19px;
   list-style-type: square;
   padding-right: 20px;
}

.policy ul li p.title {
   font-size: 21px;
   font-weight: 700;
}

.policy ul li {
   padding-bottom: 20px;
}

.products.tools .ser-card:hover .ser-text {
   opacity: 1;
}

.pro-booking .form-booking .row {
   gap: 10px;
}

.pro-booking .form-booking input,
.pro-booking .form-booking textarea,
.pro-booking .form-booking select {
   width: 100%;
}

.pro-booking .form-booking input[type='submit'] {
   width: 25%;
   cursor: pointer;
}



/* Skeleton */
.skeleton {
   position: relative;
}

.skeleton::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   background: linear-gradient(90deg, #eee, #f9f9f9, #eee);
   background-size: 200%;
   animation: skeleton 1s infinite reverse;
}

@keyframes skeleton {
   0% {
      background-position: -100% 0;
   }

   100% {
      background-position: 100% 0;
   }
}

.image-sub-page {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.blog-de .content-area {
    grid-template-columns: 1fr;
}