*{
    margin: 0;
    padding: 0;
}
.marquee-container{
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 0;
    background: #d1ecf1;
    white-space: nowrap;
    width: 100%;
}
.marquee-content{
    display: inline-block;
    padding-left: 100%;
    animation: scroll 30s linear infinite;
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
   
}
@media (max-width:760px) {
    .marquee-content{
        font-size: 1.2rem;
    }
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}
.hot{
    color: rgb(240, 86, 14);
    animation: flicker 1s linear infinite;
}
@keyframes flicker {
    0%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50%{
        transform: translateY(-5px) scale(1.1);
        opacity: 0.8;
    }
    100%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}
.leaf{
    color: green;
}

/*Style to remove focus border*/
button:focus,input:focus{
    outline: none;
    box-shadow: none;
}

.navbar-toggler:focus,.form-control:focus{
    outline: none;
    box-shadow: none;
}

/*Style for toggler*/
.custom-toggler i{
    color: #000;
    font-weight: bolder;
    font-size: 25px;
}

/*Style for brand logo*/
@font-face {
    font-family: "Cinzel_Decorative";
    src: url("/fonts/Cinzel_Decorative.ttf");
}

.navbar-brand{
    font-family: "Cinzel_Decora";
}

/*Style for the navigation and toggle bar*/
.navigation{
    background-color: #e9f5ff;
}
.navbar-toggler{
    border: none;
}

/*Style for the dropdown in the navigation*/
.dropdown-menu{
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.nav-item.dropdown:hover .dropdown-menu{
    display: block;
}

@media (min-width: 770px) {
    .nav-link:hover{
    border-bottom: 3px solid #007BFF;
    }
}

@media (min-width: 770px) {
    .nav-link.active{
    border-bottom: 3px solid #007BFF;
}

}


/*STYLE FOR SWIPER PICTURES IN THE HEADER*/
.swiper {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.swiper img{
    object-fit: cover;
    width: 100%;
    height: 60vh;
}
@media (max-width: 760px) {
    .swiper img{
        height: 50vh;
    }
}
@media (max-width: 450px) {
    .swiper img{
        height: 30vh;
    }
}


/*Style for our services*/
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #007bff;
}


/*Style for list services*/
.brand-text-color{
  letter-spacing: 0.5rem;
}
.custom-card{
  background-color: #ffffff;
  border: 2px solid #3f3c3c;
  border-radius: 12px;
  box-shadow: 0 0.25rem 0.38rem rgba(0, 0, 0, 0.5);
  padding: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:0.3s ease;
}
.icon i{
   font-size: 3rem;
}
@media (max-width: 768px) {
  .icon i{
    font-size: 2rem;
  }
}
@media (max-width: 460px) {
  .icon i{
    font-size: 1.8rem;
  }
}
.icon p{
  font-size: 1.4rem;
  font-weight: bold;
}
@media (max-width: 768px) {
  .icon p{
    font-size: 1.1rem;
  }
}
@media (max-width: 460px) {
  .icon p{
    font-size: 0.9rem;
  }
}

/*PRODUCTS STYLING*/
  /* Simulate a mobile device container on larger screens, ensuring the app looks good. */
        .app-container {
            max-width: 30rem; /* Constrain width for mobile look on desktop */
            margin: auto;
            min-height: 100vh;
            background-color: #fcfcfc;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        /* Override for larger screens (lg+) where we want full width and no box shadow for true flex layout */
        @media (min-width: 400px) { 
             .app-container {
                max-width: none;
                box-shadow: none;
                margin: 0;
            }
        }
        
        /* 1. Base (Mobile-First): Enable Horizontal Swiping */
        .scroll-container-mobile {
            /* These properties are active on mobile/small screens (col-12) */
            overflow-x: scroll;
            scroll-snap-type: none;
            white-space: nowrap; /* Keeps items inline */
            padding-bottom: 1rem; 
            /* Hide Scrollbar */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scroll-container-mobile::-webkit-scrollbar {
            display: none;
        }

        /* 2. Define the snap point for each card in mobile view */
        .snap-item-mobile {
            scroll-snap-align: start;
            flex-shrink: 0; 
            display: inline-block;
        }

        /* 3. Desktop/Tablet (md+) Override: Disable Swiping and allow wrapping */
        /* Use a media query to target medium and larger screens (Bootstrap's md breakpoint) */
        @media (min-width: 768px) {
            .scroll-container-mobile {
                overflow-x: visible !important; /* Allow wrapping */
                scroll-snap-type: none !important; /* Disable snapping */
                white-space: normal !important; /* Allow wrapping */
                display: flex !important; /* Enable Flexbox for grid layout */
                flex-wrap: wrap !important; /* Wrap cards */
                justify-content: start;
                margin: 0 !important; /* Remove negative margin used for mobile scroll padding */
            }
            .snap-item-mobile {
                /* On desktop, cards should take up 1/5 or 1/4 of the width, not a fixed mobile width */
                width: 20% !important; 
                display: block;
                padding-right: 1rem;
                padding-left: 1rem;
                margin-right: 0 !important;
                flex-shrink: 1; /* Allow standard flex shrinking */
            }
            /* Adjust padding/margins for desktop grid effect */
            .mx-n4 { margin-left: -1.5rem !important; margin-right: 1.5rem !important; }
            .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
            .mobile-padding { padding-left: 1rem !important; padding-right: 1rem !important; }
        }

        /* Text styling to match the elegant font */
        .elegant-title {
            font-family: serif;
            font-weight: 300;
        }
    
        .bolt{
    color: rgba(255, 255, 0, 0.925);
    animation: flicker 1s linear infinite;
}
@keyframes flicker {
    0%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50%{
        transform: translateY(-5px) scale(1.1);
        opacity: 0.8;
    }
    100%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

        /*Style for footer*/
.beilan-footer{
  background: linear-gradient(to right, rgba(47, 4, 240, 0.945));
  font-family: Arial, sans-serif;
}
.beilan-footer h5{
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: white;
}
@media (max-width: 768px) {
    .beilan-footer h5{
        font-size: 1.1rem;
    }
}
.beilan-footer p{
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  color: #f0f0f0;
}
@media (max-width: 768px) {
    .beilan-footer p{
        font-size: 0.9rem;
    }
}
.beilan-footer .small{
  font-size: 0.75rem !important;
  font-weight: 300;
}
.beilan-footer h5 a{
  text-decoration: none;
}
.socialmedia{
  color: #f0f0f0 !important;
}