/* styles.css */
 :root{
    --primary-color:#f17836;
    --primary-color-hover:#b75c2c;
    --cta-light:#625a55;
    --cta-dark:#f17836;
}
html, body{
    font-family:Arial;
    margin:0;
    padding:0;
}
*,::before,::after{
    box-sizing:border-box;
}
a, a:visited, a:active, a:hover{
    color:inherit;
    outline:none;
    text-decoration:none;
}
img{
    max-width:100%;
}
ul{
    margin:24px 0;
}
li{
    padding:5px 0;
}
p{
    margin:0 0 16px;
    line-height:1.4;
}
h2{
    font-size:20px;
    margin:25px 0 5px;
}
ul{
    margin:24px 0;
}
li{
    padding:5px 0;
}
.text-right{
    text-align:right;
}
.text-center{
    text-align:center;
}
.center-content{
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:center;
}
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    font-size:20px;
}
header{
    text-align:center;
    box-shadow:1px 6px 5px #999999;
    margin-bottom:15px;
}
header a{
    display:inline-block;
}
header img{
    max-height:100px;
    padding:16px 0;
    max-width:90%;
}
[data-pagetype="article"] header > div{
    max-width:95%;
    width:790px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
[data-pagetype="article"] header a{
    text-align:left;
    color:var(--primary-color);
    font-weight:bold;
}
@media screen and (max-width:600px){
    [data-pagetype="article"] header{
        font-size:75%;
    }
}
footer{
    background-color:#000000;
    color:#FFFFFF;
    font-size:0.8em;
    margin-top:16px;
    padding:16px;
    text-align:center;
}
main{
    flex:1;
    line-height:1.3;
    margin:0 auto;
    max-width:90%;
    width:1140px;
}
header + .fullwidth-bg:has(+ footer){
    flex:1;
}
h2:has(+ .icons){
    text-align:center;
    font-size:27px;
    color:var(--primary-color);
}
.article h2{
    font-size:25px;
}
.article{
    width:790px;
    margin:0 auto;
    max-width:90%;
}
.article::after{
    content:'';
    clear:both;
    display:block;
}
.article h1{
    color:#000;
    font-size:50px;
    line-height:1.1;
    margin:10px 0;
    font-family:"Segoe UI", "Segoe WP", Arial, sans-serif;
}
@media screen and (max-width:700px){
    .article h1{
        font-size:33px;
    }
}
.article p a{
    color:var(--primary-color);
    font-weight:bold;
}
.article p img{
    display:block;
    margin:0 auto;
}
.author{
    font-size:12px;
    color:#666666;
}
.cta-light, .cta-dark, .cta-primary{
    font-size:22px;
    font-weight:bold;
    line-height:25px;
    margin-bottom:12px;
    padding:10px 15px;
    text-align:center;
}
.cta-dark p:last-child, .cta-primary p:last-child{
    margin-bottom:0;
}
.cta-light{
    background:var(--cta-light);
    color:var(--cta-dark);
}
.cta-dark{
    background:var(--cta-dark);
    color:#FFFFFF;
}
.cta-primary{
    color:var(--primary-color);
    font-size:24px;
    font-weight:800;
    margin:24px 0;
    text-align:center;
}
.cta-button{
    background:var(--primary-color);
    border-radius:12px;
    border:none;
    box-shadow:0 6px 0 0 var(--primary-color-hover);
    color:#fff !important;
    cursor:pointer;
    display:block;
    font-size:120%;
    font-weight:bold;
    margin-bottom:16px;
    padding:16px 24px;
    text-align:center;
    transition:all 0.3s ease;
}
.cta-button:hover{
    box-shadow:0 0 0 0 var(--primary-color-hover);
    transform:translateY(6px);
}
body{
    counter-reset:steps;
    --step-size:33px;
}
/* styles.default.css */
/* site.css */
 :root{
    --primary-color:#ff914d;
    --primary-color-hover:#cd6320;
    --cta-light:#BBDFEB;
    --cta-dark:#257089;
}
 .dynamic-modal-trigger {
     cursor: pointer;
}
 .dynamic-modal-trigger:hover {
     color: var(--primary-color);
}
 #dynamic-modal {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     height: 100vh;
     background-color: rgba(255, 255, 255, 0.5);
     opacity: 0;
     display: none;
     visibility: hidden;
     transition: all 0.4s ease;
     z-index: 9;
}
 #dynamic-modal .container {
     background-color: #fff;
     border-radius: 30px;
     border: solid 2px var(--primary-color);
     box-shadow: 0 0 10px var(--primary-color);
     left: 50%;
     max-width: 90%;
     opacity: 1;
     overflow: hidden;
     position: absolute;
     top: 25px;
     transform: translateX(-50%);
     transition: all 0.4s ease;
     visibility: visible;
     width: 900px;
}
 #dynamic-modal .container .content {
     overflow: auto;
     padding: 20px;
     max-height: calc(100vh - 50px);
}
 .close-dynamic-modal {
     background: var(--primary-color);
     border-radius: 50%;
     border: solid 2px white;
     box-shadow: 0 0 4px black;
     color: white;
     cursor: pointer;
     height: 40px;
     padding-top: 3px;
     position: absolute;
     right: 8px;
     text-align: center;
     top: 8px;
     width: 40px;
     z-index: 9;
}


.content {
  width: 100%;
  max-width: 873px;
  margin: 20px auto;
  border: 2px solid #f17836;
  box-shadow: 0 0 10px #b75c2cba;
  border-radius: 20px;
  }

  .contact_box { position: fixed; top: 25%; background: #fff; width: 100%;
   padding: 12px 12px; }



.contact_box{
	display: none;
}


.for_height{
  height: 100vh;
  overflow-y: scroll;
}

#contact_box2,#contact_box3 {
  top: 0%;
}