/* ######################################
   --- STYLING coming son page ---
######################################### */
:root {
    /* color names from coolors.co */
    --site-primary-background-color: #324670;        /* SIMAARUS brand color */ 
    --site-secondary-background-color: #a6cfe8;       /* SIMAARUS brand color */ 
    --site-tertiary-background-color: #273554;             
    
    --site-primary-text-color: #f4e8c1;                /* Dutch-white */
    --site-seconday-text-color: #232C56;                /* space cadet */
    --site-tertiary-text-color: #ffffff;
    --site-quaternary-text-color-RGB: #a6cfe8;        /* SIMAARUS brand color */
    --site-quaternary-text-color-HSL: hsl(203, 59%, 78%);
    
    --site-grey-text-color: #9B9FB5;              /* cool grey */
    --copyrightStatementAndDesigner: rgba(166, 207, 232, 0.7);  /* SIMAARUS brand color w/ alhpa channel for opacity*/ 
  
    --site-primary-signal-color-main:  #ff1654;        /* Folly */
    --site-secondary-signal-color-main: #DDD92A;       /* Citrine */
    /* --site-signal-tiffany-blue:  */
    /* --cards-background-color:#00d9c0; */
  }
  
  @font-face {
      font-family: 'Roboto';
      src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');
      font-weight: 400;
    }
  
  body {
      background-color: var(--site-primary-background-color);
      width: 100%;
  }
  
  html {
      font-size: 62.5%;
      /* 62.5% is 10 px (.625 x -webbrowser default @ 100%- 16px) */
      /* use percentage instead of absolute '10px'  */
      /*  This relatively ensures that when a user changes the 'webbrowser' default pixel setting (= 16px! */
      /* to something else (typically bigger) the website will still look ok */
      /* because all targeted website elements will scale accordingly.  */
      width: 100%;
      }
  
      h1 {
        font-family: 'Roboto';
        font-size: 7.4rem;
        color: var(--site-tertiary-text-color);
        margin-bottom: 7vh;
    }
    
    h2 {
        font-family: 'Roboto';
        font-size: 3.2rem;
        font-weight: 400;
        color: var(--site-secondary-background-color);
    }
      
      p {
          font-family:'Roboto', Courier, monospace;
          font-size: 1.4rem;
          font-weight: 200;
          color: var(--site-tertiary-background-color);
      }
      
      /* REMARK: <em> styling tag has been reset in the NewResetStyle.css sheet ! */
      /* conslusion: it MUSt be enabled by means of enabling tge em tag element */
      em {
          font-style: italic;
      }
      
      a {
          cursor: pointer;
      }
  /* 
      a[x-apple-data-detectors] {
        color: red !important;
        text-decoration: none !important;
      } */
  
  /*     
  
  
      a[href^=tel] {
        color: white;
        text-decoration: none;
    }
  
   */
  
      .btn_CTA_heropage {
          display: inherit;
      }
      
      a.btn_CTA_heropage:hover {
          color: var(--site-seconday-text-color);
      }
  
      a:link {
          color:aqua;
          }
          
      a:visited {
          color:yellow;
          /* margin-top: 120px; */
      }
      
      main {
          margin-top: 200px;
      }
      
      img {
          display: block;
          margin-left: auto;
          margin-right: 0px;
          max-width: 100%;
          border-radius: none;
          border: none;
      }

      ol {
        list-style: decimal; /* Ensures numbered list */
        padding-left: 20px; /* Indents the whole list */
      }
      
      li {
        padding-left: 5px; /* Adds slight spacing inside the list item */
        margin-bottom: 8px; /* Adds spacing between list items */
        font-size: 16px; /* Adjusts text size */
        font-family: Arial, sans-serif; /* Uses a modern, clean font */
      }
      


/* ############################## */
      /* specific styling  */
/* ############################## */

.parent {
    display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, min-content);
        grid-column-gap: 42px;
        grid-row-gap: 42px;
        
        /* justify-content: center;  */
        /* centers items horizontally */
        
        /* align-items: center; */
        /* centers items vertically */
        
        margin-top: 42px;
        margin-left: 72px;
        margin-right: 72px;
        margin-bottom: 42px;
        font-family: 'Roboto';
    }
    
    .child_1 { grid-area: 1 / 1 / 2 / 2; }

    .header_img {
        height:100%;
        margin-right:auto;
        margin-left: 0px;;
    }
    
    img.header_img {
        object-fit: contain;
        }
    
    .child_2 {
            grid-area: 1 / 2 / 2 / 5;
            height: fit-content;
            background-color: var(--site-secondary-background-color);
            margin-top: 0px;
            margin-bottom: 0px;
        }

    .child_2 h1 {
            color: var(--site-seconday-text-color);
            text-transform: capitalize;
            text-align: center;
            line-height: 120px;
        }

        .child_2 .title h1 {
            text-transform: capitalize;
        }
        .child_3 { grid-area: 2 / 2 / 3 / 5; 
            height: fit-content;
            /* border: 2px solid red; */
            color: var(--site-tertiary-text-color);
            margin-top: 7vh;
            margin-bottom: 7vh;
        }

.child_3 p {
    font-family: inherit;
    font-size: 4vh;
    font-weight: 400;
    word-spacing: calc(0.1 * 4vh);
    line-height: calc(1.5 * 4vh);
    color: var(--site-tertiary-text-color);
    padding-bottom: 4vh;
}

.child_3 h2 {
    word-spacing: calc(0.1 * inherit);
    line-height: calc(1.5 * inherit);
    margin-bottom: 4vh;
}

.offerings p, .offerings li {
    font-size: 4vh;
    font-weight: 400;
    word-spacing: calc(0.1 * 4vh);
    line-height: calc(1.5 * 4vh);
    color: var(--site-quaternary-text-color-RGB);
    padding-bottom: 4vh;
}

.child_4 {
    grid-area: 3 / 1 / 4 / 5;
    position: relative;
    height: fit-content;
    max-width: 100vw;
    margin-top: 4vh;
    border: 4px solid var(--site-secondary-background-color);
}

.container-principles-and-reload {
    display: flex;
    flex-direction: row;
    padding: .2rem;
}

.container-principles-and-reload .reload-content {
    font-family: 'Roboto', Courier, monospace;  /* Because fonts should be as diverse as our thoughts */
    font-size: 2vh;                              /* Keeping it responsive, like a nimble ninja */
    font-weight: 100;                            /* Light and breezy */
    word-spacing: calc(0.1 * 2vh);                /* Dynamic spacing that flexes with you */
    line-height: calc(1.5 * 2vh);                  /* Perfect harmony of space and text */
    color: var(--site-grey-text-color);          /* Variable color for theme consistency */
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    opacity: 0.7;                                /* Slightly see-through—just like our optimism! */
}

.container-principles-and-reload .reload-content:last-of-type {
    margin-left: auto;   /* Auto margin on left nudges it to the end */
}
/* 
.reload-content {
    position: absolute;
    right: 1vw;
    top: 1vh;
} */

p.reload-content {
    font-family: 'Roboto', Courier, monospace;
    font-size: 2vh;
    font-weight: 100;
    word-spacing: calc(0.1 * 2vh);
    line-height: calc(1.5 * 2vh);
    color: var(--site-grey-text-color);
    opacity: 0.7;
}

p.quoteContent {
    position: relative;
    padding-left: 1.27vw; 
    font-size: 3rem;
    word-spacing: calc(0.1 * 3rem);
    line-height: calc(2 * 3rem);
    color: var(--site-tertiary-text-color);
    /* font-style: italic; */
    font-weight: 400;
    margin-left: 27px;
    margin-left: clamp(16px, 2vw, 24px);
    margin-right: clamp(16px, 2vw, 42px);
    text-wrap: balance;
    }







.quoteContent::before {
    content: "";/* Required for the pseudo-element */
    /*      display: inline-block;*/
    display: block;
    /*      position: absolute;*/
          /* left: 0; */
          /* top: 0; */
          /* width: 40px;
          height: 40px; */

          width: 128px;
          height: 128px;
    /*    background-image: url('https://via.placeholder.com/40');  Replace with your image URL */
          background-image: url('../assets/images/double-quote_128px.png');
          /* Replace with your image source */
          background-size: cover;
          background-repeat: no-repeat;
}

.quoteWriterFlex {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
    font-family: 'Roboto', Courier, monospace;
    font-size: 2.0rem;
    word-spacing: calc(0.1 * 2.0rem);
    line-height: calc(2 * 2.0rem);
    color: var(--site-quaternary-text-color);
    font-style: normal;
    opacity: 0.8;
    font-weight: 300;
    /* padding-bottom: .7vh; */
    margin-left: 107px;
    margin-right: 107px;
    /* text-indent: 2em; */
    }

.writer-container-flex {
    display: flex;
    flex-direction: column;
    width: 74%;
}

p.writer-name, p.writer-bio {
    font-family: 'Roboto', Courier, monospace;
    font-size: 2.4rem;
    word-spacing: calc(0.1 * 2.0rem);
    line-height: calc(2 * 2.0rem);
    color: var(--site-quaternary-text-color-HSL);
    font-style: normal;
    opacity: 0.8;
    font-weight: 300;
    margin-left: 5.7vw
}

p.writer-bio {
    font-size: 2.2rem;
    padding-left: 1.2vw;
    color: rgba(166, 207, 232, 0.7);
    word-break: break-word;
}

.container-copyright-and-website-design {
    display: flex;
    height: fit-content;
    flex-direction: row;
    width: 100vw;
    /* background-color: var(--site-primary-background-color); */
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 2px;
}

span.year {
    color: var(--copyrightStatementAndDesigner);
    font-style: normal;
    font-weight: 400;
    }
    
    .copyright-statement p, .website-design p {
    font-family: 'Roboto', Courier, monospace;
    font-size: 1.4rem;
    word-spacing: calc(0.1 * 1.4rem);
    color: var(--copyrightStatementAndDesigner);
    padding-top: 127px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top:2px;
    margin-bottom: 0px;
    }