/* body {
    font-family: 'Montserrat', sans-serif;
} */
/* back-top-top btn */
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: orange !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    }
.btn-body:hover{
    background-color: #001f3f !important;
}
/* ---------------------------------------------------------------------------------- */

/* navbar */
/* nav.animation{
    animation: fade-u1s;
} */
nav.navbar{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}
ul li a{
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}
i.bi{
    color: #8bf2ee !important;
}

@media (min-width: 991px){
    a.nav-link:hover, a.nav-link.active{
        color: #001f3f !important
    }
}

 /* navbar-menu-icon */
 i.fa-solid{
    color: #8bf2ee;
    font-size: 2rem;
    border: none !important;
 }
 .navbar-toggler{
    outline: none;
    box-shadow: none;
    border: none;
}
 .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
a.nav-link{
    position: relative;
    font-size: 15px !important;
}


@media (max-width: 768px) { /* Adjusts for tablets and smaller screens */
    h4.fade-in.fw-bold {
        font-size: 2rem !important;
    }
}

@media (min-width: 991px){
    a.nav-link::before{
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: #8bf2ee;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }
    a.nav-link:hover::before, a.nav-link.active::before{
        width: 100%;
        visibility: visible;
    }
    
    /* navbar animation */
    /* @keyframes fade-up {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.9); 
        }
        100% {
            opacity: 1;
            transform: translateY(0px) scale(0.9); 
        }
    } */
}


/* offcanvas */
.offcanvas{
    background-color:#333 !important;
}
button.btn-close{
    outline: none;
    box-shadow: none;
    border: none;
    color: white !important;
    font-size: large !important;
}
.btn-close:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

@media (max-width: 991px){
    .nav-link{
        color: white !important;
        padding-bottom: 2.5rem !important;
        font-weight: 300 !important;
    }
    a.nav-link::before{
        content: "";
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 1px;
        background-color: #aaaaaa !important;
    }
    header.info{
        display: none;
    }
}
/* end nav-bar */

/* --------------------------------------------------------------------------------------------------- */
/* hero-section */
.carousel-inner{
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../img/servicess.webp');
    height: 55vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* img animation */

.zoom-out {
    animation: zoomOut 3s ease forwards; /* Apply the zoom-out animation */
}

@keyframes zoomOut {
    0% {
        transform: scale(1.5); /* Start scaled up */
    }
    100% {
        transform: scale(1); /* End at original size */
    }
}
.img-text{
    position: absolute; /* Position text absolutely within the carousel item */
    top: 50%; /* Move to center vertically */
    left: 50%; /* Move to center horizontally */
    transform: translate(-50%, -50%); /* Offset by half its width and height */
    text-align: center; /* Center the text horizontally */
    color: black !important; /* Optional: Change text color for visibility */
    z-index: 3; /* Ensure the text is above the image */
    
}
/* end img-animation */

/* img-text animation */
/* Initial fade-in styles */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
}

/* Fade in animations with delays */
h1.fade-in {
    animation-delay: 0.5s;
}

p.fade-in {
    animation-delay: 1s;
}

a.fade-in {
    animation-delay: 1.5s;
}

/* Animation keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* end img-text animation */
/* end-hero-section */

/* ------------------------------------------------------------------------------------------------------------- */

/* apply heading */
.about-heading {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.about-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 50px; /* Adjust the width of the line */
    height: 4px;  /* Adjust the height of the line */
    background-color: #8bf2ee; /* You can change the color */
}

/* apply form */
.form-control{
    background-color: whitesmoke !important;  
    border-radius: 0 !important;    
    border: none !important;           
    color: white;                    
    padding-top: 0.8rem !important; 
    padding-bottom: 0.8rem !important; 
}
.form-control:focus{
    box-shadow: none !important;
}