/* STYLES 07 - FINISH */
/* -----------------------------
   ROOT VARIABLES
----------------------------- */

:root{
    /*--header-height:180px;*/
    --header-height:12rem;
    /*--header-height-medium:120px;*/
    --header-height-medium:8rem;
    /*--header-height-small:60px;*/
    --header-height-small:4rem;
    --footer-height:4rem;
    /*--footer-height-small:40px;*/
    --footer-height-small:2rem;

    /*--color-bg:#f5f7fb; grey */
    --color-bgw:#f1f5f9; /* white */
    --color-bg:#fffdcc;
    /*--color-body:#add8e6;*/ /* blue gjg */
    /*--color-body:#7ca2a5;*/ /* picked from banner greeny #7ca2a5 */
    /*--color-body:#afc8cd;*/ /* picked from banner mist grey #afc8cd */
    --color-body:#9ac8cd; /* picked from banner mist near path #789ba0 */
    /*--color-body:#add;*/ /* #add #9dd #9cc #acc*/
    /* other tries #739899 grey green #739899 green #8ab8bd ->> lgreen #9ac8cd grey #aae8ed light green*/
    /*--color-body:#fffa8b;*/ /* lemonade #92e5e7,#92ff99,#fffdcc,#fffa8b,#e7e154 lemonade color palette from www.color-hex.com */
    /*--color-header:#1e293b; or #35424a; */
    --color-header:rgba(20,20,30,0.8);
    --color-text:#000; /* black or 111 or 222 */
    --color-footer:#fff; /* white */
    --color-navy: #003366; /* dark blue #000035,#000042,#000053,#000068,#1c1c84 navy color palette from www.color-hex.com */
    --color-moto: #0a5c32; /* 0a5c32 green color - used for moto */
    --color-quote: darkcyan; /* used for quote */

    --transition:0.35s ease;
}

/* -----------------------------
   RESET
----------------------------- */
*,
*::before,
*::after{
    box-sizing:border-box;
    /*box-sizing:content-box;*/
}

/* ************************* */
/* Screen general */
body{
    height:95vh;
    display:flex;
    flex-direction:column;
    /*background: var(--color-body);*/
    background-image: url('bg.png');
    background-size: contain; /* cover contain */
    font-family:Arial, Helvetica, sans-serif;
    font-size: large;
}

p {line-height:1.5;}

h1{font-size: 2.2rem;}
h2{font-size: 1.6rem;} /*1.5 padding-left: 2rem;*/
h3{font-size: 1.4rem;}
h4{font-size: 1.2rem;}

/*table {}*/
th, td {padding-left: 2rem;}

/*ul {}*/

ul li {line-height:2;}

/* Menu */
nav{
    /*flex-direction: row;*/
    justify-self:left;
    padding-left:5rem;
    padding-right:0rem;
}

nav ul{
    display:flex;
    gap:2rem;
    white-space: nowrap;
    list-style:none;
    /*justify-content: center;*/
    /*flex-wrap: wrap;*/
}

nav a{
    text-decoration:none;
    color:var(--color-text);
    font-weight:bold;
}

/* HEADER */
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--header-height);
    background-image: url('banner.png');
    background-size: cover;
    color:var(--color-text);
    display:flex;
    align-items:center;
    justify-content:center;
    padding-bottom:1rem;
    padding-left:4rem;
    transition:all .3s ease;
    z-index:1000;
}

/* Header inner layout */
.header-inner{
    width:100%;
    max-width:1800px;
    display:grid;
    grid-template-columns:auto auto;
    /*grid-template-rows: 100px;*/
    align-items:center;
    justify-content:left;
}

/* Main logos */
.logo-left{
    height:60%;
    justify-self:left;
    padding-left:0px;
}

.img-logo{
    height:8rem;
    width:auto;
}

/* header upper right motto*/
.motto{
    color:var(--color-moto);
}

/* FOOTER */
footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:var(--footer-height);
    background-image: url('banner2.png');
    background-size: cover;
    color:var(--color-footer);
    display:flex;
    align-items:flex-end; /* vertical bottom */
    /*align-items:center;*/ /* vertical center */
    justify-content:center;
}

/* MAIN SCROLL AREA */
main{
    position:fixed;
    top:var(--header-height);;
    bottom:var(--footer-height);
    left:10rem;
    right:10rem;
    border-radius:2rem;
    overflow-y:auto;
    background:var(--color-bgw);
    margin:1rem;
    padding:2rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.memo {
  font-size:90%;
  max-width: 84rem;
  align-content: space-around;
  align-self: center;
}

/* table in home, services */
.tbl {
  width:72rem;
  padding-left: 0rem;
}

/* table in prices */
.tbl-price {
  width:36rem;
  padding-left: 0rem;
}

/* icons in tables */
.img-ico{
   height:4rem;
   width:auto;
   /*width:50%;height:auto;*/
}

/* bottom motto in home */
.quote{
    color:var(--color-quote);
    padding-top:1rem;
    font-weight: bold;
    line-height:2;
}

/* div foto a img foto in about */
#foto{
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
    /*height:450px;*/
}

.img-foto{
    width:100%;
    height:auto;
}

/* logo in about */
.logo-cap{
    justify-self:end;
    padding-right:0.5rem;
}

/* -----------------------------
   TABLET
----------------------------- */
/* Responsive (tablet) */
@media (max-width: 1600px) and (min-width: 601px) {
/* Tablet general */
  h1{font-size: 1.8rem;}
  h2{font-size: 1.4rem;}
  h3{font-size: 1.2rem;}
  h4{font-size: 1.1rem;}
  th, td {padding-left: 1rem;}

/* Tablet header */
  header{
      height:var(--header-height-medium);
      padding-left:1rem;
      padding-bottom:0.5rem;
  }

  .header-inner{
      grid-template-rows: 4rem;
  }

  .logo-left{
      height:60%;
  }

  .img-logo{
      height:6rem;
      width:auto;
  }

  .motto{
      font-size: 1.1rem;
      padding-top: 1rem;
  }

/* Tablet main */
  main{
      top:var(--header-height-medium);
      left:0rem;
      right:0rem;
      border-radius:1rem;
      margin:1rem;
      padding:1rem;
  }

  .tbl {
    width:48rem;
    padding-left: 0rem;
  }

  .tbl-price {
    width:32rem;
    padding-left: 0rem;
  }

} /* tablet end */

/* -----------------------------
   MOBILE
----------------------------- */
/* Responsive (mobile) */
@media (max-width: 800px) {
/* Mobile general */
  body{
    font-size: medium;
    background: var(--color-body);
  }

  h1{font-size: 1.8rem;}
  h2{font-size: 1.4rem;}
  h3{font-size: 1.2rem;}
  h4{font-size: 1.1rem;}
  th, td {padding-left: 0.1rem;}

/* Mobile menu */
  nav {
    padding-left:0rem;
  }

  nav ul{
      display:flex;
      flex-direction: row;
      gap:1rem;
      white-space: nowrap;
      list-style:none;
  }

/* Mobile header */
  header{
      height:var(--header-height-small);
      padding-bottom:0rem;
      padding-left:0rem;
  }

  .header-inner{
      grid-template-columns:1fr;
  }

  .motto{
      display:none;
  }

  .logo-left{
      display:none;
  }

/* Mobile footer */
  footer{
    height:var(--footer-height-small);
    font-size: 0.85rem;
    align-items:center; /* vertical center */
  }

/* Mobile main */
  main{
      top:var(--header-height-small);
      bottom:var(--footer-height-small);
      left:0rem;
      right:0rem;
      border-radius:1rem;
      margin:0.5rem;
      padding:1rem;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .tbl {
    width:24rem;
    padding-left: 0rem;
  }

  .tbl-price {
    width:24rem;
    padding-left: 0rem;
  }

} /* mobile end */