@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('../Poppins/Poppins-Black.ttf');


@font-face {
  font-family: 'Poppins';
  src: url('../Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
:root {
  scroll-behavior: smooth;
  --shade1:rgb(0, 0, 0);
  --shade2:#f1eef2;
  --shade3:#087a96;
  --shade4:rgb(25, 0, 46);
  --fontSize: 40px; /* Adjust this value as needed */
  --numberOfElements: 8; /* Adjust this value as needed */
  --slide-width: min(25vw, 300px);
	--slide-aspect: 2 / 3;

	--slide-transition-duration: 800ms;
	--slide-transition-easing: ease;

	--font-archivo: "Archivo", sans-serif;
	--font-clash-display: "Clash Display", sans-serif;
  }
body{
  font-family: 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h5 {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600; /* Bold weight */
}

p {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 400; /* Regular weight */
}
header{
  background-color: var(--shade1);
  position: fixed;
  width: 100%;
  z-index: 200;
  top: 0;
  left: 0;
}
.navbar-toggler.collapsed i{
  color: var(--shade2);
}
.welcome-note h4{
  color: rgb(230, 186, 106);
  font-weight: 800;
  font-size: 38px;
}
.welcome-note p{
  color: var(--shade2);
}
#intro-logo{
  width: 100%;
  display: block;
  margin: auto;
}
#intro-logo1{
  width: 500px;
  display: block;
  margin: auto;
}
p{
  font-size: 18px;
}
#backtotop{
  font-size: 48px;
  position: fixed;
  bottom: 5rem;
  right: 5rem;
  cursor: pointer;
  z-index: 100;
  color: var(--shade2);
  background-color: none;
  mix-blend-mode: difference;
}
.uae-text {
  background: linear-gradient(to right, #BE0300,#047A02,#0E0E0E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: bold;
}
.container1, .container2, .container3{
  position: relative;
  overflow: hidden;}
.container2, .container3, .mission-tab, .container4{
  padding: 8vh 0vh;
}
.container{
  position: relative;
  z-index: 1;
}
.rapid-text.container{
  position: relative;
  height: 100px;
  z-index: 1;
}
.container1{
  padding: 15vh 0vh;
  background-color: rgba(255, 255, 255, 0.089);
}

.container4{
  background-color: rgba(255, 255, 255, 0.863);
}
.container-bg{
  position: absolute; /* Keep video positioned absolutely */
  width: 100%;
  height: 100vh; /* Cover the viewport height */
  top: 0;
  left: 0;
  object-fit: cover; /* Cover the container while maintaining aspect ratio */
  z-index: -1; /* Keep video behind other content */
  /* filter: saturate(120%) contrast(120%); Optional: Adjust video filter */
}
#videoPlayer{
  position: fixed;
  /* top: 0; */
  /* filter: brightness(50%); */
  bottom: 0;
  z-index: -2;
}
#sketch-bg{
  filter: brightness(0) blur(3px) opacity(20%);
}
#welcome-bg{
  filter: brightness(40%);
}
.container2{
  background-color: var(--shade1);
}
.container3{
  background-color: var(--shade1);
}
.container-end{
  background-color: rgb(230, 186, 106);
  color: var(--shade1);
}

.text{
  margin-top: 2rem;
  font-weight: 100;
  font-size: 64px;
  color: #FAFAFA;
  font-weight: 200;
  text-align: center;
}
.dud{
  color: #757575;
}

#contact-us-btn{
  padding: 5px 12px;
  /* font-size: 18px; */
  background-color: var(--shade1)!important;
  color: var(--shade2)!important;
  border: 1px solid rgb(103, 189, 204);
  border-radius: 30px!important;
  /* font-weight: 600; */
  border-radius: 5px;
}
/* #contact-us{
  display: none;
} */

#contact-us{
  letter-spacing: 2px;
}
#contact-us-btn:hover{
background-color: rgba(255, 255, 255, 0)!important;
color: var(--shade3)!important;
border: 1px solid var(--shade3)!important;
}
/* partner slide */
.container3 {
  position: relative;
}
#c{
  position: absolute;
  top: 50%;
  width: 800px;
  height: 200px; 
  left: 50%;
  margin-left: -400px;
  margin-top: -130px;
}

.container-heading{
  font-weight: 600;
  font-size: 64px;
  /* text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04); */
}
.container-primary .container-heading{
  font-weight: 600;
  font-size: 64px;
  color: #000000;
  text-shadow: 1px 1px 20px white;
  /* text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04); */
}
.services-heading{
  font-size:24px;
  /* font-weight: 300; */
  /* text-align: center; */
}

.container-btn {
  margin: 0 auto 0;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
}

.pulse-button {
  height: max-content;
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: light;
  text-align: center;
  letter-spacing: -1px;
  color: white;
  border: 0px;
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    /* -webkit-transform: scale(0.9);
    transform: scale(0.9); */
  }
  70% {
    /* -webkit-transform: scale(1);
    transform: scale(1); */
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
  }
  100% {
    /* -webkit-transform: scale(0.9);
    transform: scale(0.9); */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.about-us{
  color: var(--shade2);
  position: relative;
  z-index: 1;
  text-align: justify;
}
.about-us p{
  font-size: 18px;
}








.strips-container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1em;
	 width: 800px;
	/*height: 500px; */
  aspect-ratio: 8/5;
	transition: all 400ms;
}

.strips-container:hover .box {
	filter: grayscale(100%) opacity(24%);
}

.box {
	position: relative;
	background-position: center center !important;
  background-size: cover;
	transition: all 400ms;
	display: flex;
	justify-content: center;
  border-radius: 20px;
	align-items: center;
}

.strips-container .box:hover {
	filter: grayscale(0%) opacity(100%);
}

.strips-container:has(.box-1:hover) {
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.strips-container:has(.box-2:hover) {
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.strips-container:has(.box-3:hover) {
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.strips-container:has(.box-4:hover) {
	grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.strips-container:has(.box-5:hover) {
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
	transform: translateY(-16px);
}

.box:nth-child(even) {
	transform: translateY(16px);
}

.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background:rgb(230, 186, 106);
	color: #000000;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}

.box:hover::after {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 400ms;
}
.box:hover {
  background-position: 0%;
}


.quality-box i{
  font-size: 32px;
  color: rgb(230, 186, 106);
}
.detail-header{
  font-size: 18px;
  text-align: start;
  color: rgb(230, 186, 106);
}

.detail-description{
  font-size: 16px!important;
  text-align: justify;

}

.esteban-regular {
  /* font-family: "Playfair Display", serif; */
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 24px;
  text-wrap: wrap;
  padding: 0% 20%;
  display: block;
  margin: 0;
  font-weight: 100;
  text-align: center;
  /* font-weight: ; */
}

.mission-tab{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%); */
  background-color: rgb(230, 186, 106);
  color: white;
  /* padding-bottom: 10rem; */
}




/* faq */
.accordion-button,.accordion-header, .accordion-item{
border-radius: 50px!important;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.356);
}
.accordion-button{
  background-color: rgb(230, 186, 106)!important;
}
.accordion-item{
  /* border: 1px inset!important; */
  margin: 2px ;
}

.social-media-wrap{
  list-style: none;
  display: flex;
  justify-content:space-around;
  align-items: center;
}

.social-media-btns{
  font-size: 32px;
  color: var(--shade3);
}
.gmap{
  width: 100%;
  display: block;
  margin: auto;
  aspect-ratio: 4/2;
  margin-top:10px ;
  border-radius: 20px;
}
.foot-container{
  background-color: var(--shade1);
  position: relative;
  overflow: hidden;
}
.footer-print{
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  z-index: 1;
  filter: blur(10px) opacity(30%);
}
.foot-container .container{
  position: relative;
  z-index: 2;
}
.foot-container hr {
  border: none; /* Remove default border */
  /* height: 2px; Set height of the line */
  background-color: #007bff; /* Set background color */
  margin: 0px 0; /* Adjust margin as needed */
}
.foot-container a{
  text-decoration: none;
  color: rgb(230, 186, 106);
}
.foot-container a:hover{
  color: var(--shade2);
}
.foot-container h5{
  color: var(--shade2);
}
.footer-mail-form p{
  color: rgba(255, 255, 255, 0.438);
  font-size: small;
}
.footer-mail-form .smt-btn{
  background-color: rgb(230, 186, 106)!important;
  color: #000000;
  font-weight: 600;
}
.navbar-toggler i{
  color: white;
}
@media (min-width:320px) {
  .changing-aligns{
    text-align:center;
  }
  .small-dubai{
    width: 100%;
    filter: brightness(0);
  }
  .container-primary{
    margin: 1rem 0rem;
  }
  .esteban-regular{
    font-size: 16px;
    font-weight: 300;
    padding: 0% 2%;
  }
  .container-heading {
    font-weight: 600!important;
    font-size: 38px!important;
  }
  .rapid-text.container .text{
    margin-top: 2rem;
    font-weight: 100;
    font-size: 28px;
    color: #FAFAFA;
    font-weight: 400;
    text-align: center;
  }
  #backtotop {
    font-size: 32px;
    position: fixed;
    bottom: 1.2rem;
    right: 2rem;
    cursor: pointer;
    z-index: 1000;
    color: var(--shade2);
    background-color: none;
    mix-blend-mode: difference;
  }
  .container-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #intro-logo{
    width: 95%;
    padding-top: 2rem;
    display: block;
    margin: auto;
  }
  .box::after {
    content: attr(data-text);
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    bottom: 20px;
    background:rgb(230, 186, 106);
    color: #000000;
    padding: 5px 5px 5px 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translateY(60px);
    opacity: 0;
    transition: all 400ms;
  }
  .navbar-toggler.collapsed{
    display: block;
  }
  .menu-row{
    display: none;
  }
  .menu-mob-row{
    display: flex;
    list-style: none;
    flex-direction: column;
   padding-left: 0;
   margin-bottom: 0%;
  }
  .menu-mob-row .menu-link{
    text-decoration: none;
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    color: rgb(230, 186, 106);
    font-weight: 600;
  }
  .menu-mob-row li{
    text-align: center;
    padding: 5px 5px;
  }
  .why-icons{
    width: 150px;
  }
}
@media (min-width:720px) {
  .navbar-toggler.collapsed{
    display: none;
  }
  .menu-row{
    display: flex;
    list-style: none;
    justify-content: space-between;
  }
  .menu-link{
    text-decoration: none;
    margin: 1px 10px;
    color: rgb(230, 186, 106);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: all 0.5s linear;
    font-weight: 600;
  }
  .menu-link:hover{
    color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
  }
  .container-primary{
    margin: 5rem 0rem;
  }
  .esteban-regular{
    font-size: 32px;
    font-weight: 200;
    padding: 0% 15%;
  }
  .container-heading {
    font-weight: 600!important;
    font-size: 64px!important;
  }
  .rapid-text.container .text{
    margin-top: 2rem;
    font-weight: 100;
    font-size: 64px;
    color: #FAFAFA;
    font-weight: 200;
    text-align: center;
  }
  .container-bg{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 0;
  }
#backtotop {
  font-size: 48px;
  position: fixed;
  bottom: 2rem;
  right: 5rem;
  cursor: pointer;
  z-index: 100;
  color: var(--shade2);
  background-color: none;
  mix-blend-mode: difference;
}
#intro-logo{
  width: 100%;
  display: block;
  margin: auto;
}
.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background:rgb(230, 186, 106);
	color: #000000;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}
.quality-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.quality-box p{
  font-size: 30px;
}
.why-icons{
  width: 100%;
  border-radius: 10px;
}
}
.why-icons{
  animation: beats 2s ease-in infinite;
}
@keyframes beats{
  0%{
    filter: brightness(110%);
  }
  50%{
    filter: brightness(90%);
  }
  100%{
    filter: brightness(110%);
  }
}
#back{
  display: none;
}
.small-dubai{
  width: 100%;
}
.img-pointer{
  cursor: pointer;
}
@media (min-width: 900px){

.small-dubai{
  width: 400px;
  display: block;
  margin: auto;
  filter: brightness(0);
}
.changing-aligns{
  text-align: justify;
}
  }

  .back-white{
    background-color: rgba(255, 255, 255, 0.685);
    padding: 5px 10px;
    border-radius: 5px;
  }

.form-group label{
  color: white;
  font-weight: 500;
  margin: 5px 0px;
}
.form-check-label{
  color: white;
  font-weight: 500;
 }