/* ______ Home text ______ */
#home-text-image{
  position: relative;

  height: auto;
}

#home-text-overlay{
  position: absolute;
  inset: 0;
  background: rgba(205, 205, 205, 0.8);
}

#home-text{
  position: relative;

  padding: 10vw;
}

#company-name{
  text-align: center;
}

#op-area{
  text-align: center;
}

.home-p{
  text-align: justify;
  font-size: clamp(10px, 4vw, 23px);
}


#intro-div, #years-sec{
  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#intro-sec{

  border-top: rgb(56,43,40) solid 1px;
  border-bottom: rgb(56,43,40) solid 1px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#intro-sec > h2{
  text-align: center;
}

#logo-main{
  height: 40vw;
  width: 40vw;
  max-height: 175px;
  max-width: 175px;
}

#janos{
  margin: 1rem;

  border-radius: 50%;

  object-fit: cover;
  height: 60vw;
  width: 60vw;
  max-height: 250px;
  max-width: 250px;
}

#years-div{
  align-self: center;
}

#years{
  height: 40vw;
  width: 40vw;

  max-height: 175px;
  max-width: 175px;
}

#tel-main{
  margin-top: 0;
  text-align: left;
}


/* ______ Servise tiles ______ */

#s-tiles{
  height: auto;
  padding-top: 10vh;
}

.s-tile{
  margin: 2vh 5vw;
  position: relative; 

  height: 37vh;
  width: 90vw;
}

.s-tile-border{
  position: absolute;
  bottom: 0;

  border: solid black 1px;
  border-radius: 4px;

  height: 35vh;
  width: 85vw;
}

.s-tile-sec{
  position: absolute;
  bottom: .2rem;

  padding: 1rem;
}

.s-tile-image{
  position: absolute;
  right: 0;

  border-radius: 4px;

  height: 20vh;
  width: 75vw;
  object-fit: cover;

  z-index: 20;
}

.image-top{
    object-position: top;
}

.s-tile-text{
  margin: 0.5rem 0;
}

.s-tile-btn{
  border: none;
  border-radius: 3px;

  height: 9vw;
  width: 35vw;

  font-weight: 700;

  font-size: clamp(10px, 3vw, 19px);
}

@media screen and (min-width: 450px) {
  .s-tile{
    height: 42vh;
  }
  .s-tile-border{
  height: 40vh;
}

/* media: query:  tablets and bigger devices*/
@media screen and (min-width: 786px) {

/* ________ Hometext_________ */
#home-text{
  padding-left: 20vw;
  padding-right: 20vw;
}

/*______ servies-tiles ______*/

#s-tiles-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.s-tile{
  margin: 2vh 1.5vw;

  height: 42vh;
  width: 45vw;
}

.s-tile-border{
  bottom: 0;

  border: solid black 1px;
  border-radius: 4px;

  height: 40vh;
  width: 40vw;
}

.s-tile-sec{
  bottom: .2rem;

  padding: 1rem;
}

.s-tile-image{
  height: 18vh;
  width: 40vw;
}

.s-tile-title{
  font-size: clamp(20px, 3.5vw, 60px);
}

.s-tile-text{
  margin: 0.5rem 0;
}

.s-tile-btn{
  border-radius: 3px;

  height: 5vh;
  width: 20vw;

  font-weight: 700;

  font-size: clamp(10px, 2vw, 27px);
}
}
/* media query: laptops and bigger device */
@media screen and (min-width: 992px) {




/*______ s-tiles ______*/
#s-tiles{

    display: grid;
  place-items: center;
}

#s-tiles-flex{

  max-width: 1500px;
  
}

.s-tile{
  height: 39vw;
  width: 28vw;
  max-height: 390px;
  max-width: 280px;
}

.s-tile-border{
  height: 37vw;
  width: 26vw;
  max-height: 370px;
  max-width: 260px;
}

.s-tile-image{
  height: 17vw;
  width: 24vw;
  max-height: 170px;
  max-width: 240px;
}
.s-tile-sec{
  width: 22vw;
  max-width: 220px;

  padding-right: 4vw;
  
}

.s-tile-title{
  font-size: clamp(20px, 2.3vw, 23px);
}

.s-tile-btn{

  height: auto;
  width: auto;
  padding: 0.5rem;

  font-size: clamp(10px, 1.2vw, 22px);
}

}