/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
:root {
    --bs-navy-blue: #00003c; /* Define a CSS variable for navy blue */
    --bs-primary-rgb: 0, 0, 60; /* RGB for navy blue, used by Bootstrap utilities */
}

.text-navy-blue {
    color: var(--bs-navy-blue) !important;
}

.bg-navy-blue{
    background-color: var(--bs-navy-blue) !important;
}
.custom-icon-bg {
    background-color: var(--bs-navy-blue) !important;
    /* New styles for perfect circle and centering */
    width: 60px; /* Adjust as needed for your desired circle size */
    height: 60px; /* Must be same as width for a perfect circle */
    border-radius: 50%; /* Makes it a perfect circle */
    display: flex; /* Enables flexbox for centering content */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.mm-menu.mm-offcanvas.mm-opened {
    z-index: 9999;
}
#menu{
    z-index:99999;
}
.footer-with-background-image {
    position: relative;
    z-index: 1;
}

.footer-with-background-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/footer-vector-img-all.svg');
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

/* Social icon styling for the footer */
.social-icon {
    width: 40px; /* Smaller size for footer social icons */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Lighter border */
}

.social-icon:hover {
    background-color: var(--bs-navy-blue); /* Darker on hover */
    color: var(--bs-white) !important;
    border-color: var(--bs-white);
}
/* Enhancements for desktop display */
@media (min-width: 992px) {
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    }

    .custom-icon-bg {
        transition: transform 0.3s ease-in-out;
    }

    .custom-icon-bg:hover {
        transform: scale(1.1);
    }
}

/* General spacing and typography adjustments */
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.display-5 {
    font-size: calc(1.425rem + 2.1vw);
}

.lead {
    font-size: 1.15rem;
}

.h5 {
    font-size: 1.25rem;
}

.fs-4 {
    font-size: 1.5rem !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}
/* Custom styles for the contact form to match the image */
.custom-contact-form .form-control {
    border: none; /* Remove all borders */
    border-bottom: 1px solid #ced4da; /* Add only bottom border */
    border-radius: 0; /* Ensure sharp corners */
    padding-left: 0; /* Remove default left padding */
    box-shadow: none; /* Remove any box shadows */
    margin-bottom: 1rem;
}

.custom-contact-form .form-control:focus {
    border-color: var(--bs-primary); /* Use primary color on focus */
    box-shadow: none;
}

.custom-contact-form .form-label {
    font-weight: bold; /* Make labels bold as in the image */
    color: #343a40; /* Darker color for labels */
    margin-bottom: 0px;
}


/* Custom radio button styling */
.custom-radio-style .form-check-input {
    /* Hide the default radio button */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px; /* Size of the custom radio */
    height: 20px;
    border: 2px solid #ced4da; /* Outer circle border */
    border-radius: 50%; /* Make it circular */
    margin-top: 0.25rem; /* Adjust vertical alignment */
    margin-right: 0.25rem; /* Space between radio and label */
    position: relative;
    cursor: pointer;
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

.custom-radio-style .form-check-input:checked {
    border-color: var(--bs-primary); /* Border color when checked */
}


.custom-radio-style .form-check-input:checked::before {
    content: '';
    display: block;
    width: 10px; /* Size of the inner filled circle */
    height: 10px;
    background-color: var(--bs-primary); /* Inner circle color when checked */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-radio-style .form-check-label {
    cursor: pointer;
    padding-left: 0; /* Remove default padding from Bootstrap */
}

/* Adjust margin for radio buttons in a flex container */
.custom-contact-form .d-flex.flex-wrap .form-check {
    margin-right: 2rem !important; /* Increase space between radio options */
}
.grayscale-filter {
    filter: grayscale(85%);
}
.menu_fixed{
        background-color:rgb(0,0,60,0.8);
    }
.mm-slideout{
    background-color:rgb(0,0,60,0.8);
}
.pagination > li > a
{
    background-color: white;
    color: #010540;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #010540;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #010540 !Important;
    border: solid 1px #010540 !Important;
}

.pagination > .active > a:hover
{
    background-color: #010540 !Important;
    border: solid 1px #010540;
}
.logo-header-bg {
				background: radial-gradient(rgba(192, 192, 192, 0.5) 23.11%, #e7e7e7 89.08%);
				min-height: 100px; /* Keep this from your inline style */
				display: flex; /* Keep this for centering */
				align-items: center; /* Keep this for centering */
				justify-content: center; /* Keep this for centering */
			}
			.logo-header-bg img {
		padding: 6px; /* Gives space for the stroke to appear */
		border-radius: 4px; /* Optional – softens the image edges */
		object-fit: contain;
	}
	.fixed-h200{
    height:200px;
}
.list-container {
  display: grid;
  min-width:410px;
  grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));*/
  gap: 1rem;
}

.list-item {
  /*border: 1px solid #ddd;*/
  padding: 0rem;
}

.sublist {
  list-style: none;
  min-width:410px;
  padding: 0;
  margin: 0;
}

.dropdown-menu {
  display: none;
  max-height: 400px;
  overflow-y: auto;
  background:#1d3236;
  color:#F2F2F2;
}
.dropdown-item{
    background:rgb(0, 9, 41);
    color:#F2F2F2;
}
.loadMoreBtn {
  margin-top: 1rem;
}
.ul-2-about {
            background-color: rgba(111, 99, 237, 0.05);
        }
        .ul-container {
            --container-space-x: 30px;
            max-width: calc(clamp(940px, 61.48vw, 1170px) + var(--container-space-x));
            padding-left: calc(var(--container-space-x) / 2);
            padding-right: calc(var(--container-space-x) / 2);
            margin: auto;
        }
        .ul-section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(20px, 1.58vw, 30px);
            margin-bottom: clamp(20px, 2.1vw, 40px);
        }
        .ul-2-section-heading {
            position: relative;
        }
        .ul-2-section-sub-title {
            position: relative;
            display: block;
            margin-bottom: calc(0% - clamp(27px, 3vw, 57px));
            font-family: "Exo";
            font-style: normal;
            font-weight: 800;
            font-size: clamp(37px, 5.25vw, 100px);
            line-height: 1.3;
            color: var(--ul-secondary);
            opacity: 0.08;
            text-transform: uppercase;
        }
        .ul-2-section-title {
            font-weight: 700;
            font-size: clamp(25px, 2.1vw, 40px);
            color: var(--ul-secondary);
            margin-bottom: 0;
            margin-left: clamp(22px, 3.26vw, 62px);
        }
        .ul-specialities-heading-card {
            flex-shrink: 0;
            max-width: clamp(286px, 21.86vw, 416px);
            border: #E0DEF7 solid 1px;
            background-color: #F7F7FD;
            border-radius: 8px;
            overflow: hidden;
        }
        .ul-specialities-heading-card .txt {
            padding: clamp(20px, 2.1vw, 40px);
        }
        .ul-specialities-title {
            font-weight: 700;
            font-size: clamp(24px, 1.68vw, 32px);
            margin-bottom: clamp(9px, 0.84vw, 16px);
        }
        .ul-specialities-descr {
            font-size: clamp(13px, 0.84vw, 16px);
            color: var(--ul-secondary);
            margin-bottom: clamp(14px, 1.26vw, 24px);
        }
        .ul-speciality-title.text-center {
        	font-size: 1.2rem;
        	font-weight: 600;
        	/* font-stretch: condensed; */
        	color: black;
        }
        .ul-btn {
            color: var(--black);
            border-radius: 999px;
            border: 1px solid #000929;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(12px, 1.05vw, 20px);
            height: clamp(45px, 2.84vw, 54px);
            padding: 0 clamp(15px, 1.26vw, 24px);
            font-weight: 600;
            font-size: clamp(13px, 0.84vw, 16px);
            position: relative;
            background-color: #000929;
            color: #FDFDFD;
            background-color: #000959;
        }
        .ul-btn:hover {
            color:#FEFEFE;
        }
        .btn-ai {
          /* other styles */
          width: 75px;
          height: 75px; /* Make height the same as width */
          padding: 2px 6px;
          border-radius: 50%;
          border: 1px solid darkblue;
          background-color: #FFFFFFaa;
          transition: transform 0.6s ease-in-out; 
        }
         .btn-ai:hover{
              transform: scale(1.4);
              background-color:#FFFFFF;
         }
        .ul-specialities-wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(20px, 3.42vw, 65px);
        }
        
        .ul-speciality-descr {
            margin-bottom: 0;
            color: var(--ul-gray2);
            font-size: clamp(13px, 0.84vw, 16px);
        }
            .ul-speciality{
            align-content: center;
        }
        .ul-speciality-icon img{
         aspect-ratio: 1/1;
        border-radius: 999px;
        width: clamp(96px, 3.36vw, 64px);
        font-size: clamp(25px, 1.58vw, 30px);
        outline: 1px solid rgb(33, 37, 41);
        outline-offset: 1px;

        }
        .ul-speciality-icon {
            position: relative;
            display: flex;
            justify-content: center !important;
            align-items: center !important;
            aspect-ratio: 1/1;
            border-radius: 999px;
            width: clamp(96px, 3.36vw, 64px);
            font-size: clamp(25px, 1.58vw, 30px);
            outline: 1px solid rgb(33, 37, 41);
            outline-offset: 1px;
            margin-bottom: 1rem;
            background-color: transparent !important;
        }
        
        .ul-speciality-icon .sm-icon {
            position: absolute;
            bottom: -25px;
            right: -25px;
            background-color: transparent !important;
        }
        
        .ul-speciality-icon .sm-icon i {
            color : rgb(33, 37, 41);
            font-size: 35px !important;
            
        }
.loadMoreBtn{
    display: inline;
    text-align: left;
    text-transform:uppercase;
    font-size:1rem;
    font-family: "Cabin Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 277px; 
    color:#FFF;
    background-color:rgba(0, 9, 41, 0.8);
    margin-top:0rem;
    margin-bottom:2rem;
}
ul {
    padding-left: 0rem;
    margin-bottom:0;
    list-style:none;
}
li a {
    text-decoration: none;
    display: inline-block;
    color: var(--bs-navy-blue);
}