@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~react-image-gallery/styles/css/image-gallery.css";
/* styles/globals.css */


/* add LAXR font to next.js */
@font-face {
  font-family: 'LAXR';
  src: url('/Fonts/LAXR.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cairo';
  src: url('/Fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF Pro';
  src: url('/Fonts/FontsFree-Net-SFProText-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter", sans-serif;
  src: url('/Fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*{
  scroll-behavior: smooth;
  font-family: 'Cairo', sans-serif;

}

body {
  overflow-x: hidden !important;
}

.text-rtl {
  direction: rtl;
  text-align: right;
}

.text-ltr {
  direction: ltr;
  text-align: left;
}

/* navbar */
.mantine-Paper-root,
.mantine-Drawer-header {
  background-color: #35353c;
}

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

@media (max-width: 1023px) {
  .mask-image-linear {
    mask-image: linear-gradient(to top, transparent, black 50%);
  }
}


.active::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 9px;
  background-image: url('../public/assets/Rectangle 1.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: -3px;
  right: 0;
}

.active {
  opacity: 1 !important;
}


/* hero sections */

.hero {
  background: url('/assets/her-effect.svg') no-repeat center center/cover;
  min-height: calc(100vh + 51px);
  color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;

}

.projects {
  background: url('/assets/projects-effect.svg') no-repeat center center/cover;
  background-color: #0B0122;
  margin-top: -50px;
  padding: 50px 0;
  position: relative;
  padding-bottom: 80px;
}

.about-us {
  background: url('/assets/about-effect.png') no-repeat center center/cover;
  background-color: #0B0122;
  margin-top: -50px;
  padding: 50px 0;
  position: relative;
}

@media (max-width: 768px) {
  .projects {
    min-height: 60vh;
  }
}

.services {
  background-color: #fff;
  min-height: 100vh;
  max-width: 100vw;
  margin-top: -70px;
  padding: 50px 0;
  position: relative;

}

.contact-us-bg {
  background-image: url('/assets/contact-us.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
}


.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  background-color: #5f5f5f7a !important;
  border: none !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  margin: 0 5px !important;
  position: relative !important;
  margin-left: 25px !important;
  cursor: pointer !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 0.7rem !important;
  color: white;
}

@media (max-width: 768px) {

  .swiper-button-next,
  .swiper-button-prev {
    width: 20px !important;
    height: 20px !important;
    margin-left: 20px !important;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 0.5rem !important;
  }

}

.cardShadow {
  box-shadow: 0px 2px 24px 0px #00000014;
}

.title-position {
  position: absolute;
}

@media (max-width: 1280px) {
  .title-position {
    position: relative;
  }

}

.input-style {
  border: none !important;
  border-bottom: 1px solid #0b012238 !important;
  border-radius: 0 !important;
  display: flex;
  text-align: right;
  outline: none !important;
}

@media (max-width: 423px) {
  .mantine-1fzet7j {
    font-size: 10px !important;
  }
}

.customnerBtn{
  background-color: inherit !important;
  border: 1px solid #0000002e !important;
}
.customnerBtn::after{
  color: #000000 !important;
}
.iconHover{
  transition: all 0.5s !important;
}
.cardHover:hover .iconHover{
  transform: rotate(45deg) !important;
}
.project-download::after{
  content: '';
  position: absolute;
  width: 50%;
  height: 2px;
  background-color: #000000;
  bottom: 50%;
  right: -80px;
}
.project-download::before{
  content: '';
  position: absolute;
  width: 50%;
  height: 2px;
  background-color: #000000;
  bottom: 50%;
  left: -80px;
}