/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/main.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */




 /* Gallery Styling */
        #lightgallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            padding: 20px;
        }

        #lightgallery a {
            display: inline-block;
            width: 150px;
            height: 100px;
            overflow: hidden;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        #lightgallery a:hover {
            transform: scale(1.05);
        }

        #lightgallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
		        .line-container {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .line {
            flex-grow: 1;
            height: 2px;
            background-color: black;
        }
        .title {
            padding: 0 15px;
            font-size: 20px;
            font-weight: bold;
        }
		
		
		    /* Apply the fade in/out animation to the body */
    @keyframes fadeInOut {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
	
.floating-icon {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #cb2624;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 9999; /* Ensures it stays above other elements */
}

        .floating-icon:hover {
            background-color: #a31e1c;
            transform: translateY(-50%) scale(1.1);
        }
        .floating-icon svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
        @media (max-width: 768px) {
            .floating-icon {
                width: 40px;
                height: 40px;
                padding: 8px;
            }
            .floating-icon svg {
                width: 20px;
                height: 20px;
            }
        }