@import url("colors.css");

:root{
    --logo-color2-blue:#1C8DCF;
    --logo-color1-blue:#173868;
    --logo-color1-orange:rgb(134, 86, 39);
    --logo-color2-orange:#d39558;
 }

.page{
    max-width: 800px;
    margin: 10px auto;
    margin-top:550px;
    padding: 5px;
    position:relative;
}
/* Style for screens with a max-width of 600px */
@media (max-width: 600px) {
    .page {
        margin-top:350px;
    }
    #title{
        font-size: 3rem;
    }
  }
  /* Style for screens with a min-width of 601px and a max-width of 900px */
  @media (min-width: 601px) and (max-width: 900px) {
    .page {
        margin-top:420px;
    }
    #title{
        font-size: 3rem;
    }
  }
  /* Style for screens with a min-width of 901px */
  @media (min-width: 901px) and (max-width: 1100px) {
    .page {
        margin-top:450px;
    }
  }
.head{
    position: relative;
}
.sevices-head{
    position:sticky;
    top: 70px;
    z-index: 2;
    /* background-color: rgb(130, 130, 255); */
    background-color: var(--logo-color2-blue);
    width: 100%;
    /* min-height: 80px; */
}
.head-img{
    position:absolute;
    top:0;
    z-index: 3;
    max-height:500px;
    object-fit: contain;
}
h1#title{
    display: block;
    position:absolute;
    font-size: 5rem;
    color:var(--logo-color2-blue);
    z-index: 5;
    left:50%;
    transform: translateX(-50%);
    text-shadow: 0 0 10px 10px #fff;
}

h1, h2{
    color:white;
    /* color:var(--logo-color2-orange); */
    font-style: sans-serif;
    padding: 5px;
    font-weight:900;
}
h1{
    margin: 0px auto;
    /* text-align: center; */
    font-size: 2rem;
    z-index: 2;
}
@media (max-width: 767px){
    h1, h2{
        margin: 14px auto;
        font-size: 2.2rem;
        z-index: 2;
    }
    .caption{
        font-size: 1.5rem;
    }
}
@media (max-width: 412px){
    h1{
        margin: 14px auto;
        font-size: 1.8rem;
        z-index: 2;
    }
    .caption{
        font-size: 1.3rem;
    }
    .page > p {
        font-size: 1rem;
    }
}

.caption{
    /* position:sticky;
    top:calc(120px + 3rem ); */
    font-size: 1.8rem;
    font-weight:500;
    color:#fff;
    background-color:var(--logo-color2-orange);
    box-shadow: 0 0 5px 3px var(--logo-color1-orange);
    border: 2px solid var(--logo-color1-orange);
    border-radius: 9px;
    padding:.4rem;
    position:sticky;
    top:122px;
}
section.content{
    border-left: 5px solid var(--logo-color2-orange);
    padding:25px;
    padding-top:50px;
    margin-bottom: 100px;
}
.sub-caption{
    color:var(--logo-color2-blue);
    font-size: 1.2rem;
    font-weight:500;
}
.page > p {
    font-size: 1.2rem;
}
.pointers, .info{
    font-size: 1.2rem;
    /* color:var(--logo-color1-blue); */
}
.info{
    font-style: oblique;
}