/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0 }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: #333 }
a { text-decoration: none; color: inherit }

/* Header */
header {
  display: flex; justify-content: space-between; align-items: center;
   background: #f5f5f5;
   padding:10px;
}

nav a { margin-left: 20px; font-weight: 600 }

/* Hero Section */
#hero {
  background: #34568B; color: #fff; text-align: center;
  padding: 40px 20px;
}
#hero h1 { font-size: 2.5rem; max-width: 800px; margin: auto }

#service {
   padding: 20px 80px;
}

#service ol
{
  padding: 20px 40px;
}

#service h1 { 
  font-size: 2.5rem;
   max-width: 800px; 
   }

   #service h2 { 
    font-size: 2.0rem;
     max-width: 800px; 
     }


     #pricing {
      padding: 20px 40px;
   }

   #pricing h2{
    font-size: 2.0rem;
     max-width: 800px; 
   }

/* Contact + Map */
#hladam {
    padding: 20px 80px;
}

    #hladam h2 {
        margin-bottom: 20px;
        margin-top: 10px;
    }

    #buyer {
        padding: 20px 80px;
    }

.contact-info, .map {
  flex: 1; min-width: 300px; padding: 20px;
}
.contact-info h1 { 
  font-size: 2.0rem;
  margin-bottom: 15px 
}
.contact-info h2 { 
  font-size: 1.25rem;
  margin-bottom: 15px;
}
.contact-info p { margin-bottom: 8px }
.map iframe { width: 100%; height: 300px; border: none }



    .contact-info a {
        color: #34A853;
        -webkit-text-decoration: inherit;
        text-decoration: underline;
    }

.finstat .fleft
{
  background-color: pink;
  border: #333;
  border-width: 3px;
}

.finstat .fleft img
{
  float:left;
  width:40px;
  height: 40px;
}

.finstat .fleft img:hover
{
  width:42px;
  height: 42px;
}

.finstat .fleft p
{
  float:left;
  width:auto;
  margin-left: 20px;
  vertical-align: middle;
  height: 100%;
  text-decoration: underline;
  

}

.finstat .fleft p:hover
{
  text-decoration-thickness: 2px;
  text-decoration-color: #44ce69;
}

 

/* Footer */
footer {
  background: #333; color: #fff; text-align: center;
  padding: 20px;
}
.social-icons a { margin: 0 10px; font-size: 1.2rem }

/* Responsive tweaks */
@media (max-width: 600px) {
  header  { flex-direction: column }
  nav     { margin-top: 10px }
  .hero h1 { font-size: 2rem }
}

img {
    transition: transform 0.25s ease;
    cursor: zoom-in;
}


img.zoomed {
    cursor: zoom-out;
}