/* navbar */
#navbar h1 {
    float: none;
    text-align: center;
}

#navbar ul,
#navbar ul li {
    float: none;
}

#navbar ul li a {
    padding: 5px;
    border-bottom: #444 dotted 1px;
}

/* Showcase */
#showcase {
    height: 100%;
}

#showcase .showcase-content{
    padding-top: 70px;
    padding-bottom: 30px;
}

/* Info */

#info {
    height: 500px;
}

#info .info-img {
    display: none;
}

#info .info-content {
    float: none;
    width: 100%;
}

/* Features */

#features .box {
    float: none;
    width: 100%;
}

/* About */

#about-info .info-left,
#about-info .info-right {
    float: none;
    width: 100%;
}

#about-info .info-right {
    margin-top: 30px;
}

#about-info .info-left h1 {
    text-align: center;
}

/* Contact */
#contact-form h1,
#contact-form p {
    text-align: center;
}

#contact-info .box {
    float: none;
    width: 100%;
    border-bottom: #444 dotted 1px;
}


/* --- Mobile enhancements (<=600px) --- */
#navbar .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:10px 16px;
}
#navbar h1{
  float:none;
  margin:0;
}
#navbar ul{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:4px;
  padding-left:0;
}
#navbar ul li{
  float:none;
  display:block;
}
#navbar ul li a{
  display:block;
  padding:10px 0;
  border-bottom:1px dotted #444;
}

/* Ajalugu / info section */
#info{
  height:auto !important;
  display:block;
  padding:24px 0;
}
#info .info-img{
  display:none; /* hide decorative image on small screens */
}
#info .info-content{
  float:none;
  width:100%;
  height:auto;
  padding:0 16px 8px;
  text-align:left;
}
#info .info-content h2{
  font-size:1.6rem;
  line-height:1.2;
  margin-bottom:8px;
}
#info .info-content p{
  font-size:0.95rem;
  line-height:1.5;
}
#info .info-content .btn{
  display:inline-block;
  margin-top:12px;
}

/* Features grid */
#features .box{
  float:none;
  width:100%;
  padding:16px 14px;
  min-height:unset;
  text-align:center;
}
#features .box h3{
  margin:8px 0;
}
#features .box p{
  max-width:36ch;
  margin:0 auto;
}

/* About page compression */
#about-info .info-right{
  float:none;
  width:100%;
  margin:12px 0 0;
  text-align:center;
}
#about-info .info-right img{
  max-width:200px;
  width:60%;
  height:auto;
  border-radius:50%;
}
#about-info .info-left{
  float:none;
  width:100%;
  padding:0 16px;
}
#about-info .info-left h1{
  font-size:1.6rem;
  line-height:1.2;
  margin-bottom:6px;
}
#about-info .info-left p{
  font-size:0.95rem;
  line-height:1.55;
}

/* Utilities */
.clear{ clear: both; }
.container{ width: 100%; padding: 0 16px; }