@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Basic&display=swap');
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
h1{
  margin:0;
}

::-webkit-scrollbar
{
  display: none;
}

#wizytowka{
  max-width: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

#kontakt-title{
  margin:40px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size:30px;
}

#wizytowka-container{
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left:10px;

  position: relative;
}

#phone-number{
  position:absolute;
  top: 49%;
  left:11%;
}

.phone-number.cover{
  position: absolute;
  top: 46%;
  left: 6%;
  width: 25%;
  height: 11%;
}

.mail.cover{
  position: absolute;
  top: 58%;
  left: 6%;
  width: 44%;
  height: 11%;
}

.fb-link.cover{
  position: absolute;
  top: 69%;
  left: 6%;
  width: 44%;
  height: 11%;
}

.cover:hover{
  cursor:pointer;
}

.cover .tooltip {
  visibility: hidden;
  width: 100%;
  font-size: 0.9em;
  font-family: Inter, sans-serif;
  font-weight: 500;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  background-color: #61C6C8;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.cover .tooltip::after{
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #61C6C8 transparent transparent transparent;

}

.cover:hover .tooltip{
  visibility: visible;
}

#wizytowka-info{
  color:#747474;
  max-width: fit-content;
  margin-inline: auto;
  font-size: 1.2em;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.cennik-title{
  margin-top: 30px;
  max-width: fit-content;
  margin-inline: auto;
  font-size: 35px;
  font-family: Inter, sans-serif;
  font-weight: 800;
}

.grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
  max-width: fit-content;
  margin-inline: auto;
}

.oferta{
  margin:34px;
  width: 363px;
  height: 523px;
  border-radius: 10px;
  background-color: #F4F6EE;
  border: 1px solid rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  position:relative;
  filter: drop-shadow(5px 6px 7px rgba(0,0,0,0.2));
}

.oferta-title{
  margin-top:20px;
  font-family: Basic, sans-serif;
  font-size:24px;
}

.oferta-pakiet{
  position: absolute;
  top:44px;
  font-size:20px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  color: rgba(0,0,0,0.6);
}

.oferta-zasieg{
  position: absolute;
  top:70px;
  font-size:24px;
  font-family: Basic, sans-serif;
}

.oferta-zasieg.high{
  top:50px;
  color: rgba(0,0,0,0.6);
}

.oferta-cena{
  position: absolute;
  top:230px;
  font-size:36px;
  font-family: Inter, sans-serif;
  font-weight: 800;
}

.sale-info{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size:28px;
  font-family: Inter, sans-serif;
  font-weight: 800;
  text-align: center;
  color:#F4F6EE;
}

.sale-info-container{
  position: absolute;
  left:0px;
  top:120px;
  height: 50px;
  width: 90px;
  background-color: #61C6C8;
  border-radius: 0px 5px 5px 0px;
}

.cena-old{
  font-size: 29px;
  top: 200px;
  color: #747474;
  text-decoration: line-through;
}

.oferta-cena.big{
  font-size:30px;
}

.rynek-cena{
  position: absolute;
  top:270px;
  font-size:20px;
  font-family: Inter, sans-serif;
  font-weight: 500;
}

.zadzwon-cennik{
  position: absolute;
  top: 440px;
}

.zadzwon{
  width: 221px;
  height: 54px;
  background-color: #61C6C8;
  font-size: 24px;
  font-family: Basic, sans-serif;
  color:#fff;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.2);
}

.zadzwon.niedostepne{
  background-color: #D3D7D7;
}

.zadzwon.zadzwon.niedostepne:hover{
  cursor:context-menu;
  background-color: #D3D7D7;
}

.zadzwon:hover{
  cursor: pointer;
  background-color: #65ced0;
}

.disclaimer{
  font-family: Basic, sans-serif;
  font-size:28px;
  color:#515151;
  max-width: fit-content;
  margin:auto;
  padding:10px;
  margin-top:-20px;
}

.placeholder{
  max-width: fit-content;
  margin:auto;
  height: 100px;
}

.ad-container{
  position: relative;
  display:flex;
  justify-content: space-between;
  margin-top: 60px;
  margin-left: 100px;
}

.kostka-title{
  font-family: Inter, sans-serif;
  font-size:36px;
  font-weight: 900;
  margin-top: 10px;;
}

.flota-title{
  font-size:30px;
}

.text-ad-container{
  margin-right: 20px;
}

.kostka-desc1{
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color:#272727;
}

.flota-desc{
  font-size:20px;
}

.kostka-desc2{
  font-family: Basic, sans-serif;
  font-size: 20px;
  margin-top: 20px;
}

.ad-button-container{
  margin-top: 30px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ad-img-container{
  max-width: 700px;
  width: 50%;
  float:right;
  margin-left: 4%;
  margin-right: 4%;
}

.ad-img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 1000px){
  .ad-container{
    display: block;
    margin:10px;
  }

  .ad-img-container{
    max-width: 98%;
    float:none;
    margin-top: 20px;
    margin-left: auto; 
    margin-right: auto; 
  }
}

#efekty-container{
  margin-top:50px;
  max-width: 100%;
  width: auto;
  background-color: #61C6C8;
  padding: 20px;
}

#efekty-container2{
  max-width: fit-content;
  margin: auto;
}

.efekty-text{
  max-width: fit-content;
  margin: auto;
  font-family: Basic, sans-serif;
  color: #fff;
  font-size: 36px;
}

.efekty-bottom{
  font-size: 24px;
}

.efekty-foty-container{
  max-width: fit-content;
  margin: auto;
  display: flex;
  margin:0px;
}

.fota-container{
  max-width: fit-content;
  margin: auto;
  display: flex;
  flex-direction: column;
  margin: 2%;
}

.fota-container-title{
  max-width: fit-content;
  margin: auto;
  font-family: Basic, sans-serif;
  color: #fff;
  font-size: 20px;
}

.efekty-fota{
  max-width: fit-content;
  margin: auto;
  border-radius: 10px;
  margin-top:10px;
}

#myjemy-kostke{
  max-width: fit-content;
  margin:auto;
  font-family: Basic, sans-serif;
  font-size:36px;
  margin-top: 10px;
}

.kostka2-title{
  font-family: Basic, sans-serif;
  font-size: 32px;
}

.ad2{
  justify-content: left;
}

.list-item{
  display:list-item;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
  padding-right: 60px;
}

.list-title{
  font-weight: 700;
}

.banner{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:1%;
  width: 60%;
  border-radius: 15px;
  border: 1px solid rgba(0,0,0,0.2);
  filter: drop-shadow(5px 6px 7px rgba(0,0,0,0.2));
}

.banner-button{
  margin-top:15px;
}