@font-face {
        font-family: 'Satoshi';
        src: url('fonts/Satoshi-Regular.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
    
    /* Apply the Satoshi font globally */
    body {
        font-family: 'Satoshi', sans-serif;
    }
    
    a {
        text-decoration: none;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    @font-face {
        font-family: 'KalunyPro-Thin';
        src: url('fonts/KalunyPro-Thin.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    .custom-font-hugo {
        font-family: 'KalunyPro-Thin', sans-serif !important;
    }
    

/* navbar auto full width on mobile */

    @media (max-width: 767px) {
        #inner-navbar-container {
            max-width: 100% !important; /* Ensures full width */
            padding: 0 15px; /* Optional: Adjust side padding if needed */
        }
    }

/* Button Styles */

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-hover-bg {
    transition: 0.5s;
}

.btn-hover-bg:hover {
    background: #C0D62F !important;
        color: #fff !important;
        border: none !important;
}

.btn-hover-color {
    transition: 0.5s;
}

.btn-hover-color:hover {
    color: var(--bs-secondary) !important;
}

.btn-outline-primary {
    border: 1px solid #5779DD; /* Outline color */
    color: #5779DD; /* Text color */
    background-color: transparent; /* Transparent background */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.btn-outline-primary:hover {
    background-color: #5779DD; /* Background color on hover */
    color: #fff; /* Text color on hover */
}


button:focus:not(:focus-visible) {
    outline: none;
}

.btn-hover-bg {
background-color: #5779DD;
border: none !important;
}



  

/* 
.custom-btn {
    position: relative;
    transition: color 0.3s ease;
    text-decoration: none; 
}

.custom-btn::after {
    content: '';
  /*  border: solid #383835; */ /*
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg); 
    height: 10px; 
    width: 10px; 
    transition: transform 0.3s ease; 
}

.custom-btn:hover {
    color: #5779DD; 
}

.custom-btn:hover::after {
    transform: translateY(-50%) translateX(5px) rotate(-45deg); 
} */

@media (max-width: 767px) {
    .build-website-mobile-btn  {
        font-size: 1.8vw;
    }
}


/* Navbar container initial styles */

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}


#navbar-container {
    padding: 0;
    border-radius: 0 0 5px 5px;
    /* background-color: rgba(0, 0, 0, 0.7) !important; */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
}

#inner-navbar-container {
    padding: 10px;
    border-radius: 0 0 5px 5px;
     background-color: rgba(0, 0, 0, 0.5) !important; 
   
    transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
    margin-top: 0;
}

/* Initial state when page is not scrolled */
#inner-navbar-container {
    max-width: 85%;
    transition: max-width 0.5s ease; /* Adjust the transition duration and easing function as needed */
}

/* State when page is scrolled */
.scrolled #inner-navbar-container {
    max-width: 100%;
}


/* Background color on scroll */
.navbar-scrolled #navbar-container {
    background-color: black; /* Fully black on scroll */
    box-shadow: 0 4px 2px -2px gray; /* Optional: Add shadow on scroll */
    margin-top: 0 !important;
}

/* Adjust the inner container max-width on scroll */
.navbar-scrolled #inner-navbar-container {
    max-width: 100%;
    box-shadow: 0 4px 2px -2px gray; /* Optional: Add shadow on scroll */
    margin-top: 0 !important;
}

/* Remove border radius and expand over the page edge when the navbar is expanded */
.navbar-expand-xl #navbar-container,
.navbar-expand-xl #inner-navbar-container {
    border-radius: 0;
    margin: 0 -15px; /* Adjust the margin to go over the edge */
    padding: 0 15px; /* Adjust padding to ensure the content stays aligned */
    overflow: hidden;
}

.navbar-expand-xl .container-fluid #navbar-container,
.navbar-expand-xl .container-fluid #inner-navbar-container {
    border-radius: 0;
    margin: 0 -15px; /* Adjust the margin to go over the edge */
    padding: 0 15px; /* Adjust padding to ensure the content stays aligned */
    overflow: hidden;
}


/* Navbar link styles */
#navbar .nav-link {
    color: white !important;
    transition: color 0.3s ease;
}

/* Active link color */
#navbar .nav-link.active {
    color: #C0D62F ;
}

/* Hover state for nav links */
#navbar .nav-link:hover {
    color: #C0D62F !important;
}

/* Dropdown menu styles */
#navbar .dropdown-menu a {
    color: white !important;
}

#navbar .dropdown-menu a:hover {
    color: #C0D62F !important;
}

/* Default color for dropdown menu links */
.dropdown .dropdown-menu a {
    color: #fff; /* White color by default */
}

/* Color for dropdown menu links on hover */
.dropdown .dropdown-menu a:hover {
    color: #C0D62F!important; /* Green color on hover */
}

/* Active link color */
.navbar .nav-link.active {
    color: #C0D62F;
}

/* Hover state for nav links */
.navbar .nav-link:hover {
    color: #C0D62F !important;
}


#navbar .dropdown-menu {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 10px;
}

/* Adjust the navbar brand logo size */
.navbar-brand img {
    max-height: 25px; /* Set the desired height */
    max-width: auto; /* Maintain aspect ratio */
    transition: max-height 0.3s ease;
}

/* Optional: Adjust the logo size on scroll */
.navbar-scrolled .navbar-brand img {
    max-height: 40px; /* Set a smaller height on scroll */
}

/* Custom CSS to make <p> text white */
.single-image-section .fs-5 {
    color: white; /* Set <p> text color to white */
}

/* Dropdown open on hover */
#navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
}


.navbar {
    padding: 0;
}

.navbar .navbar-nav .nav-link {
    padding: 10px 12px;
    font-size: 16px;
    transition: .5s;
    color: #000;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.sticky-top.bg-white .navbar .navbar-nav .nav-link:hover,
.sticky-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: #000;
}
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu a {
    color: #fff; /* Initial color of dropdown links */
}


.dropdown .dropdown-menu a:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #fff;
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
   background-color: rgba(0, 0, 0, 0.7) !important;
    color: #fff;
    transition: .5s;
    opacity: 1;
}

/* Navbar container initial styles */
#navbar-container {
    padding: 0;
    border-radius: 0 0 5px 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
}

#inner-navbar-container {
    padding: 10px;
    border-radius: 0 0 5px 5px;
   background-color: rgba(0, 0, 0, 0.5) !important; 
     background-color: #EEF2F7 !important; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
    margin-top: 0;
}

/* Hide dropdown menu by default */
.navbar .nav-item .dropdown-menu {
    display: none; /* Hide dropdown menu initially */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show dropdown menu on hover */
.navbar .nav-item:hover .dropdown-menu {
    display: block; /* Show dropdown menu */
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Ensure background color */
}

/* Style for dropdown menu items */
.dropdown .dropdown-menu a {
    color: #fff; /* Color of dropdown links when not hovered */
}

/* Change color on hover */
.dropdown .dropdown-menu a:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #C0D62F; /* Hover color of dropdown links */}

    /* Hide dropdown menu by default */
.navbar .nav-item .dropdown-menu {
    display: none; /* Hide dropdown menu initially */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show dropdown menu on hover for desktop */
.navbar .nav-item:hover .dropdown-menu {
    display: block; /* Show dropdown menu */
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Ensure background color */
}

/* Style for dropdown menu items */
.dropdown .dropdown-menu a {
    color: #fff; /* Color of dropdown links when not hovered */
}

/* Change color on hover */
.dropdown .dropdown-menu a:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #C0D62F; /* Hover color of dropdown links */
}


@media (max-width: 1200px) {
    /* Default hidden state */
    #whoUsesDropdown {
        visibility: hidden;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.1s ease-out, opacity 0.1s ease-out, visibility 0s linear 0.1s;
    }

    /* Smooth dropdown on hover */
    .nav-item.dropdown:hover #whoUsesDropdown {
        visibility: visible;
        opacity: 1;
        max-height: 500px; /* Adjust as needed */
        transition: max-height 0.1s ease-out, opacity 0.1s ease-out;
    }
}


@media (min-width: 1200px) { 

/* Ensure dropdown toggle text remains black when dropdown is active */
.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .nav-item.dropdown.show > .nav-link {
color: #000 !important; /* Keep text black */
background-color: #B0C9FF !important; /* Keep highlight color */

}

} 
    
        /* Default style for hamburger menu icon */
        .navbar-toggler .fa-bars {
            color: #fff; /* Light color for dark background */
        }
        
        /* When the navbar background is light, this class will be added */
        .scrolled-navbar .navbar-toggler .fa-bars {
            color: #000; /* Dark color for light background */
        }
        
        /* Optional: Style for links */
        .scrolled-text-dark {
            color: #000; /* Dark text color on light background */
        }
        
        /* Additional styles for the navbar */
        #inner-navbar-container {
            padding: 10px;
            border-radius: 0 0 5px 5px;
            background-color: rgba(0, 0, 0, 0.5); /* Original background color */
            transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
            margin-top: 0;
        }
        
        /* Default dropdown styles */
        .navbar .nav-item .dropdown-menu {
            background-color: rgba(0, 0, 0, 0.7) !important; /* Dark background initially */
            color: #ffffff !important; /* White text initially */
            border: none !important; /* Remove borders */
            border-radius: 10px !important; /* Rounded corners */
           
        
            transition: all 0.3s ease!important; /* Smooth transition */
        }
        
        /* Keep dropdown visible when hovering */
        .navbar .nav-item:hover .dropdown-menu {
            display: block !important;
        }
        
        /* Styles when navbar is scrolled */
        #inner-navbar-container.scrolled-navbar .navbar-nav .dropdown-menu {
            background-color: #EEF2F7 !important; /* White background on scroll */
            color: #383835 !important; /* Dark text on scroll */
            border-radius: 10px !important; /* Maintain border radius on scroll */
            border: none !important; /* Ensure no border is applied */
        }
        
        /* Ensure dropdown items have correct color */
        #inner-navbar-container.scrolled-navbar .navbar-nav .dropdown-menu .dropdown-item {
            color: #383835 !important; /* Dark text color */
        }
        
        /* Default style for navbar links */
        .navbar-nav .nav-item .nav-link {
            transition: background-color 0.3s ease, border-radius 0.3s ease;
        }
        
        /* Style for active nav-link */
        .navbar-nav .nav-item.active .nav-link {
            border-radius: 10px !important; /* Maintain border radius on scroll */
            color:#383835 !important;
        }
        
        
        
        /* Ensure dropdown background changes to match navbar */
        .scrolled-navbar .dropdown-menu {
            background-color: #EEF2F7 !important; /* White background on scroll */
            color: #383835 !important; /* Dark text on scroll */
            border-radius: 5px !important; /* Maintain border radius on scroll */
        }
        
        .scrolled-navbar .dropdown-menu .dropdown-item {
            color: #383835 !important; /* Dark text for dropdown items */
        }
        
        .scrolled-navbar .dropdown-menu .dropdown-item:hover {
            background-color: #D3E2FF !important; /* Light blue on hover */
        }
        
        /* Default style for navbar links */
        .navbar-nav .nav-item .nav-link {
            transition: background-color 0.3s ease, border-radius 0.3s ease;
        }
        
        /* Style for active nav-link */
        .navbar-nav .nav-item.active .nav-link {
            background-color: transparent!important; /* Light blue on hover */
            color: #EEF2F7 !important; /* White text color */
           
            padding: 4px 9px !important; /* Smaller padding for a smaller highlight */
        }
        
        /* Default style for nav item links */
        .navbar-nav .nav-item .nav-link {
            display: inline-block;
           
            border-radius: 8px; /* Rounded edges for default state */
            transition: background-color 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
        }
    
    
        
        /* Hover effect for nav items */
        .navbar-nav .nav-item .nav-link:hover {
            background-color: #C0D62F !important; /* Slightly darker blue on hover */
            color: #000 !important;
            /* Smaller box on hover */
            border-radius: 8px !important; /* Adjust border-radius on hover */
        }
        
        /* Hover effect when navbar is scrolled */
        .scrolled-navbar .navbar-nav .nav-item .nav-link:hover {
            background-color: #B0C9FF !important; /* Slightly darker blue on hover */
            color: #000 !important;
           /* Smaller box on hover */
            border-radius: 8px !important; /* Adjust border-radius on hover */
        }

         /* Hover effect when navbar is scrolled */
         .navbar-nav .nav-item.active .nav-link:active {
            background-color: #B0C9FF !important; /* Slightly darker blue on hover */
            color: #000 !important;
           /* Smaller box on hover */
       
        }
        
        /* Hover effect for nav items */
        .navbar-nav .nav-item .nav-link:hover {
            background-color: #B0C9FF !important; /* Slightly darker blue on hover */
            color: #000 !important;
            /* Smaller box on hover */
            border-radius: 8px !important; /* Adjust border-radius on hover */
        }


        /* Default style for dropdown menu */
        .navbar .nav-item .dropdown-menu {
            background-color: #EEF2F7 !important; /* White background */
            color: #383835 !important; /* Dark text color */
            border: none !important; /* Remove border */
            border-radius: 8px !important; /* Rounded corners */
            margin-top: 20px!important; /* Add gap between navbar and dropdown */
            padding: 0; /* Remove default padding */
            box-shadow: none; /* Remove shadow */
            transition: background-color 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
        }


/* Style for dropdown items */
.navbar .nav-item .dropdown-menu .dropdown-item {
    color: #ffffff !important; /* Default white text */
    padding: 6px 10px; /* Standard padding */
    border-radius: 4px; /* Rounded edges */
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* Tight highlight effect on hover */
.navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 10px); /* Slightly bigger than text */
    height: calc(100% - 6px); /* Slightly bigger than text */
    background-color: #B0C9FF; /* Highlight color */
    border-radius: 6px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

/* Show highlight on hover */
.navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
    opacity: 1;
}

.navbar .nav-item .dropdown-menu .dropdown-item:hover {
    color: #000 !important; /* Text turns black on hover */
    background-color: transparent !important; /* Transparent background */
}



        
        /* Highlighted state for active dropdown items */
        .navbar .nav-item .dropdown-menu .dropdown-item.active {
            background-color: #383835 !important; /* Dark background for active state */
            color: #ffffff !important; /* White text color for active state */
            border-radius: 8px !important; /* Rounded corners */
            padding: 6px 10px !important; /* Adjust padding for active state */
        }

        @media (max-width: 1200px) { 
        
        /* Hover and active effect for nav items */
        .navbar .nav-item:hover,
        .navbar .nav-item.active {
            background-color: #B0C9FF !important; /* Highlight color on hover and active */
            color: #000 !important; /* White text color on hover and active */
            border-radius: 8px !important; /* Adjust border-radius on hover and active */
        }
    }
        
        @media (min-width: 1200px) { 

/* Apply consistent padding to prevent movement */
.navbar .nav-item .nav-link {

padding: 4px 9px !important;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

/* Hover effect for the hovered nav item */
.navbar .nav-item .nav-link:hover {
color: #000 !important; 
background-color: #B0C9FF !important; 

padding: 4px 9px !important;
}

.navbar .navbar-nav .nav-link {
padding: 4px 9px !important;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}


.navbar .navbar-nav .nav-link .dropdown-item.active {
padding: 4px 9px !important;
color: #000 !important;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

.nav-link .dropdown-toggle {
    color: #000 !important
}

.navbar .navbar-nav .nav-link:hover  {
color: #000 !important; 
background-color: #B0C9FF !important; 

padding: 4px 9px !important;
}

.navbar .navbar-nav .nav-link:active {
color: #000 !important; 
background-color: #B0C9FF !important; 
border-radius: 5px !important;
padding: 4px 9px !important;
}

}
    
   
    /* Default hamburger menu color when background is black */
    .navbar-toggler {
        color: white; /* Light color for dark background */
    }
    
    /* Hamburger menu color when background is white */
    .scrolled-navbar .navbar-toggler {
        color: #C0D62F !important; /* Dark color for light background */
    }
    
    /* Navbar text color when background is black */
    .nav-link {
        color: white;
        transition: color 0.3s ease;
    }
    
    /* Navbar text color when background is grey */
    .scrolled-navbar .nav-link {
        color: black !important; /* Dark text for light background */
    }
    
    /* Dropdown menu background when navbar is grey */
    .scrolled-navbar .dropdown-menu {
        background-color: #EEF2F7 !important; /* Light background for dropdown */
    }
    
    /* Default dropdown menu background when navbar is black */
    .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.9); /* Dark background for dropdown menu */
    }
    
    /* Text color when navbar background is grey */
    .scrolled-text-dark {
        color: black !important; /* Dark text when navbar background is light */
    }


    @media (max-width: 1200px) {
               .navbar .nav-item .dropdown-menu .dropdown-item:hover {
           
        
            border-radius: 0px !important; /* Adjust border-radius on hover */
        } 

        /*  Hover and active effect for nav items */
         .navbar .nav-item:hover,
        .navbar .nav-item.active {
           
        /*   color: #fff !important;
           background-color: rgba(0, 0, 0, 0.5) !important; */
           border-radius: 8px !important; /* Adjust border-radius on hover */
       } 

       .navbar .nav-item .dropdown-menu .dropdown-item {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
       }


            }

            @media (max-width: 1200px) { 

         /* Default style for dropdown menu */
         .navbar .nav-item .dropdown-menu {
            background-color: #EEF2F7 !important; /* White background */
            color: #383835 !important; /* Dark text color */
            border: none !important; /* Remove border */
            border-radius: 8px !important; /* Rounded corners */
            margin-top: 0px!important; /* Add gap between navbar and dropdown */
            padding: 0; /* Remove default padding */
            box-shadow: none; /* Remove shadow */
            transition: background-color 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
        }
            
            }

    

    
 
                    #inner-navbar-container {
                        padding: 10px;
                        border-radius: 0 0 5px 5px;
                        background-color: rgba(0, 0, 0, 0.5) !important; /* Original background color */
                        transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
                        margin-top: 0;
                    }
                
                    .scrolled-navbar {
                        background-color: #EEF2F7 !important; /* New background color */
                    }
    
                    /* Default navbar styles */
    #inner-navbar-container {
        padding: 10px;
        border-radius: 0 0 5px 5px;
        background-color: rgba(0, 0, 0, 0.5) !important;
        transition: background-color 0.3s ease, color 0.3s ease;
        margin-top: 0;
    }
    
    /* Navigation links default style (white text) */
    #inner-navbar-container .nav-link {
        color: #ffffff;
        transition: color 0.3s ease;
        margin: 2px;
        border-radius: 8px;
    }

     /* Navigation links default style (white text) */
     #inner-navbar-container .nav-link:active {
        color: #000 !important;
        transition: color 0.3s ease;
    }
    
    /* Text color for light background */
    .scrolled-text-dark {
        color: #000000 !important;
    }
    
    /* Other styles for scrolled navbar if needed */
    .scrolled-navbar {
        /* Additional styles if necessary */
    }
    
        
                
            
    
  
    #inner-navbar-container {
        padding: 10px;
        border-radius: 0 0 5px 5px;
        background-color: rgba(0, 0, 0, 0.5) !important; /* Original background color */
        transition: background-color 0.3s ease, box-shadow 0.3s ease, max-width 0.3s ease, border-radius 0.3s ease;
        margin-top: 0;
    }
    
    .scrolled-navbar {
        background-color: #EEF2F7 !important; /* New background color */
    
    }
    
    

    
    

     /* Ensure elements are aligned properly and on one line */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .navbar-logo {
        max-width: 150px; /* Ensure logo doesn't take too much space */
        height: auto;
    }
    
    /* Mobile-specific adjustments */
    @media (max-width: 767.98px) {
        /* Keep the logo, button, and hamburger menu on one line */
        .mobile-nav-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-grow: 1; /* Allow the controls to take the remaining space */
        }
    
        .navbar-brand {
            flex-grow: 1; /* Ensure the logo and brand align to the left */
        }
    
        .build-website-mobile-btn {
            flex-shrink: 1; /* Prevent the button from shrinking too much */
            margin-right: 0px; /* Space between button and menu */
            font-size: 10px; /* Adjust font size for mobile */
            padding: 6px 10px; /* Adjust padding for a smaller size */
            white-space: nowrap; /* Prevent the button text from wrapping */
        }
    
        .navbar-toggler {
            margin-left: 5px; /* Adjust space between button and menu icon */
        }
    
        /* Ensure the entire navbar fits within one line */
        .navbar-nav {
            flex-wrap: nowrap;
        }
    
        .navbar-nav .nav-link {
            padding: 8px 12px; /* Adjust padding to fit content */
            font-size: 14px; /* Adjust font size for mobile */
        }
    
        /* Hide the desktop button on mobile */
        .build-website-desktop-btn {
            display: none;
        }
    }
    
    /* Ensure the desktop button is only visible on larger screens */
    @media (min-width: 992px) {
        .build-website-desktop-btn {
            display: inline-block;
        }

      
          
    
        .build-website-mobile-btn {
           display: none;
        }
    }


    @media (max-width: 1200px) {
    .build-website-mobile-btn {
        display: inline-block !important;
    }
}
  
    
    .nav-item.dropdown .dropdown-menu {
        color: #000 !important;
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }
    
    .nav-item.dropdown.show .dropdown-menu {
        color: #000 !important;
        display: block;
        opacity: 1;
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.6) !important; /* Original background color */
    }
    
.nav-link.dropdown-toggle.show {
    color: #000 !important;
}


    /* Initially hide dropdown */
.nav-item .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Ensure dropdown is visible when hovered */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    color: #000 !important;
}

/* Ensure dropdown is visible when hovered */
.nav-item.dropdown:active .dropdown-menu {
    display: block;
    color: #000 !important;
}






/*** Navbar End ***/


/*** Back to top button ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
    background-color: #5779DD;
}


/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}


/*** Topbar End ***/



/*** Hero Start ***/

.image-caption .container .p-3 {
    max-width: calc(100% - 30px); /* Adjust padding/margin accordingly */
    word-wrap: break-word;
}

.single-image-section {
    position: relative;
    overflow: hidden; /* Ensure content inside doesn't overflow */
}

.single-image-section img {
    width: 100%;
    height: auto;
    min-height: 100vh; /* Ensure the image covers full viewport height */
    object-fit: cover;
}


.image-caption .container {
    position: relative; /* Ensure positioning context */
    z-index: 1; /* Ensure text is above the image */
}

.image-caption .btn {
    margin-top: 20px; /* Default button margin */
}

/* Background image styles */
.single-image-section {
    position: relative;
    overflow: hidden; /* Ensure content inside doesn't overflow */
}

.single-image-section img {
    width: 100%;
    height: auto;
    min-height: 100vh; /* Ensure the image covers full viewport height */
    object-fit: cover;
}

.image-caption .container {
    position: relative; /* Ensure positioning context */
    z-index: 1; /* Ensure text is above the image */
}

.image-caption h4 {
    font-size: 60px;
    line-height: 1; /* Adjust line height as needed */
}

.image-caption p {
    font-size: 18px; /* Adjust font size for readability */
    line-height: 1.8; /* Adjust line height for readability */
}

.image-caption .btn {
    margin-top: 20px; /* Adjust spacing as needed */
}

/* Background image styles */
.single-image-section {
    position: relative;
    overflow: hidden; /* Ensure content inside doesn't overflow */
}

.single-image-section img {
    width: 100%;
    height: auto;
    min-height: 100vh; /* Ensure the image covers full viewport height */
    object-fit: cover;
}


.image-caption .container {
    position: relative; /* Ensure positioning context */
    z-index: 1; /* Ensure text is above the image */
}

.image-caption h4 {
    font-size: 60px;
    line-height: 1; /* Adjust line height as needed */
}

.image-caption p {
    font-size: 18px; /* Adjust font size for readability */
}

.image-caption .btn {
    margin-top: 20px; /* Adjust spacing as needed */
}

/* Background image styles */
.single-image-section {
    position: relative;
    overflow: hidden; /* Ensure content inside doesn't overflow */
}

.single-image-section img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

.start-50 {
    left: 30% !important;
}

/* Ensure the hero image is positioned correctly */
.single-image-section {
    position: relative; /* Required for absolute positioning of background image */
    overflow: hidden; /* Ensure no overflow of image */
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    z-index: -1; /* Ensure it stays behind other content */
}


/* Scroll to Explore Button Styling */
.scroll-to-explore-container {
    position: absolute;
    bottom: 20px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center align the button */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
}

.scroll-to-explore-container.visible {
    opacity: 1; /* Make visible */
}

/* Styling for the scroll button */
.scroll-to-explore {
    padding: 10px 20px;
    font-size: 18px;
    background-color: transparent;
    color: #EEF2F7;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Styling for the downward arrow */
.scroll-arrow {
    margin-left: 10px; /* Adds space between text and arrow */
    font-size: 18px;
    opacity: 1;
    animation: arrow-animation 1.5s infinite ease-in-out; /* Infinite animation loop */
}

/* Animation for fading the arrow from full opacity to 0% */
@keyframes arrow-animation {
    0% {
        transform: translateY(-60%) scale(0.9);
        opacity: 0;
    }
    35% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    65% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(60%) scale(0.9);
        opacity: 0;
    }
}




/* Hero End */


/* Service box home */

.service-box-home { border-radius: 15px;/* Curved corners */ overflow: hidden;/* Hide any overflow content */position: relative; perspective: 1000px;/* Perspective for 3D flip */ height: 500px;/* Fixed height for the box to maintain consistency */}
.service-box-home-inner {width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; position: relative; }
.service-box-home.flipped .service-box-home-inner { transform: rotateY(180deg); }
.service-box-home .side { width: 100%; height: 100%; position: absolute; top: 0; left: 0; backface-visibility: hidden; border-radius: 15px; overflow: hidden; /* Hide any overflow content */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.service-box-home .box-wrapper { position: relative; /* Positioning context for absolute positioning */ width: 100%; height: 100%; background-color: #EEF2F7;  /* Background color for each side */ padding: 20px; /* Padding for content */ box-sizing: border-box;/* Include padding in the element's total width and height */ display: flex; flex-direction: column; align-items: center; justify-content: center; }
.service-box-home .front { border-top: 5px solid #C0D62F; /* Top border line */ }
.service-box-home .back { border-top: 5px solid #5779DD; /* Top border line */ transform: rotateY(180deg); }
.service-box-home img {    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain;/* Fixed height */ padding: 30px;/* Padding around the image */ box-sizing: border-box;/* Include padding in the element's total width and height */ border-radius: 10px; /* Optional: curved corners for the image */ margin-bottom: 15px; /* Space between image and text */ }
.service-box-home .text-area { text-align: center; /* Center align the text */ margin-bottom: 20px; margin:20px;/* Space between text and button */ font-family: Arial, sans-serif; /* Font family */ color: #333; /* Text color */ }
.service-box-home .btn { position: absolute; /* Position absolute */ bottom: 20px;/* 20px from the bottom */ right: 20px;/* 20px from the right */ padding: 0;/* Remove padding */ width: 40px;/* Set width */height: 40px;/* Set height */ background-color: #383835;/* Button background color */ color: #FFF;/* Button text color */ border: none;/* Remove default button border */ border-radius: 50%; /* Circle shape */cursor: pointer;/* Pointer cursor on hover */ text-align: center;/* Center the content */ font-size: 20px;/* Font size */ line-height: 40px;/* Center vertically */ font-family: Arial, sans-serif; /* Font family */transition: background-color 0.3s ease; /* Smooth transition for background color */ }
.service-box-home .btn::before { content: '+'; }
.service-box-home .btn:hover { background-color: #333;     /* Darken button color on hover */ }
.service-box-home.flipped .back .btn::before { content: '×'; }

/* Service box User */
.service-box-user {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    perspective: 1000px;
    height: 400px;
}
.service-box-user-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.service-box-user.flipped .service-box-user-inner {
    transform: rotateY(180deg);
}
.service-box-user .side {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.service-box-user .box-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #EEF2F7;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.service-box-user .front {
    border-top: 5px solid #C0D62F;
}
.service-box-user .back {
    border-top: 5px solid #5779DD;
    transform: rotateY(180deg);
}
.service-box-user img {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 15px;
}
.service-box-user .text-area {
    text-align: center;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    color: #333;
}
.service-box-user .btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 0;
    width: 40px;
    height: 40px;
    background-color: #383835;
    color: #FFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease;
}
.service-box-user .btn::before {
    content: '+';
}
.service-box-user .btn:hover {
    background-color: #333;
}
.service-box-user.flipped .back .btn::before {
    content: '×';
}

.panel {
    margin-bottom: 30px;
    color: #c0d62f;
    font-size: 60px;
}


/* Service home end */



/* Home Services */


.home-services{ width:100%; background: white;}
.home-services *{-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease;margin-top: 0px;}
.home-services h3{ color:#383835; font-weight:700; font-size:20px; margin-bottom:40px; position:relative;}
.home-services h3:after{content:''; width:50px; height:1px; background:#C0D62F; position:absolute; left:50%; margin-left:-25px; bottom:-25px;}
.home-services a{ margin-top:30px;}
.home-services .content{width:100%; float:left;}
.home-services .content:hover .icon{ border:15px solid #C0D62F;}
.home-services .content:hover img{ margin-top:19px;}
/* .home-services .icon{ width:132px; height:132px; background:#C0D62F; border:9px solid #d2f6f4; border-radius:132px; } */
.home-services .icon{display:inline-block; position:relative;}
.home-services .icon:hover:after{ top:40px;}
/*.home-services .icon img{ margin-top:25px;} */
.home-services .line{ width:132px; height:132px; position:relative; display:inline-block;}
.home-services .line:after{content:''; width:30px; height:30px; border-radius:30px; background:#C0D62F; position:absolute; right:-96px; top:50px; border:10px  solid #fff;}
.home-services .line:before{content:''; width:141px; height:1px; border-top:1px dotted #C0D62F; position:absolute; top:0; right:-150px; top:64px;}

/* Home Services end */


/* three column box */

.three-column-box-container { position: relative; /* Add relative positioning */ background-color: #EEF2F7; border-radius: 15px; overflow: hidden; margin-top:60px;margin-bottom: 60px; max-width: 1000px; /* Set a maximum width for the container */  margin: 0 auto; /* Center the container horizontally */  /* Ensure the container properly contains its child elements */ margin-bottom: 20px;/* Add margin to create space between boxes */}
.three-column-box-container .three-column-box { display: flex; }
.three-column-box-container .column { flex: 1; padding: 0px; box-sizing: border-box; position: relative; /* To position the separator lines */ }
.three-column-box-container .column:not(:last-child)::after { content: ''; position: absolute; top: 0; right: 0;  width: 2px;  height: 100%;  background-color: #FFF; /* Add white border to separate columns */ }
.three-column-box-container .text-area { text-align: center; }
.three-column-box-container .text-area h2 { color: #333; font-size: 18px;  margin-bottom: 10px; }
.three-column-box-container .text-area p { color: #666; font-size: 14px; }
/* Add green line across the bottom */
.three-column-box-container .green-line { position: absolute; bottom: 0;  left: 0; width: 100%;  height: 5px;  background-color: #C0D62F;  border-radius: 0 0 15px 15px; }

/* three column box end */


/* four column box */

/* Ensure images in the boxes maintain their aspect ratio */
.partner-logo {
    max-width: 100%; /* Ensure logos scale properly */
    height: auto; /* Maintain aspect ratio */
}



.footer-item img.partner-logo {
 
    width: 100%; /* Ensure responsiveness */
    display: block; /* Center if needed */
  
}

@media (max-width: 1200px) and (min-width: 990px){

.footer-item img {
    max-width: 80% !important;
}

}

.logo-container {
    display: flex;
    gap: 10px; /* Adds spacing between logos */
    margin-left: -20px;
}

.logo-container img {
    height: 80px; /* Standardize height */
    width: auto; /* Maintain aspect ratio */
}




.img-fluid {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
}

.img-fluid.logo {
   
    height: auto;
    object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
    margin: 10px;
}

@media (max-width: 1200px) {
    .img-fluid.logo {
       
        height: auto;
        object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
    }
}

/* Responsive layout for two columns below 1200px */
@media (max-width: 1200px) {
    .four-steps .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }

    .text-area {
        margin-bottom: 20px; /* Add space between text and button */
        position: relative; /* Ensure text-area positioning is controlled */
    }
    
    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 15px; /* Add horizontal padding for spacing between columns */
        margin-bottom: 20px; /* Add bottom margin to space out the rows */
    }

    .event-item {
        margin: 0 auto; /* Center the event item */
    }
}



/* 4 Steps Section */
.four-steps {
    padding: 40px 0;
    background-color: #ffffff;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.four-steps-header {
    text-align: left;
    margin-bottom: 30px;
    color: #383835;
}



/* Main container for layout */
.four-steps-container {
    display: flex;
    align-items: stretch; /* Ensure both columns match height */
    gap: 30px;
}

/* Left column (Steps) */
.steps-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between boxes */
}

/* Step Box Styling */
.step-box {
    background-color: #EEF2F7;
    padding: 20px;
    border-radius: 8px;
    box-shadow: none;
    flex: 1; /* Allow equal height distribution */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right column (Image) */
.image-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.foursteps-buttons {
    padding-left: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
  
  }

.foursteps-buttons a {
    padding: 10px 20px; /* Reduce padding */
   
    width: auto; /* Allow buttons to size based on content */
    text-align: center;
}

@media (max-width: 1200px) {

.foursteps-buttons a {
    padding: 10px 20px; /* Reduce padding */
   
    width: 70%; /* Allow buttons to size based on content */
    text-align: center;
}
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .four-steps-container {
        flex-direction: column;
        align-items: center;
    }

    .image-column {
        order: 1; /* Move image below steps */
        width: 70%; /* Make the image narrower */
        height: auto;
    }

    .steps-column {
        width: 70%; /* Make the image narrower */
    }

    .four-steps-header {
    text-align: center;
    margin-bottom: 30px;
}

}

@media (max-width: 767px) {
    .four-steps-container {
        flex-direction: column;
        align-items: center;
    }

    .image-column {
        order: 1; /* Move image below steps */
        width: 90%; /* Make the image narrower */
        height: auto;
    }

    .steps-column {
        width: 90%; /* Make the image narrower */
    }

    .four-steps-header {
        text-align: left;
        margin-bottom: 30px;
    }
}





/* Responsive layout for smaller screens (e.g., mobile) */
@media (max-width: 767px) {
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px; /* Reduce margin for smaller screens */
    }
}

@media (max-width: 990px) {
    .event .row .col-md-3 .event-item{
        width: 100%;
        padding: 0px;
    }
}

.col-md-3 .service-box-home img {
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 15px;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible within the container */

}

.col-md-3 .service-box-home {

    height: 370px;
}

/* four column box end */


/* Counter */
.counter-counting {

    color:#383835;

}

.counter-item {
    background-color: #ffffff; /* White background */
    border-radius: 15px; /* Rounded edges */
 
}

@media (max-width: 990px) {
    .counter-item {
        text-align: center;
    }
}

/* Counter end */

/* Tablist */
.tablist {
    display: flex;
    justify-content: space-between; /* Spread out tabs to fill container */
    padding: 0px 0; /* Adjust padding to your preference */
}

.tab {
    flex: 1; /* Make tabs evenly spread out */
    text-align: center; /* Center the text within each tab */
    cursor: pointer;
    color: #383835;
    font-size: 22px;
    font-weight: bold; /* Optional: makes the text bold */
    transition: color 0.3s; /* Smooth color transition on hover and active state */
}

.tab:hover {
    color: #5779DD; /* Change text color on hover */
}

.tab.active::after {
    content: '';
    display: block;
    width: 100%;
    margin: auto;
   
    height: 1px;
  /*  background-color: #5779DD;  Blue underline */
}

.tab-content {
   /*   border-top: 1px solid #ccc; */
    padding-top: 10px;
}

.tab-content-item {
    display: none;
}

.tab-content-item.active {
    display: block;
}

/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Column */
.column {
    flex: 1;
    padding: 0 15px; /* Adjust horizontal padding to create space around images */
}

/* Header */
.header-tablist {
    font-size: 30px;
    color: #383835;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 0px;
    padding-top: 0px;
    text-align: left;
    line-height: 1.2em;
}

/* Details */
.details {
    display: flex;
    flex-wrap: wrap;
}

/* Icon Text Pair */
.icon-text-pair {
    display: flex;
    align-items: center;
    width: 50%; /* Adjusted to 50% to fit two pairs per row */
    margin-bottom: 10px;
    color: #383835;
    font-weight: 700;
}

/* Icon */
.icon {
    width: 23px;
    height: 23px;
    margin-right: 10px;
}

.icon img {
    width: 100%;
    height: 100%;
}

/* Buttons */
.feature-buttons {
    margin-top: 20px; /* Adjust top margin */
}


.feature-buttons .btn,
.feature-buttons .custom-btn {
    white-space: nowrap; /* Prevent text wrapping */
gap: 0px;
}
   



.button {
    padding: 10px 20px;
    margin-left: 10px;
    background-color: #5779DD;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}


/* Tablist end */



/* Join the club */

.two-column-box {
    display: flex;
    background-color: #EEF2F7;
    border-radius: 15px;
    padding: 0;
    padding-top: 40px;
   
}

.two-column-box.row {
    margin-bottom: 75px;
}


.left-column {
    flex: 1;
    padding: 40px;
    box-sizing: border-box;
}

.left-column h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.left-column p {
    font-size: 16px;
    margin-bottom: 20px;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    white-space: nowrap; /* Prevent text wrapping */
}

.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.button.primary {
    background-color: #5779DD;
    color: white;
}

.button.primary:hover {
    background-color: #0056b3;
}

.button.secondary {
    background-color: transparent;
    color: #5779DD;
    border: 1px solid #5779DD;
}

.button.secondary:hover {
    background-color: #5779DD;
    color: white;
}

.right-column {
  
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    height: 100%;
    padding: 0;
}

.right-column img {
    width: 100%;
    height: auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    object-fit: cover;
}

.join-the-club-header {
    font-size: 46px!important;
}

@media (max-width: 1200px) and (min-width: 990px) {
    .right-column {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: stretch; /* Ensures child elements fill height */
        overflow: hidden;
        position: relative;
        height: 100%;
        padding: 0;
    }

    .right-column img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures it covers the entire container */
        display: block;
    }

    .join-the-club-header {
        font-size: 36px!important;
    }

    .left-column h2 {
        font-size: 24px;
        margin-bottom: 5px;
        margin-top: -15px;
}

}

/* Join the club end */


/* Full Width Section */

.full-width-section, .bespoke-features-section {
    background-color: #383835;
    color: #fff;
    padding: 40px 20px; /* Adjusted padding */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


/* Container */
.content-wrapper {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Bespoke Features */
.bespoke-features {
    font-size: 60px;

    color: #C0D62F;
    text-align: center;
    margin-bottom: 40px;
}

@media (max-width: 767px) {

    .bespoke-features {
        font-weight: 600;
}
}

/* Text Center */
.text-center h3 {
    font-size: 24px;
    font-weight: bold;
    color: 
}

.text-center p {
    font-size: 16px;
    margin-bottom: 15px;
}

body, html { margin: 0; padding: 0; box-sizing: border-box; }
.content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.full-width-section { background-color: color:#383835; color: #fff; padding: 40px 0; box-sizing: border-box; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-bottom: 0; /* Remove margin bottom */ }
.full-width-section h2 { text-align: center; margin-bottom: 40px; }
.four-columns { display: flex; gap: 20px; justify-content: space-between; }
.four-columns .column {flex: 1;padding: 20px;box-sizing: border-box;border-radius: 10px;background-color: #EEF2F7;/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ margin-top: 40px; margin-bottom: 40px;}

/* Full Width Section end */


/* Features Section */


.custom-hr {
    border: none;
    height: 2px;
    background-color: #c0d62f;
    width: 80%; /* Adjust the width as needed */
    margin: 20px auto; /* Adjust the margin as needed */
    opacity: 1;
}

.features-section .white-box {
    padding: 30px;
}

.features-section .feature-heading {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.features-section .header-features {
    font-size: 18px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 75px;
    color: #555555;
}

.features-section .feature-icon-text-pair {
    font-size: 24px;
    line-height: 34px;
    color: #333333;
    font-weight: 700;
}

.features-section .feature-icon-text-pair i {
    color: #c0d62f; /* Change tick icon color */
    font-size: 24px; /* Increase icon size */
}

.features-section .home-feature-buttons {
    margin-top: 20px;
}

.features-section .feature-details {
    line-height: 1.3;
}

.features-section .btn-primary,
.features-section .btn-outline-primary {
    font-size: 16px;
}

/* General styles for the section */
.features-section {
    background-color: #EEF2F7; /* Set grey background color */
    padding-top: 20px; /* Adjusted padding */
    padding-bottom: 20px ; /* Adjusted padding */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Hide overflow */
    clear: both;
    margin-bottom: 0; /* Remove margin bottom */
}



/* Make section full width */
.features-section.full-width {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    box-sizing: border-box;
}

/* Clearfix for floating elements inside */
.features-section::after {
    content: "";
    display: table;
    clear: both;
}

  
  .features-section .white-box {
	border-radius: 10px;
	background-color: #fff; /* Set white background color */
  
  }
  
  .features-section .row {
	display: flex;
	flex-wrap: wrap;
	max-width: 1050px;
	margin: 0 auto;
	padding: 0px; /* Add padding */
	box-sizing: border-box;
  }

  @media (max-width: 1400px) and (min-width: 1200px) { 
    .features-section .row {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px; /* Set maximum width to 1100px */
      
        box-sizing: border-box;
    }


    .features-section .white-box.pair {
     
        margin: 0 15px; /* Add horizontal spacing between the boxes */
        border-radius: 10px;
        background-color: #fff; /* Set white background color */
        padding: 20px; /* Add padding inside the white box */
    }

    .col-12.d-flex.justify-content-center.features {
        width: 97.5%;
        max-width: 1200px; /* Optional: Prevent it from getting too wide on large screens */
        margin: 0 auto; /* Centers the container */
    }
    
}


  
.img-fluid.features-mockup {
    margin: 0 auto; /* Centers the container */
    padding: 20px;
}

    /* Base styles for desktop screens */
    .feature-details {
        margin: 0px; 
        text-align: left;
       
      }
 
  
  
  
  .features-section .column {
	flex: 1 1 calc(50% - 20px); /* Adjust column width */
	box-sizing: border-box;
	margin: 0 10px 20px; /* Adjust margin */
	padding: 20px;
	border-radius: 10px;
	background-color: #fff; /* Set background color for feature boxes */
	color: #383835; /* Set text color */
	box-shadow: none; /* Remove box-shadow */
  }
  
  .features-section .column h3 {
	color: #C0D62F; /* Set heading color */
  }
  
  .features-section .column video {
	width: 100%;
	height: auto;
	border-radius: 10px; /* Match the column's rounded corners */
  }

  
.row { display: flex; flex-wrap: wrap;/*  max-width: 1200px;*/ margin: 0 auto; z-index: 1; }
.column { flex: 1 1 calc(33.333% - 20px); /* Adjust column width */ box-sizing: border-box; margin: 10px; padding: 20px; border-radius: 10px; }
.text-column { background-color: transparent; /* Remove white background */ border-radius: 10px; padding: 20px;  box-shadow: none; }
.feature-icon-text-pair { display: flex; align-items: center; margin-bottom: 10px; }
.feature-icon-text-pair .icon { margin-right: 10px;}
.feature-icon-text-pair img { max-width: 20px;}

/* General feature buttons style */
.feature-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    margin-left: 10px;
}


@media (max-width: 1200px) and (min-width: 990px) { 

    .feature-buttons {
        padding-top: 0px;
    }
    }

.feature-buttons:after{}
.button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; background-color: #5779DD; color: white; }
.button:hover { background-color: #0056b3; }
.home-feature-buttons { padding-top: 50px; }


@media (max-width: 767px) {
.feature-buttons {/* display: flex; */gap: 10px;align-items:center; display: flex; gap: 10px; align-items: center; padding-top: 0px;}

.icon-text-pair {
    display: ;
    align-items: center;
    width: ;
    margin-bottom: 10px;
    color: #383835;
    font-weight: 700;
}

.details {
    padding:0px;
}


}

/* Container for the entire section */
.features-section-condensed {
    background-color: #000000; /* Set grey background color */
    padding: 40px 20px; /* Adjusted padding */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border-radius: 0px; /* Add border-radius */
    overflow: hidden; /* Hide overflow */
    clear: both;
    display: flex;
    justify-content: center;
}

/* White box for content */
.features-section-condensed .white-box {
    border-radius: 10px;
    background-color: #fff; /* Set white background color */
    padding: 20px; /* Add padding inside the white box */
    box-sizing: border-box;
    width: 100%;
}

/* Flexbox for row layout */
.features-section-condensed .row {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; /* Remove padding from row */
    box-sizing: border-box;
}

/* Columns styling */
.features-section-condensed .column {
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff; /* Set background color for feature boxes */
    color: #000; /* Set text color */
   /* flex: 1 1 50%;  Equal width for both columns */
}

/* Specific styling for the feature details column */
.features-section-condensed .feature-details-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}


    

/* Specific styling for the image column */
.features-section-condensed .image-column {
    display: flex;
    justify-content: center; /* Center align the image */
    align-items: center;
}

/* Ensure the image fits within the column */
.features-section-condensed .image-column img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Ensure image scales down correctly */
}

/* Heading styling */
.features-section-condensed .header-features {
    font-size: 24px;
    margin-bottom: 20px;
    color: #C0D62F; /* Set heading color */
}

/* Icon-text pair styling */
.features-section-condensed .icon-text-pair {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Space between icon-text pairs */
    color: #383835;
    font-weight: 500;
}

/* Icon styling */
.features-section-condensed .icon {
    margin-right: 10px;
}

/* Text styling */
.features-section-condensed .text {
    font-weight: bold;
}

/* Body text styling */
.features-section-condensed .body-text {
    margin-bottom: 20px; /* Space between icon-text pairs */
}

/* Button styling */
.features-section-condensed .feature-buttons {
    text-align: center; /* Center buttons horizontally */
}

.features-section-condensed .button {
    background-color: #C0D62F; /* Primary button color */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

.features-section-condensed .button.secondary {
    background-color: #d3d3d3; /* Secondary button color */
    color: #000;
}

/* Responsive layout for screens below 1200px */
@media (max-width: 1200px) {
    .features-section-condensed .feature-details-column,
    .features-section-condensed .image-column {
        flex: 1 1 100%; /* Stack columns on smaller screens */
        margin-bottom: 20px; /* Add bottom margin to space out the rows */
    }

    .features-section-condensed .row {
        flex-direction: column; /* Stack rows vertically */
    }
}

@media (max-width: 990px) {
    .features-section-condensed .header-features {
        font-size: 20px; /* Adjust heading size for very small screens */
    }

    .features-section-condensed .button {
        width: 100%; /* Full-width buttons on small screens */
        margin: 10px 0; /* Adjust button margin */
    }
}


.planning-tracker-text {
    margin-bottom: 40px;
}


@media (max-width: 500px) {
    .planning-tracker-text {
        margin-bottom: 30px;
    }
}


@media (min-width: 1200px) and (max-width: 1400px) {
    .img-fluid.planning-tracker-mockup {
    max-width: 90%;
    margin-right: 50px;
    }
}

@media (min-width: 990px) {
    .img-fluid.planning-tracker-mockup {
        max-width: 100%;
        margin-right: 40px;
    }
}



/* Features Section end */


/* Get online section */



body, html { margin: 0; padding: 0; box-sizing: border-box; }
.content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.get-online-section { background-color: #fff; /* Set background color */ color: #383835; /* Set text color */ padding: 40px 0; /* Adjust this as needed */ box-sizing: border-box; }
.get-online-section h2 { text-align: left; margin-bottom: 40px; }
/* Grid Layout */
.four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.column { flex: 1; padding: 20px; box-sizing: border-box; /* border-bottom: 2px solid #383835;  Set black line separator */}
.column hr .get-online { border: 0; height: 2px; background-color: #383835; /* Lime green underline */ margin-bottom: 20px; /* Margin below underline */}
.column:last-child { border-bottom: none; /* Remove line separator for last column */}
/* .image-holder { height: 300px; Adjust height as needed */ /*  background-color: #ccc; Set placeholder background color */}
.column p {  margin-top: 20px; }
/* Optional: If you want to add rounded corners to the image holder */
.image-holder { border-radius: 10px; /* Adjust border radius */}
/* Get Online Header */
.get-online-header { text-align: left;  /* Align text to the left */}
/* Spacer Element */
.spacer { height: 60px; /* Adjust the height to create desired spacing */}



/* Get online section end */


  /* News Section */

.news-container { background-color: #EEF2F7; padding: 20px 0; width: 100%; /* Full width for the container */}
.news-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; /* Optional: Add padding for side spacing */ box-sizing: border-box; }
.news-header, .news-sub-header { text-align: center; margin-bottom: 20px;}
/* New styles for colored and bold text */
.news-header-bold { font-weight: bold; color: black; }
.news-header-colored { color: #6893F5; }
.news-feed { display: flex; overflow-x: auto; padding: 20px 0; }
.news-article { flex: 0 0 25%; /* 4 columns display */ box-sizing: border-box; padding: 10px; text-align: center; border-radius: 5px; margin-right: 10px; background: none; /* Remove white background */ }
.news-article img { width: 100%; /* Adjusted to take the full width of the parent container */ height: auto; /* Maintains aspect ratio */  object-fit: cover; /* Ensures the image covers the given dimensions without distortion */ border-radius: 5px; }
.news-inner { margin-top: 10px; display: flex; justify-content: space-between; /* Align items horizontally */  align-items: center; /* Vertically center align the items */ }
.news-inner .line { margin-bottom: 5px; text-align: left; /* Left align the text horizontally */ }
.line-type { color:#5779DD; font-weight: 700; }
.line-time { color:#C0D62F; font-weight: 700; }
.read-all-posts-control { display: flex; justify-content: space-between; /* Spread elements evenly */ align-items: center; width: 100%; margin-top: 20px; }
.control-buttons { display: flex; align-items: center; gap: 10px; }
.slider-buttons { display: flex; align-items: center; gap: 10px; }
.slider-button { display: inline-block; width: 15px; height: 15px; background-color: #ccc; border-radius: 50%; cursor: pointer; }
.slider-button.active { background-color: #5779DD; }
.arrow-button { display: inline-block; width: 30px; height: 30px; background-color: #5779DD; color: white; text-align: center; line-height: 30px; cursor: pointer; border-radius: 50%; }
.read-all-posts { padding: 10px 20px; font-size: 16px; background-color: #5779DD; color: white; border: none; border-radius: 5px; cursor: pointer; }
.read-all-posts:hover { background-color: #0056b3; }


  /* News Section end */



/* Charities Supported Section */

.charities-supported { padding: 40px; border-radius: 10px; text-align: center; margin: 20px auto; margin-bottom: 50px; margin-top: 50px; background-color:#EEF2F7;  /* Centering the section in the middle */ }
.charities-supported h1 { color: #333; margin-bottom: 0px; margin-top: 0px; }
.inner-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    align-content: space-between;
    gap: 20px; /* Adjust the gap value to create more space between flex items */
}
.image-container, .text-container { width: 20%; /* Set both containers to be the same width */ /*max-width: 510px; /* Ensure they don't exceed the image size */ box-sizing: border-box; margin-top: 0px; }
.image-container img { width: 100%; /* Ensure the image takes up the full width of the container */ height: auto; /* Maintain aspect ratio */ object-fit: cover; border-radius: 10px; }
.text-container { text-align: left; display: flex; flex-direction: column; /* Stack items vertically */ align-items: flex-start; /* Align items to the start */ padding: 10px; /* Add padding to make the container appear larger */ box-sizing: border-box; }
.text-container h2 { color: #333; margin-bottom: 10px; margin-top: -60px; }
.number-widget { font-size: 32px; color: #5779DD;  margin-bottom: 20px; padding: 10px 20px; border: 2px solid #5779DD; border-radius: 5px; display: inline-block; }
.join-button { background-color: #5779DD; color: white; padding: 20px 40px; font-size: 21px; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; }
.join-button:hover { background-color: #0056b3; }

/* Charities Supported Section end */


/* Testimonials Container */
.testimonials-container {
    padding: 20px 0;
}

/* Testimonials Header */
.testimonials-header {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

/* Testimonials */
.testimonials {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Testimonial Box */
.testimonial-box {
    flex: 1 1 calc(33.333% - 20px); /* Each box takes 1/3 of the row minus margins */
    margin: 10px;
    box-sizing: border-box;
    background: #EEF2F7;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

/* Align the quote icon and title line on the same row */
.testimonial-box img {
    width: 40px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle; /* Align icon vertically with the text */
}

.testimonial-box .line {
    display: inline-block;
    vertical-align: middle; /* Align text vertically with the icon */
}

/* Testimonial Content */
.testimonial-content {
    margin-top: 10px;
}

/* Testimonial Author */
.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .testimonial-box {
        flex: 1 1 100%; /* Each box takes full width on small screens */
        margin: 10px 0;
    }

    /* Center testimonial boxes on mobile */
    .testimonials {
        justify-content: center;
    }

    .testimonial-box {
        margin: 10px auto; /* Centers the boxes by setting auto margins */
        max-width: 90%; /* Ensures the boxes are not too wide on small screens */
    }
}


.four-step-icon {
max-width: 100px !important;
padding:0px;
}


/* Why Choose HugoFox Styles */
.why-choose-hugofox {
    padding: 50px 0;
    background-color: #f9f9f9;
}

.why-choose-hugofox .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.why-choose-hugofox .choose-box {
    text-align: left;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.why-choose-hugofox .choose-icon {
    max-width: 60px;
    margin-bottom: 15px;
}

.why-choose-hugofox h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.why-choose-hugofox p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

@media (max-width: 991px) {
    .why-choose-hugofox .choose-box {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .why-choose-hugofox .choose-box {
        padding: 20px;
    }

    .why-choose-hugofox h3 {
        font-size: 18px;
    }

    .why-choose-hugofox p {
        font-size: 14px;
    }
}

/* Responsive layout for smaller screens */
@media (max-width: 767px) {
    .why-choose-hugofox .row {
        flex-direction: column; /* Stack rows vertically */
        align-items: center;
        display: flex;
    }
    .why-choose-hugofox .col-sm-6 {
        width: 100%; /* Full width on smaller screens */
    }
}

/* Responsive layout for medium-sized screens */
@media (min-width: 768px) and (max-width: 991px) {
    .why-choose-hugofox .col-md-4 {
        flex: 1 1 50%; /* Two columns on medium screens */
    }
}

/* Full width for screens between 767px and 567px */
@media (min-width: 568px) and (max-width: 767px) {
    .why-choose-hugofox .col-sm-6 {
        width: 100%; /* Full width for this range */
    }
}

/* Full width for screens below 567px */
@media (max-width: 567px) {
    .why-choose-hugofox .col-sm-6 {
        width: 100%; /* Full width on smaller screens */
    }
}

/*** Why choose Hugofox end ***/


/* FAQ section */


/* FAQ Container */
.faq-container {
	max-width: 1200px; /* Set maximum width */
	margin: 0 auto; /* Center the container */
	padding: 20px; /* Add padding */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 80px 0;
	position: relative;
	float: none;
  }
  .faq-container h2, .faq-container p {
	text-align: left; /* Keep the text aligned to the left */
	width: 100%; /* Ensure the text spans the full width of the container */
	color: #383835;
  }


  /* FAQ Section */
  .faq-section {
	border-top: 1px solid #383835; /* Horizontal line across the page */
	padding-top: 20px;
	width: 100%;
	float: none;
  }
  /* FAQ Item */
  .faq-item {
	margin-bottom: 20px;
  }
  /* Question */
  .question {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	color: #383835;
	font-weight: 700;
  }
  
  .toggle-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Adjust width for the circle */
    height: 30px; /* Adjust height for the circle */
    font-size: 18px; /* Adjust icon size */
    background-color: #5779DD; /* Example background color */
    color: #ffffff; /* Example text color */
    border-radius: 50%; /* Ensure circle shape */
    transition: background-color 0.3s ease;
  }

    
    /* Hover effect */
    .toggle-icon:hover {
        background-color: #0056b3; /* Darker background color on hover */
    }
  /* Answer */
  .answer {
	height: 0;
	overflow: hidden;
	transition: height 0.2s ease, opacity 0.2s ease;
	opacity: 0;
  }
  .answer.open {
	height: auto;
	opacity: 1;
	padding-top: 10px;
	padding-bottom: 10px;
  }

  @media (max-width: 768px) {
    .faq-container h2 {
        margin-top:20px;
      }
}


/* FAQ section end */



/* Support Section */

/* Support Container */
.support {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 80px 0; /* Consider adjusting padding based on your design */
    position: relative;
}

/* Support Box */
.support-box {
    padding: 60px;
    /* border: 1px solid #383835; */
    border-radius: 10px;
    background-color: #EEF2F7;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Support Box Image */
.support-box img {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    transition: width 0.3s ease; /* Smooth transition for the width change */
}

.support-box img:hover {
    width: 160px; /* Enlarge the image on hover */
}


/* Support Box Heading */
.support-box h3 {
    margin-bottom: 20px;
}

/* Support Box Button */
.support-box button {
    padding: 20px 40px;
    font-size: 21px;
    background-color: #5779DD;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

/* Adjustments for smaller screens if necessary */
@media (max-width: 768px) {
    .support-box {
        max-width: 100%; /* Adjust maximum width for smaller screens */
    }
}

/* Support Section end */





/* Footer Bar */

.footer-bar {
    width: 100%;
    height: 80px;
    padding: 20px 0;
    background: #C0D62F;
    color: #fff;
}

.footer-bar h2 {
    float: left;
    color: #fff;
    margin: 0;
    line-height: 40px;
    font-weight: 700;
}

.footer-bar h2 i {
    float: left;
    margin-right: 12px;
}

.footer-bar h4 {
    float: right;
    color: #fff;
    font-weight: 700;
    margin-top: 11px;
}

.footer-bar ul {
    float: right;
    margin-top: 5px;
    margin-left: 30px;
    padding-left: 10px;
    border-left: 1px solid #54e2da;
}

.footer-bar ul li {
    float: left;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}

.footer-bar ul li a {
    color: #fff;
}

.footer-bar ul li i {
    font-size: 21px;
}

/* Default alignment for the eighth column on larger screens */
.footer-item img {
    max-width: 100%; /* Ensure the image scales properly */
}



/* Center the content of column 8 on mobile screens */
@media (max-width: 767px) {
    .footer-item {
        text-align: left;
        align-items: left; /* Ensure vertical alignment is also centered */
    }
    
    .footer-item img {
        width: 80%; /* Adjust the image size if needed */
    }

    /* Ensures that any other content in the eighth column is centered */
    .footer-item .row.g-2 {
        justify-content: left;
    }

    .col-md-6.col-lg-6.col-xl-3.footer-logos {
        margin-top: -70px;
    }
}


/* Footer */
/* Footer Bar */
.footer-bar {
    width: 100%;
    height: 80px;
    padding: 20px 0;
    background: #C0D62F;
    color: #fff;
}

.footer-bar h2 {
    float: left;
    color: #fff;
    margin: 0;
    line-height: 1.5; /* Adjusted line height */
    font-weight: 700;
}

.footer-bar h2 i {
    float: left;
    margin-right: 12px;
}

.footer-bar h4 {
    float: right;
    color: #fff;
    font-weight: 700;
    margin-top: 11px;
}

.footer-bar ul {
    float: right;
    margin-top: 5px;
    margin-left: 30px;
    padding-left: 10px;
    border-left: 1px solid #54e2da;
}

.footer-bar ul li {
    float: left;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}

.footer-bar ul li a {
    color: #fff;
}

.footer-bar ul li i {
    font-size: 21px;
}

/* Footer */
footer {
    width: 100%;
    padding: 40px 0;
    background: url(../images/world-map.png) center no-repeat #7a7b86;
    color: #fff;
}

footer .container {
    width: 100%;
    max-width: 1200px; /* Adjust as per your design */
    margin: 0 auto;
}

footer .copyright {
    float: right;
    font-size: 12px;
    text-align: right;
    margin-top: 6px;
    margin-bottom: 6px;
}

.container-fluid.copyright {

    padding-top: 6px;
    padding-bottom: 6px;
}

footer h4 {
    font-size: 17px;
    font-weight: 800;
    margin-top: 6px;
    position: relative;
    margin-bottom: 20px; /* Reduced bottom margin */
}

footer h4:after {
    content: '';
    width: 50px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -10px; /* Adjusted position */
}

footer form {
    float: left;
    padding-left: 30px;
}

footer form input[type="text"] {
    width: 100%;
    max-width: 300px;
    height: 40px;
    float: left;
    border: none;
    padding: 8px;
}

footer form input[type="submit"] {
    height: 40px;
    background: #C0D62F;
    color: #fff;
    font-size: 16px;
    margin-top: 6px;
    border: none;
    cursor: pointer;
}

footer ul {
    width: 100%;
    float: left;
    margin: 0;
    margin-right: 20px;
    padding: 0;
}

footer ul li {
    width: 100%;
    float: left;
    margin: 3px 0;
    list-style: none;
}

footer ul li a {
    float: left;
    color: #fff;
}

footer ul li a:hover {
    color: #C0D62F;
}

.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}


.footer {
    border-top: 3px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background-color: #383835;
    border-color: var(--bs-light);
}
.footer .footer-item a,
.footer .footer-item p {
    line-height: 0px;
    color: var(--bs-body);
    transition: 0.5s;
}

.footer .footer-item a:hover {
    color: var(--bs-primary);
    letter-spacing: 1px;
}

.footer .footer-item .footer-gallery {
    position: relative;
    overflow: hidden;
}

.footer .footer-item .footer-gallery img {
    transition: 0.5s;
}

.footer .footer-item .footer-gallery:hover img {
    transform: scale(1.2);
}

.footer .footer-item .footer-gallery .footer-search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    opacity: 0;
}

.footer .footer-item .footer-gallery:hover .footer-search-icon {
    opacity: 1;
    background: rgba(0, 0, 0, .6);
}

/* Footer link color */
.footer-item a {
    color: white; /* Default link color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.footer-item a:hover {
    color: #C0D62F; /* Hover color */
}

/* Icon color */
.footer-item i {
    color: white; /* Default icon color */
}

.footer-item a:hover i {
    color: #C0D62F; /* Hover color for icons */
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #383835 !important;
}
/*** copyright end ***/


/*** Carousel Start ***/
.carousel-header #carouselId .carousel-control-prev,
.carousel-header #carouselId .carousel-control-next {
    background: transparent;
}

.carousel-header #carouselId .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh 
}

.carousel-header #carouselId .carousel-inner .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-header #carouselId .carousel-inner .carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0.4));
    background-size: cover;
}

.carousel-control-prev,
.carousel-control-next {
    opacity: 0;
}

.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    background: transparent !important;
}

.carousel-header #carouselId.carousel {
    position: relative;
}

.carousel-header #carouselId.carousel .carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.carousel-header #carouselId.carousel .carousel-indicators li,
.carousel-header #carouselId.carousel .carousel-indicators li,
.carousel-header #carouselId.carousel .carousel-indicators li {
    margin-right: 30px !important;
}

.carousel-header #carouselId.carousel .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 12px !important;
    border: 5px solid transparent;
    transition: 0.5s;
    
}

.carousel-header #carouselId.carousel .carousel-indicators li.active {
    border: 5px solid var(--bs-primary) !important;
    border-radius: 10px;
}
/*** Carousel End ***/



/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/breadcrumb-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0 0 0;
}
/*** Single Page Hero Header End ***/


/*** About Start ***/
.about .tab-class .nav .nav-item a.active,
.about .tab-class .nav .nav-item a.active span {
    background: #5779DD !important;
    color: var(--bs-white) !important;
    border-radius: 5px;
}

/*** About End ***/


/*** Service Start ***/
.service .service-item {
    position: relative;
    overflow: hidden;
}

.service .service-item .service-link {
    position: absolute;
    width: 100%; 
    height: 100%; 
    padding: 20px; 
    bottom: 0; 
    left: 0; 
    display: flex; 
    align-items: end;
   background: rgba(0, 0, 0, 0.2);
    transition: 0.5s; 
}

.service .service-item .service-link:hover {
   background: rgba(0, 0, 0, 0.5); 
}

.service .service-item .service-link a {
    color: var(--bs-white);
    transition: 0.5s;
}

.service .service-item img {
    transition: 0.5s;
}

.service .service-item:hover img {
    transform: scale(1.2);
}

.service .service-item .service-link:hover a:hover {
    color: var(--bs-primary);
}
/*** Service End ***/


@media (max-width: 767px) {
    /* Scroll Indicator Styling */
    .scroll-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -15px; /* Space above the dots */
        margin-bottom: 25px; /* Space below the dots */
        z-index: 1;
    }

    /* Styling for each dot */
    .scroll-indicator .dot {
        width: 10px;
        height: 10px;
        margin: 0 5px; /* Spacing between dots */
        background-color: #C0D62F; /* Match the theme color */
        border-radius: 50%; /* Make dots circular */
        opacity: 0.7; /* Slightly transparent */
        animation: pulse 1.5s infinite ease-in-out; /* Optional animation */
    }

    /* Optional pulse animation */
    @keyframes pulse {
        0%, 100% {
            opacity: 0.7;
        }
        50% {
            opacity: 1;
        }
    }
}



/*** Counter Start ***/
.counter .counter-item .counter-counting {
    width: 100%;
    text-align: center;
   
    font-size: 30px;
}
/*** Counter End ***/


/*** Events Start ***/
.event .event-carousel.owl-carousel {
    position: relative;
}
.event .event-carousel.owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -60px;
    left: 0;
    width: 80px;
    height: 40px;
    border: 1px solid var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.event .event-carousel.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: -60px;
    right: 0;
    width: 80px;
    height: 40px;
    border: 1px solid var(--bs-primary);
    background: var(--bs-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.event .event-carousel.owl-carousel .owl-nav .owl-prev:hover,
.event .event-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: var(--bs-secondary);
    color: var(--bs-primary);
}
.event .event-carousel .event-item .event-content {
    border-style: dotted;
    border-top: 0; 
    border-color: var(--bs-white); 
 
}
/*** Events End ***/

/*** about us ***/

.bg-secondary {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 15px; 
}

.bg-secondary.about {
    background-color: #EEF2F7 !important;
    border-radius: 15px; 
}

.h-100 {
    height: 100%; /* Ensure the container takes full height */
}

.img-fluid {
    width: 100%; /* Make the image fill the width of its container */
    height: auto; /* Maintain aspect ratio and prevent stretching */
    display: block; /* Ensure there are no extra gaps below the image */
}

/*** about us end ***/


/*** Contact Start ***/

/* Contact Section */
.contact {
    position: relative;
    z-index: 1; /* Ensure it stays above the background image */
    background: #EEF2F7; /* Background color of contact box */
    padding: 60px; /* Padding around contact form */
    border-radius: 15px; /* Rounded corners */
    max-width: 1200px; /* Max width */
    margin: 0 auto; /* Center the contact box horizontally */
    margin-top: 90px;
    margin-bottom: 30px;
}

.contact.row {display: flex;flex-wrap: wrap;  max-width: 1200px; margin: 0 auto; /z-index: 1;}

.contact h1, .contact p, .contact form {
    text-align: left; /* Text alignment for form elements */
}

.form-control {
    border-radius: 8px;
}

textarea.form-control {
    height: auto;
    min-height: 170px; /* Adjust this value to make the text area taller */
    resize: vertical;
}

    /* Base styles for the hero image */
    .single-image-section img {
        width: 100%;
        height: 100vh; /* Full viewport height */
        object-fit: cover; /* Cover the container without distortion */
        display: block; /* Remove extra space below the image */
    }


    /* Ensure the container fills the entire viewport height */
    .full-height-container {
        height: 100vh; /* 100% of the viewport height */
        display: flex; /* Flexbox for alignment */
        flex-direction: column; /* Arrange children vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
    }
    
    /* Contact Row Styles */
    .contact-row {
        margin: 0; /* Set margin to 0 */
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 0 auto;
        z-index: 1;
    }

    
.single-image-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}


/* Custom class to prevent wrapping on small screens */
.no-wrap-on-sm {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .no-wrap-on-sm {
        overflow-x: auto; /* Adds horizontal scrolling if necessary */
    }

    .no-wrap-on-sm .col-md-6:nth-of-type(3),
    .no-wrap-on-sm .col-md-6:nth-of-type(4) {
        flex: 0 0 100%; /* Ensures each column takes up full width */
        max-width: 100%; /* Ensures each column takes up full width */
    }

    .no-wrap-on-sm .col-md-6:first-of-type, 
    .no-wrap-on-sm .col-md-6:nth-of-type(2) {
        flex: 0 0 50%; /* Ensures each column takes up half the width */
        max-width: 50%; /* Ensures each column takes up half the width */
    }
    
    .no-wrap-on-sm .col-12 {
        flex: 0 0 100%; /* Full width for textarea and button */
        max-width: 100%; /* Full width for textarea and button */
    }
}

/* General styles */
.custom-mb-sm {
    margin-bottom: 1.5rem;
}

    /* Custom class to prevent wrapping on small screens */
/* Custom class to prevent wrapping on small screens */
.no-wrap-on-sm {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .no-wrap-on-sm {
       
        overflow-x: auto; /* Adds horizontal scrolling if necessary */
    }

    .no-wrap-on-sm .col-md-6 {
        flex: 0 0 50%; /* Ensures each column takes up half the width */
        max-width: 50%; /* Ensures each column takes up half the width */
    }
    
    .no-wrap-on-sm .col-12 {
        flex: 0 0 100%; /* Full width for textarea and button */
        max-width: 100%; /* Full width for textarea and button */
    }
}

    /* Custom box styles */
    .custom-box-style {
        background-color: #EEF2F7;
        border-radius: 10px;
        padding: 20px;
        width: 100%; /* Ensure the box takes full width of its parent */
        box-sizing: border-box; /* Include padding and border in the width calculation */
    }
    
    /* Ensure the container-fluid spans the full width */
    .container-fluid.icons {
        padding: 25px; /* Remove default padding to ensure full width */
    
    }
    
/* General styles for all screen sizes */
.home-feature-buttons.d-flex.flex-column {
    display: flex;
    flex-direction: row; /* Default to horizontal layout for larger screens */
    gap: 1.5rem; /* Space between the boxes */
    white-space: nowrap; /* Prevent text wrapping */
   
}

@media (min-width: 991px) and (max-width: 1400px) { 
    .pair .home-feature-buttons.d-flex.flex-column .btn {
        margin-left: 30px;
    }
}

/* General styles for button alignment */
.home-feature-buttons {
    display: flex;
    flex-direction: column; /* Default to vertical stacking */
    align-items: center; /* Center align items (optional) */
    gap: 1.5rem; /* Space between the buttons */
}

/* Make sure buttons are side by side in the Planning Tracker section between 1200px and 767px */
@media (max-width: 1200px) {
    .planning-tracker-buttons {
        flex-direction: row !important; /* Align buttons side by side */
        justify-content: flex-start; /* Align buttons to the left */
    }
}

/* Styles for screens below 1200px */
@media (max-width: 1200px) {
    .home-feature-buttons.d-flex.flex-column {
        flex-direction: column !important; /* Stack buttons vertically */
        align-items: center; /* Center align items (optional) */
        gap: 1.5rem; /* Space between the buttons or boxes */
    }

   
    /* Optional: If you want buttons to be full width */
    .home-feature-buttons.d-flex.flex-column button {
        width: 80%; /* Make buttons full width */
        text-align: center; /* Center the text inside the button */
    }
}

@media (max-width: 1200px) and (min-width: 767px)  {
.home-feature-buttons.d-flex.flex-column.planning-tracker-buttons {
    flex-direction: row!important; /* Stack buttons vertically */
    align-items: center; /* Center align items (optional) */
    gap: 1.5rem; /* Space between the buttons or boxes */
}

}

@media (max-width: 990px) and (min-width: 867px)  {
    .img-fluid.planning-tracker-mockup {
width: 90%!important;
margin-right: 30px;
}
}

    /* Mobile-only class for responsive behavior */
    .mobile-only {
        display: none; /* Default hidden */
    }
    
    /* Show on mobile screens */
    @media (max-width: 767px) {
        .mobile-only {
            display: flex; /* Show on small screens */
        }
    }
    /* Custom box styles */
    .custom-box-style {
        background-color: #EEF2F7;
        border-radius: 10px;
        padding: 20px;
        width: 100%; /* Ensure the box takes full width of its parent */
        box-sizing: border-box; /* Include padding and border in the width calculation */
    }
    
    /* Ensure the container-fluid spans the full width */
    .container-fluid.icons {
        padding: 25px; /* Remove default padding to ensure full width */
    
    }

    @media (max-width: 767px) {

.tracker {
text-align: left;
}

    }

/* General styles for all screen sizes */
.home-feature-buttons {
    display: flex;
    flex-direction: row; /* Default to horizontal layout for larger screens */
    gap: 1rem; /* Space between buttons */
}

/* Styles for screens below 1200px */
@media (max-width: 1200px) {
    .home-feature-buttons {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align buttons (optional) */
        gap: 1rem; /* Space between buttons */
    }

    /* Ensure full width of buttons for mobile screens */
    .home-feature-buttons button {
        width: 100%; /* Make buttons full width */
    }
}

.foursteps-buttons {
    padding: 20px;
}

.foursteps-buttons a {
    padding: 10px 20px; /* Reduce padding */
   
    width: auto; /* Allow buttons to size based on content */
    text-align: center;
}

@media (max-width: 1200px) {

.foursteps-buttons a {
    padding: 10px 20px; /* Reduce padding */
   
    width: 70%; /* Allow buttons to size based on content */
    text-align: center;
}

.foursteps-buttons {
    padding: 20px;
}
}

@media (max-width: 768px) {

    .foursteps-buttons {
        padding: 0px !important;
    }

    .foursteps-buttons a {
        padding: 10px 20px; /* Reduce padding */
      
        width: 70%; /* Allow buttons to size based on content */
        text-align: center;
    }
    }

    /* Optional: Ensure buttons do not overflow on small screens */
@media (max-width: 767px) {
    .home-feature-buttons button {
        width: 100%; /* Full width buttons on small screens */
        box-sizing: border-box; /* Include padding and border in width */
        margin-top: -30px;
    }



.home-feature-buttons.d-flex.flex-column {
    padding-top: 30px;
}

}



    
    /* Mobile-only class for responsive behavior */
    .mobile-only {
        display: none; /* Default hidden */
    }
    
    /* Show on mobile screens */
    @media (max-width: 767px) {
        .mobile-only {
            display: flex; /* Show on small screens */
        }
    }
        
    
    /* Specific class for .bg-white on contact to text-align center on screens smaller than 990px */
    @media (max-width: 990px) {
        .single-image-section {
            background-color:none; /* Set background color to black */
            height: auto; /* Allow height to be determined by content */
            padding: 0; /* Remove any padding that might affect the layout */
        }
    
        .single-image-section img {
            display: block; /* Show the hero image */
            width: 100%; /* Stretch the image to the width of the container */
            height: auto; /* Maintain aspect ratio */
        }
    
        .container-fluid.py-5 {
            padding-top: 5rem; /* Optional: Adjust padding to ensure content is not too close to the top */
            padding-bottom: 5rem; /* Adjust bottom padding as needed */
        }
    
        .contact-info {
            text-align: center; /* Center text for smaller screens */
        }
    }

    @media (max-width: 767px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh!important;
        object-fit: cover;
        display: block;
        object-position: top center;
    }
}

@media (max-width: 990px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh!important;
        object-fit: cover;
        display: block;
        object-position: top center;
    }
}

@media (max-width: 1320px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh!important;
        object-fit: cover;
        display: block;
        object-position: top center;
    }
}

.container-fluid.single-image-section {
    padding: 0 !important;
}

    /* Contact section styles */


    /* Adjust text alignment for mobile screens */
    @media (max-width: 768px) {
        .text-center {
            text-align: center !important;
        }
        .text-md-start {
            text-align: center !important; /* Center text on mobile, override md and larger screen alignment */
        }
    }
    
    /* Adjust the size of the hero image */
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 100vh;
        object-fit: cover; /* Cover the container without distortion */
        display: block; /* Remove extra space below the image */
       /* object-position: top center;  Center the image */
        margin: 0px;
        padding: 0px;
    }
    
    /* Remove padding from the container-fluid */
.container-fluid.single-image-section {
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;
}
    
     /* Specific to contact page */
.contact .contact-row .col-lg-6 {
    width: 50% !important;
    margin-top: 38px;
}
    
    .contact .contact-row .col-12 {
        width: 100% !important;
    }
    
    /* Align icons and text on the same line */
    .contact .bg-white {
        display: flex;
        align-items: center;
    }
    
    .contact .bg-white i {
        margin-right: 10px;
    }
    
    /* Ensure the row remains within the container on smaller screens */
    .contact .contact-row {
        flex-wrap: wrap;
    }
    
    @media (max-width: 991px) {
        .contact .contact-row .col-lg-6 {
            width: 100% !important;
        }
    }
    
    @media (max-width: 989px) {
        .contact-row.d-none {
            display: none !important;
        }
    }
    
    @media (min-width: 990px) {
        .contact-icons-row.d-md-none {
            display: none !important;
        }
    }
    
    @media (max-width: 990px) {
        .trial-header {
            margin-bottom:0px;
        }
    }
    

/* Hide the h4 element below 990px */
@media (max-width: 989px) {
    .hide-below-990 {
        display: none !important;
    }
}

/* Ensure the h2 and p elements are visible between 767px and 990px */
@media (min-width: 768px) and (max-width: 989px) {
    .show-between-768-990 {
        display: block !important;
    }
}


/* Ensure the second set of icons is hidden between 768px and 990px */
@media (min-width: 768px) and (max-width: 989px) {
    .d-none.d-md-block.d-xl-none {
        display: flex !important;
    }
    
    .d-md-none {
        display: none !important;
    }
}


        /* Contact Section */



.contact {
    position: relative;
    z-index: 1; /* Ensure it stays above the background image */
    background: #EEF2F7; /* Background color of contact box */
    padding: 60px; /* Padding around contact form */
    border-radius: 15px; /* Rounded corners */
    max-width: 1200px; /* Max width */
    margin: 0 auto; /* Center the contact box horizontally */
    margin-top: 90px;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .contact {
        position: relative;
        z-index: 1; /* Ensure it stays above the background image */
        background: #EEF2F7; /* Background color of contact box */
        padding: 60px; /* Padding around contact form */
        border-radius: 15px; /* Rounded corners */
        max-width: 1200px; /* Max width */
        margin: 0 auto; /* Center the contact box horizontally */
        margin-top: 65px;
        margin-bottom: 3px;
    } }

@media (max-width: 1200px) {
.custom-mb-sm {
    margin-bottom: 0rem !important; /* Adjust this value as needed */
}
}

@media (max-width: 815px) and (min-width: 767px) {
    .custom-mb-sm {
        font-size: 26px; /* Adjust this value as needed */
    }
    }

.contact.row {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}

p.contact-form {
    text-align: center !important;
}



.contact h1, .contact p, .contact form {
    text-align: left; /* Text alignment for form elements */
}


.contact h1, .contact p {
    text-align: left; /* Text alignment for form elements */
    margin-top:0px;
    margin-bottom: 0px !important;
}

.contact-body p {
    text-align: left; /* Text alignment for form elements */
    margin-top:10px;
    margin-bottom: 0px !important;
}


.form-control {
    border-radius: 8px;
}

textarea.form-control {
    height: auto;
    min-height: 200px; /* Adjust this value to make the text area taller */
    resize: vertical;
}

@media (min-width: 1200px) {
    textarea.form-control {
        height: auto;
        min-height: 225px; /* Adjust this value to make the text area taller */
        resize: vertical;
    }
}


/* Base styles for the hero image */
.single-image-section img {
    width: 100%;
    height: 100vh; /* Full viewport height */
    object-fit: cover; /* Cover the container without distortion */
    display: block; /* Remove extra space below the image */
}

/* Ensure the container fills the entire viewport height */
.full-height-container {
    height: 100vh; /* 100% of the viewport height */
    display: flex; /* Flexbox for alignment */
    flex-direction: column; /* Arrange children vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

/* Contact Row Styles */
.contact-row {
    margin: 0; /* Set margin to 0 */
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}



@media (max-width: 767px) {
    .form-flex {
        display: flex;
        flex-wrap: nowrap;
        /* max-width: 1200px; */
        margin: 0 auto;
        z-index: 1;
        padding:5px;
    }
    }

/* .gap-4 {
    gap: 1.5rem !important;
    background-color: #EEF2F7 ;
    border-radius:10px;
}

/* Specific class for .bg-white on contact to text-align center on screens smaller than 990px */
@media (max-width: 990px) {
    .single-image-section {
        background-color: none; /* Set background color to black */
        height: auto; /* Allow height to be determined by content */
        padding: 0; /* Remove any padding that might affect the layout */
    }

    .single-image-section img {
        display: block; /* Show the hero image */
        width: 100%; /* Stretch the image to the width of the container */
        height: auto; /* Maintain aspect ratio */
    }

    .container-fluid.py-5 {
        padding-top: 5rem; /* Optional: Adjust padding to ensure content is not too close to the top */
        padding-bottom: 5rem; /* Adjust bottom padding as needed */
    }

    .contact-info {
        text-align: center; /* Center text for smaller screens */
    }
}

@media (max-width: 767px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh !important;
        object-fit: cover;
        display: block;
        object-position: top center;
    }
}

@media (max-width: 990px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh !important;
        object-fit: cover;
        display: block;
    }
}

@media (max-width: 990px) {
    .single-image-section {
        background-color: none; /* Set background color to black */
        height: auto; /* Allow height to be determined by content */
        padding: 0; /* Remove any padding that might affect the layout */
    }

    .single-image-section img {
        display: block; /* Show the hero image */
        width: 100%; /* Stretch the image to the width of the container */
        height: auto; /* Maintain aspect ratio */
    }

    .container-fluid.py-5 {
        padding-top: 5rem; /* Optional: Adjust padding to ensure content is not too close to the top */
        padding-bottom: 5rem; /* Adjust bottom padding as needed */
    }

    .contact-info {
        text-align: center; /* Center text for smaller screens */
    }
}

@media (max-width: 990px) {
    .container-fluid.single-image-section img.hero-image {
        width: 100%;
        height: 200vh !important;
        object-fit: cover;
        display: block;
        object-position: top center;
    }
}
    
    
    /* Ensure the right side image is smaller and centered */
    .right-column img {
        max-width: 100%; /* Ensure image doesn't exceed container width */
        height: auto; /* Maintain aspect ratio */
    }
    
    .right-column {
      /*  padding-top: 5rem;  Adjust padding to align with left side content */
    }
    




.container-fluid.single-image-section {
    padding: 0;
    position: relative;
}

.container-fluid.single-image-section img.hero-image {
    width: 100%;
   
}

.container-fluid.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.container.contact {
    padding-top: 5px !important;
    background-color: #EEF2F7; /* Light grey background */
    padding: 2rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 2;
    padding:  0px;
    padding-bottom: 25px !important;
}





.row.contact-row {
    margin-left: 0;
    margin-right: 0;
}

.row.contact-row > .col-xl-6 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.hide-on-mobile {
    display: none;
}

@media (min-width: 992px) {
    .hide-on-mobile {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .container.contact {
        padding: 1rem;
        padding-top: 0px !important;
      
    }
    .row.contact-row > .col-xl-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .row.contact-row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .container-fluid.py-5 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 990px) {
    .contact.h2.h4 {
        text-align: center;
    }
}
  
@media (max-width: 990px) {
    .contact .text-md-start {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .mobile-hide {
        display: none !important;
    }
}

@media  (max-width: 990px) {
    .small-medium-hide {
        display: none !important;
    }
}


@media (min-width: 990px) {
    .desktop-hide {
        display: none !important;
    }
}

@media (min-width: 1201px) {
    .largescreen-hide {
        display: none !important;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .tablet-hide {
        display: none !important;
    }
}

@media (max-width: 1200px) and (min-width: 990px) {
    .large-tablet-hide {
        display: none !important;
    }
}

@media (max-width: 1400px) and (min-width: 1200px) {
    .small-laptop-hide {
        display: none !important;
    }
}

/* Default styling for the textarea */
textarea {
    width: 100%; /* Ensure the textarea takes up the full width of its container */
    height: auto; /* Allow height to adjust automatically */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Styling for screens below 1200px */
@media (max-width: 1199px) {
    textarea {
        width: 100%; /* Adjust to fit the container */
        height: 100px !important; /* Adjust the height as needed */
    }
}

/* Styling for screens below 768px */
@media (max-width: 767px) {
    textarea {
        width: 100%; /* Ensure full width on small screens */
        height: 80px !important; /* Further adjust height for mobile screens */
    }
}

/* Custom styles for the icons boxes */
.custom-box-style {
 
    border-radius: 10px; /* Border radius */
    padding: 10px; /* Padding */
    width: 100%; /* Make the box fill the width of the column */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    display:flex;
}



/*** Contact End ***/

/*** Trial Support Section ***/

    /* Hide the horizontal rule on screens below 990px */
.trial-support {
    display: none;
}

@media (min-width: 990px) {
    /* Show the horizontal rule on larger screens */
    .trial-support {
        display: block;
    }
}

/* Ensure image appears under h2 on small screens */
@media (max-width: 989px) {
    .d-flex.flex-column-reverse {
        flex-direction: column-reverse;
    }

    .img-fluid {
        width: 100%; /* Adjust width as needed */
    
    }
}


    .trial-support-section {
    padding: 20px 0;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.four-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    min-width: 250px;
    margin: 20px;
}

.column img {
    margin: 0px 0;
}

@media (max-width: 768px) {
    .four-columns {
        flex-direction: column;
        align-items: center;
    }

    .column {
        width: 100%;
        margin: 10px 0;
    }

    .column img {
        width: 50%; /* Adjust as needed */
    }
}


/*** Mobile View ***/


.event .row .col-md-4 {
    padding: 10px; /* Adjust padding between boxes */
    text-align: center; /* Center align text */
    background-color: #ffffff; /* Optional: Ensure background color is consistent */
    border-radius: 5px; /* Optional: Add border radius for rounded corners */
    margin-bottom: 20px; /* Optional: Add margin bottom to separate items */
}

.event .row .col-md-4 .event-item {
    overflow: hidden; /* Ensure no overlap */
    text-align: center; /* Center align text */
}

.event .row .col-md-4 .event-item img {
    width: 100%; /* Make images responsive and fill container */
    height: auto; /* Maintain aspect ratio */
}

.event .row .col-md-4 .event-item .event-content {
    padding: 20px; /* Padding inside each event item */
}

.event .row .col-md-4 .event-item .text-area {
    padding: 15px; /* Adjust padding inside text area */
}

.event .row .col-md-4 .event-item h4 {
    font-size: 24px; /* Decrease font size for headings */
    line-height: 1.2; /* Adjust line height for readability */
    margin-bottom: 10px; /* Optional: Adjust margin bottom for spacing */
}

.event .row .col-md-4 .event-item p {
    font-size: 14px; /* Decrease font size for paragraphs */
    line-height: 1.4; /* Adjust line height for readability */
    margin-bottom: 10px; /* Optional: Adjust margin bottom for spacing */
}

.event .row .col-md-4 .event-item .box-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Adjust image size for screens between 990px and 767px */


@media (max-width: 767px) {
    .event .row .col-md-4 {
        padding: 15px;
        margin-bottom: 15px;
        background-color: transparent;
        border-radius: 0;
    }

    .event .row .col-md-4 .event-item {
        text-align: left; /* Adjust text alignment for mobile */
    }

    .event .row .col-md-4 .event-item img {
        width: 100%; /* Make images responsive and fill container */
        height: auto; /* Maintain aspect ratio */
    }

    .event .row .col-md-4 .event-item .event-content {
        padding: 10px; /* Adjust padding inside each event item for mobile */
    }

    .event .row .col-md-4 .event-item h4 {
        font-size: 20px; /* Decrease font size for headings */
        margin-bottom: 8px; /* Adjust margin bottom for spacing */
    }

    .event .row .col-md-4 .event-item p {
        font-size: 12px; /* Decrease font size for paragraphs */
        line-height: 1.4; /* Adjust line height for readability */
        margin-bottom: 8px; /* Adjust margin bottom for spacing */
    }

    .event .row .col-md-4 .event-item .box-wrapper {
        height: auto;
    }

 
}





@media (max-width: 767px) {
    .image-caption .container .p-3 {
        max-width: calc(100% - 20px); /* Adjust padding/margin for smaller screens */
    }
    
    .image-caption h1 {
     
        line-height: 1.1; /* Adjust line height for readability */
        text-align: center;
    }

    .image-caption h2 {
     
        line-height: 1.1; /* Adjust line height for readability */
        text-align: center;
    }

    .image-caption h4 {
     
        line-height: 1.1; /* Adjust line height for readability */
        text-align: center;
    }
    
    .image-caption p {
        font-size: 16px; /* Decrease font size for smaller screens */
        line-height: 1.6; /* Adjust line height for readability */
        text-align: center;
    }
    
    .image-caption .btn {
        margin-top: 15px; /* Adjust button margin for smaller screens */
        text-align: center;
    }
}

/* Desktop styles - apply above a certain screen width */
@media (min-width: 468px) {
    .image-caption h4 {
        font-size: 60px; /* Font size for desktop screens */
        line-height: 0.9; /* Adjust line height for readability */
    }

    .image-caption h2 {
        font-size: 48px; /* Font size for desktop screens */
        line-height: 0.9; /* Adjust line height for readability */
    }
    
    .image-caption p {
        font-size: 18px; /* Font size for desktop screens */
        line-height: 1.3; /* Adjust line height for readability */
    }
    
    .image-caption .btn {
        margin-top: 20px; /* Adjust button margin for desktop screens */
        margin-bottom: 20px;
    }
}

@media (max-width: 468px) {
    .image-caption h2 {
        font-size: 38px; /* Font size for desktop screens */
        line-height: 0.9; /* Adjust line height for readability */
    }

}



/* Adjust positioning for larger screens */
@media (min-width: 992px) {
    .start-50 {
        left: 35% !important;
    }
    
}

@media (max-width: 992px) {
    .start-50 {
        width: 100% !important; /* Three columns per row on medium screens */
    }
    
}



@media (max-width: 1200px) {
    .start-50 {
        left: 35% !important;
    }
}
.start-50 {
    left: 35% !important;
    max-width: max-content;
    width: 100%;
}

/* Center content on mobile screens */
@media (max-width: 990px) {
    .translate-middle {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    .service-box-home {
        max-width: 100%;
    }
}

/* Center content on mobile screens */
@media (max-width: 990px) {
    .translate-middle {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    .service-box-home {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .who-uses .row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .who-uses .col-xs-12 {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .who-uses .col-xs-12 > div {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    .service-box-home {
        max-width: 100%;
    }

    

    .carousel-buttons {
        display: flex;
    }

	.header-tablist {
		text-align: center;
        margin-bottom: 30px;
        margin-top: 30px;
	}

       .tab-content .row {
        display: block;
        margin-top: -100px;
    }


	.details {align-items:  center;display: ;text-align:left;flex-wrap: wrap; justify-content: center; padding: 0px; }

	.home-feature-buttons {
		align-items: center;
		display: flex;
        white-space: nowrap; /* Prevent text wrapping */
		
	}

	.feature-buttons {
		justify-content: center;
	}

    @media (max-width: 990px) {
        .features-section .home-feature-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
           /* flex-direction: row !important; */
        }
    }


@media (max-width: 1000px) {
    .who-uses .row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .who-uses .col-xs-12 {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .who-uses .col-xs-12 > div {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    .service-box-home {
        max-width: 100%;
    }
}

@media (max-width: 990px) {
    .tab-content .row {
        display: block;
    }

    .tab-content .column {
        width: 100%;
        margin-bottom: 20px; /* Optional: Adjust spacing between columns */
    }
}

@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

.feature-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
}

@media (max-width: 767px) {
    .feature-details {
        align-items: left;
       
    }
    
    .feature-details .feature-icon-text-pair {
        width: 100%;
        text-align: left;
        font-size:26px;
        align-items: left;
    }

    .feature-icon-text-pair {
        width: 100%;
        text-align: left;
        font-size:26px;
        justify-content: left;
        align-items: left;
    }
}


/* Adjust the layout for mobile screens */
@media (max-width: 767px) {
    .tab {
        font-size: 16px; /* Decrease font size for smaller screens */
    }

    .column {
        padding: 0; /* Remove padding around columns on smaller screens */
    }

    .details {
        text-align: left; /* Adjust text alignment for details on smaller screens */
    }

    .row {
        display: block; /* Make row block on smaller screens */
    }
}





@media (min-width: 1400px) {
    .right-column {
        flex: 0;
    }
}


/* Adjustments for mobile view */
@media (max-width: 990px) {
    .two-column-box {
        flex-direction: column;
    }

    .left-column {
        width: 100%;
        padding: 20px;
    }

    .right-column {
        width: 100%;
        margin-top: 20px;
    }

    .right-column img {
        width: 100%;
        height: auto;
        border-radius: 15px;
        object-fit: cover;
    }
}

  /* Media query for mobile devices */
  @media (max-width: 990px) {
	.features-section .row {
	  flex-direction: column; /* Stack columns vertically */
	}
  
	.features-section .column {
	  flex: 1 0 auto; /* Take full width */
	  margin: 0 0 20px 0; /* Adjust margin for stacked columns */
	}
  }

  /* For small screens, such as mobile */
@media (max-width: 767px) {
	.four-columns {
	  flex-direction: column;
	  align-items: center;
	  gap: 20px; /* Adjust gap for better spacing */
	}
  
	.column {
	  width: 100%;
	  padding: 0 10px; /* Reduce padding for mobile */
	  text-align: center; /* Center-align text for better appearance */
	}
  
	.image-holder {
	  height: auto; /* Allow the height to adjust based on content */
	  max-width: 100%; /* Ensure images don't exceed container width */
	  margin-bottom: 30px; /* Adjust the gap between image and line for mobile */
	}
  
	.column hr.get-online {
	  margin-bottom: 30px; /* Adjust the gap between image and line for mobile */
	}
  
	.get-online-header {
	  text-align: center; /* Center-align header text for mobile */
	}
  }

  @media (max-width: 767px) {
	.news-article { 
	  flex: 1 0 100%; /* Set flex basis to 100% to make them display on top of each other */ 
	  margin-bottom: 20px; /* Add some space between articles */
	}
  }

  @media (max-width: 767px) {
	.inner-section {
	  flex-direction: column;
	  align-items: center;
	}
  
	.image-container,
	.text-container {
	  width: 100%;
	  max-width: none;
	  margin-top: 20px;
	}
  
	.image-container img {
	  width: 50%; /* Reduce image width */
	  margin: 0 auto; /* Center the image */
	}
  
	.text-container {
	  text-align: center;
	  align-items: center;
	}
  
	.text-container h2 {
	  margin-top: 20px;
	}
  
	.number-widget {
	  font-size: 28px;
	  padding: 8px 16px;
	}
  
	.join-button {
	  font-size: 28px; /* Increase font size */
	  padding: 12px 24px; /* Increase padding */
	  margin-top: 10px; /* Add margin for spacing */
	}


	.charities-supported h2, .number-widget {
		text-align: center; /* Center-align for better mobile view */
	  }
	
	  .charities-supported .text-container h2 {
		margin-bottom: 20px; /* Add space below the h2 */
	  }
	
	  .charities-supported .number-widget {
		margin-bottom: 20px; /* Add space below the number widget */
	  }
	
	  /* Charities Supported Section */
	  .charities-supported {
		padding: 20px; /* Reduce padding for mobile */
		text-align: center;
	  }
	
	  .inner-section {
		flex-direction: column; /* Stack items vertically */
	  }
  }


  @media (max-width: 1250px) {
	.faq-container,
	.support {
	  padding: 20px; /* Add padding on smaller screens */
	}
  
	.faq-section,
	.support-box {
	  padding: 20px; /* Ensure sufficient padding inside the sections */
	}
  
	.inner-section {
	  flex-direction: column;
	  align-items: center;
	}
  
	.image-container,
	.text-container {
	  width: 100%;
	  max-width: none;
	  margin-top: 20px;
	}
  
	.image-container img {
	  width: 50%; /* Reduce image width */
	  margin: 0 auto; /* Center the image */
	}
  
	.text-container {
	  text-align: center;
	  align-items: center;
	}
  
	.text-container h2 {
	  margin-top: 20px;
	}
  
	.number-widget {
	  font-size: 28px;
	  padding: 8px 16px;
	}
  
	.join-button {
	  font-size: 21px; /* Increase font size */
	  padding: 20px 40px; /* Increase padding */
	  margin-top: 10px; /* Add margin for spacing */
	}
  }


@media (max-width: 767px) {
	.faq-container,
	.support {
	  padding: 20px; /* Add padding on mobile view */
	}
  
	.faq-section,
	.support-box {
	  padding: 20px; /* Ensure sufficient padding inside the sections */
	}
  
	.inner-section {
	  flex-direction: column;
	  align-items: center;
	}
  
	.image-container,
	.text-container {
	  width: 100%;
	  max-width: none;
	  margin-top: 20px;
	}
  
	.image-container img {
	  width: 50%; /* Reduce image width */
	  margin: 0 auto; /* Center the image */
	}
  
	.text-container {
	  text-align: center;
	  align-items: center;
	}
  
	.text-container h2 {
	  margin-top: 20px;
	}
  
	.number-widget {
	  font-size: 28px;
	  padding: 8px 16px;
	}
  
	.join-button {
	  font-size: 28px; /* Increase font size */
	  padding: 12px 24px; /* Increase padding */
	  margin-top: 10px; /* Add margin for spacing */
	}

/* Responsive adjustments */
@media (max-width: 768px) {
    .toggle-icon {
        font-size: 16px; /* Adjust font size for smaller screens if needed */
        width: 25px; /* Adjust width for smaller screens */
        height: 25px; /* Adjust height for smaller screens */
        position: absolute;
        right: 15px;
        border-radius: 50%; /* Ensure circle shape */
    }
}
  }