body, html {
            height: 100%;
            margin: 0;
        }


/* ======================================
   HEADER & NAVIGATION STYLES
   From inline <style> in header.php
   ====================================== */

        body, html {
            height: 100%;
            margin: 0;
        }
		
		body {
			display: flex;
			flex-direction: column;
		}
		
		.content {
			flex: 1;
		}
		
		.text-dark-blue {
			color: #003366 !important; 
		}
		
		/* CSS for header common to all pages */
		.custom-navbar {
            font-style: bold;
            font-weight: 600;
            font-size: 12px;
            font-family: 'Open Sans', Arial, sans-serif;
        }
        /* Style the navigation menu */
        #navbarMenu {
            margin-top: 1rem; /* Add space between the logo and the menu */
        }

        /* Hide the phone number on smaller screens */
        @media (max-width: 991px) { /* Bootstrap "Laptop" and smaller */
            .custom-navbar .d-md-block {
                display: none !important;
            }
        }

        /* Center-align links on smaller screens */
        @media (max-width: 991px) {
            .custom-navbar .text-md-end {
                text-align: center !important;
            }
        }

        /* Adjust alignment of the phone number to match the logo */
        .custom-navbar .align-logo {
            padding-left: 0.5rem; /* Adjust as needed for perfect alignment */
        }
		
		    /* Custom styles for the menu */
    .navbar-nav .nav-link {
        color: #6c757d; /* Gray text */
        font-weight: 600;
        margin-right: 15px;
    }

    .navbar-nav .nav-link:hover {
        color: #40509e; /* Change to the primary color on hover */
    }

    /* Align the menu to the right and make text gray for horizontal layout */
    @media (min-width: 992px) { /* Larger than Mobile L */
        .navbar-nav {
            justify-content: flex-end;
        }
    }
	/* End of CSS for header common to all pages */	
	
	/* CSS for login form on index.php and menu pages.  Som of these, notable image-row height are over-ridden by CSS on the individual page */	
    .image-row {
            background-image: linear-gradient(to right, #404f9d, rgba(0, 51, 102, 0.5)), 
                              url('include/images/background_images/Operator4.webp'); /* Gradient + Image */
            background-size: cover;
            background-position: center top; /* Align image to the top */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Default height for larger screens */
        }


    .image-row.full-height {
        height: 30vh; /* Adjusted height */
	}

    .image-row.small-screen {
        height: auto;
        margin-bottom: 20px;
    }

    .login-form-container {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        padding: 30px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .form-control:focus {
        border-color: #40509e;
        box-shadow: 0 0 5px rgba(0, 85, 164, 0.5);
    }

    .btn-primary {
        background-color: #40509e;
        border-color: #40509e;
    }

    .btn-primary:hover {
        background-color: #003366;
        border-color: #003366;
    }


    @media (min-width: 768px) {
        .image-row.full-height {
            height: 60vh; /* Maintain adjusted height */
        }

        .login-form-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    @media (max-width: 767.98px) {
        .image-row.small-screen {
            height: 100px;
            border-radius: 8px 8px 0 0;
        }

        .login-form-container {
            margin-top: 0;
            border-radius: 0 0 8px 8px;
            position: static;
            transform: none;
        }
    }

	.custom-modal-header {
		background-color: #40509e; /* Connect blue */
		color: #ffffff;            /* White text by default */
		padding-top: 0.3rem;
		padding-bottom: 0.3rem;
		min-height: unset;         /* Remove default min-height if needed */
	}

	.custom-modal-header .modal-title {
		color: #f19143; /* Connect orange */
		font-weight: 600;
		font-size: 1rem; /* Optional size tweak */
	}

	/* End of CSS for login form on index.php */

	/* CSS for orange buttons, common to all pages */
	
	/* Custom orange button */
	.btn-orange {
	  background-color: #f19143 !important; /* Set to your orange color */
	  color: #ffffff !important; /* White text */
	  border-color: #f19143 !important; /* Border to match background */
	}

	/* Hover, focus, and active states with consistent colors */
	.btn-check:checked + .btn-orange,
	.btn-orange.active,
	.btn-orange:focus,
	.btn-orange:hover {
	  background-color: #e07a35 !important; /* Darker shade for hover/active */
	  color: #ffffff !important; /* Ensures text stays white */
	  border-color: #e07a35 !important;
	}

	.text-orange-500 {
		color: $orange-500 !important;
	}

	.text-blue {
		color: #3f509e !important;
	}
	/* End of CSS for orange buttons, common to all pages */	
	
	#spinner-div {
	  position: fixed;
	  display: none;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  text-align: center;
	  background-color: rgba(255, 255, 255, 0.8);
	  color: #f19143;
	  z-index: 2;
	}
	
	.btn-back {
		background-color: #f19143;
		color: white;
		border: none;
		padding: 10px 20px;
		font-size: 1rem;
		border-radius: 6px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
		text-decoration: none;
	}

	.btn-back:hover {
		background-color: #e07a35;
		color: white;
		transform: translateX(-2px);
		text-decoration: none;
	}	
	

/* === HOMEPAGE STYLES === */

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Ensures equal height */
    min-height: 140px; /* Adjust this if necessary */
}

.card.disabled {
	position: relative;
	opacity: 0.6;
	pointer-events: none; /* Prevents clicks */
}

.card.disabled::after {
	content: "Coming Soon";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-0deg);
	font-size: 1.5rem;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.6);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

        
.option-card {
    background-size: cover;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%; /* Ensures all cards take full height */
}


        .option-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .icon-container {
            width: 75px;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            background-color: #f8f9fa;
            border-radius: 50%;
        }

        /*.icon-container svg {
            width: 60px; 
            height: 60px;
        }*/
		
		.svg-icon {
			color: #003366;
			width: 100px; 
            height: 100px;
		}

        @media (max-width: 767.98px) {
            .option-card {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .icon-container {
                width: 65px;
                height: 65px;
                margin-bottom: 5px;
            }

            .icon-container svg {
                width: 50px;
                height: 50px;
            }
		
			.svg-icon {
				color: #003366 ;
				width: 100px; 
				height: 100px;
			}
        }



/* === CALL ANSWERING PAGE STYLES === */

.card-body {
    display: block; 
    min-height: 140px; /* Adjust this if necessary */
}

        
.option-card {
    background-size: cover;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%; /* Ensures all cards take full height */
}


        .option-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 15px auto;
    width: 75px;
    height: 75px;
    background-color: #f8f9fa;
    border-radius: 50%;
}

        .icon-container svg {
            width: 60px; 
            height: 60px;
        }
		
		.svg-icon {
    color: #003366;
    width: 3.5rem !important;
    height: 3.5rem !important;
    transform: translateY(-4px);
}

        @media (max-width: 767.98px) {
            .option-card {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 15px auto;
    width: 75px;
    height: 75px;
    background-color: #f8f9fa;
    border-radius: 50%;
}

            .icon-container svg {
                width: 50px;
                height: 50px;
            }
			
			.svg-icon {
    color: #003366;
    width: 3.5rem !important;
    height: 3.5rem !important;
    transform: translateY(-4px);
}
        }


/* === CALL FORWARDING PAGE STYLES === */

.svg-icon {
  color: #003366;
  width: 3.5rem !important;
  height: 3.5rem !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-4px); /* adjust vertically */
}

	
	.card {
		background-color: #efefef;
	}
	
	.card-container {
		max-width: 60%;
		margin: 0 auto;
	}
	
	.card-body.compact {
		padding: 0.5rem;
	}
	
	/*.card-body .svg-icon:first-child {
		margin-top: 1rem;
	}*/
	
	.mt-n1 {
		margin-left: -4rem !important;
	}

	.clickable {
		cursor: pointer;
		transition: box-shadow 0.3s ease;
	}
	
	.clickable:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.text-xsmall {
        font-size: 70%; 
    }
	
	.telecom-logo {
		max-height: 100px; 
		width: auto;
	}
	
	.telecom-logo-alt {
		max-width: 120px; 
		min-width: 100px;
		height: auto;
	}
	
	.toast-custom {
    background-color: #003366; 
    color: #fff;
	}

.option-card {
    position: relative; /* Needed for the overlay to be positioned */
    overflow: hidden;   /* Ensure overlay doesn't spill out */
}

.option-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255, 255, 255, 0.4); /* white overlay */
    z-index: 0;
    border-radius: inherit;
    pointer-events: none; /* allows clicks to pass through */
    transition: background 0.3s ease;
}

.option-card:hover::before {
    background: rgba(255, 255, 255, 0.5); /* slightly stronger overlay on hover if you like */
}

/* Keep card contents above the overlay */
.option-card > * {
    position: relative;
    z-index: 1;
}