@font-face {
    font-family: 'W_yas';
    src: url('../fonts/Wyas.eot');
    src: url('../fonts/Wyas.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Wyas.woff2') format('woff2'),
        url('../fonts/Wyas.woff') format('woff'),
        url('../fonts/Wyas.svg#Wyas') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'W_yas' !important;
    direction: rtl;
}

        body, html {
            height: 100%;
            margin: 0;
            scroll-behavior: smooth;
        }
        .full-page {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2a2a28; /* Change to your desired background color */
            position: relative;
        }
        .logo {
            width: 35%; /* Adjust as needed */
            max-width: 100%; /* Adjust as needed */
            transition: all 0.3s ease;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }
        .second-page {
            background: url('../../assets/images/index_bg.png') no-repeat center center/cover, #2a2a28;
            text-align: center;
        }
        .third-page {
            background: url('../../assets/images/index_bg.png') no-repeat center center/cover, #2a2a28;
            text-align: center;
        }
        .menu {
            position: absolute;
            top: 50%;
            right: 0;
            display: flex;
            justify-content: right;
            flex-wrap: wrap;
            gap: 3vw;
            color: black;
            margin: 0px 7vw;
        }
        .menu a {
            color: black;
            text-decoration: none;
            font-size: 1.6em;
            font-weight: bold;
        }
        .menu a:hover {
            color: #ec7d3c;
        }
        
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden; /* Prevent scrolling on the entire page */
        }
        .header {
            height: 150px;
            background-color: #2a2a28;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;
            color: white;
            padding: 25px 20px;
        }
        .header .logo {
            width: 180px;
            margin: 0 15px;
            margin-bottom: 6px;
        }
        .header .nav-container {
            display: flex;
            width: 100%;
            align-items: flex-end;
            justify-content: center;
            position: relative;
        }
        .header .nav-group {
            display: flex;
            align-items: center;
        }
        .header .nav-left {
            margin-right: 15px;
        }
        .header .nav-right {
            margin-left: 15px;
        }
        .header .nav-link {
            color: black;
            text-decoration: none;
            font-size: 0.97em;
            font-weight: 900;
            margin: 0;
        }
        .header .nav-link:hover,
        .header .nav-link:active {
            color: #ec7d3c;
        }
        .active {
            color: #ec7d3c !important;
        }
        .nav-link {
            display: block;
            padding: .1rem 0.5rem;
        }
        .third-page {
            height: calc(100vh - 150px); /* Make it fit the remaining height after the header */
            background: url('../../assets/images/background_image.png') no-repeat center center/cover, #2a2a28;
            display: flex;
            justify-content: center;
            padding: 20px;
            overflow: auto; /* Allow scrolling within this container if needed */
        }
        .fourth-page {
            height: calc(100vh - 150px); /* Make it fit the remaining height after the header */
            background: #2a2a28;
            display: flex;
            justify-content: center;
            padding: 20px;
            overflow: auto; /* Allow scrolling within this container if needed */
        }
        .content-container {
            padding: 20px;
            padding-top: 7%;
            text-align: justify;
            color: white;
            line-height: 1.9em;
            font-size: 1.02em;
        }
        .content-comps {
            padding: 0 !important;
        }
        .custom-container {
            max-width: 1240px;
        }
        .content-container h1 {
            margin-top: 0;
        }
        .comp-link {
            color: white;
            text-decoration: none !important;
        }
        .comp-link:hover {
            color: #ec7d3c;
            text-decoration: none !important;
        }
        .just-link {
            color:white;text-decoration:none !important
        }
        .just-link:hover {
            color:#ec7d3c;
        }
        .hover-b:hover {
            color:#2a2a28 !important;
        }
        /* The lightbox container */
#lightbox {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lightbox content (image) */
.lightbox-content {
    max-width: 90%;
    max-height: 80%;
    border: 3px solid #fff;
}

/* Close button */
#close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.companies-list {
    border-right: 5px solid #ec7d3c; padding-top: 10px
}
.comps {
    object-fit: cover; width: 100%; height: auto; max-height: 100%;
}
.comps-logo {
    max-width: 100%;
}
.separator {
    height: 80px; display: block
}
.social { 
    max-width: 20%; padding: 2px
}
.blog-responsive{
    background:#EE7D3B; min-height: 100vh;
    padding: 0px !important;
}
.blog-container-responsive {
    background: #EE7D3B !important; padding: 0;
}
.search-inp {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: white;
    height: 40px;
    font-size: 20px;
    padding: 10px;
    border:none;
    padding-right: 35px;
}
.blog-list {
    background-color:#EE7D3B; overflow-y: auto;
}
.blog-inside-list {
    padding-right: 3rem;
    padding-left: 3rem;
    height: 100%;
}
.blog-center-list {
    border-right:5px solid #2a2a28; border-left: 5px solid #2a2a28; 
}

.search-input-wrapper {
    height: 20vh;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align to the right horizontally */
    padding: 0; /* Remove default padding from row */
    text-align: right;
}

.but {
    padding: 20px;
    background:#2A2A28;
    text-align: center;
    color:#ee7d3b;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    margin-top: 10px;
    font-weight: 900;
}
.but:hover {
    color: white;
    text-decoration: none;
}
.next-page {
    display:block;width: calc(100% - 4rem);height: 30px; background: #2a2a28;
}
.conv-item {
    border-left:2px solid #EE7D3B;height: 100%;
}
.conv-wrapper {
    height: auto;
}
.conv-text {
    font-size: 18px; font-weight: 900; color: #EE7D3B
}
.conv-p {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}
.conv .conv-photo {
    filter: grayscale(100%);
    transition: 0.4s;
}
.gal-item {
    border-left:2px solid #EE7D3B;height: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
}
.gal-p {
    padding-left: 3rem;
    padding-right: 3rem;
}
.back-to-home{
    position: absolute; left: 20px; text-align: center; margin: auto 0px; display: block
}
.single-comp-wrapper {
    direction:rtl; padding: 20px; overflow-y: auto; max-height: 65vh;
    margin-left: 3rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1rem !important;
}
.single-comp-container{
    height: calc(100vh - 150px - 3rem - 50px);
}
.blog-container {
    direction:rtl; padding: 20px !important; overflow-y: auto; max-height: 65vh;
    margin-left: 3rem !important;
}
.parag {
    font-size: 16px; line-height: 1.6; padding-right: 20px;border-right: 5px solid #2A2A28;
}
.conv-parag {
    font-size: 16px; line-height: 1.6; padding-right: 20px;
}

.blog-h {
    font-weight: bold; font-size: 25px;position:relative; right: 20px
}
.blog-bg {
    background: #EE7D3B; padding: 0;
}
.down-arrow-icon::before {
    content: "\2193"; 
    font-size: 24px;
    color: white;
}

.social-icons i {
    font-size: 24px;
    color: white;
}
.fas, .fab {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.overlay-box{
    background: linear-gradient(0deg, rgba(42, 42, 40, 0.2), rgba(42, 42, 40, 0.2)),linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    position: absolute;
    top: 0;
    left: 120px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 15px;
    width: 240px;
}
.img-container {
    display: inline-block;
    position: relative;
}
.img-container img {
    display: block;
    max-width: 100%;
    transition: opacity 0.5s ease; /* Smooth transition effect */
    position: relative;
}
.img-container img.default-img {
    opacity: 1; /* Fully visible */
}
.img-container img.hover-img {
    opacity: 0; /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
}
.img-container:hover img.default-img {
    opacity: 0; /* Hide the default image */
}
    .img-container:hover img.hover-img {
    opacity: 1; /* Show the hover image */
}
.menu-items-links a {
    line-height: 1.58 !important;
}
.single-comp-body, .single-blog-body, .single-conv-body, .single-full-conv-body {
    background: #2a2a28;
}
.comp-img-wrapper img {
    max-width: 94%;
}
.blog-body {
    background: url(../../assets/images/bg-blog.png);background-color: #2a2a28; background-size: cover; background-repeat: no-repeat
}
.blog-body header {
    background: none
}
.conv:hover .conv-photo {
    filter: none;
}
.conv:hover p {
    color: white !important;
}
.conv:hover img {
    filter: grayscale(100%);
}
.conversations-body {
    background: url(../../assets/images/bg-conv.png);background-color: #2a2a28; background-size: cover; background-repeat: no-repeat
}
.conversations-body header {
    background: none;
}
.gallery-body {
    background: url(../../assets/images/bg-conv.png);background-color: #2a2a28; background-size: cover; background-repeat: no-repeat
}
.gallery-body header {
    background: none;
}
@media only screen and (min-width: 900px) {
     .wi-900-b {
         display: none;
     }
}
@media only screen and (max-width: 899px) {
     .wi-900 {
         display: none !important;
     }
     .menu ul li{
         list-style: none;
     }
     .menu ul li a{
         color: #ec7d3c;
         font-size: 16px;
     }
     .menu ul{
         text-align: left;
     }
     .hamburger {
         position: absolute;
         top: 130px;
         left: calc(7vw + 0px);
         cursor: pointer;
     }
    .menu {
        position: absolute;
        top: 160px;
        left: 0px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        gap: 3vw;
        color: black;
        margin: 0px 7vw;
        opacity: 0;
        transition: 0.5s;
    }
    .menu-show {
        opacity: 1;
    }
    .second-page {
        background-position: -180px center;
    }
    .logo-hover {
        max-width: 60%;
        position: absolute;
        left: calc(7vw + 0px);
        bottom: 120px;
    }
    .logo-hover img{
        max-width: 100%
    }
    .third-page {
        min-height: 100vh;
        font-size: 13px;
    }
    .fourth-page {
        height: 100vh;
    }
    .nav-link {
        color: #ec7d3c;
    }
    .head .nav-group a{
        display: inline-block;
        position: relative; /* Required for the :after positioning */
        padding-left: clamp(4px, 1vw, 10px);
        font-size: clamp(8px, 3.25vw, 15px);
        font-weight: 900;
        text-decoration: none !important;
    }
    .nav-link:hover {
        color: #ec7d3c;
    }
    .head .nav-group a:first-child {
        padding-right: 0px;
    }
    .nav-group {
        text-align: center;
    }
    .head .nav-group a:last-child {
        padding-left: 0px;
    }
    .head .nav-group a:not(:first-child)::after {
        content: '';
        position: absolute;
        right: 0; /* Position the border at the right side of the element */
        top: 50%; /* Center it vertically */
        transform: translateY(-50%); /* Adjust positioning for vertical centering */
        height: 50%; /* Make the border full height of the element */
        width: 1px; /* Border width */ 
        background-color: #ec7d3c; /* Border color */
    }
    
    .comp-link {
        font-size: clamp(11px, 2.5vw, 14px);
        color: #ec7d3c;
        font-weight: 900;
    }
    
    .companies-list {
        border: none !important;
        padding-right: 0px;
    }
    .companies-list h5 {
        margin-bottom: 0;
    }
    .comps {
        height: 100%;
    }
    .comps-logo {
        max-width: 10vh !important;
        margin: 0px auto;
    }
    .separator{
        height: 20px;
    }
    .logo-wrapper {
        display: block;
        width: 100%;
        text-align: center;
    }
    .img-container img.hover-img {
        left: 6.1vh !important;
    }
    .overlay-box {
        top: calc(50% - 120px) !important;
        left: 3rem !important;
    }
    .comp-wrapper {
        padding-top: 35px;
        padding-bottom: 35px;
        background: #262626;
    }
    .blog-responsive, .blog-container-responsive{
        background: #2a2a28 !important;
    }
    .blog-responsive {
        padding: 20px !important;
        padding-bottom: 60px !important;
    }
    .search-inp {
        padding: 4px;
        padding-right: 29px;
    }
    .blog-list {
        background-color:#2a2a28;
    }
    .blog-inside-list {
        padding-right: 0;
        padding-left: 0;
    }
    
    .blog-center-list {
        border:none; 
    }
    .search-input-wrapper {
        height: auto
    }
    .but {
        background: #ec7d3c;
        color: #2a2a28;
    }
    .next-page {
        background: #ec7d3c;
        width: calc(100%);
    }
    .responsive-next-page {
        padding: 0px !important;
    }
    .conv-item {
        border-left:0
    }
    
    .conv-wrapper {
        overflow-y: hidden;
        margin-top: 20px;
    }
    .conv-text {
        font-size: clamp(9px, 2.4vw, 14px)
    }
    .bullet {
        width: 6px;
    }
    .conv-p {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        padding-bottom: 10px;
    }
    
    .content-container {
        line-height: 1.58em;
        font-size: clamp(8px, 3.45vw, 15px);
    }
    .conv .conv-photo {
        filter: none;
    }
    
    .gal-item {
        border-left:none;
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        padding-top: 5px !important;
    }
    .gal-p {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        padding-top: 5px !important;
    }
    .back-to-home{
        position: absolute; left: 20px; text-align: center; top: 70px;color: #2a2a28 !important;
    }
    .back-to-home h6{
        color: #2a2a28 !important;
        font-size: 15px;
        font-weight: 900;
    }
    .about-responsive {
        padding-bottom: 100px;
    }
    
    .single-comp-wrapper {
        overflow-y: hidden; max-height: none;
        margin-left: 0rem !important;
        padding-right: 0rem !important;
        padding-left: 0rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }
    .single-comp-wrapper p {
        margin-left: 2rem !important;
        margin-right: 1rem !important;
        padding-right: 1rem !important;
        border-right: 3px solid #2a2a28;
    }
    .comp-img-wrapper {
        max-width: 100% !important;
        width:100% !important;
        flex: 0 0 100% !important;
        padding-top: 50px;
        padding-right: 10px;
        padding-left: 10px;
        background: #2a2a28;
        padding-bottom: 50px;
    }
    .comp-img-wrapper img {
        max-width: 94%; height: auto; max-height: calc(85vh - 150px - 3rem - 50px);
        margin-left: 10px;
        margin-right: 10px;
    }
    .single-comp-container{
        height: auto;
    }
    .single-comp-cover {
        overflow-y: auto;
        overflow: auto;
    }
    
    .blog-container {
        direction:rtl; padding: 20px !important; overflow-y: hidden; max-height: none !important;
        margin-left: 0px !important;
    }
    .parag{
        border: none;
        padding-right: 0px;
        color: white;
    }
    .conv-parag{
        border: none;
        padding-right: 0px;
        color: white;
    }
    .blog-h {
        right: 0px;
        color: #ec7d3c;
    }
    
    .blog-bg {
        background: #2a2a28; padding: 0;
    }
    h1 {
      font-size: 1.8rem;
    }
    .about-body .third-page, .about-body .fourth-page.wi-900-b {
        background: none;
    }
    .about-body {
        background: url('../../assets/images/mob-about-bg.png') no-repeat, #2a2a28;
        background-position: 0px center;
        background-size: auto 100vh;
    }
    .companies-body .fourth-page {
        height: auto;
    }
    .companies-body {
        background: #2a2a28;
    }
    .blog-body .fourth-page {
        height: auto;
    }
    .fourth-page {
        padding: 18px;
    }
    .about-body .third-page {
        height: auto
    }
    .conversations-body .blog-responsive {
        height: auto;
    }
}
@media only screen and (min-width: 750px) {
    .about-body {
        background-size: cover;
    }
}
@media only screen and (max-width: 500px) {
    .comp-side {  
        transform-origin: left top;
        transform: scale(0.7);
    }
}
@media only screen and (min-width: 620px) and (max-width: 899px) {
    .about-body {
        background-size: cover;
        background-position: center top;
    }
    .second-page {
        background-position: 0 center;
    }
    .logo-hover {
        max-width: 60%;
        right: calc(7vw + 0px);
    }
}
@media only screen and (max-width: 767px) {
    .overlay-box {
        top: calc(50% - 120px) !important;
        left: -33px !important;
        scale: 0.6
    }
}