:root {
--gradient-start: #094f7a;
--gradient-mid: #0b69a3;
--gradient-end: #fad107;
--black: #000000;
--white: #ffffff;
--gray: #f8f9fa;
}
body{
font-family: 'Montserrat', sans-serif;
}

#about{
text-align: center;
width: 100%;
background: #f8f9fa  !important;

}
#about h3 {
font-weight: 550;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 24px;
line-height: 35px;
color: #0C6DAC;
}

.about-container {
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}

.section-title{
text-align: center;
font-size: 34px;
font-weight: 600;
line-height: 1.2em;
letter-spacing: 0.6px;
color: #0C6DAC;
position: relative;
padding-bottom: 15px;
font-family: "Lora", sans-serif;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
}



.about-content {
max-width: 900px;
margin: 0 auto;
color: black;
padding-top: 10px;
text-align: center;
}

.about-content p {
margin-bottom: 20px;
font-size: 16px;
line-height: 30PX;
}





/* ============= VISION  MISSION =============  */
.vis-container{
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}
.vision-mission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 40px;
}

.vm-card {
position: relative;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
/* .vm-card::before {
content: '';
position: absolute;
inset: 0;
background:linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.65));
z-index: 1;
transition: all 0.4s ease;
} */

.vm-card::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.1);
transform: scale(0);
transition: transform 0.4s ease;
z-index: 2;
}

.vm-card:hover::after {
transform: scale(1);
} 

.vm-card:hover {
transform: translateY(-10px);
} 

.vm-card:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
padding: 2px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
-webkit-mask: 
linear-gradient(#fff 0 0) content-box, 
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.vm-card h3 {
color: #0C6DAC;
font-size: 20px;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.vm-card:nth-child(1) i {
color: orange;
}

.vm-card:nth-child(2) i {
color: red;
}

.vm-card p {
color:BLACK;
font-size:16px;
}

/* ============= OUR VALUES ============   */
.value-container{
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}

.value-card {
position: relative;
background: white;
padding: 30px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 2px solid transparent; /* ✅ Add this */
}

.value-card:hover {
border: 2px solid transparent;
background: rgba(0,0,0,0.1);
background-clip: padding-box;
}

.value-card:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
padding: 2px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
-webkit-mask: 
linear-gradient(#fff 0 0) content-box, 
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.value-icon {
width: 70px;
height: 70px;
background: #c1e3f7;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.8em;
}
.value-icon i{
color: rgb(12, 109, 172);
}

.value-card h3 {
color: rgb(12, 109, 172);
margin-bottom: 15px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
.value-card p {
color: black;
margin-bottom: 15px;
font-size: 16px;
text-align: center;
}
/* ========= LEADER =============  */
.lead-container{
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}

.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-top: 40px;
}

.leader-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.leader-card:hover {
transform: translateY(-10px);
}

.leader-image {
width: 100%;
height: 250px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 4em;
font-weight: bold;
overflow: hidden; /* ✅ prevents image from overflowing */
}

.leader-image img {
width: 100%;
height: 100%;
object-fit: fill;  /* ✅ fills container perfectly */
}


.leader-info {
padding: 25px;
text-align: center;
}

.leader-info h3 {
color:#0c6dac;;
margin-bottom: 10px;
font-size: 22px;
}


.leader-info .title {
color: rgb(105, 105, 102);
margin-bottom: 15px;
}

.leader-info p {
color: black;
font-size: 0.95em;
line-height: 1.6;
}


/* ========== QUALITY POLICY =========  */

.quality-policy {
max-width: 1148px;
/* margin-left: 9%; */
margin-left: 30px;
margin-right: 30px;
margin: auto;
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-top: 40px;
border-left: 5px solid rgb(12, 109, 172);
position: relative;
margin: 0 auto;
}

.quality-policy h3 {
color: rgb(12, 109, 172);
font-size: 1.8em;
margin-bottom: 20px;
}

.quality-policy p {
color: black;
font-size: 1.1em;
line-height: 1.8;
}
li{
color: black;
}
.prin{
color: #0C6DAC !important;
}
.quality{

width: 400px;
height: auto;
position: absolute;
right: 6%;
top: 29%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* A soft shadow */
border: 1px solid #ccc; /* A light grey border */
border-radius: 10px;
}

@media (max-width:992px){
.quality{
display: none;
}
}
/* ======== CERTIFICATES ==========  */
.cert-container{
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}

.certificates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}

.certificate-card {
background: white;
/* Removed padding from the card itself */
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
text-align: center;
border: 3px solid transparent;
transition: all 0.3s ease;

/* NEW: Set a specific height for the card to control 60/40 split */
height: 350px; 
overflow: hidden; /* Ensures content doesn't spill out */
display: flex;
flex-direction: column; /* Stacks image and content vertically */
}

.certificate-card:hover {
border-color: rgb(12, 109, 172);
background: transparent;
}

/* NEW: Image Container takes 60% of height and full width */
.cert-image-container {
width: 100%;
height: 60%; 
display: flex;
align-items: center;
justify-content: center;
/* Optional: Add a subtle background to the image area */
background: linear-gradient(120deg, #e3f2fd 0%, #bbdefb 100%); 
}

.cert-image-container img {
/* Image now covers the entire 60% area without distortion */
width: 100%; 
height: 100%; 
object-fit: cover; /* Important: Ensures the image fills the space */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

/* NEW: Content container takes 40% of height */
.cert-content {
height: 40%; 
padding: 20px 20px; /* Padding for the text content */
display: flex;
flex-direction: column;
justify-content: center; /* Center content vertically */
align-items: center;
margin-top: 15px;
}

.certificate-card h3 {
color: rgb(12, 109, 172);
margin-bottom: 5px; /* Reduced margin for 40% space */
font-size: 16px;
font-family: 'Montserrat', sans-serif;
}

.certificate-card p {
color: black;
font-size: 0.9em;
margin: 0;
}

/* ==========   HISTORY ============= */
.his-container{
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}

.timeline {
max-width: 900px;
margin: 40px auto;
position: relative;
}

.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
}

.timeline-item {
margin-bottom: 50px;
position: relative;

/* Animation (initial state) */
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}

/* When timeline item becomes visible */
.timeline-item.show {
opacity: 1;
transform: translateY(0);
}

.timeline-item:nth-child(odd) .timeline-content {
margin-left: auto;
text-align: left;
}
.timeline-item:nth-child(1) { transition-delay: .2s; }
.timeline-item:nth-child(2) { transition-delay: .4s; }
.timeline-item:nth-child(3) { transition-delay: .6s; }
.timeline-item:nth-child(4) { transition-delay: .8s; }
.timeline-item:nth-child(5) { transition-delay: 1s; }

.timeline-item:nth-child(odd) .timeline-content {
margin-left: auto;
text-align: left;
}

.timeline-content {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
width: 45%;
position: relative;
}

.timeline-year {
font-size: 1.5em;
font-weight: bold;
color: rgb(12, 109, 172);
margin-bottom: 10px;
}
.timeline-content P{
color: black;
}

.timeline-dot {
position: absolute;
left: 50%;
top: 30px;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: white;
border: 4px solid rgb(12, 109, 172);
border-radius: 50%;
z-index: 1;
}

@media (max-width: 768px) {
.hero h1 {
font-size: 2.5em;
}

.timeline::before {
left: 20px;
}

.timeline-content {
width: calc(100% - 50px);
margin-left: 50px !important;
}

.timeline-dot {
left: 20px;
}

.testimonials-grid,
.leadership-grid {
grid-template-columns: 1fr;
}
}

/* =========== CLIENT ========= */
.brand-section {
padding: 15px 0; /* top-bottom padding */
/* background: #F1F5FD; */
}
.client-head {
text-transform: uppercase;
margin-bottom: 10px;
margin-top: 20px;
padding-bottom: 30px;
}
.client-head h2{
color: #0c6dac;
}

.brand-carousel .slide-item {
padding: 15px; /* space between logos */
list-style: none;
}

.brand-carousel img {
max-width: 100%;
height: auto;
padding: 10px; /* inner padding */
border-radius: 8px;
}


.brand-carousel img:hover {
filter: grayscale(0%);
transform: scale(1.05);
}

/* **********  MANUFACTURING PAGE ***************8  */

.page-header-manufacture{
position: relative;
background:
linear-gradient(
345deg,
rgba(24, 78, 119, 0.75) 0%,
rgba(10, 35, 80, 0.7) 40%,
rgba(200, 220, 255, 0.3) 100%
),
url('../images/bg1.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

padding: 262px 0 0px;
}
.page-header-manufacture h1{
padding-bottom: 100px;
}
.manu-container {
max-width: 1300px;
margin: 0 auto;
padding: 2rem;
padding-top: 60px;
}

/* Gradient Header */
.hero-header {
background: linear-gradient(120deg, var(--gradient-start) 0%, var(--gradient-mid) 40%, var(--gradient-end) 100%);
color: var(--white);
padding: 4rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: 6px solid rgba(255,255,255,0.2);
animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}

.hero-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,30 L100,100 L0,100 Z" fill="rgba(255,255,255,0.08)"/></svg>') no-repeat bottom;
background-size: 100% 100px;
animation: waveMove 8s linear infinite;
}

@keyframes waveMove {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

.hero-header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
animation: fadeInDown 1.2s ease-out;
}

.hero-header p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.95;
animation: fadeInUp 1.4s ease-out;
}

@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Content Section */
.content-section {
background: var(--white);
margin: 3rem 0;
padding: 3rem;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}

.content-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
animation: pulseLine 2s ease-in-out infinite;
}

@keyframes pulseLine {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}

.section-title-1 {
font-size: 1.8rem;
font-weight: 600;
color: var(--gradient-mid);
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}


@keyframes expandLine {
from { width: 0; }
to { width: 60px; }
}

.facility-location {
font-size: 16px;
margin-bottom: 2rem;
color:black;
animation: fadeIn 1.6s ease-out;
}

.key-features {
list-style: none;
margin: 2rem 0;
}

.key-features li {
padding: 0.9rem 0;
padding-left: 2.2rem;
position: relative;
font-size: 14px;
border-bottom: 1px dashed #e0e0e0;
transition: all 0.3s ease;
animation: fadeInList 0.6s ease-out forwards;
line-height: 20px;
letter-spacing: 0.8px;
}

.key-features li:nth-child(1) { animation-delay: 0.1s; }
.key-features li:nth-child(2) { animation-delay: 0.2s; }
.key-features li:nth-child(3) { animation-delay: 0.3s; }
.key-features li:nth-child(4) { animation-delay: 0.4s; }
.key-features li:nth-child(5) { animation-delay: 0.5s; }
.key-features li:nth-child(6) { animation-delay: 0.6s; }
.key-features li:nth-child(7) { animation-delay: 0.7s; }

@keyframes fadeInList {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}

.key-features li:hover {
transform: translateX(8px);
color: var(--gradient-mid);
}

.key-features li::before {
content: '✓';
position: absolute;
left: 0;
top: 0.8rem;
width: 24px;
height: 24px;
background: #063653;
color: white;
border-radius: 50%;
font-size: 12px;
line-height: 24px;
text-align: center;
font-weight: bold;
transition: transform 0.3s ease;
}

.key-features li:hover::before {
transform: scale(1.2) rotate(10deg);
}

/* R&D Center Card */
.rnd-card {
background: linear-gradient(135deg, #ffffff, #f5f7fa);
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 2rem;
margin: 2.5rem 0;
box-shadow: 0 8px 25px rgba(0,0,0,0.06);
position: relative;
overflow: hidden;
animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.rnd-card h3 {
font-size:20px;
color: black;
margin-bottom: 1rem;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}

.rnd-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}

.rnd-card span{
color: white;
}
.rnd-item strong {
display: block;
font-size: 1.4rem;
color:white;
margin-bottom: 0.5rem;
}

.rnd-item {
position: relative;
background: #094f7a;
padding: 1.2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
transition: all 0.4s ease;
animation: popIn 0.8s ease-out;
}

.rnd-item:hover {
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
background-clip: padding-box;
}
.rnd-item:hover strong,
.rnd-item:hover span {
color: WHITE; /* or #111 / #222 depending on your theme */
}


.rnd-item:hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
padding: 2px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
-webkit-mask: 
linear-gradient(#fff 0 0) content-box, 
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

@keyframes popIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}


/* Image Section */
.image-container {
margin: 3rem 0;
text-align: center;
animation: fadeIn 2s ease-out;
}

/* .facility-image {
max-width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
transition: all 0.5s ease;
animation: imagePulse 4s ease-in-out infinite;
}

.facility-image:hover {
transform: scale(1.02);
box-shadow: 0 20px 45px rgba(0,0,0,0.18);
} */



@keyframes imagePulse {
0%, 100% { box-shadow: 0 15px 35px rgba(0,0,0,0.12); }
50% { box-shadow: 0 20px 45px rgba(9,79,122,0.2); }
}

.facility-image {
max-width: 100%;
height: auto;
border-radius: 20px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.facility-image:hover {
transform: scale(1.03);
}

.image-caption {
margin-top: 1rem;
color: black;
font-size: 0.95rem;
}

.facility-image-wrapper {
position: relative;
perspective: 1000px; /* Enables 3D depth */
display: inline-block;
overflow: visible;
}

.facility-image {
width: 100%;
border-radius: 15px;
transition: transform 0.6s ease, box-shadow 0.6s ease;
transform-style: preserve-3d;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Hover 3D tilt + shadow effect */
.facility-image-wrapper:hover .facility-image {
transform: rotateY(12deg) rotateX(6deg) scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Optional reflection for extra classy depth */
.facility-image::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(255,255,255,0.1), transparent);
transform: rotateX(180deg);
opacity: 0.2;
border-radius: inherit;
pointer-events: none;
}



/* Footer */
.footer {
text-align: center;
padding: 2rem;
color: #888;
font-size: 0.9rem;
border-top: 1px solid #eee;
margin-top: 4rem;
}

/* Responsive */
@media (max-width: 768px) {
.hero-header h1 { font-size: 2.2rem; }
.content-section { padding: 2rem; }
.rnd-features { grid-template-columns: 1fr; }
}


/* Fully Responsive Image Wrapper */
.facility-image-wrapper-responsive {
    position: relative;
    perspective: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
}

/* Image Styling - Looks Great on All Screens */
.facility-image-responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    object-fit: cover;
    transform-style: preserve-3d;
}

/* 3D Tilt Effect on Desktop Only */
@media (min-width: 993px) {
    .facility-image-wrapper-responsive:hover .facility-image-responsive {
        transform: rotateY(10deg) rotateX(5deg) scale(1.05);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    }
}

/* Gentle scale on mobile tap (no tilt on touch) */
@media (max-width: 992px) {
    .facility-image-responsive:active {
        transform: scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }
}

/* Caption Style */
.image-caption {
    margin-top: 1.2rem;
    font-size: 1rem;
    color: #444;
    font-weight: 500;
    text-align: center;
    opacity: 0.9;
}

/* Optional: Add subtle reflection on large screens */
@media (min-width: 768px) {
    .facility-image-responsive::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 5%;
        width: 90%;
        height: 80%;
        background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
        border-radius: 20px;
        transform: rotateX(80deg) scaleY(0.3);
        opacity: 0.3;
        pointer-events: none;
        z-index: -1;
    }
}
@media (max-width:768px){
    .facility-image-wrapper-responsive{
        margin-top: 20px;
    }
}

/* LINES OF AZAKEM LABS ACTIVITIES  */


.activity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 50px;
}

.activity-card {
background: white;
padding: 34px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 5px solid #0b69a3;
position: relative;
overflow: hidden;
}

.activity-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}

.activity-card:hover::before {
opacity: 1;
}

.activity-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(9, 79, 122, 0.3);
border-left-color: #fad107;
}

.activity-card > * {
position: relative;
z-index: 1;
transition: color 0.3s ease;
}

.activity-card:hover > * {
color: white;
}

.activity-card h3 {
color: #0b69a3;
font-size: 18PX;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
line-height: 30px;
}

.activity-card:hover h3 {
color: white;
}

.activity-number {
background: #fad107;
color: #094f7a;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
}

.activity-card p {
color:black;
line-height: 30px;
}

/* ===============SAFETY SECTION ============== */


.safety-section .row {
padding-top: 40px;
}
.safety-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 18px 22px;
margin-bottom: 18px;
border-radius: 12px;
background: #ffffff;
border-left: 7px solid transparent;
background-clip: padding-box;
box-shadow: 0 4px 15px rgba(0,0,0,0.07);
transition: .3s ease;
position: relative;
}

.safety-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 7px;
border-radius: 12px 0 0 12px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
}

.safety-item:hover {
transform: translateY(-4px);
box-shadow: 0 6px 22px rgba(0,0,0,0.15);
}

.safety-item .icon {
font-size: 28px;
min-width: 36px;
color: #094f7a;
}

.safety-item p {
margin: 0;
font-size: 16px;
color: #222;
line-height: 1.45;
}

.safety-item p strong {
color: #0b69a3;
}
/* Main layout spacing */
.safety-row {
padding-top: 40px;
}

/* Mobile optimization */
@media (max-width: 991px) {
.safety-section {
padding: 40px 0;
}
.safety-item {
padding: 16px 18px;
}
}

@media (max-width: 768px) {
.safety-item {
flex-direction: row;
gap: 12px;
}
.safety-row {
padding-top: 25px;
}
}

@media (max-width: 576px) {
.safety-item {
padding: 15px;
margin-bottom: 15px;
}
.safety-item p {
font-size: 15px;
}
.safety-item .icon {
font-size: 24px;
min-width: 30px;
}
h2.section-title {
font-size: 22px;
line-height: 1.3;
text-align: center;
}
}


/* =============== SERVICE ====================  */



.page-header-service{
position: relative;
background:
linear-gradient(
345deg,
rgba(24, 78, 119, 0.75) 0%,
rgba(10, 35, 80, 0.7) 40%,
rgba(200, 220, 255, 0.3) 100%
),
url('../images/6.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

padding: 262px 0 0px;
}
.page-header-service h1{
padding-bottom: 100px;
}
.service .section-title{
padding-top: 60px;
}
/* ────────────────────── Main Container ────────────────────── */
.services-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 60px 30px;
}

.services-wrapper .content-row {
padding: 40px 20px;
}

.services-list li {
list-style: none;
padding: 5px;
}

/* ────────────────────── Icon Circle ────────────────────── */
.icon-circle {
position: relative;
width: 90px;
height: 90px;
border-radius: 50%;
background: #0b69a3;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.icon-circle:hover{
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%) ;
cursor: pointer;
}


.icon-circle i {
color: #ffffff;
font-size: 20px;
transition: transform 0.6s ease; /* smooth rotation */
}

/* Rotate icon on hover */
.icon-circle:hover i {
transform: rotate(360deg);

}
/* ────────────────────── Straight Connector Line (between icon & text) ────────────────────── */
.connector-line {
width: 80px;
height: 5px;
background: #094f7a;
position: relative;
flex-shrink: 0;
}

.connector-line::after {
content: "";
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 15px;
height: 15px;
background: #094f7a;
}

/* ────────────────────── Service Item Row (icon + line + text) ────────────────────── */
.service-items {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.service-items p {
margin: 0;
max-width: 320px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
color: #222;
font-size: 1rem;
line-height: 1.5;
}
.service-items p:hover{
background:  linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: white;
}

/* ────────────────────── Cards Grid ────────────────────── */
.services-grid {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 50px;

}

.service-card {
flex: 1 1 380px;
background: #ffffff;
padding: 32px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}

.service-card:hover {
transform: translateY(-8px);
}

.service-card h3 {
margin: 0 0 24px 0;
font-size: 18px;
color: #094f7a;
font-weight: 600;
}

/* ────────────────────── Flow Connector (Curved Arrow Between Circles) ────────────────────── */
.flow-connector {
position: relative;
height: 70px;
margin: 25px 0 15px 50px; /* align with circle centers */
}

.flow-connector svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.service-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.connector-line {
width: 5px;
height: 40px;
}
.connector-line::after {
right: 50%;
top: 100%;
transform: translateX(50%) rotate(45deg);
}
.flow-connector {
display: none; /* Hide complex curve on mobile */
}
}


/*============== SERVICE SECOND SECTION ========== */

.expertise-section {
color: #000;
}

.section-title-2 {
font-size: 2rem;
font-weight: 700;
background: #094f7a;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.5px;
}

/* Card styling */
.area-card {
background: #000;
color: #fff;
border-radius: 16px;
overflow: hidden;
height: 280px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
transition: all 0.5s ease;
border: 2px solid transparent;
}

.area-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}

.area-card:hover::before {
opacity: 1;
}

.area-card * {
position: relative;
z-index: 1;
}

.area-card img {
width: 100%;
height: 60%;
object-fit: cover;
transition: all 0.5s ease;
filter: brightness(0.85);
}

.area-card:hover img {
transform: scale(1.1);
filter: brightness(1);
}

.area-content {
background:#052F49;
color: #fff;
height: 40%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
transition: all 0.4s ease;
}

.area-card:hover {
transform: translateY(-8px);
background: #fff;
color: #000;
}

.area-card:hover .area-content {
}

/* Owl Carousel styling */
.expertise-carousel .owl-nav button.owl-prev,
.expertise-carousel .owl-nav button.owl-next {
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: #fff !important;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
border: none;
transition: all 0.3s ease;
}

.expertise-carousel .owl-nav button:hover {
transform: scale(1.1);
}

.expertise-carousel .owl-dots .owl-dot.active span {
background: #0b69a3 !important;
}

.expertise-carousel .owl-dots span {
background: #ccc !important;
}

.expertise-nav {
display: flex;
justify-content: center;
gap: 15px;
}

.expertise-nav button {
background-color: #094f7a;
color: #fff;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 18px;
transition: all 0.3s ease;
}

.expertise-nav button:hover {
background-color: #0b69a3;
transform: scale(1.1);
}

/* ===============  RESEEARCH AND DEVELOPMENT ============= */

.container-research {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Main Content */
.main-content-research {
padding: 60px 20px;
}

.section-title-research {
text-align: center;
font-size:34px;
color: #0C6DAC;;
margin-bottom: 50px;
position: relative;
text-transform: uppercase;
}

.section-title-research::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
margin: 20px auto 0;
border-radius: 2px;
}

/* Image and Text Grid */
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
margin-bottom: 60px;
background: white;
padding: 40px;
border-radius: 20px;
}

.intro-image {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.intro-image img {
width: 100%;
height:360px;
object-fit: cover;
transition: transform 0.5s ease;
}

.intro-image:hover img {
transform: scale(1.05);
}

.intro-text h3 {
font-size: 30PX;
color: #0c6dac;;
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}

.intro-text p {
font-size: 16PX;
color: #000000;
line-height: 1.8;
margin-bottom: 15px;
}

/* Focus Areas */
.container-focus {
max-width: 1200px;
margin: 0 auto;
}

.grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 64px;
}

@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}

.card-focus {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.5s ease;
}

.card-focus:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: transparent;
}

.card-image-wrapper {
position: relative;
height: 176px;
overflow: hidden;
}

.card-image-wrapper::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom right, rgba(9,79,122,0) 0%, rgba(11,105,163,0) 100%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
}

.car-focus:hover .card-image-wrapper::before {
opacity: 0.1;
background: linear-gradient(to bottom right, rgba(9,79,122,0.1), rgba(11,105,163,0.1));
}

.card-focus img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}

.card-focus:hover img {
transform: scale(1.1);
}

.gradient-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, #094f7a, #0b69a3, #fad107);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}

.card-focus:hover .gradient-bar {
transform: scaleX(1);
}

.card-content {
padding: 24px;
text-align: center;
}

.card-title {
font-size: 16px;
font-weight: 600;
color: #000;
letter-spacing: 0.3px;
font-family: 'Montserrat', sans-serif;
}


.infra-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px; /* space between nodes */
align-items: start;
position: relative;
padding-top: 10px;
padding-bottom: 50px;
}

/* Node container */
.infra-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}
.infra-item h6{
    font-size: 16px;
    font-weight: 550;
    padding-top: 15px;
    font-family: 'Montserrat', sans-serif;
}
/* ICON NODES */
.infra-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: #C1E3F7;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #046AA2;
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
z-index: 2;
}

/* Icon hover effect */
.infra-item:hover .infra-icon {
transform: scale(1.15) rotate(5deg);
}

/* Text below node */
.infra-item p {
margin-top: 10px;
font-size: 14px;
color: black;
}

@media (max-width:767px){
    .infra-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 50px; /* space between nodes */
align-items: start;
position: relative;
padding-top: 10px;
padding-bottom: 50px;
}
}

/* Horizontal connector between nodes */



/* Team Section */
.team-section {
background:#136496;
color: white;
padding: 50px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.team-section h3 {
font-size: 2rem;
margin-bottom: 20px;
color: white;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}

.team-stats {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 30px;
}

.stat-item {
text-align: center;
}

.stat-number {
font-size: 3rem;
font-weight: bold;
display: block;
margin-bottom: 30px;
}

.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}

/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}

.hero p {
font-size: 1rem;
}

.intro-grid {
grid-template-columns: 1fr;
padding: 25px;
}

.section-title-research {
font-size: 22px;
}

.infrastructure {
padding: 30px 20px;
}

.team-stats {
gap: 30px;
}
}        .container-res {
max-width: 1200px;
margin: 0 auto;
}


.section-subtitle {
font-size: 18px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* Modern Layout Styles */
.content-display {
display: flex;
flex-direction: column;
gap: 100px;
padding-top: 50px;
padding-bottom: 80px;
}

.content-item {
display: flex;
align-items: center;
gap: 60px;
position: relative;
}

.content-item:nth-child(even) {
flex-direction: row-reverse;
}

.content-visual {
flex: 0 0 50%;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
transition: transform 0.4s ease;
}

.content-item:hover .content-visual {
transform: translateY(-10px);
}

.content-visual img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}

.content-number {
position: absolute;
top: -20px;
left: -20px;
width: 60px;
height: 60px;
background: #0c6dac;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
box-shadow: 0 10px 20px rgba(12, 109, 172, 0.3);
z-index: 2;
}

.content-item:nth-child(even) .content-number {
left: auto;
right: -20px;
}

.content-text {
flex: 1;
padding: 20px;
}

.content-title {
font-size: 32px;
color: #0c6dac;
margin-bottom: 20px;
line-height: 1.3;
font-weight: 700;
position: relative;
font-family: 'Montserrat', sans-serif;
}

.content-title:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: #0c6dac;
border-radius: 2px;
}

.content-item:nth-child(even) .content-title:after {
left: 0;
right: 0;
}

.content-description {
font-size: 17px;
line-height: 1.7;
color: black;
margin-bottom: 25px;
}

.content-highlight {
display: inline-block;
background: linear-gradient(120deg, #e6f2fa 0%, #f0f8ff 100%);
padding: 12px 20px;
border-radius: 8px;
border-left: 4px solid #0c6dac;
font-weight: 500;
color: #0c6dac;
margin-bottom: 20px;
}

/* Connection lines for visual flow */
.content-item:not(:last-child):after {
content: '';
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 40px;
background: linear-gradient(to bottom, #0c6dac, transparent);
}

/* Responsive Design */
@media (max-width: 992px) {
.content-item,
.content-item:nth-child(even) {
flex-direction: column;
gap: 40px;
}

.content-visual {
flex: 0 0 auto;
width: 100%;
}

.content-number {
top: -20px;
left: 20px;
}

.content-item:nth-child(even) .content-number {
left: 20px;
right: auto;
}

.content-title:after {
left: 0 !important;
}

.content-item:not(:last-child):after {
display: none;
}
}


@media (max-width: 600px) {
.grid-3 { grid-template-columns: 1fr; }
}
.looking-ahead-section {
position: relative;
overflow: hidden;
padding: 64px 0;
}
@media (min-width: 768px) {
.looking-ahead-section { padding: 60px 0; }
}

/* Ambient background auras */
.aura-container {
position: absolute;
inset: 0;
pointer-events: none;
}

/* Container */
.container-look {
max-width: 1216px;
margin: 0 auto;
padding: 0 24px;
position: relative;
}

/* Gradient border shell */
.gradient-border {
border-radius: 24px;
padding: 3px;
/* background: linear-gradient(120deg, #094f7a, #0b69a3, #fad107); */
}

/* Inner white panel */
.inner-panel {
background: #ffffff;
border-radius: 20px;
padding: 40px 24px;
}
@media (min-width: 768px) {
.inner-panel { padding: 48px 40px; }
}

/* Header */
.section-header-look {
text-align: center;
}


.section-desc {
margin: 20px auto 0;
font-size: 16px;
line-height: 30px;
color:black;
}
.section-desc strong { color: #0c6dac; }

/* Content Grid */
.content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-top: 40px;
align-items: center;
}
@media (min-width: 1024px) {
.content-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
.section-title {
font-size: 32px;
}
.inner-panel{
        padding: 41px 10px;
}
.content-title {
font-size: 20px;
}

.content-visual img {
height: 300px;
}
}

/* Highlight cards */
.highlight-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.highlight-card {
display: flex;
gap: 16px;
padding: 20px;
background: #f9f9f9;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
}
/* .icon-wrapper {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 60%, #fad107 100%);
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper i { color: white; width: 20px; height: 20px; } */
.highlight-title {
font-size: 16px;
font-weight: 500;
color: #0c6dac;
margin-bottom: 4px;
font-family: 'Montserrat', sans-serif;
}
.highlight-text {
font-size: 14px;
line-height: 24px;
color: black;
}

/* Image side */
.image-container {
position: relative;
}
.image-glow {
position: absolute;
inset: -12px;
background: 
radial-gradient(circle at 50% 50%, rgba(11,105,163,0.25), transparent 70%),
radial-gradient(circle at 70% 30%, rgba(250,209,7,0.25), transparent 70%);
filter: blur(32px);
opacity: 0.4;
}
.image-frame {
position: relative;
border-radius: 16px;
padding: 3px;
background: linear-gradient(120deg, #094f7a, #0b69a3, #fad107);
}
.image-inner {
border-radius: 12px;
overflow: hidden;
background: white;
}
.image-inner img {
width: 100%;
height: 444px;
object-fit: cover;
display: block;
}

/* Corner badges */
.badge {
position: absolute;
background: rgba(255,255,255,0.9);
padding: 4px 12px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid #e5e5e5;
pointer-events: none;
}
.badge-top { top: -12px; right: -12px; color: #0c6dac; }
.badge-bottom { bottom: -12px; left: -12px; }
.badge-bottom i { color: #0c6dac; }
.badge-bottom span { color: #404040; }

/* CTA buttons */
.cta-row {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
@media (min-width: 640px) {
.cta-row { flex-direction: row; }
}
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-primary {
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 60%, #fad107 100%);
color: white;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.btn-secondary {
color: #262626;
border: 1px solid #e5e5e5;
background: transparent;
}
.btn-secondary:hover {
background: #f5f5f5;
}
.btn-primary i, .btn-secondary i { width: 20px; height: 20px; }

/* ======== GALLERY PAGE =========== */
.page-header-gallery{
position: relative;
background:
linear-gradient(
345deg,
rgba(24, 78, 119, 0.75) 0%,
rgba(10, 35, 80, 0.7) 40%,
rgba(200, 220, 255, 0.3) 100%
),
url('../images/1-gallery.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

padding: 200px 0 0px;
}

.container-gallery {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}


.subtitle {
font-size: 1.2rem;
color: #b8b8ff;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

.filter-buttons {
padding-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}

.filter-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: black;
padding: 0.8rem 1.5rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
backdrop-filter: blur(10px);
}

.filter-btn:hover, .filter-btn.active {
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
color: white;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}

.gallery-item {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer;
transform: translateY(50px);
opacity: 0;
animation: fadeUp 0.8s forwards;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.gallery-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
z-index: 10;
}

.gallery-img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
}

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

/* Enhanced Overlay with dark gradient + backdrop */
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
padding: 2.5rem 1.5rem 1.5rem;
transform: translateY(100%);
transition: transform 0.5s ease;
backdrop-filter: blur(2px); /* Optional: subtle blur for premium feel */
}

.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}

.gallery-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
font-weight: 600;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
font-family: 'Montserrat', sans-serif;
}

.gallery-category {
display: inline-block;
background: #fad107; /* Golden accent to match your active button gradient */
color: #000;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}

.lightbox.active {
opacity: 1;
visibility: visible;
}

.lightbox-content {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transform: scale(0.8);
transition: transform 0.5s ease;
}

.lightbox.active .lightbox-content {
transform: scale(1);
}

.lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
color: #fff;
cursor: pointer;
transition: color 0.3s ease;
}

.lightbox-close:hover {
color: #e52e71;
}

.lightbox-nav {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
top: 50%;
transform: translateY(-50%);
}

.lightbox-nav button {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.lightbox-nav button:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}



@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeUp {
from { 
opacity: 0;
transform: translateY(50px);
}
to { 
opacity: 1;
transform: translateY(0);
}
}

/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}

.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.lightbox-nav {
padding: 0 1rem;
}

.lightbox-nav button {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
}

@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}

.filter-buttons {
gap: 0.5rem;
}

.filter-btn {
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
}


/* ======== CONTACT PAGE ======== */

.page-header-cont{
position: relative;
background:
linear-gradient(
345deg,
rgba(24, 78, 119, 0.75) 0%,
rgba(10, 35, 80, 0.7) 40%,
rgba(200, 220, 255, 0.3) 100%
),
url('../images/c1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

padding: 200px 0 0px;
}

/* ===========  CONTACT US FORM ============= */


.container-contact {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
color: white;
line-height: 1.6;
}



.subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Main content layout */
.main-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
margin-bottom: 3rem;
padding-top: 30px;
}

/* Contact info with cards */
.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.info-card {
background: #136496;;
border-radius: 15px;
padding: 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

/* .info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.65));
} */

.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.info-card h3{
color: white;
font-size: 16px;
line-height: 54px;
font-family: 'Montserrat', sans-serif;
}

.info-title {
font-size:16px;
margin-bottom: 1rem;
color: white;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Montserrat', sans-serif;
}
.info-content P{
font-size:14px;
line-height: 34px;
}

.info-content {
color: rgba(255, 255, 255, 0.9);
line-height: 1.8;
}

.contact-details {
display: flex;
flex-direction: column;
gap: 1rem;
}

.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-item p{
font-size: 14px;
}
.contact-icon {
width: 45px;
height: 45px;
background: #C1E3F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.contact-icon i{
color: #041424;
}

/* Contact form with unique styling */
.contact-form-container {
background:#0b69a31a;
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}


.form-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}

.form-title {
font-size: 24px;
color: #094f7a;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Montserrat', sans-serif;
}

.form-icon {
width: 50px;
height: 50px;
background:#C1E3F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.form-group {
margin-bottom: 1.5rem;
position: relative;
}

label {
display: block;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
transition: color 0.3s ease;
}

input, select, textarea {
width: 100%;
padding: 1rem;
/* border: 1px solid rgba(255, 255, 255, 0.2); */
border-radius: 10px;
/* background: rgba(255, 255, 255, 0.05); */
/* color: var(--light); */
font-size: 1rem;
transition: all 0.3s ease;
border:1px solid #0C6DAC;
}

input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255, 255, 255, 0.08);
}

textarea {
min-height: 150px;
resize: vertical;
}

.submit-btn {
background:  linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: white;
border: none;
padding: 1.2rem 2rem;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 5px 15px rgba(11, 105, 163, 0.4);
position: relative;
overflow: hidden;
}

.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}

.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(11, 105, 163, 0.6);
}

.submit-btn:hover::before {
left: 100%;
}

.map-section {
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}

.map-title {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
text-transform: uppercase;
color:#0C6DAc  ;
}

.map-title i {
color: red;
margin-right: 10px;
}

.location-toggle {
display: flex;
background: #f1f1f1;
border-radius: 50px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.location-btn {
padding: 10px 20px;
border: none;
background: transparent;
font-size: 15px;
font-weight: 500;
color: #555;
cursor: pointer;
transition: all 0.3s ease;
}

.location-btn.active {
background:  linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: white;
border-radius: 50px;
}

.location-btn:hover:not(.active) {
background: #e0e0e0;
}

/* Responsive Design */
@media (max-width: 1100px) {
.main-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}

@media (max-width: 768px) {
.container-contact {
padding: 1rem;
}



h1 {
font-size: 2.2rem;
}

.contact-form-container, .info-card {
padding: 1.5rem;
}

.map-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

/* .location-toggle {
width: 100%;
justify-content: space-between;
} */
}

@media (max-width: 480px) {

.form-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.map-coordinates {
flex-direction: column;
gap: 1rem;
}
}
/* Default: hide all maps */
.location-map {
display: none;
}

/* Show only the active one */
.location-map.active {
display: block;
}
option{
background: #142E3E;
color: white;
}

/* ============= CAREER PAGE ============  */

.container-career {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}



.cta-button {
display: inline-block;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);;
color: white;
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
background:  linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: white;
}

/* Culture Section */
.culture {
padding: 2rem 0;
}


.culture-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding-top:40px;
}

.culture-card {
background: white;
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 0;
text-align: center;
position: relative; /* [IMPORTANT] Required for the pseudo-element */
transition: transform 0.3s ease;
overflow: hidden;   /* [IMPORTANT] Clips the pseudo-element to the card's radius */
display: flex;
flex-direction: column;
height: 100%;
}

/* --- ADDED: The gradient "border" --- */
.culture-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px; /* Sets the thickness of your border */
height: 100%;

/* Your exact linear gradient */
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);

/* --- Animation --- */
/* 1. Start scaled to 0 (hidden) */
transform: scaleX(0); 
/* 2. Set the origin to the left so it grows from the left */
transform-origin: left; 
/* 3. Add a smooth transition */
transition: transform 0.3s ease;
}

/* --- ADDED: The hover effect --- */
.culture-card:hover {
transform: translateY(-5px); /* Your original hover effect */
}

.culture-card:hover::before {
/* 1. Scale to 1 (fully visible) on hover */
transform: scaleX(1); 
}

/* Image container - modified for full width */
.culture-img {
width: 100%;
height: 200px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

/* Image style - modified for full width */
.culture-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}

/* Hover effect */
.culture-card:hover .culture-img img {
transform: scale(1.08);
}

/* Content area */
.culture-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.culture-card h3 {
font-size: 16px;
margin-bottom: 1rem;
color: #0c6dac;
font-weight: 600;
text-transform: uppercase;
}

.culture-card p {
color: black;
font-size: 14px;
line-height:25px;
margin-top: auto;
}
/* Open Positions */
.positions {
padding: 6rem 0;
}

.positions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}

.job-card {
background: rgba(255, 255, 255, 0.95);
color: #094f7a;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.job-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.job-header {
background: #0b69a3;
color: white;
padding: 1.5rem;
}

.job-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}

.job-meta {
display: flex;
gap: 1rem;
font-size: 0.9rem;
opacity: 0.9;
}

.job-body {
padding: 1.5rem;
}

.job-description {
margin-bottom: 1rem;
line-height: 1.7;
color: #333;
}

.job-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

.tag {
background: #fad107;
color: #094f7a;
padding: 0.35rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}

.apply-btn {
background: #094f7a;
color: white;
border: none;
padding: 12px 24px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}

.apply-btn:hover {
background: #fad107;
color: #094f7a;
transform: translateY(-2px);
}

/* Benefits */
/* --- Grid Layout Changes to force single row (NOW 6 COLUMNS) --- */
.benefits-grid {
display: grid;
/* 1. Explicitly set 6 columns, each at least 300px wide */
grid-template-columns: repeat(3, minmax(300px, 1fr)); 
gap: 2rem;

/* 2. Ensure container allows for overflow */
margin-top: 3rem;
}

/* 3. Apply overflow to the main container wrapper */
.container-career {
overflow-x: auto; 
/* Add some padding to see the shadow on the edge when scrolling */
padding-bottom: 1.5rem; 
width: 95%; /* Example width */
margin: 0 auto;
}

/* ====================================================================
KEEP ALL THE OTHER CSS THE SAME (FROM THE PREVIOUS RESPONSE)
====================================================================
*/

/* --- Global Section Enhancements --- */
.benefits {
padding: 50px 0;
}

/*.section-title {*/
/*    text-align: center;*/
/*    margin-bottom: 4.5rem;*/
/*    font-size: 2.5rem;*/
/*    color: #094f7a;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 1px;*/
/*}*/

/* --- Benefit Item (Card) Styling --- */
.benefit-item {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
display: flex;
flex-direction: column;
text-align: center;
}

.benefit-item:hover {
transform: translateY(-8px);
/*box-shadow: 0 18px 40px rgba(9, 79, 122, 0.25);*/
}

/* --- The Image Itself --- */
.benefit-image {
width: 100%;
height: 180px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
transition: transform 0.4s ease;
}

.benefit-item:hover .benefit-image {
transform: scale(1.05);
}

/* --- Content Wrapper for Text and Icon --- */
.benefit-content {
padding: 1.5rem;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

/* --- Icon Styling --- */
.benefit-icon {
font-size: 2.8rem;
margin-top: -3.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: 65px;
height: 65px;
background: #fad107;
border-radius: 50%;
color: #094f7a;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 5;
position: relative;
border: 3px solid white;
transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.benefit-item:hover .benefit-icon {
background: #094f7a;
color: #fad107;
border-color: #fad107;
}


/* --- Text Styling (Titles and Paragraphs) --- */
.benefit-title {
margin-top: 1.5rem;
margin-bottom: 0.8rem;
color: #094f7a;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 0.5px;
transition: color 0.4s ease;
}

.benefit-description {
color: #555;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
margin-bottom: 0;
}

.benefit-item:hover .benefit-title {
color: #0b69a3;
}

/* Optional: Subtle separator line below title */
.benefit-title::after {
content: '';
display: block;
width: 40px;
height: 3px;
background: #fad107;
margin: 10px auto 0 auto;
border-radius: 2px;
transition: width 0.4s ease;
}

.benefit-item:hover .benefit-title::after {
width: 60px;
background: #0b69a3;
}

/* CTA Footer */
.career{
background:#136496;; 
padding: 50px;
border-radius: 15px;
}
/* --- SECTION BACKGROUND --- */
.cta-footer {
padding: 60px 20px;
display: flex;
justify-content: center;
align-items: center;
}

.ft {
background: white;
padding: 50px 60px; /* [CHANGED] Adjusted padding */
max-width: 1200px;
width: 100%;
border-radius: 16px; /* [CHANGED] Slightly larger, modern radius */
/* [CHANGED] Softer, more diffused shadow for a "lifted" feel */
box-shadow: 0 12px 50px -12px rgba(0, 0, 0, 0.1); 
}

/* --- TITLES --- */
.career-title {
font-size: 32px; /* [CHANGED] Slightly smaller */
font-weight: 700;
margin-bottom: 15px; /* [CHANGED] */
color: #0c6dac;
text-align: center;
letter-spacing: -0.5px; /* [CHANGED] Tighter for a modern look */
}

.career-subtitle {
font-size: 18px; /* [CHANGED] */
color: #555; /* [CHANGED] Softer text color */
margin-bottom: 40px;
text-align: center;
line-height: 1.6; /* [CHANGED] Better readability */
}

/* --- FORM GRID --- */
.career-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px 25px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- FORM ITEMS --- */
.form-group {
text-align: left;
}

.form-group.full-width {
grid-column: span 2;
}

/* --- LABELS --- */
label {
font-size: 15px; /* [CHANGED] */
color: #333; /* [CHANGED] Darker for readability, not blue */
font-weight: 600; /* [CHANGED] */
display: block;
margin-bottom: 8px;
}

/* --- INPUTS, SELECT, TEXTAREA --- */
.career-form input[type="text"],
.career-form input[type="email"],
.career-form input[type="tel"],
.career-form select,
.career-form textarea {
width: 100%;
padding: 14px 16px; /* [CHANGED] A bit more spacious */
border-radius: 8px; /* [CHANGED] Smaller, more professional radius */
border: 1px solid #dde1e6; /* [CHANGED] Lighter, softer border */
background: #f8f9fa; /* [CHANGED] Subtle background for inputs */
color: #333;
outline: none;
font-size: 15px;
transition: all 0.2s ease-in-out; /* [CHANGED] Faster transition */
}

/* Custom select arrow */
.career-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230c6dac' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}

.career-form input::placeholder,
.career-form textarea::placeholder {
color: #999;
}

.career-form textarea {
min-height: 120px;
resize: vertical;
}

/* --- ✨ CLEAN FILE INPUT STYLES --- */
.career-form input[type="file"] {
width: 100%;
/* [CHANGED] Styled to match other inputs */
padding: 6px; 
border-radius: 8px;
border: 1px solid #dde1e6;
background: #f8f9fa;
color: #555;
font-size: 14px;
cursor: pointer;
outline: none;
transition: all 0.2s ease-in-out;
}

/* Style the "Choose File" button */
.career-form input[type="file"]::file-selector-button {
background: #0c6dac;
color: white;
border: none;
border-radius: 6px; /* [CHANGED] Slightly rounded corners */
padding: 10px 16px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: 0.3s ease;
margin-right: 15px;
}

.career-form input[type="file"]::file-selector-button:hover {
background: #094f7a;
}
/* --- End File Input Styles --- */


/* --- INPUT FOCUS EFFECT --- */
.career-form input:focus,
.career-form select:focus,
.career-form textarea:focus,
.career-form input[type="file"]:focus {
border-color: #0c6dac;
background: #fff; /* [CHANGED] Pop back to white on focus */
/* [CHANGED] Modern focus ring effect */
box-shadow: 0 0 0 3px rgba(12, 109, 172, 0.15); 
}

/* --- SUBMIT BUTTON --- */
.cta-button {
grid-column: span 2;
background: #0c6dac;
padding: 16px 28px;
border: none;
border-radius: 8px; /* [CHANGED] Matched to inputs */
font-size: 18px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}

/* Button Hover Effect */
.cta-button:hover {
background: #094f7a;
box-shadow: 0 4px 15px rgba(12, 109, 172, 0.2);
transform: translateY(-2px);
}


/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
.ft {
padding: 40px;
}
}

@media (max-width: 768px) {
.ft {
padding: 30px 20px;
}

.career-form {
grid-template-columns: 1fr;
}

.form-group.full-width,
.cta-button {
grid-column: span 1;
}
}
/* ============  PRODUCTS =============  */

.product{
padding-top: 60px;
padding-bottom: 70px;
}

.container-product {
max-width: 1250px;
margin: 0 auto;
background: #fff;
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
overflow: hidden;
margin-top: 40px;
}

.table-wrapper {
padding: 43px;
overflow-x: auto;
}

table {
width: 100%;
border-collapse: collapse;
}

thead {
background: #0b69a3;
color: #fff;
}

th {
min-width: 250px;
padding: 20px 15px;
text-align: center;
text-transform: capitalize;
}
tbody{
text-align: center;
}

tbody tr {
border-bottom: 1px solid #e0e0e0;
transition: .3s;
}

tbody tr:hover {
background: #f5f7fa;
transform: scale(1.01);
box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
}

td {
padding: 20px 15px;
vertical-align: middle;
}

.product-name {
color: black;
font-size: 14px;
line-height: 1.5;
}

.formula {
color:black;
font-size: 14px;
line-height: 1.5;
}

.cas-number {
color:black;
font-size: 14px;
line-height: 1.5;
}

.product-image {
max-width: 300px;
max-height: 300px;
object-fit: fill;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
transition: .3s;
cursor: pointer;
}

.product-image:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}

.pagination {
display: flex;
justify-content: center;
gap: 10px;
padding: 30px;
background: #f8f9fa;
}

.pagination button {
padding: 10px 18px;
background: linear-gradient(120deg, #094f7a 0%, #0b69a3 40%, #fad107 100%);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: .3s;
}


.pagination button:disabled {
background: #ccc;
cursor: not-allowed;
}

.page-info {
font-weight: 600;
color: #2c3e50;
}

.search-box {
text-align: right;
padding: 20px 0;
}

#searchInput {
width: 60%;
max-width: 310px;
padding: 12px 15px;
border: 2px solid #0b69a3;
border-radius: 8px;
font-size: 15px;
outline: none;
transition: .3s;
}

#searchInput:focus {
border-color: #094f7a;
box-shadow: 0 0 10px rgba(9,79,122,.3);
}


/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) {
.product {
padding-top: 40px;
padding-bottom: 50px;
}

.container-product {
max-width: 95%;
margin: 20px auto;
}

.table-wrapper {
padding: 25px;
}

th {
min-width: 180px;
padding: 15px 10px;
font-size: 14px;
}

td {
padding: 15px 10px;
font-size: 13px;
}

.product-image {
max-width: 200px;
max-height: 200px;
}

#searchInput {
width: 70%;
max-width: 400px;
}
}

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
.product {
padding-top: 30px;
padding-bottom: 40px;
}

.container-product {
max-width: 95%;
margin: 15px auto;
border-radius: 10px;
}

.table-wrapper {
padding: 15px;
}

.search-box {
text-align: center;
padding: 15px 0;
}

#searchInput {
width: 90%;
max-width: 100%;
padding: 10px 12px;
font-size: 14px;
}

/* Convert table to card layout for mobile */
table {
display: block;
}

thead {
display: none;
}

tbody {
display: block;
}

tbody tr {
display: block;
margin-bottom: 20px;
border: 2px solid #0b69a3;
border-radius: 10px;
padding: 15px;
background: #fff;
}

tbody tr:hover {
transform: scale(1);
}

td {
display: block;
text-align: left;
padding: 10px 0;
border: none;
}

td::before {
content: attr(data-label);
font-weight: 700;
color: #0b69a3;
display: block;
margin-bottom: 5px;
font-size: 13px;
text-transform: uppercase;
}

/* Add data-label attributes for mobile */
td:nth-child(1)::before {
content: "Product Name";
}

td:nth-child(2)::before {
content: "Chemical Formula";
}

td:nth-child(3)::before {
content: "CAS No.";
}

td:nth-child(4)::before {
content: "Structure";
}

.product-image {
max-width: 100%;
max-height: 250px;
margin-top: 10px;
}

.pagination {
flex-direction: column;
gap: 15px;
padding: 20px 15px;
}

.pagination button {
width: 100%;
padding: 12px;
font-size: 14px;
}

.page-info {
text-align: center;
font-size: 14px;
}
}

/* Small Mobile Styles (up to 480px) */
@media (max-width: 480px) {
.product {
padding-top: 20px;
padding-bottom: 30px;
}

.section-title {
font-size: 24px;
}

.table-wrapper {
padding: 10px;
}

tbody tr {
padding: 12px;
margin-bottom: 15px;
}

.product-name,
.formula,
.cas-number {
font-size: 13px;
}

td::before {
font-size: 12px;
}

.product-image {
max-height: 200px;
}

.pagination button {
padding: 10px;
font-size: 13px;
}

.page-info {
font-size: 13px;
}
}

.icon-wrapper-res{
min-width: 70px;
height: 70px;
/* color: red; */
background: #C1E3F7;;
border-radius: 50%;
position: relative;
}
.icon-wrapper-res i{
position: absolute;
top: 34%;
left: 31%;
color: #046AA2;;
font-size: 24px;
}

@media (max-width:768px){
.icon-wrapper-res{
display: none;
}
#about h3{
    font-size: 16px;
    line-height: 24px;
} 
.about-content p{
    font-size: 14px;
    line-height: 24px;
}
.cert-content{
        margin-top: 67px;
}
.cert-image-container {
    height: 50%;
}
.intro-text h3{
    font-size:22px
}
.quality-policy{
        margin-right: 30px;
        margin-left: 30px;
}
.p-ul li{
    line-height: 25px;
}
.cert-container {
    padding: 30px 30px;
}
.timeline-year{
    line-height: 28px;
}
.lead-container{
    padding-top:0px
}
.service-card{
    padding: 16px;
}
.service-card h3{
    font-size: 16px;
}
.service-card p{
    font-size: 14px;
}
.services-wrapper{
    padding-bottom: 30px;
}
.section-title-1{
    margin-bottom: 0px;
}
.facility-location{
    font-size: 15px;
}
.rnd-card h3{
    font-size: 15px;
    font-weight: 550;
}
.content-display{
    gap:30px;
}
.team-section h3{
    font-size: 22px;
}
.stat-number{
    font-size: 26px;
}
.career-subtitle{
    font-size: 16px;
}
.career-title{
    font-size: 20px;
}
.cta-footer{
    padding-top: 30px;
}
.our-testimonials{
    padding-top: 5px;
}

}
@media(min-width:768px){
    .culture-grid{
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}