@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:opsz@18..144&family=Open+Sans&display=swap');

:root {
  --color-text: #666666;
  --color-braun: #904836;
  --color-white: #ffffff; 
  --color-drab: #dfcba6; 
  --color-black: #333333; 
  --color-drab2: #c08654; 
}

body{background: url('img/bg.svg')no-repeat;background-size: cover;background-position: center;font-family: "Open Sans", sans-serif;margin: 0 auto;color:var(--color-text)}
a{color:var(--color-braun);text-decoration:none}
a:hover{color:var(--color-black);}

h1, h3{margin: 0;font-family: "Merriweather", serif;text-transform:uppercase}

#container{font-size:1em;width: 1200px;margin: 0 auto 4em auto;}

#head1{width: 100%;text-align:right;padding: 1em 0;background: var(--color-braun);color: var(--color-white);}
#header_contact{display: flex;align-items: center;justify-content: flex-end;}
#header_contact p{margin: 0 1em 0 .5em;}
#header_contact a{color: var(--color-white);font-weight: bold;font-size: 1.3em;font-family: "Merriweather", serif}
.ph{margin: 0 1em;}

#head2{display:flex;width: 100%;margin: 1em auto 1em auto;}
#logo{margin-right: 2em;}
#logo img{}
#content{text-align:justify;}

#reservation{background: var(--color-drab) url('img/calendar.png') no-repeat;background-size: contain;background-position: right;color:var(--color-text);display: flex;justify-content: space-evenly;margin-bottom: 1em;transition:ease .5s}
#reservation:hover{background: var(--color-braun) url('img/calendar.png') no-repeat;background-size: contain;background-position: right; color:var(--color-white);}
#reservation #content{padding:1.3em;width: 75%;text-align: right;}

#soterapia{background:var(--color-braun);color:var(--color-white);display: flex;justify-content: space-evenly;margin-bottom: 1em;}
#soterapia #content{padding:1.3em;width: 75%;}
#soterapia #image{background:url('img/bg_soterapia.jpg')no-repeat;width: 31%;background-size: cover;background-position: right;}

#ajanlat{background-color: var(--color-drab);background-image: url('img/bg_ajanlat_fa.jpg');background-repeat: no-repeat;background-position: right;background-blend-mode: color-burn;display: flex;color: var(--color-black);margin-bottom: 1em;}
#ajanlat #content{padding:1.3em;width: 60%;display: flex;flex-wrap: wrap;}
#ajanlat #image{background:url('img/bg_ajanlat.jpg')no-repeat;width: 40%;background-size: cover;background-position: right;}

#contact{display: flex;width: 100%;margin-bottom: 1em;}
#contact #content{display: flex;margin-top: 1em;width: 100%;justify-content: space-between;}
#map{width: 33%;}
#data{padding: 1em;background: var(--color-drab);border-left: 3px solid var(--color-white);border-right: 3px solid var(--color-white);width: 33%;color: var(--color-black);}
#atention{background: var(--color-braun) url('img/bg_atention.jpg') no-repeat;background-blend-mode: multiply;padding: 1em;color: var(--color-white);width: 33%;}
#atention h1{font-size: 3em;}

#hazirend{background: var(--color-drab2);color:var(--color-white);display: flex;justify-content: space-evenly;margin-top: 1em;}
#hazirend #content{padding:1.3em;width: 75%;}
#hazirend #image{background: url('img/bg_hazirend.jpg')no-repeat;width: 31%;background-size: cover;background-position: right;}

@media screen and (max-width:1210px){
  #container{width: 100%;}
  #head2{width: 95%;}
}
@media screen and (max-width:930px){
  #atention h1{font-size: 2em;}
  #reservation #content{padding: 1.3em 10% 1.3em 1.3em;width: 70%;text-align: right;}
}
@media screen and (max-width:615px){
  #head2{display: table-cell;margin: 1em 0;text-align: center;width: 100%;padding: 0 1em;}
  #head2 #content{text-align:center;}
  #logo{margin-right: 0;}
  #contact #content{display: flex;flex-direction: column-reverse;}
  #map{width: 100%;}
  #data{border-left: 0px solid var(--color-white);border-right: 0px solid var(--color-white);width: 94%;padding: 3%;display: flex;flex-direction: column;}
  #atention{width: 94%;padding: 3%;display: flex;flex-direction: column;}
}
@media screen and (max-width:540px){
  #reservation #content{padding: 1.3em 47% 1.3em 1.3em;width: 70%;text-align: right;}
}