@font-face {
    font-family: 'AdobeArabicBold';
    src: url('../fonts/adobe-arabic-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AdobeArabicRegular';
    src: url('../fonts/adobe-arabic-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RUAQArabicBold';
    src: url('../fonts/RUAQARABIC-BOLD.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'RUAQArabicMedium';
    src: url('../fonts/RUAQARABIC-MEDIUM.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'RUAQArabicLight';
    src: url('../fonts/RUAQARABIC-LIGHT.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

body {
    font-family: 'RUAQArabicMedium', 'Zain';
    background-color: #1c2c4c;
}


.bg-grid-squares {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-engineering-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}


.bg-diagonal-lines {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-dot-grid {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 0);
    background-size: 20px 20px;
}

.bg-horizontal-lines {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 100% 20px;
}

.bg-crosshatch {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(225deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-angled-lines-arabic {
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 10px);
    background-size: auto;
}

/*Effects*/
.sidebar {
    transition: all 0.3s ease;
}

.slide {
    transition: opacity 0.5s ease;
}

.slide.active {
    opacity: 1;
}

.slide.inactive {
    opacity: 0;
    position: absolute;
    top: 0;
}

.project-slide {
    transition: transform 0.5s ease;
}

.project-slide.active {
    transform: translateX(0);
}

.project-slide.next {
    transform: translateX(100%);
}

.project-slide.prev {
    transform: translateX(-100%);
}