/*==================================== 0 =================================================*/
@media (min-width: 0px) {
    :root {
        --menubar-height:50px;
        --text-info-2: #1a7182;
    }

    #loadingLogo {
        width: 50%;
    }

    #mainImg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    /*#main-background {*/
    /*    font-size: 1rem;*/
    /*}*/

    #carouselExampleDark {
        height: 60vh;
        overflow: hidden;
        width: 100%;
    }
    .carousel-control-next{
        right: var(--carousel-control-next);
    }

    .carousel-item {
        height: 60vh;
    }

    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*@keyframes slideLeft {*/
    /*    from {*/
    /*        transform: translateX(0);*/
    /*    }*/
    /*    to {*/
    /*        transform: translateX(var(--carousel-translate));*/
    /*    }*/
    /*}*/

    /*todo  چک شود این کجا کاربرد داشته؟ احتمالاً در صحفه نمایشگاه ها*/
    /*.carousel-item .wrapper {*/
    /*    animation: slideLeft2 6s linear 1s forwards;*/
    /*    width: auto;*/
    /*    height: 100%;*/
    /*}*/

    /*@keyframes slideLeft2 {*/
    /*    from {*/
    /*        transform: translateX(0);*/
    /*    }*/
    /*    to {*/
    /*        !*transform: translateX(calc(-500px + var(--device-width)));*!*/
    /*        transform: translateX(calc(-10500px + var(--device-width)));*/
    /*    }*/
    /*}*/

    .exp-content span {
        display: none;
    }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 50%;
    }

    .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        background-color: red;
        /*border: 2px solid var(--delta-blue-dark, #2E388D);*/
        border: 2px solid black;
        border-radius: 50%;
        background-color: transparent !important;
    }

    .carousel-indicators .active {
        background-color: red !important;
    }

    #filmBottom { /* Or use a class if more generic */
        height: 350px; /* Mobile height */
    }

}

@media (min-width: 576px) {

}

@media (min-width: 768px) {
}

/*======================================= 992 =======================================================*/
@media (min-width: 992px) {
    .d-lg-list-item {
        display: list-item !important;
    }

    #loadingLogo {
        width: 20%;
    }

    #mainImg {
        top: -100px;
    }

    .exp-content {
        overflow-y: scroll;
        -ms-overflow-style: none; /* For Internet Explorer and Edge */
        scrollbar-width: none; /* For Firefox */
        padding-right: 10px;
        /*opacity: 0;*/
        /*padding-top: 75%;*/
        transition: opacity 700ms ease;
    }

    .exp-content::-webkit-scrollbar {
        display: none; /* For WebKit browsers */
    }

    .icon {
        display: none;
        position: absolute;
        top: 50%;
        font-size: 30px;
        color: #333;
        cursor: pointer;
        font-weight: 900;
    }

    .icon:hover {
        color: black;
        text-shadow: 0px 4px 3px black;
    }

    .icon.right {
        right: 20px;
    }

    .icon.left {
        left: 20px;
    }

    #carouselExampleDark {
        height: 80vh;
        overflow: hidden;
    }

    .carousel-item {
        height: 80vh;
    }

    .carousel-item img {
        position: static;
        width: 100%;
        height: auto;
        animation: unset;
    }

    /*on events page*/
    .carousel-item .wrapper {
        animation: unset;
        width: auto;
        height: auto;
    }

    .carousel-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
    }

    .upArrow {
        transform: translateY(-100%);
    }

    .downArrow {
        /*transform: translateY(-20%);*/
    }

    #filmBottom {
        height: 80vh; /* Desktop height */
    }

    /*.winImgs {*/
    /*    position: relative;*/
    /*    aspect-ratio: 12 / 9; !* Example: For 16:9 images. Adjust as needed. *!*/
    /*    background-color: #f0f0f0; !* Neutral placeholder color - CHOOSE YOUR COLOR *!*/
    /*    overflow: hidden; !* Hide any parts of images that might exceed aspect ratio if using object-fit:cover *!*/
    /*}*/

    /*.winImgs img {*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: auto;*/
    /*}*/

    /*.winImgs img.loaded-by-windowimgs { !* Add a class via JS when image is appended *!*/
    /*    display: block;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    object-fit: cover; !* Or 'contain', 'scale-down' as per your design *!*/
    /*    position: absolute; !* To cover the background color *!*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*}*/

    /*section:has(.winImg) {*/
    /*    height: 525px;*/
    /*}*/

}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/* --- SF Compact Display UltraLight --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-UltraLight.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Thin --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Light --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Regular --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Medium --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display SemiBold --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Bold --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Heavy --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --- SF Compact Display Black --- */
@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/Sf Pro/SFCompactDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'SF Compact Display', 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
    --menubar-height:50px;
    --text-info-2: #1a7182;
    --delta-red: #E9262A;
    --delta-red-transparent:#e9262ac4;
    --delta-blue: #53CBF5;
    --delta-blue-dark: #2E388D;
    --delta-blue-darker: #161a3e;
    --menu-back-ground:#28327fd9;

}

html {
    overflow-y: scroll;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.text-info-2 {
    color: var(--text-info-2) !important;
}

.bg-black {
    background-color: black !important;
}

.blue-delta{
     background-color: #2E388D !important;
}

.text-justify {
    text-align: justify;
}

.text-justify-hyphen {
    text-align: justify;
    hyphens: auto;
    word-wrap: break-word;
}
.res-padding-top {
    padding-top: var(--menubar-height)
}

#loadingLogo {
    animation: oc 2s linear infinite;
    opacity: 0;
}
@keyframes oc {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
}
@-webkit-keyframes oc {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}


/*.carousel-indicators [data-bs-target] {*/
/*    background-color: transparent !important;*/
/*    border: 2px solid #000; !* Adjust border color as needed *!*/
/*    border-radius: 50%;*/
/*}*/

/*.carousel-indicators [data-bs-target].active {*/
/*    background-color: black !important;*/
/*}*/

.carousel-item{
    float: left!important;
    margin-left: unset;
    transition: transform 2s ease; /* Change 2s to your desired duration */
}


#toCoverFooter {
    box-shadow: 0 20px 20px #101435;
    background-color: white;
    position: relative;
    z-index: 2;
    padding-bottom: 30px;
}

#tempImg::after{
    content: 'Image ??';
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../image/logoBGW.svg") no-repeat;
    background-size:50%;
    background-position: center;

}
#tempImg
{
    animation: oc 20s linear infinite;
    opacity: 0;
    position: relative;
    border:1px solid black
}


.appear {
    opacity: 0;
    animation: appear 2s ease-out 2s forwards;
}
@-webkit-keyframes appear {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.winImgs {
    position: relative;
    aspect-ratio: 12 / 9; /* Example: For 16:9 images. Adjust as needed. */
    background-color: #f0f0f0; /* Neutral placeholder color - CHOOSE YOUR COLOR */
    overflow: hidden; /* Hide any parts of images that might exceed aspect ratio if using object-fit:cover */
    display: flex;      /* Use flexbox to easily center the placeholder */
    justify-content: center;
    align-items: center;
}
.winImgs img {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;      /* Use flexbox to easily center the placeholder */
    justify-content: center;
    align-items: center;
}

.winImgs--contained-image img { /*For company insight page*/
    width: 90% !important;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
}

.winImgs img.project-image-placeholder {
    /* Sizing: Make it smaller than the container */
    width: auto;   /* Let height drive the size to maintain aspect ratio */
    height: 70%;   /* Make the GIF take up 50% of the container's height. Adjust as needed. */
    max-width: 70%; /* Also cap the width to 50% */

    /* Ensure it doesn't stretch or distort */
    object-fit: contain;
}
/* The final, loaded image (should fill the container) */
.winImgs img.loaded-by-windowimgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This will make the final image fill the container perfectly */
}

/* 1. Style the link container and prepare for truncation */
.sub-menu-div .project-items-panel a { /* Target links inside the new project menu panel */
    display: block; /* Make the link a block element */
    width: 100%;    /* Make it take the full width of its parent li */
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden;    /* Hide the text that overflows */
}

/* 2. Style the span inside the link to apply the ellipsis */
.sub-menu-div .project-items-panel a .truncated-text {
    display: block; /* Ensure it's a block element */
    width: 100%;
    overflow: hidden;        /* Hide overflow */
    text-overflow: ellipsis; /* Add the '...' at the end */
    white-space: nowrap;     /* Keep text on one line */
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effect */
}

/* 3. The hover effect */
.sub-menu-div .project-items-panel a:hover .truncated-text {
    /* On hover, undo the truncation to reveal the full text */
    overflow: visible;         /* Let the text overflow its container */
    white-space: normal;       /* Allow the text to wrap if it's very long */
    /* Add a visual cue, like a background or text color change */
    color: white; /* Example: make text white on hover */
    background-color: #333; /* Example: add a subtle background */

    /* To make it "pop out", you can use position relative and z-index */
    position: relative;
    z-index: 10; /* Ensure it appears above other menu items */
    padding: 2px 5px; /* Add some padding for the background */
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Optional shadow for better visibility */
}

body.internal-page #toCoverFooter {
    /*padding-top: 80px; !* Adjust this value to match your navbar's height *!*/
}

/* On the hero page, the content starts at the top */
body.hero-page #toCoverFooter {
    /*padding-top: 0;*/
}

/*
================================================================
INTERNAL PAGE HERO BANNER
================================================================
*/
.hero-banner-container {
    position: relative;
    height: 40vh; /* 40% of the viewport height. Adjust as needed. */
    min-height: 300px; /* Minimum height for smaller screens */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
    z-index: 2;
}

.hero-banner-content {
    position: relative;
    z-index: 3;
}

.hero-banner-title {
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

@media (min-width: 992px) {
    .hero-banner-title {
        font-size: 3.5rem;
    }
}

/*
================================================================
SCROLL TO TOP BUTTON
================================================================
*/
#scrollToTopBtn {
    /* Positioning */
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050; /* High z-index to be on top of other content */

    /* Appearance */
    background-color: var(--delta-red, #dc3545); /* Use your brand's red color */
    color: white;
    border: none;
    border-radius: 50%; /* Makes it circular */
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* Center the icon inside the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Hiding and Showing with a smooth transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Start slightly lower for a subtle slide-in effect */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Create the tooltip using the ::after pseudo-element */
#scrollToTopBtn::after {
    content: attr(data-title); /* Read the text from our data-title attribute */

    /* Positioning */
    position: absolute;
    left: 120%; /* Position it to the right of the button */
    top: 50%;
    transform: translateY(-50%); /* Vertically center it */

    /* Appearance */
    background-color: var(--delta-blue-darker); /* Dark background for the tooltip */
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap; /* Keep the text on one line */

    /* Hiding and Showing with a smooth transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none; /* Ensure the tooltip itself isn't clickable */
}

/* Show the tooltip when the button is hovered */
#scrollToTopBtn:hover::after {
    opacity: 1;
    visibility: visible;
}

#scrollToTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Move to its final position */
}

#scrollToTopBtn:hover {
    background-color: #c82333; /* A slightly darker red on hover */
    color: white;
}

.shine {
    /*display: inline-block;*/
    background: radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background: radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background: -moz-radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background: -o-radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background: webkit-radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background: -ms-radial-gradient(#1f1f4b, #050021, #09002d, #575353, #000000, #e80000);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 60s linear infinite;
}
@keyframes shine {
    0% {
        background-position: -400%;
    }
    100% {
        background-position: 400%;
    }
}