@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css";
:root {
    --bg: #090909;
    --bg-2: #1B1B1B;
    --bg-3: hsl(0, 0%, 15%);
    --font: #f2f2f2;
    --container: 10rem;
    --title:4vw;
    --paragraph:1.1vw;
    --burger-width:20px;
    --burger-height:15px;
    --light-blue:#05e2f9;
    --blue:#2a3fd7;
    --violet:#bc54d2;
    --pink:#f2106a;
    --orange:#f5282c;
    --yellow:#ebd745;
}
@font-face {
    font-family: main;
    src: url('/assets/IBMPlexSansArabic-Regular-DsN3Thpy.ttf') format('woff2');
    font-display: swap
}
@font-face {
    font-family: main-semibold;
    src: url('/assets/IBMPlexSansArabic-SemiBold-BPBc9WjB.ttf') format('woff2');;
    font-display: swap
}
@font-face {
    font-family: main-bold;
    src: url('/assets/IBMPlexSansArabic-Bold-BodNR7--.ttf') format('woff2');;
    font-display: swap
}
body {
    margin: 0;
    padding: 0;
    color: var(--font);
    background: var(--bg);
    font-family: main;
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    display: none;
}
.container {
    margin: 0 var(--container);
}
.title {
    font-family: main-semibold;
    font-size: var(--title);
}
.paragraph {
    font-family: main;
    font-size: var(--paragraph);
}
@media (max-width:1200px) and (min-height:601px){
    :root {
        --container:5rem;
        --paragraph:2.4vw
    }
}
@media (max-width:992px){
    :root {
        --paragraph:2.6vw
    }
}
@media (max-width:768px){
    :root {
        --container:2.5rem
    }
}
@media (max-width:600px){
    :root {
        --container:1rem;
        --paragraph:5vw

    }
}
header {
    padding: 1.4rem 0;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* backdrop-filter: blur(10px); */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
.blur {
    backdrop-filter: blur(45px);
    width: 100%;
    background-color: rgba(26, 26, 26, 0.542);
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;    
    opacity: 0;
    content: '';
    pointer-events: none;
    z-index: 100;
    
}
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
header .container .logo {
    width: 13.5vw !important;
    display: grid;
    align-items: center;
    gap: 1rem;
    grid-template-columns: .3fr .8fr;
}
header .container .logo h3 {
    font-size: .7rem;
    font-weight: 100;
    opacity: .6;
    width: fit-content;
    /* margin-top: .2rem; */
    /* padding-top: .2rem; */
    /* border-top: 1px rgba(255, 255, 255, 0.349) solid; */
}
header .container .logo img {
    width: 100%;
}
header .container .logo .titles img {
    width: 80%;
}
.float-btn, header .container .sidebar-btn {
    width: 45px;
    height: 45px;
    border: 2px solid #f2f2f266;
    display: flex;
    border-radius: 50%;
    align-items: center;
    position: absolute;
    top: 0;
    position: relative;
    justify-content: center;
    z-index: 110;
}
.float-btn .lines-container, header .container .sidebar-btn .lines-container {
    display: flex;
    height: var(--burger-height);
    width: var(--burger-width);
    flex-direction: column;
    z-index: 100;
    justify-content: space-between;
    align-content: space-between;
}
.float-btn .path, header .container .sidebar-btn .path {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    z-index: -1;
    left: 0;
}
.float-btn .line, header .container .sidebar-btn .line {
    display: flex;
    height: 2px;
    align-items: start;
}
.float-btn .dot, header .container .right-side {
    display: grid;
    right: var(--container);
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    gap: 3rem;
}
.float-btn .dot, header .container .right-side .language-button {
    overflow: hidden;
    width: 35px;
    height: 35px;
}
.float-btn .dot, header .container .right-side .language-button div {
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
}
.float-btn .dot, header .container .sidebar-btn .dot {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    border-radius: 50%;
}
.float-btn .dot div, header .container .sidebar-btn .dot div {
    width: 4px;
    height: 4px;
    position: absolute;
    top: -2px;
    will-change: width,height,left,top,transform;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    z-index: 10;
    content: '';
    background: var(--font)
}
.float-btn .lines-container , header .container .sidebar-btn .lines-container {
    /* transform: translateX(calc(var(--burger-width)/4.5)); */
    z-index: 15;
}
.float-btn .line:nth-child(1), header .container .sidebar-btn .line:nth-child(1){
    transform-origin: top left;
    z-index: 15;

}
.float-btn .line:nth-child(3), header .container .sidebar-btn .line:nth-child(3){
    z-index: 15;
    transform-origin: bottom left;
}
.float-btn img {
    z-index: 199;
    filter: brightness(0%);
    mix-blend-mode: initial !important;
}
header .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem;
    z-index: 100;
    background: radial-gradient(circle at bottom right, var(--bg),var(--bg));
    width: 25vw;
    height: 100vh;
    transform: translateX(100%);
    z-index: 100;
}
header .sidebar ul {
    list-style-type: none;
    margin-top: 6rem;
}
header .sidebar li {
    font-size: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    transition: .4s ease;
    border-radius: 5px;
}
header .sidebar li:hover {
    background-color: rgba(255, 255, 255, 0.02);
    padding: 1.5rem 2rem;
}
header .sidebar a {
    text-decoration: none;
    color: var(--font);
}
header .sidebar img {
    width: 150%;
    position: absolute;
    bottom: -12rem;
    pointer-events: none;
    right: -8rem;
    opacity: .3;
    transform: rotate(45deg);
}
::selection {
    background: #f2106a43;
}
@media (max-width:1200px) and (min-height:601px){
    header .container .logo {
        width: 19.5vw;
    }
    header .sidebar {
        width: 40dvw;
    }
}
@media (max-width:768px){
    header .container .logo {
        width: 23.5vw !important;
    }
}
@media (max-width:600px){
    header .sidebar {
        width: 100vw;
    }
    header .container .logo {
        width: 43.5vw !important;
    }
  
}
/* 

.cursor {
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    opacity: .2;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid white;
    border-radius: 25.5px;
    z-index: 300;
    padding: 0 1rem;
    pointer-events: none;
    mix-blend-mode: difference;
    
}
.cursor p {
    text-transform: uppercase;
    opacity: 0;
}
.cursor-dot {
    width: 12px;
    height: 12px;
    position: absolute;
    pointer-events: none;
    display: block;
    top: 0;
    left: 0;
    z-index: 300;
    background: var(--font);
    border-radius: 50%;
    animation-fill-mode: backwards;
    mix-blend-mode: difference;
} */
@media (pointer: coarse) and (hover: none) {
    .cursor {
        display: none;
    }
    .cursor-dot {
        display: none;
    }
  }
.loading-swiper {
    height: 100px;
    overflow: hidden;
}
.loading-swiper .swiper-wrapper {
    height: 200px;
}
.loading-swiper .swiper-wrapper .swiper-slide {
    height: 200px;
}
.pattern-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -1;
    opacity: 0.05;
}
.pattern-container::after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(circle at bottom right, transparent,var(--bg));
    content: '';
}
::-webkit-scrollbar {
    display: none;
}
.float-btn {
    position: fixed;
    bottom: 4rem;
    left: 4rem;
    /* mix-blend-mode: difference; */
    width: 55px;
    height: 55px;
    opacity: 0;
    pointer-events: none;
    top: initial;
    background: var(--font);
    border: none;
}
.float-btn .dot{
    /* background: var(--bg); */
    /* background: red; */
    mix-blend-mode: difference;
}
.float-btn .path {
    display: none;
}
.float-btn svg * {
    stroke: var(--bg);
}
@media (max-width:600px){
    .float-btn {
        left: 2rem;
        bottom: 2rem;
    }
}
.scrollbar {
    width: 2px;
    height: 80vh;
    display: block;
    position: fixed !important;
    /* top: 0; */
    /* bottom: 0; */
    margin: auto;
    top: 0;
    bottom: 0;
    mix-blend-mode: difference;
    right: calc(var(--container)/2);
    background-color: rgba(255, 255, 255, 0.17);
    z-index: 110;
}
.scrollbar .thumb {
    /* position: absolute; */
    top: 0;
    left: 0;
    height: 0%;
    background-color:var(--font);
    width: 100%;
}
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100vw;
    height: 100dvh;
    z-index: 200;
    opacity: 1 !important;
    /* display: none; */
}
.loading-container .sphere-container {
    position: absolute;
    top: 0;
    transform: translate(30%,-50%);
    right: 0;
    width: 50vw;
    z-index: 100;
}
.loading-container .sphere-container img {
    width: 100%;
}
.loading-container:after {
    width: 20vw;
    height: 20vw;
    content: '';
    background: var(--bg-2);
    position: absolute;
    filter: blur(20vw);
    top: 0;
    right: 0;
}
.loading-container .cols-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.loading-container .cols-container .col {
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--bg);
}
.loading-container .content {
    position: fixed;
    width: 20vw;
    text-align: center;
    height: fit-content;
    inset: 0;
    margin: auto;
    z-index: 201;
}
.loading-container .content h1 {
    font-size: 4vw;
    display: flex;
    overflow: hidden;
    /* justify-content: space-between; */
    font-family: main-bold;
    justify-content: center;
}
.loading-container .content .loading-progress {
    height: 40px;
    width: 100%;
    background-color: var(--bg-3);
    border-radius: 4px;
    position: relative;
}
.loading-container .content .loading-progress div {
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    background: linear-gradient(to right, var(--violet), var(--pink), rgb(255, 183, 0));
}
.loading-container .content .loading-progress div:after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(5px);
    border-radius: 4px;
    background: linear-gradient(to right, var(--violet), var(--pink), rgb(255, 183, 0));
    content: '';
}
.loading-container .content .loading-swiper {
    width: 2.5vw;
}
@media (max-width:1200px) and (min-height:601px){
    .loading-container .content {
        width: 50vw;
    }
    .loading-container .content h1 {
        font-size: 7vw;
    }
    .loading-container .content .loading-swiper {
        width: 4.5vw;
    }
}
@media (max-width:600px){
    .loading-container .cols-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .loading-container .cols-container .col:nth-child(1){
        display: none;
    }
    .loading-container .content {
        width: 80vw;
    }
    .loading-container .content h1 {
        font-size: 15vw;
    }
    .loading-container .content .loading-swiper {
        width: 9.5vw;
    }
}
@media (max-width:1200px){
    header .container .logo {
    width: 19.5vw;
    }
    header .sidebar {
        width: 40dvw;
    }
    .loading-container .content {
        width: 50vw;
    }
    .loading-container .content h1 {
        font-size: 7vw;
    }
    .loading-container .content .loading-swiper {
        width: 4.5vw;
    }
}
@media (max-width:600px) {
    :root {
    --container: 1rem;
    --paragraph: 5vw;
    }
    .cursor {
        display: none !important;
    }
    .cursor-dot {
        display: none !important;
    }
    header .container .logo {
        width: 35.5vw;
    }
    header .container .logo h3 {
        font-size: .6rem;
    }
    header .container .logo .titles img {
        width: 60%;
    }
    header .sidebar {
        width: 100vw;
    }
    .float-btn {
        left: 2rem;
        bottom: 2rem;
    }
    .loading-container .cols-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .loading-container .cols-container .col:first-child {
        display: none;
    }
    .loading-container .content {
        width: 80vw;
    }
    .loading-container .content h1 {
        font-size: 15vw;
    }
    .loading-container .content .loading-swiper {
        width: 9.5vw;
    }
}
footer {
    text-align: center;
    mix-blend-mode: difference;
    padding: 5rem var(--container);
    /* padding-bottom: 0; */
    color: var(--font);
}
#home .hero {
    position: relative;
    height: 100dvh;
}
#home .hero .sphere {
    width: 70vw;
    transform: rotate(95deg);
    height: 70vw;
    display: block;
    position: absolute;
    top: -35vw;
    left: -25vw;
    z-index: -1;
}
#home .hero .sphere img {
    width: 100%;
}
#home .hero .desc {
    position: absolute;
    bottom: 0rem;
    top: 0;
    margin: auto;
    height: fit-content;
    left: var(--container);
}
:root {
    --job-title-size:8.3vw;
    --hero-title-size:7vw;
}
#home .hero .desc h1 {
    font-size: var(--hero-title-size);
    font-family: main-semibold;
    z-index: 10;
    line-height:  var(--hero-title-size);
    text-transform: uppercase;
    transform: translateX(-.3rem);

}
.ar #home .hero .desc h1 {
    line-height:  calc(var(--hero-title-size) * 1.2) !important;
}
#home .hero .desc p {
    text-align: right;
    font-size:2rem;
    opacity: .8;
    padding-right: 10rem;
}
#home .hero .horse-canvas-container {
    overflow-x: hidden ;
    overflow-y: visible !important ;
    width: 100vw;
    position: absolute;
    top: -25%;
    pointer-events: none;
    left: 0;
    height: 110vh;
}
#home .hero #horse-status {
    width: 100vw !important;
    height: 100vh !important;
    display: block;
    position: absolute;
    /* transform:  rotate(-40deg); */
    top: 4rem;
    /* display: none; */
    pointer-events: none;
    right: -45rem;
}
#home .hero .glows {
    display: block;
    position: absolute;
}
#home .hero .glow-1 {
    top: -10rem;
    right: 0;
    background: var(--pink);
    width: 40vw;
    filter: blur(20vw);
    height: 10vw;
}
#home .hero .glow-2 {
    bottom: 0;
    left: 0;
    background: var(--yellow);
    width: 15vw;
    filter: blur(20vw);
    height: 15vw;
}
#home .hero .jobs-titles {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.ar .jobs-titles {
    margin-left: auto !important;
    justify-content: end !important;
    margin-top: 2rem;
    transform: translateX(-.5rem);
}
#home .hero .jobs-titles .dot {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--font);
    opacity: .2;
    border-radius: 50%;
    opacity: 0;
}
#home .hero .jobs-titles .single-job {
    overflow: hidden;
}
#home .hero .jobs-titles h3 {
    font-weight: 100;
    opacity: .8;
    transform: translateY(100%);
}
@media (max-width:1200px) and (min-height:601px){
    #home .hero {
        height: 80vh;
    }
    #home .hero #horse-status {
        right: -40%;
        top: -8rem;
    }
    #home .hero .sphere {
        width: 95vw;
    }
    #home .hero p {
        text-align: start !important;
    }
    :root {
        --hero-title-size: 9vw
    }
}
@media(max-width:768px){
    #home .hero .jobs-titles {
        gap: .5rem;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, .096);
        flex-direction: column;
        align-items: start;
    }
    .ar #home .hero .jobs-titles {
        align-items: end;
    }
    
    .ar #home .hero .desc {
        margin-left: 3rem;
    }
    #home .hero .jobs-titles .dot {
        display: none
    }
 
}
@media (max-width:992px){

     #home .hero .sphere {
        width: 60vw;
        transform: scale(1.6);
     }
}
@media (max-width:768px){
    :root {
        --hero-title-size: 7vw
    }
}
@media (max-width:600px){
    :root {
        --hero-title-size: 11vw
    }

    #home .hero #horse-status {
        /* display: none !important; */
        right: -5rem ;
    }
    #home .hero {
        height: 100dvh;
    }
    #home .hero .desc {
        transform: translateY(4rem);
    }
    #home .hero .desc p {
        padding-right: 0;
        font-size: 1.5rem;
        line-height: 1.7rem;
        margin-top: .5rem;
    }
}
#home .job-desc-section {
    height: 140dvh;
    overflow: hidden;
    position: relative;
    /* background: radial-gradient(circle at bottom right, var(--bg-2), #020202); */
}
#home .job-desc-section:after {
    width: 20vw;
    height: 20vw;
    display: block;
    position: absolute;
    background-color: var(--pink);
    content: '';
    bottom: 0;
    right: 0;
    filter: blur(20vw);
    opacity: .5;
}
#home .job-desc-section .pattern-container {
    z-index: 50;
}
#home .job-desc-section .pattern-container .blend {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent, var(--bg));
    display: block;
}
#home .job-desc-section .plus-path  {
    width: 20vw;
    position: absolute;
    top: 100%;
    transform: translateX(30%) translateY(-8%) !important;
}
#home .job-desc-section .row-2 {
    justify-content: end;
    display: flex;
    gap: 2rem;
    position: relative;

    align-items: center;
}
#home .job-desc-section .plus {
    width: 5vw;
    height: 5vw;
    display: block;
    position: relative;
    transform: translateY(3.5rem);
    z-index: 70;
}
#home .job-desc-section .plus div{
    width: 100%;
    height: 20px;
    background-color: var(--font);
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
}
#home .job-desc-section .plus div:nth-child(2){
    transform: rotate(90deg);
}
#home .job-desc-section h1 {
    font-size: var(--job-title-size);
    font-family: main-semibold;
}
#home .job-desc-section .col-2 {
    height: var(--job-title-size);
}
@media (max-width:1200px){
    :root {
        --job-title-size: 10vw
    }
    #home .job-desc-section {
        height:50vh;
    }
    #home .job-desc-section .plus {
        width: 7vw;
        height: 7vw;
    }
    #home .job-desc-section .plus-path  {
        width: 20vw;
        position: absolute;
        top: 100%;
        /* transform: translateX(50%) translateY(-8%); */
        left: -4rem;
    }
}
/* @media (max-width:768px){
    #home .job-desc-section .plus-path  {
        left: 0rem;
    }
    #home .job-desc-section .plus div{
        height: 15px;
    }
} */
#home .about-section {
    background-color: var(--font);
    color: var(--bg);
    font-size: 40px;
    position: relative;
    min-height: 85dvh;
    /* height: fit-content; */
    padding-top: 5rem;
    padding-bottom: 0 !important;
    overflow: hidden;
    z-index: 70;
}
#home .about-section p {
    font-weight: 600;
    opacity: 1 !important;
    font-size: 2dvw;
    padding-top: 0 !important;
}
#home .about-section p span {
    opacity: .6;
}
#home .about-section h1 {
    font-size: var(--title);
}
#home .about-section h1.who{
    text-align: right;
    font-size: calc(var(--title)*4);
    color: var(--bg-2);
    z-index: 20;
    background: linear-gradient(to bottom, var(--pink), var(--bg-2) 50%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ar #home .about-section h1.who{
    text-align: left;
}
#home .about-section #mini-horse {
    width: 40vw;
    height: 40vw;
    display: block;
    z-index: 199;
}
@media (max-width:1280px){
    #home .job-desc-section .plus-path  {
        transform: translateX(40%) translateY(-8%);
    }
}
@media (max-width:992px){
    #home .about-section p {
        font-size: 4vw;
    }
}
@media (max-width:600px){
    #home .about-section p {
        font-size: 5.5vw;
    }
}
#home .horse-parent {
    position: relative;
}
#home .horse-parent  .horse-container {
    position: absolute;
    top: -35rem;
    left: -45rem;
    transform: rotate(50deg);
    z-index: 100;
}
#home .horse-parent  .lines {
    width: 0%;
    height: 1px;
    display: block;
    position: absolute;
    background-color: rgb(255, 255, 255);
    opacity: .1;
    mix-blend-mode: difference;
    z-index: 100;
}
#home .horse-parent  .lines:nth-child(3){
    bottom: 0;
    left: 0;
}
#home .horse-parent  .lines:nth-child(2){
    bottom: 10rem;
    left: 0;
}
#home .horse-parent  .lines:nth-child(1){
    bottom: -5rem;
    left: 15rem;
    width: 1px;
    height: 0%;
}
/* #home .about-section p span {
    margin: 0 .4rem;
} */
@media (max-width:1200px) and (min-height:601px){
    #home .horse-parent  .horse-container {
        position: absolute;
        top: -45rem;
        left: -35rem;
        transform: rotate(60deg) scale(.6);
    }
}
#home .services-section {
    /* height: 100vh; */
    position: relative;
    /* padding-top: 4rem; */
}
#home .services-section::before {
    width: 40vw;
    height: 40vw;
    display: block;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--pink);
    /* background: red; */
    filter: blur(40vw);
    content: '';
    z-index: 1;
    opacity: .3;
}
#home .services-section .content {
    clip-path: polygon(0% 5%, 10% 0%, 90% 0%, 100% 5%, 100% 100%, 0% 100%);
    background: radial-gradient(circle at top center, var(--bg-2),var(--bg));
    z-index: 4;
    padding: var(--container) 0;
}
#home .services-section .content .patterns {
    position: absolute;
    top: 0;
    left: 0;
}
#home .services-section .content .pattern-container {
    position: initial;
}
#home .services-section:after {
    width: 100%;
    height: 300px;
    display: block;
    position: absolute;
    top: -5px;
    z-index: -1;
    left: 0;
    background-color: var(--font);
    content: '';
}
#home .services-section .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    align-items: center;
    z-index: 4;
    /* margin: 4rem 0; */
}
#home .services-section .service-images {
    height: fit-content;
    z-index: 4;


}
#home .services-section .service-images .image {
    height: 80vh;
    margin:4rem 0;
    overflow: hidden;
    clip-path: polygon(0% 0%, 0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
    position: sticky;
    top: 5rem;
}
#home .services-section .service-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    filter:saturate(0)
}
#home .services-section .service-desc-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-around;
    height: 100%;
}
#home .services-section .service-desc h1 {
    font-size: 4.5vw;
    line-height: 4.5vw;
}
#home .services-section .service-desc h1 span {
    background: linear-gradient(to right, var(--violet), var(--pink), var(--yellow));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#home .services-section .service-desc p {
    margin-top: 1rem;
    font-size: var(--paragraph);
    opacity: .8;
}
#home .services-section .service-desc p span {
    font-weight: 600;
}
@media (max-width:1200px) and (min-height:601px){
    #home .services-section .service-images .image {
        height: 30vh;
    }
}
@media (max-width:992px){
    #home .services-section .content {
        background: var(--bg);
        height: 120dvh;
    }
    #home .services-section .container{
        grid-template-columns: 1fr;
    }
    #home .services-section .service-images {
        display: none;
    }
    #home .services-section .service-desc {
        background-color: var(--bg);
        width: 100%;
        margin: 1rem 0;
        padding: 2rem;
        position: relative;
        border-radius: 5px;
        height: 20vh;
    }
    #home .services-section .service-desc:after {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
        transform: scaleY(1.006) scale(1.005);
        border-radius: 5px;
        z-index:-1;
        filter: saturate(0);
        opacity: .5;
        transition: .4s ease;
    }
    #home .services-section .service-desc:hover:after{
        filter: saturate(100%);
        opacity: 1;
    }
}
@media (max-width:768px) {
    #home .services-section .content {
        background: var(--bg);
        height: 140dvh;
    }
}
@media (max-width:600px) {
    #home .services-section {
        padding-top: 3rem;
    }
    #home .services-section .content {
        padding: 5rem 0;
        padding-top: 7rem;
        height: 200dvh;
        clip-path: polygon(100% 5%, 87% 0%, 13% 0%, 0% 5%, 0% 100%, 100% 100%);
    }
    .ar #home .services-section .content {
        height: 170dvh;
    }
        
    #home .services-section .service-desc h1 {
        font-size: 7.5vw;
        line-height: 8vw;
    }
    #home .services-section .service-desc {
        height: fit-content;
    }
}
/* 
#home .pricing-saction {
    padding: 3rem 0;
    background: var(--font);
    color: var(--bg);
    position: relative;
    z-index: 0;
}
#home .pricing-saction .sphere {
    width: 50vw;
    position: absolute;
    inset: 0;
    margin: auto;
    transform: rotate(90deg);
}
#home .pricing-saction .sphere img {
    width: 100%;
}
#home .pricing-saction .pricing-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4rem;
    gap: 2rem;
}
#home .pricing-saction .pricing-container .pricing {
    background: var(--font);
    border-radius: 5px;
    height: fit-content;
    padding: 2rem;
    position: relative;
}
#home .pricing-saction .pricing-container .pricing:after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 5px;
    left: 0;
    content: '';
    background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
    z-index: -3;
    transform: scale(1.005);
}
#home .pricing-saction .pricing-container .pricing::before {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 5px;
    left: 0;
    content: '';
    background: var(--font);
    z-index: -2;
}
#home .pricing-saction .pricing-container .pricing h3 {
    font-family: main-bold;
    opacity: .7;
}
#home .pricing-saction .pricing-container .pricing h1 {
    font-size: 1.3rem;
    font-weight: 100;
    color: rgb(136, 136, 136);
}
#home .pricing-saction .pricing-container .pricing h1 span {
    font-size: 2.4rem;
    background: linear-gradient(to right, var(--violet), var(--pink), var(--yellow));
    background-clip: text;
    font-weight: 700;
    -webkit-text-fill-color: transparent;
}
#home .pricing-saction .tabs-container ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    justify-content: center;
    border-radius: 50px;
    width: fit-content;
    margin: auto;
    position: relative;
    z-index: 10;
    background-color: var(--font);
    padding: .5rem 2rem;
}
#home .pricing-saction .tabs-container ul:after {
    width: 100%;
    border-radius: 50px;
    height: 100%;
    content: '';
    z-index: -1;
    transform: scaleX(1.004) scaleY(1.03);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background:linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
}
#home .pricing-saction .tabs-container ul::before {
    width: 100%;
    border-radius: 50px;
    height: 100%;
    content: '';
    z-index: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background:var(--font);
}
#home .pricing-saction .tabs-container ul li {
    font-size: var(--paragraph);
    padding: 0 1rem;
    opacity: .8;
    z-index: 10;
    text-align: center;
}
#home .pricing-saction .tabs-container ul li.active {
    opacity: 1;
    color: var(--pink);
}
#home .pricing-saction .pricing-container .pricing ul {
    list-style: none;
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.088);
    padding-top: 1rem;
}
#home .pricing-saction .pricing-container .pricing ul li {
    margin: .6rem 0;
    display: flex;
    gap: .75rem;
    font-size: var(--paragraph);
}
#home .pricing-saction .pricing-container .pricing ul li div:nth-child(1){
    background:linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
    width: 16px;
    height: 16px;
    display: flex;
    border-radius: 50%;
    color: var(--font);
    margin-top: 8px;
    align-items: center;
    justify-content: center;
}

@media (max-width:1200px){
    #home .pricing-saction .pricing-container {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
}
@media (max-width:992px){
    #home .pricing-saction .sphere {
        inset: initial;
        left: 5rem;
        top: 15rem;
        width:  70vw;
    }
    #home .pricing-saction .pricing-container .pricing ul li div:nth-child(1){
        width: 20px;
        height: 20px;
    }
}
@media (max-width:600px){
    #home .pricing-saction .pricing-container .pricing ul li div:nth-child(1){
        width: 23px;
        height: 23px;
    }
}

 */
#home .quote-section {
    overflow: hidden;
    height: 100dvh;
    position: relative;
}
#home .quote-section .pattern-container {
    opacity: .14;
}
#home .quote-section .container {
    position: relative;
}
#home .quote-section .container .sphere-container {
    position: absolute;
    top: -20vw;
    z-index: -1;
    pointer-events: none;
    width: 60vw;
    left: -20vw;
}
#home .quote-section .container .sphere-container img {
    width: 100%;
}
#home .quote-section canvas {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 4;
    pointer-events: none;
}
#home .quote-section .desc {
    margin: 5rem 0;
    z-index: 0;
}
#home .quote-section .desc .qoute-container {
    position: relative;
    width: fit-content;
    margin-left: auto;
}
#home .quote-section .desc h2{
    text-align: right;
    font-size: 3.3vw;
    font-family: main;
    font-weight: 400;
    opacity: .5;
    vertical-align:top;
    height: 4.3vw;
}
#home .quote-section .desc .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 4.3vw;
    margin: auto;
    width: 0;
    overflow: hidden;
}
#home .quote-section .desc h2.text-2 {
    opacity: 1;
    text-wrap: nowrap;
}
:root  {
    --quote-section-title:15.8vw
}
#home .quote-section .desc h1{
    font-size: var(--quote-section-title);
    height: calc(var(--quote-section-title) + 5vw) !important;
    font-family: main-semibold;
    overflow: hidden;
}
#home .quote-section .desc h1 .content {
    display: flex;

}
#home .quote-section .desc h1 .content div {
    transform: translateY(100%);
}
@media (max-width:1200px) and (min-height:601px){
    :root  {
        --quote-section-title:16.8vw
    }
    #home .quote-section {
        /* height: 50vh; */
    }


}
@media (max-width:992px){
    :root  {
        --quote-section-title:18vw
    }
       
    #home .about-section h1:not(.who) {
        font-size: calc(var(--title) * 1.5) !important;
    }

}
@media (max-width:600px){
    #home .quote-section .desc h2{
        font-size: 4.3vw;
        font-weight: 100;
    } 
    #home .about-section {
        height: 60dvh !important;
        min-height: 60dvh !important;
        max-height: 60dvh !important;
        overflow: hidden;
    }
    #home .about-section h1:not(.who) {
        font-size: calc(var(--title) * 2) !important;
    }
    #home .quote-section canvas  {
        right: 0 !important;
        width: 100dvw !important;
        position: absolute;
    }
}
.contact-section {
    padding: 3rem 0;
    position: relative;
    height: 80vh;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.216);
}
.contact-section .pattern-container {
    opacity: .1;
}
.contact-section:after {
    width: 100%;
    height: 40%;
    background-color: var(--font);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
}
.contact-section ul {
    list-style: none;
    width: fit-content;
    text-align: center;
    margin: auto;
}
.contact-section ul :is(a, p) {
    text-decoration: none;
    color: var(--font);
    font-size: var(--paragraph);
    text-transform: uppercase !important;
}
.contact-section ul a:hover {
    text-decoration: underline;
}
.contact-section ul.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}
.contact-section .title {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2rem;
    font-size: 10vw;
    justify-content: center;
    margin: auto;
    mix-blend-mode: difference !important;
}
.contact-section .title svg {
    width: 7vw !important;
}
.contact-section .sphere {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 55vw;
    transform: translateY(80%);
}
.contact-section .sphere img {
    width: 100%;
}
@media (max-width:1200px) and (min-height:601px){
    .contact-section {
        height: 30dvh;
    }

}
@media (max-width:600px) {
    .contact-section {
        height: 50dvh;
    }
    .contact-section .title {
        font-size: 15vw;
    }

}
*, body {
    margin: 0;
    padding: 0;
}
.blur, header {
    z-index: 100;
    width: 100%;
    left: 0;
    top: 0;
}
:root {
    --bg: #090909;
    --bg-2: #1B1B1B;
    --bg-3: hsl(0,  0%,  15%);
    --font: #f2f2f2;
    --container: 10rem;
    --title: 4vw;
    --paragraph: 1.1vw;
    --burger-width: 20px;
    --burger-height: 15px;
    --light-blue: #05e2f9;
    --blue: #2a3fd7;
    --violet: #bc54d2;
    --pink: #f2106a;
    --orange: #f5282c;
    --yellow: #ebd745;
}
@font-face {
    font-family: main;
    src: url(/assets/IBMPlexSansArabic-Regular-DsN3Thpy.ttf) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: main-semibold;
    src: url(/assets/IBMPlexSansArabic-SemiBold-BPBc9WjB.ttf) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: main-bold;
    src: url(/assets/IBMPlexSansArabic-Bold-BodNR7--.ttf) format("woff2");
    font-display: swap;
}
body {
    color: var(--font);
    background: var(--bg);
    font-family: main;
    overflow-x: hidden;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    cursor: none;
}
.container {
    margin: 0 var(--container);
}
.title {
    font-family: main-semibold;
    font-size: var(--title);
}
.paragraph {
    font-family: main;
    font-size: var(--paragraph);
}
@media (max-width:1200px) and (min-height:601px) {
    :root {
    --container: 5rem;
    --paragraph: 2.4vw;
}
}
@media (max-width:992px) {
    :root {
    --paragraph: 2.6vw;
}
}
@media (max-width:768px) {
    :root {
    --container: 2.5rem;
}
}
header {
    padding: 1.4rem 0;
    position: absolute;
    background-color: #ffffff0b;
}
.blur {
    -webkit-backdrop-filter: blur(45px);
    backdrop-filter: blur(45px);
    background-color: #1a1a1a24;
    height: 100%;
    display: block;
    position: fixed;
    opacity: 0;
    content: "";
    pointer-events: none;
}
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .container .logo {
    width: 11.5vw;
}
header .container .logo img {
    width: 100%;
    mix-blend-mode: difference;
}
header .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem;
    background: radial-gradient(circle at bottom right, var(--bg), var(--bg));
    width: 25vw;
    height: 100vh;
    transform: translate(100%);
    z-index: 100;
}
header .sidebar ul {
    list-style-type: none;
    margin-top: 6rem;
}
header .sidebar li {
    font-size: 1.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    transition: .4s;
    border-radius: 5px;
}
header .sidebar li:hover {
    background-color: #ffffff05;
    padding: 1.5rem 2rem;
}
header .sidebar a {
    text-decoration: none;
    color: var(--font);
}
header .sidebar img {
    width: 150%;
    position: absolute;
    bottom: -12rem;
    pointer-events: none;
    right: -8rem;
    opacity: .3;
    transform: rotate(45deg);
}
::selection {
    background: #f2106a43;
}
.float-btn {
    background: var(--font);
    mix-blend-mode: difference;
    pointer-events: none;
}
@media (pointer:coarse) and (hover:none) {
}
.loading-swiper {
    height: 100px;
    overflow: hidden;
}
.loading-swiper .swiper-wrapper, .loading-swiper .swiper-wrapper .swiper-slide {
    height: 200px;
}
.pattern-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -1;
    opacity: .05;
}
.pattern-container:after {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom right, transparent, var(--bg));
    content: ""}
::-webkit-scrollbar {
    display: none;
}
.float-btn {
    position: fixed;
    bottom: 4rem;
    left: 4rem;
    width: 55px;
    height: 55px;
    opacity: 0;
    top: initial;
    border: none;
}
.float-btn .dot {
    mix-blend-mode: difference;
}
.float-btn .path {
    display: none;
}
.float-btn svg * {
    stroke: var(--bg);
}
.scrollbar {
    width: 2px;
    height: 80vh;
    display: block;
    position: fixed!important;
    margin: auto;
    top: 0;
    bottom: 0;
    mix-blend-mode: difference;
    right: calc(var(--container)/2);
    background-color: #ffffff2b;
    z-index: 110;
}
.scrollbar .thumb {
    top: 0;
    left: 0;
    height: 0%;
    background-color: var(--font);
    width: 100%}
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100vw;
    height: 100dvh;
    z-index: 200;
    opacity: 1!important;
}
.loading-container .sphere-container {
    position: absolute;
    top: 0;
    transform: translate(30%, -50%);
    right: 0;
    width: 50vw;
    z-index: 100;
}
.loading-container .sphere-container img {
    width: 100%}
.loading-container:after {
    width: 20vw;
    height: 20vw;
    content: "";
    background: var(--bg-2);
    position: absolute;
    filter: blur(20vw);
    top: 0;
    right: 0;
}
.loading-container .cols-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.loading-container .cols-container .col {
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--bg);
}
.loading-container .content {
    position: fixed;
    width: 20vw;
    text-align: center;
    height: fit-content;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 201;
}
.loading-container .content h1 {
    font-size: 4vw;
    display: flex;
    overflow: hidden;
    font-family: main-bold;
    justify-content: center;
}
.loading-container .content .loading-progress {
    height: 40px;
    width: 100%;
    background-color: var(--bg-3);
    border-radius: 4px;
    position: relative;
}
.loading-container .content .loading-progress div {
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    background: linear-gradient(to right, var(--violet), var(--pink), #ffb700);
}
.loading-container .content .loading-progress div:after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(5px);
    border-radius: 4px;
    background: linear-gradient(to right, var(--violet), var(--pink), #ffb700);
    content: ""}
.loading-container .content .loading-swiper {
    width: 2.5vw;
}
@media (max-width:1200px){
    header .container .logo {
    width: 19.5vw;
    }
    header .sidebar {
        width: 40dvw;
    }
    .loading-container .content {
        width: 50vw;
    }
    .loading-container .content h1 {
        font-size: 7vw;
    }
    .loading-container .content .loading-swiper {
        width: 4.5vw;
    }
}
@media (max-width:600px) {
    :root {
    --container: 1rem;
    --paragraph: 5vw;
    }
    header .container .logo {
        width: 35.5vw;
    }
    header .sidebar {
        width: 100vw;
    }
    .float-btn {
        left: 2rem;
        bottom: 2rem;
    }
    .loading-container .cols-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .loading-container .cols-container .col:first-child {
        display: none;
    }
    .loading-container .content {
        width: 80vw;
    }
    .loading-container .content h1 {
        font-size: 15vw;
    }
    .loading-container .content .loading-swiper {
        width: 9.5vw;
    }
}
#home .hero #horse-status, #home .hero .glows, #home .hero .sphere, #home .job-desc-section:after {
    display: block;
    position: absolute;
}
#home .pricing-saction .pricing-container .pricing h1 span, #home .services-section .service-desc h1 span {
    background: linear-gradient(to right, var(--violet), var(--pink), var(--yellow));
    -webkit-text-fill-color: transparent;
}
#home .hero {
    position: relative;
    min-height: 120dvh;
}
#home .hero .sphere {
    width: 70vw;
    transform: rotate(95deg);
    height: 70vw;
    top: -35vw;
    left: -25vw;
    z-index: -1;
}
#home .hero .sphere img, #home .pricing-saction .sphere img, #home .quote-section .container .sphere-container img, .contact-section .sphere img {
    width: 100%}
#home .hero .desc {
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    height: fit-content;
    left: var(--container);
}
:root {
    --job-title-size: 8.3vw;
    --hero-title-size: 7vw;
    --quote-section-title: 15.8vw;
}
#home .hero .desc h1 {
    font-size: var(--hero-title-size);
    font-family: main-semibold;
    z-index: 10;
    line-height: calc(var(--hero-title-size));
}
.ar #home .hero .desc h1 {
    line-height: calc(var(--hero-title-size) * 1.5);

}
#home .hero .desc p {
    text-align: right;
    font-size: 2rem;
    opacity: .8;
    padding-right: 10rem;
}
.ar #home .hero .desc p {
    padding-right: 0rem;
    margin-left: auto;
    text-align: right !important;

}
#home .hero .horse-canvas-container {
    overflow-x: hidden;
    overflow-y: visible!important;
    width: 100vw;
    position: absolute;
    top: -25%;
    pointer-events: none;
    left: 0;
    height: 110vh;
}
#home .hero #horse-status {
    width: 100vw!important;
    height: 100vh!important;
    top: 4rem;
    pointer-events: none;
    right: -45rem;
}
#home .hero .glow-1 {
    top: -10rem;
    right: 0;
    background: var(--pink);
    width: 40vw;
    filter: blur(20vw);
    height: 10vw;
}
#home .hero .glow-2 {
    bottom: 0;
    left: 0;
    background: var(--yellow);
    width: 15vw;
    filter: blur(20vw);
    height: 15vw;
}
@media (max-width:1200px) and (min-height:601px) {
    #home .hero {
    height: 80vh;
}
@media (max-width:768px) and (min-height:601px) {
    #home .hero {
    min-height: 60dvh;
    }
    .ar #home .hero .desc {
        margin-right: var(--container);
    }
}
#home .hero #horse-status {
    right: -40%;
    top: -8rem;
}
#home .hero .sphere {
    width: 95vw;
}
#home .hero p {
    text-align: start!important;
}
:root {
    --hero-title-size: 9vw;
}
}
#home .job-desc-section {
    height: 140dvh;
    overflow: hidden;
    position: relative;
}
#home .job-desc-section:after {
    width: 20vw;
    height: 20vw;
    background-color: var(--pink);
    content: "";
    bottom: 0;
    right: 0;
    filter: blur(20vw);
    opacity: .5;
}
#home .job-desc-section .pattern-container {
    z-index: 50;
}
#home .job-desc-section .pattern-container .blend {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent, var(--bg));
    display: block;
}
#home .job-desc-section .plus-path {
    width: 20vw;
    position: absolute;
    top: 100%;
    transform: translate(50%) translateY(-8%);
    left: 0;
}
#home .job-desc-section .row-2 {
    justify-content: end;
    display: flex;
    gap: 2rem;
    position: relative;
    align-items: center;
}
#home .job-desc-section .plus {
    width: 5vw;
    height: 5vw;
    display: block;
    position: relative;
    transform: translateY(3.5rem) ;
    z-index: 70;
}
#home .job-desc-section .plus div {
    width: 100%;
    height: 20px;
    background-color: var(--font);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
#home .job-desc-section .plus div:nth-child(2) {
    transform: rotate(90deg);
}
#home .job-desc-section h1 {
    font-size: var(--job-title-size);
    font-family: main-semibold;
}
#home .job-desc-section .col-2 {
    height: var(--job-title-size);
}
@media (max-width:1200px){
    :root {
    --job-title-size: 10vw;
    }
    #home .job-desc-section {
        height: 50vh;
    }
    #home .job-desc-section .plus {
        width: 7vw;
        height: 7vw;
    }
    #home .job-desc-section .plus-path {
        width: 20vw;
        position: absolute;
        top: 100%;
        transform: translate(50%) translateY(-8%);
        left: -4rem;
        }
}
#home .about-section {
        background-color: var(--font);
        color: var(--bg);
        font-size: 40px;
        position: relative;
        height: 70dvh;
        margin-top: -10%;
        overflow: hidden;
        z-index: 70;
    }
#home .about-section p {
        font-weight: 600;
        opacity: 0;
        padding-top: 4rem;
    }
#home .about-section p span {
        opacity: .6;
    }
#home .about-section #mini-horse {
        width: 40vw;
        height: 40vw;
        display: block;
        z-index: 199;
    }
/* @media (max-width:768px){
    #home .job-desc-section .plus-path {
        transform: translate(40%) translateY(-8%) !important;
        left: -3rem !important;
    }
} */
/* @media (max-width:1280px) {
    #home .job-desc-section .plus-path {
        transform: translate(0%) translateY(-8%);
    }
} */
#home .horse-parent, #home .quote-section .container, #home .services-section {
    position: relative;
}
#home .horse-parent .horse-container {
    position: absolute;
    top: -35rem;
    left: -45rem;
    transform: rotate(50deg);
    z-index: 100;
}
#home .horse-parent .lines {
    width: 0%;
    height: 1px;
    display: block;
    position: absolute;
    background-color: #fff;
    opacity: .1;
    mix-blend-mode: difference;
    z-index: 100;
}
#home .horse-parent .lines:nth-child(3) {
    bottom: 0;
    left: 0;
}
#home .horse-parent .lines:nth-child(2) {
    bottom: 10rem;
    left: 0;
}
#home .horse-parent .lines:first-child {
    bottom: -5rem;
    left: 15rem;
    width: 1px;
    height: 0%}
#home .services-section:before {
    width: 40vw;
    height: 40vw;
    display: block;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--pink);
    filter: blur(40vw);
    content: "";
    z-index: 1;
    opacity: .3;
}
#home .services-section .content {
    clip-path: polygon(0% 5%, 10% 0%, 90% 0%, 100% 5%, 100% 100%, 0% 100%);
    background: radial-gradient(circle at top center, var(--bg-2), var(--bg));
    z-index: 4;
    
    padding: var(--container) 0;
}
#home .services-section .content .patterns {
    position: absolute;
    top: 0;
    left: 0;
}
#home .services-section .content .pattern-container {
    position: initial;
}
#home .services-section:after {
    width: 100%;
    height: 300px;
    display: block;
    position: absolute;
    top: -5px;
    z-index: -1;
    left: 0;
    background-color: var(--font);
    content: ""}
#home .services-section .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    align-items: center;
    z-index: 4;
}
#home .services-section .service-images {
    height: fit-content;
    z-index: 4;
}
#home .services-section .service-images .image {
    height: 80vh;
    margin: 4rem 0;
    overflow: hidden;
    clip-path: polygon(0% 0%, 0% 0%, 85% 0%, 100% 15%, 100% 100%, 0% 100%);
    position: sticky;
    top: 5rem;
}
#home .services-section .service-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    filter: saturate(0);
}
#home .services-section .service-desc-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%
}
#home .services-section .service-desc h1 {
    font-size: 4.5vw;
    line-height: 4.5vw;
}
#home .services-section .service-desc h1 span {
    -webkit-background-clip: text;
    background-clip: text;
}
#home .services-section .service-desc p {
    margin-top: 1rem;
    font-size: var(--paragraph);
    opacity: .8;
}
#home .services-section .service-desc p span {
    font-weight: 600;
}
/* #home .pricing-saction {
    padding: 3rem 0;
    background: var(--font);
    color: var(--bg);
    position: relative;
    z-index: 0;
}
#home .pricing-saction .sphere {
    width: 50vw;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: rotate(90deg);
}
#home .pricing-saction .pricing-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4rem;
    gap: 2rem;
}
#home .pricing-saction .pricing-container .pricing {
    background: var(--font);
    border-radius: 5px;
    height: fit-content;
    padding: 2rem;
    position: relative;
}
#home .pricing-saction .pricing-container .pricing:after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 5px;
    left: 0;
    content: "";
    background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
    z-index: -3;
    transform: scale(1.005);
}
#home .pricing-saction .pricing-container .pricing:before {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    border-radius: 5px;
    left: 0;
    content: "";
    background: var(--font);
    z-index: -2;
}


#home .pricing-saction .pricing-container .pricing h3 {
    font-family: main-bold;
    opacity: .7;
}
#home .pricing-saction .pricing-container .pricing h1 {
    font-size: 1.3rem;
    font-weight: 100;
    color: #888;
}
#home .pricing-saction .pricing-container .pricing h1 span {
    font-size: 2.4rem;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 700;
}
#home .pricing-saction .tabs-container ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    justify-content: center;
    border-radius: 50px;
    width: fit-content;
    margin: auto;
    position: relative;
    z-index: 10;
    background-color: var(--font);
    padding: .5rem 2rem;
}
#home .pricing-saction .tabs-container ul:after {
    width: 100%;
    border-radius: 50px;
    height: 100%;
    content: "";
    z-index: -1;
    transform: scaleX(1.004) scaleY(1.03);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
}

#home .pricing-saction .tabs-container ul:before {
    width: 100%;
    border-radius: 50px;
    height: 100%;
    content: "";
    z-index: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--font);
}
#home .pricing-saction .tabs-container ul li {
    font-size: var(--paragraph);
    padding: 0 1rem;
    opacity: .8;
    z-index: 10;
    text-align: center;
}
#home .pricing-saction .tabs-container ul li.active {
    opacity: 1;
    color: var(--pink);
}
#home .pricing-saction .pricing-container .pricing ul {
    list-style: none;
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .088);
    padding-top: 1rem;
}
#home .pricing-saction .pricing-container .pricing ul li {
    margin: .6rem 0;
    display: flex;
    gap: .75rem;
    font-size: var(--paragraph);
}
#home .pricing-saction .pricing-container .pricing ul li div:first-child {
    background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
    width: 16px;
    height: 16px;
    display: flex;
    border-radius: 50%;
    color: var(--font);
    margin-top: 8px;
    align-items: center;
    justify-content: center;
}
.ar #home .pricing-saction .pricing-container .pricing ul li {
    flex-direction: row-reverse;
} */
@media (max-width:1200px) {
    #home .pricing-saction .pricing-container {
    grid-template-columns: 1fr;
    gap: 5rem;
}
}
@media (max-width:992px) {
    #home .hero .sphere {
    width: 60vw;
    transform: scale(1.6);
}
#home .about-section p {
    font-size: 4vw;
}
#home .services-section .content {
    background: var(--bg);
}
#home .services-section .container {
    grid-template-columns: 1fr;
}
#home .services-section .service-images {
    display: none;
}
#home .services-section .service-desc {
    background-color: var(--bg);
    width: 100%;
    margin: 1rem 0;
    padding: 2rem;
    position: relative;
    border-radius: 5px;
    height: 20vh;
}
#home .services-section .service-desc:after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: linear-gradient(to right bottom, var(--violet), var(--pink), var(--yellow));
    transform: scaleY(1.006) scale(1.005);
    border-radius: 5px;
    z-index: -1;
    filter: saturate(0);
    opacity: .5;
    transition: .4s;
}
#home .services-section .service-desc:hover:after {
    filter: saturate(100%);
    opacity: 1;
}
#home .pricing-saction .sphere {
    inset: initial;
    left: 5rem;
    top: 15rem;
    width: 70vw;
}
#home .pricing-saction .pricing-container .pricing ul li div:first-child {
    width: 20px;
    height: 20px;
}
}
#home .quote-section {
    overflow: hidden;
    height: 100dvh;
    position: relative;
    border-top: 1px solid var(--bg-3);
}
#home .quote-section .pattern-container {
    opacity: .14;
    height: 100dvh;
}
#home .quote-section .container .sphere-container {
    position: absolute;
    top: -20vw;
    z-index: -1;
    pointer-events: none;
    width: 60vw;
    left: -20vw;
}
#home .quote-section canvas {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 4;
    /* pointer-events: none; */
}
#home .quote-section .desc {
    margin: 5rem 0;
    z-index: 0;
}
#home .quote-section .desc .qoute-container {
    position: relative;
    width: fit-content;
    margin-left: auto;
}
#home .quote-section .desc h2 {
    text-align: right;
    font-size: 3.3vw;
    font-family: main;
    font-weight: 400;
    opacity: .5;
    vertical-align: top;
    height: 3.3vw;
}
#home .quote-section .desc .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 4.3vw;
    margin: auto;
    width: 0;
    overflow: hidden;
}
#home .quote-section .desc h2.text-2 {
    opacity: 1;
    text-wrap: nowrap;
}
#home .quote-section .desc h1 {
    font-size: var(--quote-section-title);
    height: calc(var(--quote-section-title) + 2vw);
    font-family: main-semibold;
    overflow: hidden;
}
#home .quote-section .desc h1 .content {
    display: flex;
}
#home .quote-section .desc h1 .content div {
    transform: translateY(100%);
}
@media (max-width:1200px) and (min-height:601px) {
    #home .horse-parent .horse-container {
    position: absolute;
    top: -45rem;
    left: -35rem;
    transform: rotate(60deg) scale(.6);
}
#home .services-section .service-images .image {
    height: 30vh;
}
:root {
    --quote-section-title: 16.8vw;
}
#home .quote-section {
    height: 50vh;
}
}
@media (max-width:768px) {
    :root {
    --hero-title-size: 7vw;
    --quote-section-title: 18vw;
    }
    #home .job-desc-section .plus-path {
        left: 0;
    }
    #home .job-desc-section .plus div {
        height: 15px;
    }
}
.contact-section {
    padding: 3rem 0;
    position: relative;
    height: 80vh;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .216);
}
.contact-section .pattern-container {
    opacity: .1;
    height: 100%;
}
.contact-section .pattern-container img {
    height: 100% ;
}
.contact-section:after {
    width: 100%;
    height: 40%;
    background-color: var(--font);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: ""}
.contact-section ul {
    list-style: none;
    width: fit-content;
    text-align: center;
    mix-blend-mode: difference;
    margin: auto;
}
.contact-section ul a {
    text-decoration: none;
    color: var(--font);
    font-size: var(--paragraph);
    text-transform: uppercase;
}
.contact-section ul a:hover {
    text-decoration: underline;
}
.contact-section ul.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}
.contact-section .title {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2rem;
    font-size: 10vw;
    justify-content: center;
    margin: auto;
    mix-blend-mode: difference!important;
}
.contact-section .title svg {
    width: 7vw!important;
}
.contact-section .sphere {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 55vw;
    transform: translateY(80%);
}
@media (max-width:1200px) and (min-height:601px) {
    .contact-section {
        height: 30dvh;  
    }
}
@media (max-width:600px) {
    :root {
    --hero-title-size: 11vw;
    --job-title-size: 12vw;
    }
    #home .hero #horse-status {
        right: -5rem;
    }
    #home .hero {
        height: 100dvh;
    }
    #home .hero .desc {
        transform: translateY(4rem);
    }
    #home .hero .desc p {
        padding-right: 0;
        font-size: 1.5rem;
        line-height: 1.7rem;
        margin-top: .5rem;
    }
    #home .job-desc-section .plus-path {
        left: -3rem;
    }
    #home .job-desc-section .plus {
        width: 11vw;
        height: 11vw;
    }
    #home .job-desc-section .plus div {
        height: 26px;
        width: 10px;
    }
    #home .job-desc-section .plus div {
        transform: rotate(90deg) ;
    }
    #home .job-desc-section .plus div:nth-child(2){
        transform: rotate(0deg);
    }
    
    #home .about-section p {
        font-size: 5.5vw;
    }
    #home .services-section {
        padding-top: 3rem;
    }
    #home .services-section .content {
        padding: 7rem 0 5rem;
        clip-path: polygon(100% 5%, 87% 0%, 13% 0%, 0% 5%, 0% 100%, 100% 100%);
    }
    #home .services-section .service-desc h1 {
        font-size: 7.5vw;
        line-height: 8vw;
    }
    #home .services-section .service-desc {
        height: fit-content;
    }
    #home .pricing-saction .pricing-container .pricing ul li div:first-child {
        width: 23px;
        height: 23px;
    }
    #home .quote-section {
        height: 30dvh !important;
    }
    #home .quote-section .desc h2 {
        font-size: 4.3vw;
        font-weight: 100;
    }
    #home .quote-section canvas {
        right: 0!important;
        width: 100dvw!important;
        position: absolute;
    }
    .contact-section {
        height: 100dvh !important;
    }
    .contact-section .title {
        font-size: 15vw;
    }
}