﻿/*one tech nepal styles*/
.top-left {
    font-size: 14px
}

@media (min-width: 1199px) and (max-width: 1599px) {
    .ctx-top-button {
        font-size: 17px;
        padding: 18px 10px 18px !important;
        font-weight: 500;
    }
}
@media (min-width: 900px) and (max-width: 1198px) {
    .ctx-top-button {
        font-size: 12px;
        padding: 18px 7px 18px!important;
        font-weight: 600;
    }
}

@media(min-width:799px) {
    .navbar-nav {
        background: #ffffff6b;
        border-radius: 36px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* Default Container */
    .my-container-fluid.side-padding, .topbar-container-fluid.side-padding {
        max-width: 1078px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    /* Default Container */
    .my-container-fluid.side-padding, .topbar-container-fluid.side-padding {
        max-width: 1278px;
    }
}







.footer-background {
    position: relative;
    width: 100%;
    min-height: 300px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Ensure text is visible */
    /* background: linear-gradient(rgb(0 83 160 / 77%), rgb(0 83 160)), url(/assets/images/footer-art-white.png) no-repeat center center;*/
    background: url(/assets/images/footer-art-white.png) no-repeat center center;
    background-size: cover;
}
/* Preloader Image */
#preloader-img {
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
}

/* Keyframes for fading in the image */
@keyframes fadeIn {
    0% {
        opacity: 0; /* Start with low opacity */
    }

    100% {
        opacity: 1; /* End with full opacity */
    }
}

/* Optional: Fade out the entire preloader */
#preloader.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}




/*home sliders*/
/* Fullscreen Slider Container */
.fullscreen-slider {
    width: 100%;
    height: 100vh; /* Fullscreen height */
    position: relative;
}

    /* Adjust the Swiper slide to occupy the full screen */
    .fullscreen-slider .swiper-slide {
        width: 100%;
        height: 100vh; /* Fullscreen */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative; /* Ensure absolute elements inside are positioned relative to this */
    }

    /* Ensuring the image occupies full width */
    .fullscreen-slider .slider-content {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative; /* Ensure the text overlays on the image */
        align-items: center; /* Vertically center the text */
        justify-content: center; /* Horizontally center the text if needed */
    }

    /* Ensuring image fits the full screen */
    .fullscreen-slider img {
        width: 100%; /* Ensure the image takes up the full width of the container */
        height: 100%; /* Ensure the image takes up the full height of the container */
        object-fit: cover; /* Ensures the image covers the whole screen */
        object-position: center center; /* Ensures the image is centered */
    }

/* Text Styling */
.slide-title {
    position: absolute; /* Position text over the image */
    top: 50%;
    left: 30px; /* Adjust this to control the horizontal position */
    transform: translateY(-50%); /* Center text vertically */
    color: #fff;
    z-index: 10; /* Ensures the text appears above the image */
    max-width: 600px; /* Optional: Control the max width of the text box */
}

/* Sub Text */
.slide-sub-t {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Main Header */
.slide-slider-h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}



/* On Mobile (768px and below) */
@media (max-width: 768px) {
    .fullscreen-slider img {
        object-fit: cover; /* Keep the image covering the full screen */
        object-position: center center; /* Ensure vertical and horizontal centering */
        min-height: 100vh;
        height: 100%; /* Ensures the image always takes full height */
    }



    .slider-content {
        flex-direction: column; /* Stack text and image vertically on mobile */
    }

    .slide-title {
        left: 30px;
        top: 70%;
        width: 90%;
    }

    .slide-slider-h1 {
        font-size: 32px;
    }
}
/* For screens 768px and above */
@media (min-width: 768px) {
    .slide-title {
        margin-left: 80px; /* Add margin-left of 50px */
    }
}

/* Fix for larger screens (including between 1450px - 1600px) */
@media (max-width: 1500px) {
    .fullscreen-slider img {
        object-fit: cover; /* Keep the image covering the entire screen */
        object-position: center center; /* Ensure the image remains centered */
        height: 100vh; /* Ensure the image height is always fullscreen */
        width: 100vw; /* Ensure the width is always full */
    }
}