/* BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body {
  line-height: 1.6;
  background: #f9fafc;
  color: #333;
}

/* HEADER */
header {
  background: #2F65BD;
  color: white;
  padding: 15px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo img {
  height: 55px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-left: 25px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
  color: #F4C400;
}

/* HERO SECTION */
.hero {
  background: linear-gradient(rgba(47, 101, 189, 0.8), rgba(47, 101, 189, 0.8)),
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d') center/cover no-repeat;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 20px;
  margin-bottom: 20px;
}

.cta-btn {
  padding: 12px 28px;
  background: #F4C400;
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s;
}

.cta-btn:hover {
  background: #ffd633;
}

/* SERVICES SECTION */
.services {
  padding: 70px 60px;
  text-align: center;
}

.services h2 {
  font-size: 34px;
  margin-bottom: 45px;
  color: #2F65BD;
  font-weight: 700;
}

.service-container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.service-card {
  background: white;
  padding: 35px 25px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  flex: 1 1 280px;
  max-width: 320px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.service-card h3 {
  margin-bottom: 18px;
  color: #2F65BD;
  font-weight: 700;
  font-size: 1.5rem;
}

.service-card p {
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

.service-card button {
  margin-top: 20px;
  padding: 10px 18px;
  border: 2px solid #2F65BD;
  border-radius: 6px;
  font-weight: 700;
  color: #2F65BD;
  background: transparent;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.service-card button:hover {
  background-color: #F4C400;
  color: #000;
  border-color: #F4C400;
}

/* SERVICE IMAGE */ 
.service-img { 
    width: 160px;
    height: 160px;
    border-radius: 50%; 
    background-color: #aacbff; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    margin: 0 auto 20px auto; 
    flex-shrink: 0; overflow: hidden; /* clips background to circle shape */ 
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */ 
} 

.service-card h3 { 
    position: relative; 
    z-index: 2; 
    margin-top: 10px; 
    font-size: 22px; 
    color: #2F65BD; 
    font-weight: 700; 
    background: white; /* blocks image bleed-through */ 
} 
        
.service-card{ 
    text-align:center; 
    align-items:center; 
    } 
        
.service-card:hover .service-img img{ 
    transform:scale(1.1); 
}     
/* Paragraph */ 
        
.service-card p{ 
    margin-top:10px; 
    font-size:15px; 
    color:#555; 
    line-height:1.6; 
}

/* FEATURES SECTION */
.features {
  background: #f1f5fb;
  padding: 70px 60px;
}

.features h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #2F65BD;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.feature {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* CONTACT SECTION */
.contact {
  padding: 70px 60px;
}

.contact h2 {
  text-align: center;
  margin-bottom: 35px;
  color: #2F65BD;
}

.contact form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.contact input,
.contact textarea {
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.contact button {
  padding: 12px;
  background: #2F65BD;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact button:hover {
  background: #1f4f9e;
}

/* FOOTER */
footer {
  background: #1e3f7a;
  color: white;
  padding: 50px 60px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section h3 {
  margin-bottom: 15px;
}

.footer-section a {
  display: block;
  text-decoration: none;
  color: #ddd;
  margin-bottom: 5px;
}

.footer-section a:hover {
  color: #F4C400;
}

.copyright {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
  font-size: 14px;
}

/* ABOUT COMPANY SECTION */

.about-company{
padding:70px 60px;
background:#fff;
}

.about-wrapper{
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}

.about-images img{
width:220px;
margin-bottom:15px;
border-radius:8px;
}

.about-content{
flex:1;
}

.about-content h4{
color:#F4C400;
margin-bottom:10px;
}

.about-content h2{
color:#2F65BD;
margin-bottom:20px;
}

.about-list{
display:flex;
gap:40px;
margin:20px 0;
}

.about-list ul{
list-style:disc;
padding-left:20px;
}

/* SKILLS SECTION */

.skills{
background:#f5f7fc;
padding:70px 60px;
text-align:center;
}

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

.skill-box{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:.3s;
}

.skill-box:hover{
transform:translateY(-6px);
}

.skill-box h3{
color:#2F65BD;
margin-bottom:10px;
}

/* APPOINTMENT SECTION */

.appointment{
padding:70px 60px;
background:#eef3fb;
}

.appointment-container{
display:flex;
gap:40px;
flex-wrap:wrap;
align-items:center;
}

.appointment-text{
flex:1;
}

.appointment-text h2{
color:#2F65BD;
margin-bottom:20px;
}

.appointment-text form{
display:flex;
flex-direction:column;
max-width:500px;
}

.appointment-text input,
.appointment-text textarea{
padding:12px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:5px;
}

.appointment-text button{
background:#2F65BD;
color:#fff;
border:none;
padding:12px;
border-radius:5px;
cursor:pointer;
}

.appointment-text button:hover{
background:#1f4f9e;
}

.appointment-image img{
width:350px;
}

/* RESPONSIVE */

@media (max-width: 991px) {

header {
flex-direction: column;
padding: 20px;
}

nav ul {
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}

.service-container {
flex-direction: column;
align-items: center;
}

.feature-list {
grid-template-columns: 1fr;
}

.about-wrapper{
flex-direction:column;
}

.appointment-container{
flex-direction:column;
}

}

/* PAGE TITLE */

.page-title{
background:#2F65BD;
color:white;
text-align:center;
padding:70px 20px;
}

.page-title h1{
font-size:40px;
margin-bottom:10px;
}

.page-title p{
font-size:18px;
}


/* CTA SECTION */

.cta-section{
background:#F4C400;
text-align:center;
padding:60px 20px;
}

.cta-section h2{
margin-bottom:15px;
color:#000;
}

.cta-section p{
margin-bottom:20px;
}

/* MISSION SECTION */

.mission{
background:#f5f7fc;
padding:70px 60px;
}

.mission-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.mission-box{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
text-align:center;
}

.mission-box h3{
color:#2F65BD;
margin-bottom:10px;
}

.mission-box:hover{
transform:translateY(-6px);
}

/* CONTACT PAGE */

.contact-page{
padding:70px 60px;
}

.contact-container{
display:flex;
gap:40px;
flex-wrap:wrap;
}

.contact-info{
flex:1;
background:#f5f7fc;
padding:30px;
border-radius:10px;
}

.contact-info h2{
color:#2F65BD;
margin-bottom:15px;
}

.contact-info h3{
margin-top:20px;
color:#2F65BD;
}

.contact-form{
flex:1;
}

.contact-form h2{
color:#2F65BD;
margin-bottom:15px;
}

.contact-form form{
display:flex;
flex-direction:column;
}

.contact-form input,
.contact-form textarea{
padding:12px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:5px;
}

.contact-form button{
background:#2F65BD;
color:white;
border:none;
padding:12px;
border-radius:5px;
cursor:pointer;
}

.contact-form button:hover{
background:#1f4f9e;
}

/* MAP */

.map{
margin-top:40px;
}