body{background-color: #dcf2ff;font-family: Tahoma, Helvetica, sans-serif;}
* {margin: 0;padding: 0;color:#181c1b;}
img{border:0}
*, *::before, *::after {
  box-sizing: border-box;
}

#top{width: 100%;}
#top h1{font-weight: 900;font-family: Arial, Helvetica, sans-serif;font-size: 40px;padding: 1% 0 1% 10%;}
#main {height: 100%;position: relative;background-color: #fff;}
#main a{text-decoration: none;}

#home{padding: 7% 20%;}
#home h2{margin: 20px 0;font-size: 17px;}
#home ul{margin-left: 50px;}

#subs_div, #contacts_div{border-radius: 10px;background-color: #fff;padding: 20px 40px;margin: 0 auto;border: 1px solid #d9e4eb;}
#subs_div button {padding: 5px 20px;font-size: 16px;cursor: pointer;background-color: #181c1b;color: white;border: none;border-radius: 10px;}
#subs_div input {padding: 4px 17px;font-size: 16px;border-radius: 10px;border: 1px solid #a9a9a9;margin: 0 11px;}
#subs_div input:first-of-type {width: 140px;}
#subs_div form {display: flex;align-items: center;justify-content: center;}
#subscribe_message{padding: 30px;font-weight: bold;font-size: 14px;display: none;}

#sale, #problem, #news, #contacts{padding: 7% 20%;width: 100%;}
#sale h4, #problem h4, #news h4{font-size: 20px;padding: 60px 0 31px 0;border-top: 1px dotted  #b7ccd9;}
#sale p, #problem  p, #news  p{margin-bottom:70px}
#sale p b, #problem p b, #news p b{font-size: 20px;}

#contacts_div{width: 85%;display: flex;align-content: center;justify-content: center;flex-direction: column;}
#contacts h3, #home h3, #sale h3, #problem h3, #news h3{font-size: 36px;padding: 0 0 50px 0;text-align: center;}
#contacts p{font-size: 15px;margin-bottom:30px}
#contacts{justify-content: center;flex-direction: column;}
#sale h3, #problem h3, #news h3 {border-bottom: 1px solid #b7ccd9;margin-bottom: 50px;width: 100%;}

#feedback input,#feedback textarea{width: 100%;padding: 4px 17px;font-size: 16px;border-radius: 10px;border: 1px solid #a9a9a9;padding: 10px;margin-bottom: 20px;}
#feedback {max-width: 500px;margin: 30px auto;font-family: sans-serif;text-align: justify;}
#feedback label {display: inline-block;margin-bottom: 5px;font-weight: bold;}
#feedback .name-line {display: flex;align-items: center;gap: 10px;}
#feedback .name-line label {margin: 0;white-space: nowrap;}
#feedback .name-line input {flex: 1;margin: 0;}
#feedback button {width: 100%;padding: 10px 20px;font-size: 16px;cursor: pointer;background-color: #181c1b;color: white;border: none;border-radius: 10px;font-weight: bold;}
#form-error{font-weight: 700;}
#form-error p{font-weight: 500;margin-top: 20px;font-size: 12px;}

#problem, #news, #contacts{display: flex;flex-wrap: wrap;align-content: center;}
#problem_desc, #news_desc{padding-right: 20px;}
#problem_desc p, #news_desc p{padding-top: 25px;font-size: 15px;}
#problem_desc h2, #news_desc h2{font-size: 21px;}
#problem_list, #news_list{border-top: 1px dotted  #b7ccd9;padding-top: 40px;}
#problem_list:first-of-type, #news_list:first-of-type {border-top: none;padding-top: 0;}

#center{width: 100%;padding: 2% 0;background-color: #fff;display: flex;justify-content: center;z-index: 1;}
#center div{position: relative;float: left;height: 100%;text-align: center;align-content: center;font: 500 12px tahoma, Helvetica, sans-serif;}
#center div h2{font: 700 23px tahoma, Helvetica, sans-serif;}
#center div p{margin-top: 6px;width: 100%;}
#center a{width: 14%;margin: 0 1% 0 1%;display: flex;justify-content: center;text-decoration: none;}

#bottom{width: 100%;height:200px;z-index: 1;}

.modal {display: none;position: fixed;z-index: 999;left: 0;top: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.7);align-items: center;justify-content: center;}
.modal-content {background-color: #fff;padding: 30px 20px;border-radius: 10px;width: 300px;text-align: center;box-shadow: 0 5px 20px rgba(0,0,0,0.2);}
.language-option {font-weight: bold;margin: 12px 0;cursor: pointer;font-size: 18px;transition: 0.2s;}
.language-option:hover {color: #007bff;}

#infrastructure{display: flex;justify-content: center;margin-top: 50px;}

#sale_app, #problem_list, #news_list{width: 100%;display: flex;justify-content: center;margin-bottom: 40px;}
#sale_desc, #problem_desc, #news_desc{width: 50%;text-align: left;position: relative;}
#sale_foto, #problem_foto, #news_foto{width: 50%;}
#sale_desc h2{font-size: 30px;border-bottom: 1px solid #b7ccd9;padding: 0 0 13px;margin-right: 20px;margin-bottom: 20px;}
#sale_desc_list{display: flex;justify-content: flex-start;margin-right: 20px;}
#sale_desc_list div{width: 50%;padding: 6px;font-size: 15px;}
#sale_desc_list:nth-child(odd) {background-color: #ccecff;}
#sale_price{float: inline-end;text-align: center;background-color: #ffb5b5;width: 150px;padding: 13px;margin: 20px;font-weight: bold;border-radius: 10px;font-size: 20px;}
.sale_contact, .problem_time, .news_time{text-align: center;width: 90%;margin: 0 5% 1% 5%;position: absolute;color: #fff;background-color: #181c1b;padding: 15px;bottom: 0;border-radius: 10px;font-weight: bold;cursor: pointer;}
.sale_contact:hover, .problem_time:hover, #feedback button:hover{background-color: #262b29;}
.problem_time,.news_time{margin: 0;cursor: auto;}

.news_time{background-color: #557487;}
.news_time:hover{background-color: #658aa1;}

#overlay {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 999;display: none;}
#contact_modal {position: fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);background: #fff;padding: 30px;border-radius: 8px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);z-index: 1000;width: 90%;max-width: 400px;display: none;text-align: center;}
#contact_content h3 {font-size: 20px;margin-bottom: 15px;font-weight: bold;text-align: center;}
.contact-list {display: flex;flex-direction: column;gap: 10px;font-family: Arial, sans-serif;}
.contact-item {display: flex;justify-content: space-between;padding: 7px 15px;border-radius: 6px;border: 1px solid #e0e0e0;transition: background-color 0.2s ease-in-out;}
.contact-item .label {font-weight: 600;color: #333;}
.contact-item .value {font-weight: 500;color: #007bff;word-break: break-word;}

@media (min-width: 1201px) and (max-width: 1338px) {
  #subs_div form {flex-wrap: wrap;}
  #subs_div button {margin-top: 20px;}
  #subs_div{padding: 30px 40px;}
}

@media (min-width: 821px) and (max-width: 1200px) {
  #center div h2{font-size: 1.5em;}
  #center div p{font-size: 0.95em;}
  #sale, #problem, #news, #home, #contacts {padding: 7% 10%;}
  #subs_div form {flex-wrap: wrap;}
  #subs_div{padding: 30px 40px;}
  #sale_price{margin-top: 10px;}
}

@media (min-width: 820px) and (max-width: 1113px) {
  #subs_div form {flex-direction: column;}
  #subs_div button {margin-top: 16px;width: 69%;}
  #subs_div{padding: 15px 0;width: auto;}
  #subs_div input:first-of-type, #subs_div input {width: 69%;}
  #subs_div label {margin: 5px;font-size: 15px;}
  #contacts_div{width: 100%;}
}

@media (min-width: 481px) and (max-width: 820px) {
  #top h1 {font-size: 50px;}
  #center div h2{font-size: 1.1em;}
  #center div p{font-size: 0.9em;}
  #infrastructure{margin-top: 40px;}
  #subs_div form {flex-direction: column;}
  #subs_div button {margin-top: 16px;width: 69%;}
  #subs_div{padding: 15px 0;width: auto;}
  #subs_div input:first-of-type, #subs_div input {width: 69%;}
  #subs_div label {margin: 5px;font-size: 15px;}
  #sale, #problem, #news, #home, #contacts {padding: 7% 10%;}
  #sale p, #problem p , #news p {font-size: 13px;}
  #sale p b, #problem p b, #news p b {font-size: 15px;}
  #sale h4, #problem h4, #news h4 {font-size: 15px;}
  #sale_app{flex-direction: column;}
  #sale_desc, #sale_foto, #news_desc, #news_foto{width: 100%;text-align: center;}
  #sale_price{float: none;margin: 3% 5%;width: 90%;}
  .sale_contact, .problem_time, .news_time{position: relative;margin-bottom: 20px;}
  #problem_list, #news_list{flex-direction: column;}
  #problem_desc, #problem_foto, .problem_time, .news_time{width: 100%;}
  #problem_desc, #news_desc{padding-right: 0;}
  #problem_desc p, #news_desc p{margin-bottom: 20px;padding-top: 20px;}
  .problem_time, .news_time{margin: 0;margin-bottom: 20px;padding: 12px;}
  #feedback label{font-size: 14px;}
  #form-error{font-weight: 700;font-size: 14px;}
  #contacts h3, #home h3, #sale h3, #problem h3, #news h3{font-size: 31px;padding: 0 0 30px 0;}
  #contacts_div{width: 100%;}
}

@media (min-width: 360px) and (max-width: 480px) {
  #top {height: 100%;}
  #center{position: revert;flex-wrap: wrap;}
  #center div h2{font-size: 2em;}
  #center div p{font-size: 1em;}
  #main{text-align: center;}
  #center a {width: 80%; padding: 5%;border-bottom: 1px dashed #b8dff5;}
  #center a:last-child {border-bottom: none;}
  #bottom{position: revert;}
  #top h1 {padding: 5% 0;font-size: 45px;}
  #home ul {margin-left: 25px;}
  #infrastructure{margin-top: 30px;}
  #subs_div form {flex-direction: column;}
  #subs_div button {margin-top: 10px;font-size: 14px;width: 85%;}
  #subs_div{padding: 15px 0;width: 276px;}
  #subs_div input:first-of-type {width: auto;}
  #subs_div label {margin: 5px;font-size: 13px;}
  #sale, #problem, #news, #home, #contacts {padding: 7% 10%;}
  #sale p, #problem p, #news p {font-size: 13px;padding-top: 35px;}
  #sale p b, #problem p b, #news p b {font-size: 15px;}
  #sale h4, #problem h4, #news h4 {font-size: 15px;}
  #sale_app{flex-direction: column;}
  #sale_desc, #sale_foto, #news_desc, #news_foto{width: 100%;text-align: center;}
  #sale_price{float: none;margin: 3% 5%;width: 90%;}
  .sale_contact, .problem_time, .news_time{position: relative;margin-bottom: 20px;}
  #sale_desc h2{font-size: 27px;}
  #problem_list, #news_list{flex-direction: column;}
  #problem_desc, #problem_foto, .problem_time, .news_time{width: 100%;}
  #problem_desc, #news_desc{padding-right: 0;}
  #problem_desc p, #news_desc p{margin-bottom: 20px;padding-top: 15px;}
  .problem_time, .news_time{margin: 0;margin-bottom: 20px;font-size: 14px;padding: 11px;}
  #problem_desc h2, #news_desc h2{font-size: 19px;}
  #feedback label{font-size: 14px;}
  #feedback input, #feedback textarea {margin-bottom: 10px;}
  #feedback {margin: 10px auto;}
  #form-error{font-weight: 700;font-size: 12px;}
  #form-error p{font-size: 11px;}
  #contacts h3, #home h3, #sale h3, #problem h3, #news h3{font-size: 26px;padding: 0 0 30px 0;}
  #contacts_div{width: 100%;}
}

@media (max-width: 360px) {
  #top {height: 100%;}
  #center{position: revert;flex-wrap: wrap;}
  #center div h2{font-size: 1.7em;}
  #center div p{font-size: 1em;}
  #main{padding-bottom: 4%;}
  #main{text-align: center;}
  #top h1 {font-size: 35px;padding: 5% 0;}
  #center a {width: 80%; padding: 5%;border-bottom: 1px dashed #b8dff5;}
  #center a:last-child {border-bottom: none;}
  #bottom{position: revert;}
  #home ul {margin-left: 25px;}
  #infrastructure{margin-top: 20px;}
  #subs_div form {flex-direction: column;}
  #subs_div button {margin-top: 10px;font-size: 14px;width: 85%;}
  #subs_div{padding: 15px 0;width: 219px;}
  #subs_div input{width: 186px;}
  #subs_div input:first-of-type {width: 186px;}
  #subs_div label {margin: 5px;font-size: 13px;}
  #sale, #problem, #home, #news, #contacts {padding: 7% 10%;}
  #sale p, #problem p, #news p {font-size: 13px;padding-top: 35px;}
  #sale p b, #problem p b, #news p b {font-size: 15px;}
  #sale h4, #problem h4, #news h4 {font-size: 15px;}
  #sale_app{flex-direction: column;}
  #sale_desc, #sale_foto, #news_desc, #news_foto{width: 100%;text-align: center;}
  #sale_price{float: none;margin: 3% 5%;width: 90%;}
  .sale_contact, .problem_time, .news_time{position: relative;margin-bottom: 20px;}
  #sale_desc h2{font-size: 22px;}
  #problem_list, #news_list{flex-direction: column;}
  #problem_desc, #problem_foto, .problem_time, .news_time{width: 100%;}
  #problem_desc, #news_desc{padding-right: 0;}
  #problem_desc p ,#news_desc p{margin-bottom: 10px;padding-top: 15px;}
  .problem_time, .news_time{margin: 0;margin-bottom: 10px;font-size: 13px;padding: 11px;}
  #problem_desc h2, #news_desc h2{font-size: 17px;}
  #feedback label{font-size: 12px;}
  #contacts_div {padding: 20px 20px;margin: 0 auto;border: 1px solid #d9e4eb;width: 100%;}
  #feedback input, #feedback textarea {margin-bottom: 9px;}
  #feedback {margin: 0;}
  #form-error{font-weight: 700;font-size: 11px;padding-top: 10px;}
  #form-error p{font-size: 10px;}
  #contacts h3, #home h3, #sale h3, #problem h3, #news h3{font-size: 23px;padding: 0 0 20px 0;}
}