/* styling regardless screen dimensions */
  :root{
    --font-color-1: #1F6918;
    --font-color-2: #6D6158;
    --background-color-1: #1F6918;
    --background-color-2: rgba(130,175,126,1); /* popup */
    --background-color-3: rgba(60,110,55,1);  /* banner */
    --background-color-4: #82AF7E; /* button */
    --background-color-5: #E9F0E8; /* poster */
    --background-color-6: rgb(246,246,246); /* offer */
  }

  .main{
    position: relative;
    margin: auto auto;
  }

  /* main styles */
  * {
    box-sizing: border-box;
  }

  .link{
    cursor: pointer;
  }

  a{
    text-decoration: none;
  }

  p{
    margin-top: 12px;
    margin-bottom: 12px;
  }

  html {  
    scroll-behavior: smooth;  
  }

  body {
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px 0px;
  }

  /* banner & menu styles */
  .header {
    background: var(--background-color-3);
    opacity: 1;
    z-index: 1100;
    position:fixed;
    top:0;
  }

  .cl-logo-small{
    background: url("../images/logo-small.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: relative;
    overflow: hidden;
  }

  .menu {
    position: absolute;
    overflow: hidden;
    display: grid;
  }

  .submenu {
    display: grid;
    visibility: hidden;
    overflow: visible;
    height: 0px;
    position: absolute;
  }

  .menu-button {
    color: #fff;
    font-weight: bold;
    font-family: darker grotesque;
    cursor: pointer;
  }

  .menu-button:hover {
    text-decoration: underline;
  }

  #btn-offer {
    display: grid;
    gap: 0px; 
  }

  .hidden {
    display: none;
    visibility: hidden;
  }

  .menu-popup {
    background-color: var(--background-color-2);
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    border-radius: 0.5vw;
    padding-left: 0.5vw;
  }

  .submenu-item{
    text-align: left;
    color: #fff;
    text-decoration: none;
  }

  .submenu-item:hover{
    font-weight:bold;
    font-stretch:extra-expanded;
  }

  .icons {
    position: absolute;
    overflow: hidden;
    display: grid;
  }

  .icon-fb {
    background: url("../images/icon-fb.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
  }

  .icon-insta {
    background: url("../images/icon-insta.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
  }

  .icon-tikt {
    background: url("../images/icon-tikt.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
  }

  /* image slideshow styles */
  .image-slideshow {
    opacity: 1;
    position: relative;
    margin: auto auto;
    z-index: 90;
  }

  .slides {
    display: none;
  }

  .active {
    background-color: #fff;
  }

  .fade {
    animation-name: fade;
    animation-duration: 2s;
  }

  @keyframes fade {
    from {opacity: .8} 
    to {opacity: 1}
  }

  /* sections & blocks */
  .section{
    opacity: 1;
    position: relative;
    margin: auto auto;
    z-index: 90;
    font-family: darker grotesque;
    color: var(--font-color-2);
  }

  #section-1{
    display: grid;
    gap: 0px;
    background-image: url("../images/background-gray.png");
    background-repeat: no-repeat;
  }

  #section-2{
    overflow: hidden;
  }

  #section-3{
    overflow: hidden;
    text-align: left;
  }

  .block{
    position: relative;
    height: 100%;
    display: block;
  }

  #block-11{
    display: grid;
    gap: 0px;
  }

  #block-211{
    margin: 0 0;
    padding: 0 0;
  }

  #block-212{
    display: grid;
    position: relative;
    margin-left: 0px;
  }

  #block-31{
    text-align: left;
  }

  #block-32{
    margin-top: 0px;
  }

  .poster{
    position: relative;
    display: block;
    background-color: var(--background-color-5);
    color: var(--font-color-2);
    display: grid;
    gap: 0px;
    z-index: 90;
    font-family: darker grotesque;
  }

  .poster-image{
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 100%;
    z-index: 100;
    color: black;
  }

  .poster-title{
    text-align: center;
    font-weight: bold;
  }

  .poster-text{
    text-align: center;
  }

  .poster-link{
    text-align: center;
    color: var(--font-color-2);
    text-decoration: underline;
    font-weight: bold;
  }

  .poster-link:hover{
    color: var(--background-color-1);
  }

  #p-img-1{
    background-image: url("../images/p-img-1.png");;
  }

  #p-img-2{
    background-image: url("../images/p-img-2.png");
  }

  #p-img-3{
    background-image: url("../images/p-img-3.png");
  }

  #text-11{
    height: 100%;
  }

  #image-logo{
    position: relative;
    background-image: url("../images/logo-big.png");
    background-repeat: no-repeat;
  }

  .btn-callus{
    display: block;
    background-color: var(--background-color-4);
    color: white;
    text-align: center; 
    text-decoration: none;
    font-family: yeseva one;
    cursor: pointer;
  }

  .btn-callus:hover{
    background-color: var(--background-color-1);
  }

  .block-header{
    position: relative;
    width: 100%;
    color: var(--font-color-1);
    font-family: yeseva one;
    text-align: center;
  }

  .block-body{
    position: relative;
    color: var(--font-color-2);
    font-family: darker grotesque;
    text-align:justify;
  }

  .p-footer{
    text-align: center;
  }

  #footer{
    position: relative;
    background-color: var(--background-color-4);
    color: #fff;
    padding: auto auto;
    font-weight: initial;
    font-family: darker grotesque;
  }

  .footer-text{
    position: relative;
    height: 100%;
    display: grid;
    gap: 0;
  }
  .owner{
    margin: auto auto;
  }

  .designer{
    position: relative;
    margin: auto auto;
    text-align: center;
  }

  /* photos */
  .frame-photos{
    position: relative;
  }

  .photo{
    position: relative;
    display: inline-table;
    box-shadow: 0px 0px 0px rgb(200, 200, 200);
  }

  .ph1{
    z-index: 80;
    transform: rotate(-1.19deg);
    background-image: url("../images/photo-1.png");
  }

  .ph2{
    z-index: 70;
    transform: rotate(9.43deg);
    background-image: url("../images/photo-2.png");
  }

  .ph3{
    z-index: 80;
    transform: rotate(-11.09deg);
    background-image: url("../images/photo-3.png");
  }

  .ph4{
    z-index: 90;
    transform: rotate(5.23deg);
    background-image: url("../images/photo-4.png");
  }

  /* Image banners */
  .banner-image{
    position: relative;
    left:0;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .bi-1{
    background-image: url("../images/banner-1a.png");
  }

  .bi-2{
    background-image: url("../images/banner-2a.png");
    margin-top: 0px;
  }

  /* contact */
  .contact{
    display: grid;
    gap: 0;
  }

  .con-img{
    background-position: 0 0;
    background-repeat: no-repeat;
  }

  .con-txt{
    color: var(--font-color-2);
    font-family: darker grotesque;
    text-decoration: none;
    width: 100%;
  }

  #con-img-1{
    background-image: url("../images/icon-phone.png");
  }

  #con-img-2{
    background-image: url("../images/icon-mail.png");
  }

  #con-img-3{
    background-image: url("../images/icon-loc.png");
  }

  /* map */
  .map{
      border: 0;
  }

  /* subpage offer */
  .empty-block{
    position: relative;
    background-color: var(--background-color-6);
  }

  .of-section{
    position: relative;
    display: grid;
    color: var(--font-color-2);
    font-family: darker grotesque;
    gap: 0px;
    font-weight: 500;
  }

  .os-1{
    background-color: var(--background-color-6);
    box-shadow: 0px 5px 5px rgb(235, 235, 235);
  }

  .os-2{
  z-index: 800;
  }

  .os-3{
    background-color: var(--background-color-6);
    box-shadow: 0px -5px 5px rgb(235, 235, 235);
    z-index: 1000;
  }

  .of-section-title{
    text-align: center;
    display: grid;
    color: var(--font-color-1);
    gap: 0px;
    font-family: yeseva one;
  }

  .of-section-body{
    margin: 0 0;
    padding: 0 0;
    height: 100%;
  }

  .hline{
    margin: auto auto;
    border: 1px solid var(--font-color-1);
  }

  .of-section-table{
    display: grid;
    overflow: hidden;
    text-align:justify;
    padding: 0 0;
    margin-top: 0px;
  }

  .of-caption{
    font-weight: 700;
    margin: 0 0;
    padding: 0 0;
  }

  .checklist{
    list-style: inside url("../images/checkmark.png");
    padding: 0px;
  }

  .dotlist{
    list-style: outside url("../images/dotmark.png");
    margin-left: 0px;
  }

  .of-section-img{
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
  }

  .osi-1{
    background-image: url("../images/camps-img.png");
  }

  .osi-2{
    background-image: url("../images/rides-img.png");
  }

  .osi-3{
    background-image: url("../images/trophies-img.png");
  }

  .of-section-row{
    text-align:justify;
  }

  .ofc-1{
    margin-bottom: 0px;
    padding: 0 0;
  }

  .pdf-link{
    background-repeat: no-repeat;
    background-image: url("../images/icon-pdf.png");
    float: right;
  }

  .ofc-22{
    float: left;
  }

  .price{
    display: grid;
    gap: 0px;
    text-align: left;
    margin: 0 0;
    padding: 0 0;
  }

  .of-price{
    text-align: right;
    font-weight: 700;
  }

  /* obsługa błędów */
  #section-error{
    position: relative;
    height: 660px;
    overflow: hidden;
    margin-top: 100px;
    background-color: var(--background-color-6);
    text-align: center;
    font-weight: 700;
  }
  .error-row{
    width: 100%;
    height: 100%;
    padding-top: 30px;
    background-image: url("../images/logo-big.png");
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--background-color-1);
  }

/* Smartphones and tablets , vertical screen */
@media screen and (device-width < 1000px) {
  .header {
    width: 100vw;
    height: 4vh;
    box-shadow: 0px 4px 50px rgba(0.011119794100522995, 0.07500000298023224, 0.0053125000558793545, 0.10000000149011612);
    z-index: 1100;
    margin: auto 0;
  }

  .cl-logo-small{
    width: 13vw;
    height: 2vh;
    top: 1vh;
    left: 12vw;
    background-size: 100% 100%;
  }

   .menu, .submenu {
    width: 28vw;
    height: 3.4vh;
    top: 1.3vh;
    left: 38vw;
    grid-template-columns: 7vw 8vw 9vw;
    gap: 2vw;
    font-size: 2vi;
  }

  .submenu{
    top: 3vh;
    font-size: 1.5vi;
  }

  .menu-popup{
    width: 8vw;
    min-height: fit-content;
  }

  .menu-arrow {
    width: 0.6vw;
    height: 1.22vh;
  }

  .submenu-item{
    height: 1vh;
  }

  .icons {
    width: 16vw;
    height: 6vw;
    top: 1vh;
    left: 70vw;
    grid-template-columns: 4vw 4vw 4vw;
    gap: 2vw;
  }

  .icons-icon{
    width: 4vw;
    height: 4vw;
  }

  .image-slideshow {
    width: 100vw;
    height: 20vh;
    top: -1vh;
    margin-top: 4vh;
    z-index: 90;
    margin-bottom: -1vh;
  }

  .slide{
    width:100%; 
    height: 20vh;
  }

  .section{
    width: 100vw;
    font-size: 2.4vi;
  }

  #section-1{
    height: 58vh;
    grid-template-rows: 22vh 15vh auto;
    background-position: 0 -9px;
    background-size: 100vw 27vh;
  }

  #section-2{
    height: 18vh;
  }

  #section-3{
    height: 18vh;
  }

  #section-4{
    height: 25vh;
  }

  .block{
    width: 100vw;
  }

  .block-header{
    width: 100%;
    margin-top: 0;
    margin-bottom: 0vh;
    font-size: 2.5vi;
  }

  .block-body{
    width: 72vw;
    font-size: 1.7vi;
    margin-left: 14vw;
  }

  p{
    margin: 0.5vh 0;
  }

  .p-footer{
    text-align: center;
    margin-top: 1.8vh;
    font-size: 2vi;
  }

  #block-11{
    grid-template-columns: 63vw 32vw;
  }

  #block-12{
    height: 3vh;
  }

  #block-13{
    height: 2vh;
  }

  #block-31{
    margin-top: 3vh;
    margin-left: 14vw;
    margin-bottom: 1vh;
  }

  #text-11{
    width: 48vw;
    margin-left: 15vw;
    margin-top: 3vh;
    font-weight: 500;
  }

  #image-logo{
    width: 20vw;
    height: 20vw;
    margin-top: 3vh;
    margin-left: 5vw;
    background-size: 20vw 20vw;
  }

  .btn-callus{
    width: 24vw;
    height: 2vh;
    border-radius: 0.5vh;
    margin-top: 1vh;
    padding: 0.5vh;
    font-size: 1.5vi;
  }

  .frame-photos{
    width: 94vw;
    height: 13.5vh;
    margin-left: 4vw;
    margin-top: -2.5vh;
  }

  .photo{
    width: 22vw;
    height: 12vh;
    background-size: 25vw 12vh;
    background-position: -2.8vw 0;
  }

  .ph1{
    left: 10vw;
    top: 0vh;
  }

  .ph2{
    top: 1.5vh;
    left: 5.5vw;
  }

  .ph3{
    top: 0vh;
    left: 0vw;
  }
  
  .ph4{
    top: 0vh;
    left: -5vw;
  }

  .banner-image{
    width: 100vw;
    height: 10.2vh;
    margin-bottom: 3.5vh;
    background-size: 100vw 10.2vh;
  }

  .bi-1{   
    margin-top: -2vh; 
  }

  .bi-2{
    margin-top: 0;
  }

  #block-212{
    height: 14vh;
    width: 72vw;
    grid-template-columns: 19vw 19vw 19vw;
    gap: 7.5vw;
    margin-left: 14vw;
  }

  .poster{
    width: 19vw; 
    height: 10vh;
    border-radius: 1vw;
    grid-template-rows: 31% 15% 35% 19%;
    font-size: 1.5vi;
    margin-top: 2vh;
  }

  .poster-image{
    height: 3.1vh;
    background-size: 5vw auto;
    margin-left: 0vw;
  }

  .poster-title{
    font-size: 1.5vw;
    letter-spacing: 0.3vw;
  }

  .poster-text{
    font-size: 1.3vw;
    width: 15vw;
    margin-left: 2vw;
  }

  .poster-link{
    font-size: 1.4vi;
  }

  #p-img-2{
    background-size: 3.8vw auto;
  }

  #p-img-3{
    background-size: 3.8vw 3.8vw;
  }

  #p-tit-2{
    width: 13vw;
    margin-left: 3vw;
  }

  #btn-contact {
    width: 3.65vw;
    height: 3.4vh;
  }

  .contact{
    margin-top: 0.5vh;
    display: grid;
    height: 2vh;
    padding-top: 0.4vh;
    grid-template-columns: 4vw auto;
    font-size: 2.2vi;
    gap: 0;
  }
  
  #con-img-1{
    margin-top: 0.2vh;
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  #con-img-2{
    margin-top: 0.2vh;
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  #con-img-3{
    margin-top: 0.2vh;
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  .map{
    position: relative;
    height: 25vh;
    width: 100vw;

  }

  #footer{
    height: 3vh;
    width: 100vw;
    font-size: 1.5vi;
  }

  .footer-text{
    width: 100vw;
    grid-template-columns: 10vw 10vw 12vw 14vw 6vw 35vw 13vw;
    gap: 1vw;
  }

  .owner{
    margin-left: 0vw;
  }

  .designer{
    width: 34vw;
  }

  /* offer subpage */
  .empty-block{
    width: 100vw;
    height: 0.5vh;
    margin-top: 4vh;
  }

  .of-section{
    width: 100vw;
    height: 56vh;
    grid-template-rows: 6vh 50vh;
    font-size: 1.9vi;
  }

  .os-2{
    height: 31vh;
    width: 60vw;
    margin-top: 1vh;
  }

  .os-3{
    height: 47vh;
  }

  .of-section-title{
    width: 80vw;
    margin-top: 3vh;
    margin-left: 10vw;
    grid-template-columns: 30vw auto 30vw;
    font-size: 2.5vi;
    height: 1.5vh;
    margin-bottom: 0px;
  }

  .of-section-body{
    width: 80vw;
    margin-left: 10vw;
  }
  
  .hline{
    width: 30vw;
  }

  .of-section-table{
    width: 80vw;
    height: 20.5vh;
    grid-template-columns: 35vw 37vw;
    gap: 8vw;
    margin-bottom: 1vh;
    font-size: 2vi;
  }

  .oft-2{
    grid-template-columns: 36vw 36vw;
    gap: 8vw;
  }

  .of-caption{
    font-weight: 700;
    margin-bottom: 0.5vh;
    font-size:2vi;
  }

  .checklist{
    list-style: none;
    margin-top: 1vh;
    font-size: 2vi;
  }

  .chk{
    margin-top: 0;
  }

  .fa-check{
    margin-right: 0.5vw;
  }

  .fa-circle{
     font-size: 0.25vi;
     margin-right: 0.5vw;
     position: relative;
     top: -0.1vh;
  }

  .dotlist{
    list-style: none;
    padding-left: 1.25vw;
    margin-bottom: 1.5vh;
    font-size: 2vi;
  }

  .of-section-img{
    width: 37vw;
    height: 20.5vh;
  }

  .osi-1{
    background-position: 1vw 0.6vh;
    background-size: 35vw 19.2vh;
  }

  .osi-2{
    width: 36vw;
    height: 28vh;
    background-size: 36vw 28vh; 
  }

  .osi-3{
    background-size: 100% 100%;
    width: 38vw;
    height: auto;
  }

  .of-section-row{
    margin-top: 0vh;
    width: 80vw;
    margin-bottom: 1vh;
    font-size: 1.9vi;
  }

  .ost-2{
    width: 80vw;
    height: 5vh;
    grid-template-columns: 30vw 34.5vw;
    gap: 15.5vw;
  }

  .ost-3{
    width: 80vw;
    height: 20vh;
    grid-template-columns: 38vw 38vw;
    gap: 4vw;
  }

  .ofc-2{
    height: 5vh;
  }

  .ofc-3{
    height: 2.75vh;
    margin-top: 2vh;
  }

  .pdf-link{
    width: 3.12vw;
    height: 6.35vh;
    background-size: 3.12vw auto;
    margin-right: 2vw;
    margin-top: 1.5vh;
  }

  .ofc-22{
    margin-top: 1.59vh;
  }

  .price-list{
    width: 26.93vw;
    margin-top: 2.5vh;
  }

  .price{
    grid-template-columns: 29vw 7vw;
  }

  .of-price{
    width: 7vw;
  }

  .osr-1
  {
    margin-top: 2.5vh;
  }
}

/* Leptops, PC, TV and smartphones with horizontal screen */
@media screen and (device-width > 1000px){
  .header {
    width: 79.4vw;
    height: 10.6vh;
    box-shadow: 0px 4px 50px rgba(0.011119794100522995, 0.07500000298023224, 0.0053125000558793545, 0.10000000149011612);
    z-index: 1100;
    margin: auto 10.3vw;
  }

  .cl-logo-small{
    width: 10vw;
    height: 4.6vh;
    top: 3vh;
    left: 11vw;
    background-size: 10vw 4.6vh;
  }

  .menu, .submenu {
    width: 17.2vw;
    height: 3.4vh;
    top: 3.6vh;
    left: 41.1vw;
    grid-template-columns: 3.8vw 4.5vw 4.9vw;
    gap: 2.5vw;
    font-size: 1vi;
  }

  .submenu{
    top: 7vh;
    font-size: 0.8vi;
  }

  .menu-popup{
    width: 4.8vw;
    height: 11.2vh;
    min-height: fit-content;
  }

  .menu-arrow {
    width: 0.6vw;
    height: 1.22vh;
  }

  .submenu-item{
    height: 3.7vh;
  }

  .image-slideshow {
    width: 79.4vw;
    height: 56.5vh;
    top: -1vh;
    margin-top: 11vh;
    z-index: 90;
    margin-bottom: -1vh;
    margin-left: 10.3vw;
  }

  .slide{
    width:79.4vw; 
    height: 56.5vh;
  }

  .icons {
    width: 7.6vw;
    height: 7.6vw;
    top: 3.5vh;
    left: 60.8vw;
    grid-template-columns: 1.8vw 1.8vw 1.8vw;
    gap: 1.1vw;
    background-size: 7.6vw 7.6vw;
  }

  .icons-icon{
    width: 1.77vw;
    height: 3.6vh;
  }

  .section{
    width: 79.4vw;
    font-size: 1.7vw;
    margin-left: 10.3vw;
  }

  #section-1{
    height: 180vh;
    grid-template-rows: 50.8vh 52.4vh auto;
    background-position: 0 -9px;
    background-size: 79.4vw 76.7vh;
  }

  #section-2{
    height: 81.5vh;
  }

  #section-3{
    height: 62.5vh;
  }

  #section-4{
    height: 38.5vh;
  }

  .block{
    width: 79.4vw;
  }

  .block-header{
    width: 100%;
    margin-top: 8.5vh;
    margin-bottom: 3.2vh;
    font-size: 1.7vw;
  }

  .block-body{
    width: 60.5vw;
    font-size: 1.45vw;
    margin-left: 9.4vw;
  }

  #block-11{
    grid-template-columns: 50vw 29.4vw;
  }

  #block-21{
    height: 61.4vh;
    width: 60.5vw;
    max-height: 61.4vh;
    margin-top: 10vh;
    margin-left: 9vw;
  }
  
  #block-211{
    height: 9.5vh;
    margin: 0 0;
    padding: 0 0;
  }

  #block-212{
    height: 51.9vh;
    width: 60.5vw;
    grid-template-columns: 19vw 19vw 19vw;
    gap: 1.75vw;
  }

  #block-31{
    margin-top: 17.46vh;
    margin-left: 11.20vw;
  }

  #block-32{
    margin-left: 11.20vw;
  }

  #text-11{
    width: 34vw;
    margin-left: 9vw;
    margin-top: 12vh;
    font-weight: 500;
  }

  #image-logo{
    width: 29.3vw;
    background-position: 4.2vw 4.2vw;
    background-size: 17.6vw 17.6vw;
  }

  .btn-callus{
    width: 19.4vw;
    height: 7.9vh;
    border-radius: 2.1vh;
    margin-top: 3.7vh;
    padding: 2.1vh;
    font-size: 1.5vi;
  }

  .frame-photos{
    width: 54.9vw;
    height: 43.4vh;
    margin-left: 12.3vw;
    margin-top: 5.3vh;
  }

  .photo{
    width: 18.4vw;
    height: 37.5vh;
  }

  .ph1{
    left: -1.8vw;
  }

  .ph2{
    top: 5.3vh;
    left: -6.5vw;
    width: 17.6vw;
  }

  .ph3{
    top: -37.6vh;
    left: 24.74vw;
  }
  .ph4{
    top: -34.92vh;
    left: 19.01vw;
  }

  .p-footer{
    text-align: center;
    margin-top: 5.3vh;
    font-size: 1.6vw;
  }

  .banner-image{
    width: 79.4vw;
    height: 33.5vh;
    margin-left: 10.3vw;
    background-size: 79.4vw auto;
  }

  .bi-1{   
    margin-top: 0vh; 
  }

  .bi-2{
    background-position: 0 0;
  }

  .poster{
    width: 19vw; /* 366px; */
    height: 51.9vh; /* 490px; */
    border-radius: 1vw;
    grid-template-rows: 32.65% 14.28% 34.69% 18.37%;
    font-size: 1.33vw;
  }

  .poster-image{
    height: 16.9vh;
    background-size: 5vw auto;
    margin-left: 0vw;
  }

  .poster-title{
    font-size: 1.5vw;
    letter-spacing: 0.3vw;
  }

  .poster-text{
    font-size: 1.3vw;
    width: 15vw;
    margin-left: 2vw;
  }

  .poster-link{
    font-size: 1.4vw;
  }

  #p-img-2{
    background-size: 3.8vw auto;
  }

  #p-img-3{
    background-size: 3.8vw 3.8vw;
  }

  #p-tit-2{
    width: 13vw;
    margin-left: 3vw;
  }

  #btn-about {
    width: 3.65vw;
    height: 3.4vh;
  }

  #btn-offer {
    width: 4.9vw;
    height: 3.4vh;
  }

  #btn-contact {
    width: 3.65vw;
    height: 3.4vh;
  }

  .contact{
    display: grid;
    height: 8vh;
    grid-template-columns: 3.91vw 15.62vw;
    gap: 0;
  }
  
  #con-img-1{
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  #con-img-2{
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  #con-img-3{
    background-size: 2vi 2vi;
    background-position:  0 0;
  }

  .map{
    position: relative;
    height: 38.5vh;
    width: 79.4vw;
  }

  #footer{
    height: 8vh;
    width: 79.4vw;
    margin-left: 10.3vw;
    font-size: 1.05vi;
  }

  .footer-text{
    width: 79.4vw;
    grid-template-columns: 10.1vw 6.25vw 8.07vw 9vw 10.68vw 24.22vw 10.1vw;
  }

  .owner{
    margin-left: 1vw;
  }

  .designer{
    width: 24.22vw;
  }

  /* offer subpage */
   .empty-block{
    width: 79.4vw;
    height: 1.06vh;
    margin-top: 10.6vh;
    margin-left: 10.3vw;
  }

  .of-section{
    width: 79.4vw;
    margin-left: 10.3vw;
    height: 168.3vh;
    grid-template-rows: 23.28vh 144.99vh;
    padding-left: 9.7vw;
    font-size: 1.45vi;
  }

  .os-2{
    height: 91vh;
    width: 60vw;
  }

  .os-3{
    height: 148.16vh;
  }

  .of-section-title{
    width: 60vw;
    margin-top: 12.2vh;
    grid-template-columns: 25vw 10vw 25vw;
    font-size: 1.65vi;
    height: 5.08vh;
    margin-bottom: 0px;
    gap: 0;
  }

  .of-section-body{
    width: 60vw;
  }

  .hline{
    width: 50.5vh;
  }

  .of-section-table{
    width: 60vw;
    height: 60.3vh;
    grid-template-columns: 27vw 28vw;
    gap: 5vw;
  }

  .oft-2{
    width: 60vw;
    grid-template-columns: 25vw 27vw;
    gap: 8vw;
  }

  .of-caption{
    font-weight: 700;
    margin-bottom: 1.59vh;
  }

  .checklist{
    margin-top: 1.59vh;
  }

  .dotlist{
    margin-top: 3.18vh;
    padding-left: 1.25vw;
    margin-bottom: 4.23vh;
  }

  .of-section-img{
    width: 28.125vw;
    height: 57.15vh;
    margin-top: 1.59vh
  }

  .osi-1{
    background-size: 27.08vw 55.03vh;
  }

  .osi-2{
    width: 26.93vw;
    height: 54.71wh;
  }

  .osi-3{
    background-size: 100% 100%;
    width: 26.93vw;
    height: 54.71wh;
  }

  .of-section-row{
    margin-top: 3.18vh;
    width: 60vw;
  }

  .ost-2{
    width: 60vw;
    height: 60.32vh;
    grid-template-columns: 21.35vw 25.52vw;
    gap: 13.13vw;
  }

  .ost-3{
    width: 60vw;
    height: 54.71vh;
    grid-template-columns: 27.76vw 26.93vw;
    gap: 5.31vw;
  }

  .ofc-2{
    height: 9.52vh;
  }

  .ofc-3{
    height: 9.52vh;
    margin-top: 4.23vh;
  }

  .pdf-link{
    width: 3.12vw;
    height: 6.35vh;
    background-size: 3.12vw auto;
    margin-right: 0.78vw;
    margin-top: 0.53vh;
  }

  .ofc-22{
    margin-top: 1.59vh;
  }

  .price-list{
    width: 26.93vw;
    margin-top: 4.23vh;
  }

  .price{
    grid-template-columns: 23vw 3.9vw;
  }

  .of-price{
    width: 3.9vw;
  }

  .osr-1
  {
    margin-top: 4.23vh;
  }

  .checklist{
    list-style: none;
  }

  .dotlist{
    list-style: none;
  }

  .fa-check{
    margin-right: 0.5vw;
  }

  .fa-circle{
     font-size: 0.25vi;
     margin-right: 0.5vw;
     position: relative;
     top: -0.4vh;
  }

}