:root {
    --red-color:#B0A695;
    --light-color:#FFFFFF;
    --dark-color:black;

    
}

*,
*::after,
*::before {
    box-sizing:border-box;
}

body {
    margin: 0;
    font-family: "Quicksand", sans-serif;
    overflow-x: hidden; /* Disable horizontal scrolling */
    height: 100%; /* Ensure body takes up full viewport height */ 
    background-color: #ffffff;
}


h1 {
    font-size: 3rem;
    color: var(--dark-color);
  }

h3 {
    font-weight: normal;
    color: var(--dark-color);
  }
p {
    font-weight: 300;
    color: var(--dark-color);
  }


.wrapper {
    margin: 0 auto;

}


.btn.kast {
    background: var(--red-color);
}

/* header */

.header {
    position: absolute;
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 999;
    padding-left: 6rem;
    padding-right: 7rem;
}

.livona-text {
    padding: 1rem;
    margin-right: auto;
    text-decoration: none;
    display: none;
}

.livona-text img {
    height: auto; /* Adjust as needed */
    width: 5rem; /* Adjust as needed */
    display: none;
}

.navigation a {
    text-decoration: none;
    color: #000000;
    font-weight: normal;
    transition: color 0.3s ease;
    margin: 0 20px; /* Adjust the margin as needed */
    display: inline-block; /* Change to inline-block */
    text-align: center;
    position: relative;
}

.navigation a:hover {
    color: #e90000;
}

.kontakt {
    background-color: #e90000; 
    color: #ffffff;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    height: 20%; /* Make the red box as tall as the header */
    border-radius: 0.1rem;
    margin-left: 2rem;
    transition: background-color 0.3s ease; /* Add transition effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.kontakt:hover {
    background-color: #000000; /* Change background color on hover */
}

.kontakt a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent */
}




 /* Teine rida algab siit */

.midateeme-section {
    display: relative;
    gap: 6.25rem; /* 100px converted to rem */
    align-items: center; /* Center items vertically */
    padding-left: 7rem; /* Add padding to create space for the background image */
    padding-right: 7rem;
    padding-top: 2rem ;
    padding-bottom: 7rem;    
    scroll-margin-top: 80px; /* Offset for scrolling */
    background-color: #dfdfdf;
    }    

h5 {
    font-size: 6.6rem;
    padding: 0;
    margin: 0;
    line-height: 6rem;
    white-space: nowrap; /* Prevent text from wrapping */
    text-shadow: 0 0 20px rgb(149, 149, 149);
    mix-blend-mode: multiply;
}
h6 {
    padding: 1rem;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;

}

.omadused {
    display: flex;
    justify-content: space-between; /* Distribute items evenly along the main axis */
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    padding-bottom: 1rem;
}

.omadused-card {
    flex-basis: calc(33.333% - 1rem); /* Adjust the width of each card */
    border-radius: 0.5rem; /* 8px converted to rem */
}

.content-box {
    display: flex;
    align-items: center; /* Vertically center content */
    padding: 1.25rem; /* 20px converted to rem */
}

.content-box img {
    width: 3rem; /* 50px converted to rem */
    height: auto; /* Maintain aspect ratio */
    margin-right: 1rem; /* 20px converted to rem */
}

.text-content {
    flex: 1; /* Expand text content to fill remaining space */
    padding: 0; /* Remove padding */
}

.text-content h2,
.text-content p {
    margin: 0; /* Remove default margins */
}

            /* Table */

    .korterid {
    padding-left: 7rem; /* Add padding to create space for the background image */
    padding-right: 7rem;
    padding-top: 0rem ;
    padding-bottom: 7rem;    
    scroll-margin-top: 80px; /* Offset for scrolling */  
    width: 100%; /* Set contact form sections to full width on smaller screens */
}  

        /* Table */
            .three-column-table {
                width: 100%;
                border-collapse: collapse;
            }
            
            .three-column-table td {
                border: 1px solid #dddddd;
                padding: 1rem;
                text-align: center;
            }



    /* Optional: Adjust styles for better presentation */
    .light {
        color: var(--dark-color);
        text-align: center;
    }

    /* teenused */
    .teenused-section {
        text-align: center;
        background-color: #eef2f5;
        width: 100%;
        padding-left: 7rem; /* Add padding to create space for the background image */
        padding-right: 7rem;
        padding-top: 0.4rem;
        padding-bottom: 2rem;    
        scroll-margin-top: 80px; /* Offset for scrolling */
    }
    
    .teenused-kaardid {
        display: flex;
        flex-wrap: wrap; /* Allow cards to wrap to the next row */
        justify-content: center; /* Center cards horizontally */
        align-items: center; /* Center cards vertically */
        margin-left: 2rem;
        margin-right: 2rem;
    }
    
    .teenused-card {
        width: 15rem; /* 350px converted to rem */
        height: 15rem; /* Fixed height for all cards */
        background-blend-mode: overlay ;
        color: var(--dark-color);
        border-radius: 0.625rem; /* 10px converted to rem */
    }
    
    .teenused-card .content {
        padding-left: 1.25rem;
        padding-right: 1.25rem; 
    }
    
    .teenused-card img {
        width: 4.5rem; /* 80px converted to rem */
        height: auto;
        display: block;
        margin: 2rem auto; /* Center the image and add margin-bottom */
        padding: 0rem;
    }
    
    
             /* contact form */
             .container {
                display: flex;
                justify-content: space-between;
                padding-left: 7rem; /* Increase left padding */
                padding-right: 7rem; /* Decrease right padding */
                padding-top: 0.2rem;
                padding-bottom: 5rem;
                background-image: url(Images/Taust.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
            
            .vota-yhendust {
                flex: 1; /* Occupy more space */
                padding-right: 2rem;
            }

            .logo-container {
                background-image: url('Images/Logo.png');
                background-repeat: no-repeat;
                background-size: contain; /* Adjust as needed */
                height: 8rem; /* Adjust the height as per your logo */
                width: auto; /* Adjust the width as per your logo */
            }
            
            
            .contact-forms-wrapper {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                flex: 1; /* Occupy available space */
                padding-top: 7rem;
            }
            
            .contact-form-container {
                flex: 1; /* Occupy available space */
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10px;
                flex-direction: column;
                background-color: #ffffff;
                max-width: 100rem; /* Limit the width of the form section */
                margin: auto; /* Center the form section */
            }
            
            .kontakteeru {
                padding: 1rem;
                padding-top: 0.1rem;
                font-weight: bold;
            }
            
            .additional-info {
                display: flex;
                flex-direction: column;
            }
            
            .info-item {
                margin-bottom: 1rem;
            }
            
            .info-content {
                display: flex;
                align-items: center;
                font-weight: bold;
                position: relative;
                }

            
            .info-content img {
                width: 2.2rem;
                height: 2.2rem;
                margin-right: 0.3rem;
            }
            
            .additional-text {
                position: relative;
                top: -0.7rem; /* Adjust this value to your preference */
            }
            
            input[type=submit]:hover {
                background-color: #000000;
            }
            
            input[type=text], select, textarea {
                width: 100%;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
                margin-top: 6px;
                margin-bottom: 16px;
                resize: vertical;
                font-family: inherit;
                font-size: 14px;
            }
            
            input[type=submit] {
                background-color: #e90000;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5rem;
                display: inline-block;
                font-size: 16px;
                font-style: normal;
                text-decoration: none;
                transition: background-color 0.3s ease;
            }
            
            .footer {
            padding-left: 7rem;
            padding-bottom: 2rem;
            padding-top: 2rem;
        
            }

            


            
/* Additional CSS for mobile screens */




@media screen and (max-width: 1368px) {
    .midateeme-section {
    padding-top: 0rem;
    padding-bottom: 0rem;

    }

    .omadused {
        flex-direction: column; /* Display omadused cards in a column on smaller screens */
    }

    .omadused-card {
        width: 100%; /* Set omadused cards to full width on smaller screens */
        margin-bottom: 2rem; /* Adjusted margin for smaller screens */
    }
}


@media screen and (max-width: 1480px) {
    .teenused-section {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-bottom: 4rem;
    }
    h5 {
        font-size: 4.2rem; /* Adjusted font size for smaller screens */
    }
}



@media screen and (max-width: 1135px) {
    .container {
        flex-direction: column; /* Display container items in a column on smaller screens */
        padding: 4rem 1rem; /* Adjusted padding for smaller screens */
    }

    .vota-yhendust,
    .contact-forms-wrapper,
    .kontakteeru {
        width: 100%; /* Set contact form sections to full width on smaller screens */
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .header {
        padding-left: 3rem;
        padding-right: 3rem;

    }
    .footer    {
        width: 100%; /* Set contact form sections to full width on smaller screens */
        padding-left: 3rem;
        padding-right:3rem;
    }

    .korterid {
        padding-left: 3rem;
        padding-right:3rem;

    }
}
@media screen and (max-width: 1029px) {
    .social-media {
      display: none; /* Hide navigation links and social media icons */
    }
  
    .header {
      justify-content: flex-end; /* Center align items */
    }
  
    .livona-text {
      margin-right: auto;
      padding-left: 6rem;
    }
  
    h5 {
        font-size: 4rem; /* Adjusted font size for smaller screens */
        white-space: nowrap; /* Prevent text from wrapping */
    }
  }
  

  @media screen and (max-width: 950px) {

  
  
    .livona-text {
      margin-right: auto;
      padding-left: 2rem;
    }
  

  }
  

    @media screen and (max-width: 843px) {
        .midateeme-section {
            padding-left: 3rem;
            padding-right: 3rem;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
    
        .omadused {
            flex-direction: column; /* Display omadused cards in a column on smaller screens */
        }
    
        .omadused-card {
            width: 100%; /* Set omadused cards to full width on smaller screens */
            margin-bottom: 2rem; /* Adjusted margin for smaller screens */
        }
      
        
          .livona-text {
            margin-right: auto;
            padding-left: 2rem;
          }
        
    }

    .slide-content {
        height: 20rem; /* Adjust the height as needed */
    }

    .info-box {
        height: 4rem;
        padding-top: 0.6rem;
    
          }
          
          .info-box h2,
          .info-box h3 {
            font-size: 90%;
          }
      


@media screen and (max-width: 768px) {

    .main-section {
        padding: 2rem 1rem; /* Adjusted padding for smaller screens */
    }

    .sinupartner {
        text-align: center; /* Center text on smaller screens */
    }

    .sinupartner h5 {
        font-size: 2rem; /* Adjusted font size for smaller screens */
        white-space: wrap; /* Prevent text from wrapping */
        line-height: 3rem;
    }

    .sinupartner h6 {
        font-size: 1rem; /* Adjusted font size for smaller screens */
    }
    .taust {
        background-image: url('/Images/Room2.png'); /* Correct path */

    }
    
}
@media screen and (max-width: 740px) {


  .header {
    justify-content: flex-end; /* Center align items */
    padding-right: 3rem;
  }
}

@media screen and (max-width: 600px) {

    .navigation {
        display: none; /* Hide navigation links and social media icons */
      }

      .logo-container {
        width: auto; /* Adjust the width as per your logo */
        display: none;
    }

    .container {
        padding-top: 2.5rem;
    }
    .header {
        position:fixed;
    }


@media screen and (max-width: 560px) {

    
    .vota-yhendust,
    .contact-forms-wrapper,
    .kontakteeru {
        width: 100%; /* Set contact form sections to full width on smaller screens */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .footer    {
        width: 100%; /* Set contact form sections to full width on smaller screens */
        padding-left: 1.5rem;
        padding-right:1.5rem;
    }
    h1 {
        font-size: 2.5rem;
    }
    .korterid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .header {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media screen and (max-width: 400px) {

    .contact-forms-wrapper {
        padding-top: 1rem;
    }

    
    .three-column-table td {
        border: 1px solid #dddddd;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        text-align: center;
    }

    .three-column-table {
        font-size: 90%;
    }
}
}