.top-hd-flex-con{
display:flex;
flex-direction:row;
align-items:center;
height:12vh;
min-height: 60px;
max-height: 100px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}

.top-hd-part1{
display:flex;
align-items:center; /* Vertically centers content within each section */
justify-content:flex-start;	
width:50%; /* Adjust as needed */
}

.top-hd-part1-1{
display:flex;
align-items:center; /* Vertically centers content within each section */
justify-content:flex-start;	
width:14%; /* Adjust as needed */
}

.top-hd-part1-2{
display:flex;
align-items:center; /* Vertically centers content within each section */
justify-content:flex-start;	
width:50%; /* Adjust as needed */
}

.top-hd-part1-2 img {
width: 100%; /* makes the image responsive within its container */
max-width: 180px; /* maximum size */
height: auto; /* maintain aspect ratio */
}

.top-hd-part2{
display:flex;
align-items:center; 
justify-content:center;
width:50%; /* Adjust as needed */
gap:var(--padding-lg);
}

.top-hd-flex-con a{
text-decoration: none;
color: var(--links-dark-gray);
font-weight: var(--font-weight-semibold); /* Make it bold */
font-size: 16px;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2); /* Add slight shadow */
transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition effect */
}

.top-hd-flex-con .butn-strong-blue{
background-color: var(--butn-strong-blue); /* strong blue */
border: none;
color: var(--pure-white);
font-weight: var(--font-weight-bold);
padding: 8px;
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}

.top-hd-flex-con .butn-light-gray{
background-color: var(--butn-light-gray); /* light-gray */
border: none;
color: var(--pure-black);
font-weight: var(--font-weight-bold);
padding: 9px;     
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}

.top-hd-flex-con a:hover{
text-decoration: none;
color: var(--butn-gem-stone-blue);
font-weight: var(--font-weight-bold); 
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
}

.top-hd-flex-con .butn-light-gray:hover{
background-color: var(--hover-butn-for-light-gray);
 color: var(--pure-black); /* Retain original text color */
}

.top-hd-flex-con .butn-strong-blue:hover{
background-color: var(--hover-butn-for-strong-blue);
color: var(--pure-white); /* Retain original text color */
}

/* ✅ Large Desktops (1920px and above) */
@media (min-width: 1920px) {    
    .top-hd-flex-con {
        height: 10vh; /* Reduce height proportionally */
        max-height: 120px; /* Allow for larger headers */
        padding: 0 5vw; /* Add padding for better spacing */
    }

    .top-hd-part1, .top-hd-part2 {
        width: 50%; /* Keep layout balanced */
    }

    .top-hd-part1-2 img {
        max-width: 200px; /* Increase logo size for better visibility */
    }

    .top-hd-flex-con a{
        font-size: 20px;
     }

    .top-hd-flex-con .butn-strong-blue, 
    .top-hd-flex-con .butn-light-gray {
        font-size: 20px; /* Make buttons more prominent */
        padding: 10px 14px; /* Increase padding for larger screens */
    }
}

/* ✅ Small Laptops (1280px and below) */
@media (max-width: 1280px) {    
    .top-hd-part1-2 img {
        max-width: 160px; /* Reduce logo size */
    }

    .top-hd-flex-con a{
        font-size: 16px;
     }

    .top-hd-flex-con .butn-strong-blue, 
    .top-hd-flex-con .butn-light-gray {
        font-size: 16px;
    }
}

/* ✅ Compact Laptops (1024px and below) */
@media (max-width: 1024px) {    
    .top-hd-part1, .top-hd-part2 {
        width: 50%; /* Maintain layout */
    }

    .top-hd-part1-2 img {
        max-width: 140px; /* Reduce logo size */
    }

    .top-hd-flex-con a{
        font-size: 15px;
     }

    .top-hd-flex-con .butn-strong-blue, 
    .top-hd-flex-con .butn-light-gray {
        font-size: 15px;
    }
}