/*
Reference: THQCDU-18371808665263444
Confidential
Non Commercial
THQ PHS 
Dimension: 4th Heshvan 5786

*/
/* Base Reset */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
body { line-height: 1.6; color: #333; background-color: #f9f9f9; }

/* Header */
header { background: #0a2540; color: #fff; padding: 20px 0; }
header .container { display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 1.8rem; }
header nav ul { list-style: none; display: flex; gap: 20px; }
header nav ul li a { color: #fff; text-decoration: none; font-weight: bold; }
header nav ul li a:hover { text-decoration: underline; }

/* Hero */
.hero { position: relative; background: url('https://plus.unsplash.com/premium_photo-1661761077411-d50cba031848?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=870') center/cover no-repeat; height: 90vh; display: flex; align-items: center; justify-content: center; color: #fff; }
.hero-overlay { position: absolute; inset: 0; background: rgba(10,37,64,0.7); z-index:1; }
.hero-content { position: relative; z-index:2; max-width: 800px; text-align:center; padding:0 20px; opacity:0; transform:translateY(20px); animation:fadeInUp 1s ease-out forwards; }
.hero-content h1 { font-size:2.8rem; margin-bottom:20px; line-height:1.2; font-weight:bold; }
.hero-content p { font-size:1.2rem; margin-bottom:30px; color:#e0e0e0; line-height:1.6; }
.hero .btn-primary { font-size:1.1rem; padding:14px 35px; }

/* Services */
.services { padding:80px 20px; background:#fff; }
.services h2 { text-align:center; margin-bottom:50px; font-size:2rem; color:#0a2540; }
.service-cards { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.service-card { background:#fff; border-radius:12px; padding:30px; width:300px; box-shadow:0 6px 18px rgba(0,0,0,0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align:left; opacity:0; transform:translateY(20px); }
.service-card h3 { font-size:1.4rem; margin-bottom:15px; color:#0a2540; }
.service-card p { color:#555; margin-bottom:20px; font-size:0.95rem; }
.service-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,0.25); }

/* About */
.about { padding:80px 20px; text-align:center; }
.about-details { margin-top:40px; text-align:left; }
.about-details h3 { font-size:1.5rem; margin-bottom:10px; color:#0a2540; }
.about-details p { margin-bottom:20px; }
.about-details ul { list-style: disc inside; margin-left:0; }
.about-details ul li { margin-bottom:10px; line-height:1.5; }

/* Contact */
.contact { padding:80px 20px; background:#f1f1f1; text-align:center; }
.contact form { max-width:500px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
.contact input, .contact textarea { padding:10px; border-radius:5px; border:1px solid #ccc; width:100%; }
.contact button { background:#0a2540; color:#fff; padding:12px; border:none; border-radius:5px; cursor:pointer; font-weight:bold; transition:transform 0.2s ease; }
.contact button:hover { background:#081f33; transform:translateY(-2px); }

/* Footer */
footer { background:#0a2540; color:#fff; text-align:center; padding:20px 0; }

/* Buttons */
.btn-primary {
    display: inline-block;          /* ensures proper button behavior */
    text-decoration: none;          /* remove underline */
    background: #0a2540;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background: #081f33;
    transform: translateY(-2px);
}



/* Modal */
.modal { display:none; position:fixed; inset:0; z-index:1000; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.modal-content { position:relative; background:#fff; border-radius:12px; max-width:650px; width:90%; margin:auto; padding:40px; z-index:10; box-shadow:0 10px 30px rgba(0,0,0,0.25); text-align:center; animation:slideIn 0.35s ease-out; }
.close { position:absolute; top:15px; right:20px; background:none; border:none; font-size:1.6rem; color:#0a2540; cursor:pointer; }
.jurisdiction-grid { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:20px; }
.jurisdiction-card { flex:1 1 260px; background:#f9f9f9; padding:25px; border-radius:10px; border:1px solid #ddd; cursor:pointer; transition: transform 0.3s, box-shadow 0.3s, background 0.3s; text-align:left; }
.jurisdiction-card:hover { transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.2); background:#fff; }
.jurisdiction-card h4 { color:#0a2540; margin-bottom:10px; font-size:1.2rem; }
.jurisdiction-card p { color:#555; font-size:0.95rem; }

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

/* Fade-in on scroll class */
.fade-in { opacity:0; transform:translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Responsive */
@media(max-width:768px){ 
    .service-cards, .jurisdiction-grid{flex-direction:column; align-items:center;} 
    .hero h1{font-size:2rem;} 
    .hero p{font-size:1rem;} 
}
.logo img {
    display: block;
    height: 50px; /* adjust as needed */
    width: auto;
}

header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Add to your style.css at the bottom */
.about.fade-in, .services.fade-in, .contact.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Key Point alignment fixes */
.key-point {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* space between icon and text */
    margin: 20px auto;
    max-width: 800px;
}
.key-point img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}
.key-point-text {
    flex: 1;
}
.key-point-text ul {
    padding-left: 20px;
    margin: 0;
}