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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Zain", sans-serif;
    list-style: none;
    color: #DADADA;
    scroll-behavior: smooth;
    text-decoration: none;
    max-width: 100% !important;
    direction: rtl;
    touch-action: pan-y;
}

.direction-ltr {
    direction: ltr;
}

:root {
    --primary-color: #060605;
    --grey-color: #575656;
    --secondary-color: #EFB609;
    --white-color: #fff;
    --black-color: #575656;
    --font-tajawal: 'Tajawal', sans-serif;
}

section {
    position: relative;
}

.no-wrap-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-wrap-2 {
    white-space: nowrap;
    overflow: auto;
    text-overflow:initial;
}

.font-tajawal {
    font-family: "Tajawal", sans-serif;

}

.section-one {
    background-image: url('../Assets/Images/Web/High quality/Section 1.png');
    background-repeat: no-repeat;
    background-position: center;
    min-height: 120vh;
    background-size: cover;
}



.thanks-header {
    background-image: url('../Assets/Images/Web/High quality/Thank You.png');
    min-height: 100vh;
    background-size: cover;

}

.text-gradient {
    background: linear-gradient(36.61deg, #D8A016 14.8%, #EDC977 91.04%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-us-logo::before {
    content: '';
    background: linear-gradient(280deg, rgba(255, 255, 255, 0) 20.8%, #ffffff14 20%, #fff 81.04%);
    height: 2px;
    width: 100%;
}

.contact-us-logo::after {
    content: '';
    background: linear-gradient(-280deg, rgba(255, 255, 255, 0) 20.8%, #ffffff14 20%, #fff 81.04%);
    height: 2px;
    width: 100%;
}

.section-three-logo-bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 20.8%, #181b1e 81.04%);
    
}

.section-title::before {
    content: '';
    background: linear-gradient(-36.61deg, rgba(255, 255, 255, 0)35.8%, #ffffff14 20%, #fff 81.04%);
    height: 2px;
    width: 45%;
    margin-left: 20px;

}

.section-title::after {
    content: '';
    background: linear-gradient(80deg, rgba(255, 255, 255, 0) 35.8%, #ffffff14 20%, #fff 81.04%);
    height: 2px;
    width: 45%;
    margin-right: 20px;
}

.circle {
    /* background: lightblue; */
    border-radius: 46%;
    width: 59px;
    height: 57px;
}

.circle-l {
    border-left: 1px solid #d8a116c1;
    left: 0px;
}

.circle-r {
    border-right: 1px solid #d8a116c1;
}

.contact-us-circle-logo-bg {
    background: linear-gradient(-180deg, rgba(153, 153, 153, 0) 23.44%, rgba(255, 255, 255, 0.2) 100%);
}

.input-bg {
    background: linear-gradient(90deg, rgba(27, 27, 27, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Both words need to be on top of each other */
.word {
    /* position: absolute; */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 55555555555;
    background-color: #575656;
}

/* Common settings for both words */
.word1, .word2 {
    opacity: 1;
    /* Start both words as invisible */
    transition: opacity 1s ease-in-out;
}

/* Word1: fades up, waits for 1 second, then fades down */
.word1 {
    /* animation: fade-up-down 8s infinite; */
    /* Longer duration for added wait */
}

/* Word2: fades up after word1 finishes its sequence */
.word2 {
    /* animation: fade-down-up 8s infinite; */
    /* Match duration with word1 */
}

/* Keyframe for word1: fade up, stay for 1 second, then fade down */
@keyframes fade-up-down {
    0%, 10% {
        opacity: 0;
        transform: translateY(20px);
        /* Start below, invisible */
    }

    25%, 35%, 45%, 55%, 60%, 65%, 70%, 75%, 79%, 80%, 85% {
        opacity: 1;
        transform: translateY(0);
        /* Fade up */
    }

    95% {
        opacity: 1;
        /* Hold the word visible for 1 second */
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
        /* Fade down after the wait */
    }
}

/* Keyframe for word2: fade up after word1 fades down, then fade down */
@keyframes fade-down-up {
    0%, 20% {
        opacity: 0;
        transform: translateY(20px);
        /* Start hidden */
    }

    45%, 55%, 60%, 65%, 70%, 75%, 80% {
        opacity: 1;
        transform: translateY(0);
        /* Fade up */
    }

    85%, 100% {
        opacity: 0;
        transform: translateY(20px);
        /* Fade down after word1 */
    }
}

.section-two {
    background-image: url('../Assets/Images/Web/High quality/Section\ 2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.section-three {
    background-image: url('../Assets/Images/Web/High quality/Section\ 3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.section-three-card-logo::after {
    content: '';
    background: linear-gradient(80deg, #d8a1166b 1.8%, #D8A016, #D8A016 81.04%);
    width: 1px;
    height: 130px;
    position: absolute;
    top: -10px;
    z-index: 555;
}

.section-three-text::before {
    content: '';
    background: linear-gradient(80deg, #d8a11627 1.8%, #D8A016, #D8A016 81.04%);
    width: 90px;
    height: 1px;
    position: absolute;
    top: -1px;
    right: -1px;
}

.arc-gradient {
    position: relative;
    width: 50px;
    height: 20px;
    background: linear-gradient(to right, #d8a016, transparent 100%);
    border-radius: 50% 50% 0 0;
}

/* Horizontal line with gradient */
.gradient-line {
    background: linear-gradient(to right, transparent, #ffffff50);
    height: 1px;
    flex-grow: 1;
}

/* ---media queries-- */
@media (min-width:1000px) {
    .owl-carousel .img-slider img {
        width: 600px;   /* Fixed width */
        height: 400px;  /* Fixed height */
        object-fit: cover;  /* Crop and fill the container */
        max-width: 100%;  /* Responsive at smaller screens */
    }
}
@media (max-width: 676px) {
    .section-one {
        background-image: url('../Assets/Images/Mobile/High quality/Section\ 1\ Mobile.png');
        object-fit: cover;
        min-height: 105vh;
    }


    .thanks-header {
        background-image: url('../Assets/Images/Mobile/High quality/Thank You Mobile.png');
    }

    .contact-us-logo::before,
    .contact-us-logo::after {
        height: 1px;
    }

    .section-title::after,
    .section-title::before {
        width: 32%;
        margin-left: 10px;
        margin-right: 10px;
    }

    .section-three {
        background-image: url('../Assets/Images/Mobile/High quality/Section 3 Mobile.png');
    }

    .circle {
        /* background: lightblue; */
        position: absolute;
        width: 50px;
        height: 55px;
    }

    .no-wrap-1 {
        white-space: unset;
        overflow: auto;
        text-overflow: initial;
    }


    .no-wrap-2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
  
    }
}