:root 
			{
			--primary: #8e44ad;
			--primary-dark: #732d91;
			--secondary: #3498db;
			--accent: #e74c3c;
			--accent-light: #ff6b6b;
			--light: #f8f9fa;
			--dark: #2c3e50;
			--success: #2ecc71;
			--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
			--gradient-dark: linear-gradient(135deg, var(--primary-dark), #2980b9);
			}
			* 
			{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			}
			/* Define CSS variables */

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f7fa;
    overflow-x: hidden;
}
.navbar {
  width:100%;
    background: var(--gradient);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1030;
}

/* Brand */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    transition: color 0.2s;
}
.navbar-nav .nav-link:hover {
    color: gold !important;
}

/* Dropdown items */
.dropdown-menu {
    max-height: 50vh; /* Scrollable if too many items */
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Dropdown hover effect */
.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #8e44ad;
}

/* Toggler button */
.navbar-toggler {
    border: 1px solid rgba(255,255,255,0.3);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
			.hero-section 
			{
			background: var(--gradient);
			color: white;
			padding: 4rem 0;
			position: relative;
			overflow: hidden;
			}
			.hero-section::before 
			{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
			background-size: cover;
			background-position: center;
			}
			.hero-content 
			{
			position: relative;
			z-index: 1;
			}
			.hero-title 
			{
			font-size: 3rem;
			font-weight: 800;
			margin-bottom: 1rem;
			}
			.hero-subtitle 
			{
			font-size: 1.2rem;
			margin-bottom: 2rem;
			opacity: 0.9;
			}
			.hero-badge 
			{
			background: rgba(255,255,255,0.2);
			padding: 0.5rem 1rem;
			border-radius: 50px;
			display: inline-block;
			margin-bottom: 1rem;
			font-weight: 600;
			}
			main 
			{
			min-height: calc(100vh - 160px);
			}
			
			.floating 
			{
			animation: floating 3s ease-in-out infinite;
			}
			@keyframes floating {
			0% { transform: translate(0, 0px); }
			50% { transform: translate(0, 15px); }
			100% { transform: translate(0, -0px); }
			}
			@media (max-width: 992px) 
			{
			.hero-title {
			font-size: 2.5rem;
			}
			}
			@media (max-width: 768px) 
			{
			.hero-title 
			{
			font-size: 2rem;
			}
			.section-title 
			{
			font-size: 1.6rem;
			}
			.tools-section, .image-section, .description-section 
			{
			padding: 1.8rem;
			}
			.btn-primary 
			{
			width: 100%;
			}
			}
			@media (max-width: 576px) 
			{
			.navbar-brand 
			{
			font-size: 1.5rem;
			}
			.hero-title 
			{
			font-size: 1.8rem;
			}
			.tools-section, .image-section, .description-section 
			{
			padding: 1.5rem;
			}
			.hero-section {
			padding: 3rem 0;
			}
			}			
			.breadcrumb-wrapper 
			{
			padding: 15px 20px;
			max-width: 600px;
			width: 100%;
			}
			.breadcrumb 
			{
			display: flex;
			align-items: center;
			list-style: none;
			margin: 0;
			padding: 0;
			flex-wrap: wrap;
			}
			.breadcrumb-item 
			{
			display: flex;
			align-items: center;
			font-size: 14px;
			}
			.breadcrumb-item a 
			{
			text-decoration: none;
			color: #6c757d;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			padding: 6px 10px;
			border-radius: 6px;
			background: #f8f9fa;
			}
			.breadcrumb-item a:hover 
			{
			color: #4361ee;
			background: #edf2ff;
			transform: translateY(-1px);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
			}
			.breadcrumb-item.active 
			{
			color: #4361ee;
			font-weight: 600;
			padding: 6px 12px;
			background: #edf2ff;
			border-radius: 6px;
			}
			.breadcrumb-item + .breadcrumb-item::before 
			{
			content: "›";
			color: #adb5bd;
			margin: 0 8px;
			font-size: 16px;
			}
			.breadcrumb-item i 
			{
			margin-right: 6px;
			font-size: 13px;
			}
			.breadcrumb-item.active i 
			{
			color: #4361ee;
			}
			@media (max-width: 480px) 
			{
			.breadcrumb-wrapper 
			{
			padding: 12px 15px;
			}
			.breadcrumb-item 
			{
			font-size: 13px;
			}
			.breadcrumb-item a, .breadcrumb-item.active 
			{
			padding: 5px 8px;
			}
			}
			.calculator-card 
			{
			background-color: rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.2);
			}
			.age-display span 
			{
			color: #4f46e5;
			}
			.btn-toggle 
			{
			display: inline-flex;
			align-items: center;
			padding: .375rem;
			border: 1px solid #dee2e6;
			border-radius: .375rem;
			background-color: #f8f9fa;
			}
			.btn-toggle input[type="radio"] 
			{
			display: none;
			}
			.btn-toggle label 
			{
			padding: .375rem .75rem;
			margin-bottom: 0;
			border-radius: .25rem;
			cursor: pointer;
			transition: color .15s ease-in-out, background-color .15s ease-in-out;
			color: #6c757d;
			}
			.btn-toggle input[type="radio"]:checked + label 
			{
			background-color: #FFD700;
			color: white;
			font-weight: 500;
			}
			.result
			{
			margin-top: 10px;
			min-height: 150px;
			background: #f8f8f8;
			text-align: center;
			padding: 10px;
			border-radius: 5px;
			}
			.text-justify 
			{
			text-align: justify;
			}
		
			.calculator-container {
            max-width: 650px;
            
        }
        .card-tools {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .card-header-custom {
            background: linear-gradient(to right, #0d6efd, #6f42c1);
            color: white;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: #86b7fe;
        }
        .gauge-container {
            position: relative;
            width: 100%;
            padding-bottom: 45%; /* Reduced from 55% to make gauge smaller */
            height: 0;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        #bmi-gauge {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .result-display {
            background-color: #f8f9fa;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        .input-group-text {
            font-weight: 500;
        }
        .input-section {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .input-label {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #495057;
            text-align: center;
        }
        .category-info {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 1rem;
        }
        .category-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.25rem;
        }
        .category-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        /* Height input styling */
        .height-group .input-group-text {
            background: linear-gradient(to right, #e3f2fd, #bbdefb);
            color: #1565c0;
            border-color: #90caf9;
        }
        .height-group .form-control {
            background: linear-gradient(to right, #f3f9ff, #e3f2fd);
            border-color: #bbdefb;
        }
        .height-group .input-label {
            color: #1565c0;
        }
        
        /* Weight input styling */
        .weight-group .input-group-text {
            background: linear-gradient(to right, #f3e5f5, #e1bee7);
            color: #7b1fa2;
            border-color: #ce93d8;
        }
        .weight-group .form-control {
            background: linear-gradient(to right, #fbf5ff, #f3e5f5);
            border-color: #e1bee7;
        }
        .weight-group .input-label {
            color: #7b1fa2;
        }
		#legacy_text
		{font-size: 20px;       
		font-family: 'Preeti';
		 src: url('../etc/fonts/preeti.TTF') format('truetype');                      
		}
		.back-to-top {
    position: fixed;
    bottom: 150px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 2px solid #fff;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 1;
    background-color: #0056b3 !important;
    border-color: #fff;
}

.back-to-top:active {
    transform: translateY(-2px) scale(1.05);
}

/* For mobile devices */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 60px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* Scroll indicator animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.back-to-top.show {
    display: flex;
    animation: fadeInUp 0.3s ease-out;
}
#baralaBackToTopBtn {
position: fixed;
bottom: 150px;
right: 25px;
z-index: 9999;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #006994, #00b4d8);
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 105, 148, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

#baralaBackToTopBtn.barala-show {
opacity: 1;
visibility: visible;
}

#baralaBackToTopBtn:hover {
background: linear-gradient(135deg, #005073, #0093b8);
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 105, 148, 0.5);
}

#baralaBackToTopBtn i {
font-size: 1.0rem;
}
@media (max-width: 768px) {
#baralaBackToTopBtn {
width: 40px;
height: 40px;
bottom: 250px;
right: 10px;
}    
#baralaBackToTopBtn i {
font-size: 1.0rem;
}
}
#ad-wrapper-7053911089 {
min-height: 300px; 
}
.ad-label {
font-size: 11px;
color: var(--bs-secondary-color);
}
.ad-box {
width: 100%;
min-height: 280px;
background: #fcfcfc;
margin: 25px 0;
text-align: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.ad-label {
font-size: 11px;
letter-spacing: 1px;
color: #bbb;
text-transform: uppercase;
padding-top: 8px;
margin-bottom: 5px;
}
.adsbygoogle {
margin: 0 auto !important;
}