#loader {
    height: 100vh;
    width: 100%;
    margin: 0;
    display: grid;
    position: fixed;
    justify-items: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7); /* Optional semi-transparent background */
    top: 0;
    left: 0;
}
#loader-logo {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter 0.1s, opacity 0.1s; /* Smooth transition for updates */
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
}
#page-content {
    display: none;
}
.btn-hover-effect {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease-in-out;
}
/* .btn-hover-effect:hover {
    background-color: #007bff;
    color: white;
    background: linear-gradient(45deg, #ff4800db, #fb895bdb);
    color: white;
} */
/* Shiny effect */
.btn-hover-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    /* transform: skewX(-30deg); */
    transition: left 0.5s ease-in-out;
}
.btn-hover-effect:hover::after {
    left: 100%;
}

.link-effect:hover {
    color: red !important;
}
.dropdown:hover .dropdown-menu {
    display: block;
    position:absolute;
}
.dropdown-menu .dropdown-item {
    width: 100px;
    position: relative; /* Ensure the text inside can be moved independently */
    transition: transform 0.3s ease; /* Smooth animation for text movement */
}

.dropdown-menu .dropdown-item:hover {
    transform: translateX(10px); /* Moves only the text, not the background */
}

.navbar-nav .nav-link {
    height: 100%; /* Make the links take the full height of the navbar */
    display: flex;
    align-items: center; /* Center the text vertically */
    position: relative;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0; /* Place the line at the bottom of the text */
    left: 50%; /* Start from the middle */
    transform: translateX(-50%); /* Center the line horizontally */
    width: 0; /* Initially no width */
    height: 3px; /* Thickness of the line */
    background-color: #007bff; /* Line color */
    transition: width 0.3s ease; /* Smooth transition effect */
}

.navbar-nav .nav-link:hover::after {
    width: 80%; /* Expand to 50% width on hover */
}


/* menu for smaller screens */
.custom-hr {
    border: 1px solid #929292;
    width: 90%;
    align-self: center;
    padding: 0 2px;
    margin: 0;
}
.offcanvas {
    max-width: 300px;
}
@media (max-width: 576px) { 
    /* For small screens */
    .offcanvas {
        width: 75% !important;
    }
}

@media (min-width: 768px) { 
    /* For medium and larger screens */
    .offcanvas {
        width: 50% !important;
    }
}

/* home first block carousal */
#carousalHomeFirst .bi-arrow-left,
#carousalHomeFirst .bi-arrow-right {
    color: rgb(0, 247, 255); font-size: x-large;
    background-color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 1px;

}
#carousalHomeFirst .bi-arrow-left:hover,
#carousalHomeFirst .bi-arrow-right:hover {
    color: rgb(0, 0, 0); font-size: x-large;
    background-color: rgb(182, 255, 239);
}
.carousel-item img {
    object-fit: cover; /* Ensures the image fills the container without distortion */
    height: 500px; /* Adjust height to your requirement */
}
/* overflow blocks */
#overflowblock .rounded-circle {
    background-color:rgb(0, 225, 255)
}

#overflowblock :hover {
    background-image: linear-gradient(to right, rgb(0, 225, 255),rgb(139, 239, 255));
}
#overflowblock:hover .rounded-circle {
    background-color: white !important;
    color: rgb(0, 255, 247) !important;
}
#overflowblock :hover * {
    background-image: none;
    color: whitesmoke;
}


/* our services block */
.service-block-effect:hover {
    background-color: #eef6ff;
    scale: 1.1;
}
@media (min-width:920px){
    #dat-driven-block,
    #easy-afford-block {
        min-height: 300px;
    }
}
/* why choose us block */
.data-driven {
    background-color: #ff91001f;
}
.easy-affordable {
    background-color: #96fcfa2c;
}
.customer-centric
{
    background-color: #ff91912c;
}
.one-stop-solution {
    background-color: #91c8ff2c;
}
.data-driven:hover,
.easy-affordable:hover,
.customer-centric:hover,
.one-stop-solution:hover {
    background-color: #ffffff;
    scale: 1.1;
}

#projectdone,
#activeClients,
#gloriousyears,
#teamadvisor {
    color: rgba(255, 98, 0, 0.788) !important;
}

/* Our  Partners/ Our Clients */

/* newsletterform */
#newsletterform {
    /* background-image: linear-gradient(to right, rgba(255, 8, 0, 0.916),rgb(253, 150, 82)); */
    background-image: linear-gradient(to right, rgba(0, 110, 255, 0.916),rgb(82, 224, 253));
}

/* video showcase */

.play-button:hover {
    /* color: rgba(255, 98, 0, 0.788) !important; */
    color: rgba(0, 208, 255, 0.788) !important;
}
#ovb_about {
    transition: transform 0.3s ease;
}

#ovb_about:hover {
    transform: translateY(-10px);
}

/* professional team */
#carouselEmployee {
    max-width: 900px;
    margin: auto;
}
#carouselEmployee .carousel-inner {
    display: flex;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
}
#carouselEmployee .carousel-item {
    flex: 0 0 calc(100% / var(--items-per-slide));
    padding: 10px;
}
#carouselEmployee .img-fluid {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/*team page- professional team */
@media (max-width: 599px) {
    .about-employee-img {
        height: 300px;
        width: 300px;
    }
    #about-image-1{
        height: 300px;
        width: 350px;
    }
    #team-employee-bg {
        display: none;
    }
    #team-employee-slide {
        padding: 0px;
    }
    #team-slide-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #team_top_image {
        height: 200px;
        width: 300px;
    }
    .shopify-card img {
        height: 300px;
        width: 300px;
    }
}

@media (min-width: 600px) and (max-width: 1199px) {
    #about-image-1 {
        width: 400px;
        height: 400px;
    }
    #team_top_image {
        margin-top: 50px;
        height: 300px;
        width: 600px;
    }
    .about-employee-img {
        width: 300px;
        height: 300px;
    }
    #team-employee-slide {
        padding: 80px 0;
    }
    #team-slide-container {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .shopify-card img {
        height: 500px;
        width: 500px;
    }
}

@media (min-width: 1200px) {
    #about-image-1 {
        width: 500px;
        height: 500px;
    }
    #team_top_image {
        margin-top: 50px;
        height: 550px;
        width: 1100px;
    }
    .about-employee-img {
        width: 370px;
        height: 370px;
    }
    #team-employee-slide {
        padding: 80px 0;
    }
    #team-slide-container {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .shopify-card img {
        height: 500px;
        width: 500px;
    }
}


#id_skilledteam { 
    background: linear-gradient(to bottom right, #0062ff, #88b8ffdb);

}
@media (min-width:968px) {
    #id_skilledteam {
        position: relative;
        margin-top: -300px; 
    }
}
.social-links a i {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.social-links a {
    pointer-events: none;
}
.social-links.show a i {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.social-links.show a:nth-child(3) i {
    transition-delay: 0s;
}

.social-links.show a:nth-child(2) i {
    transition-delay: 0.1s; 
}

.social-links.show a:nth-child(1) i {
    transition-delay: 0.2s;
}

.bi-plus-circle-fill,
.bi-x-circle-fill {
    align-items: center;
}
.bi-x-circle-fill {
    display: none;
}

.employee-card img:hover {
    transform: scale(1.02);
    transition: transform 0.5s ease;
}

/*team page employee carasouel */
#team-employee-bg {
    background:linear-gradient(to bottom, rgb(0, 110, 255), rgb(118, 190, 245));
}

/* services page */
.bi-suit-diamond-fill {
    color:transparent;
}
.amzService {
    color: rgb(255, 255, 255);
}
.amzService:hover {
    background-color: #ffffff;
}
.amzService:hover P {
    color: black;
}
.amzService:hover .bi {
    color: rgb(0, 229, 255);
}
.selected-card .amzService {
    background-color: white;
}
.selected-card .bi {
    color: rgb(0, 229, 255);
}
.selected-card p {
    color: rgb(0, 0, 0);
}

.selected-card .bi-suit-diamond-fill {
    color: rgb(255, 255, 255);
}
.service-card-pagination .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #ffffff; /* Change color */
    opacity: 1; /* Make bullets fully visible */
  }
.shopify-block-1,
.shopify-card-content {
    box-shadow: 10px 10px 10px rgba(114, 201, 255, 0.3);
    border: 1px solid #dee2e692;
    border-radius: 0.5rem;
}

.shopify-circle {
    box-shadow: 10px 5px 10px rgba(114, 201, 255, 0.3);
    background:linear-gradient(to right bottom, rgb(0, 81, 255), rgb(127, 214, 255));
    width: 40px; 
    height: 40px;
    border-radius: 50%; 
    text-align: center;
    color: white;

}
.service-card1-contain:hover {
    box-shadow: 10px 10px 10px rgba(114, 201, 255, 0.3);
    border: 1px solid #dee2e692;
    border-radius: 0.5rem; 
}
@media (max-width: 480px) {
    .service-card1-contain {
        border: 1px solid #dee2e692;
        border-radius: 0.5rem; 
        box-shadow: 10px 10px 10px rgba(114, 201, 255, 0.3);
    }
}
/* @media (max-width: 480px) {
    .service-slider .swiper-slide-active .amzService{
        background-color: rgb(255, 255, 255);
    }
    .service-slider .swiper-slide-active .amzService .bi {
        color: rgb(0, 229, 255);
    }
    .service-slider .swiper-slide-active .amzService p {
        color: rgb(0, 0, 0);
    }
    .service-slider .swiper-slide-active .bi-suit-diamond-fill {
        color: rgb(255, 255, 255);
    }
} */
/* shopify */
.shopify-card-content:hover {
    background:linear-gradient(to bottom right, rgb(0, 110, 255), rgb(97, 242, 255));
    color: white;
}
.shopify-card-content:hover .shopify-circle {
    color: rgb(97, 242, 255);
    background: white;
}