/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/** {
  outline: 1px solid red !important;
}*/

/* ########## MOBILE ########## */
@media (min-width: 360px) { /* GPT */
/*My Phone portrait 360x800 (667) */
  /* Menu button */
  #menu-toggle {
    margin-right:7px;
  }
  .hero {
    margin-top: clamp(65px, 19%, 180px);
  }
  .about_wrapper { /* Adjust this to control the overlap */
    margin: 0px;
    padding:25px 0px 30px 0px;
  }
  .about {
    border: 1px solid #D9E9EE;
    border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
    background-color: rgba(255, 255, 255, 0.7);
    width: min(90vw, 832px);
    min-width: 310px;
    /*margin-top: 100px; */ /* Adjust this to control the overlap */
    /*margin-top: calc(8vh - 0px);*/ /* Adjust this to control the overlap */
    /*margin-bottom: 20px;*/
  }
  .aboutcontainer {
    width: min(80vw, 750px); /* 360+ = 80vw */
    min-width: 260px;
  }
}

@media (min-width: 375px) { /* GPT */
  .hero {
    /*margin-top: clamp(65px, 18%, 180px);*/ /* 360+ 80 30 350; */
    margin-top: calc(3vh + 50px);
  }
}

@media (min-width: 414px) { /* GPT */}
@media (min-width: 480px) { /* GPT */ /* Devon's phone is 485x849 */
  /* Menu button */
  #menu-toggle {
    margin-right:10px;
  }
}

@media (min-width: 481px) {
  #menu li a {
    font-size: clamp(1rem, 1.4vw, 1.5rem);
  }
}

/* ########## FOLD PHONES / SMALL TABLETS ########## */

/* ########## FOLD PHONES ########## */
@media (min-width: 540px) {
  /* Covers some devices rated at 780+ landscape */
  /* My phone: P=360x579  L=723x240 */
  .formcontainer {
    width: clamp(70%, 65%, 750px);
  }
}
@media (orientation: landscape) and (min-width: 450px) {
  /* Covers some devices rated at 780+ landscape */
  /* My phone: P=360x579  L=723x240 */
  .hero {
    margin-top: clamp(65px, 14%, 180px);
  }
 .hero h1 { /* Headline */
  width: 80%;
  font-size: min(7.5vw, 3rem); /* scales with viewport width, but won’t exceed 3rem */ /* 360+ 6.5, 3 */
}
  .formcontainer {
    width: clamp(70%, 65%, 750px);
  }
}
@media (min-width: 600px) { /* <===== ONN Tablet portrait (x832) */ }
@media (min-width: 640px) {}
@media (orientation: landscape) and (min-width: 640px) {}
@media (min-width: 680px) {}


/* ########## TABLETS ##########  */
/* ----- INLINE NAVIGATION STARTS HERE ----- */
@media (min-width: 768px) { /* GPT */
  header.global {
    height: 60px;
  }
  
/* Desktop styles */
@media (min-width: 768px) {
  #menu-toggle {
    display: none; /* Hide menu button */
  }
  #menu {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    width: auto;
  }
  #menu li {
    padding: 0 0px;
  }
  #menu li a:link {
    color: #ffffff;
    text-decoration: none;
    padding:10px 25px 10px 25px;
  }
  #menu li a:hover {
    background-color:#58784F;
  }
  #menu li a:active {
    background-color:#ff0000;
  }
  #menu li a:visited {
    background-color: transparent;
  }
/*  #menu {
    display: block; /* Ensure the menu is visible *
    position: static; /* Remove absolute positioning *
    background: none; /* Remove the background *
    width: auto; /* Allow natural width *
    padding: 0px 10px 0px 0px;
    font-size: clamp(.85rem, 1.7vw, .95rem);
    font-weight: bold;
    text-align: left; /* Align text properly *
  }
  #menu ul {
    display: flex; /* Align items in a row *
    /*gap: 0px; Space out menu items *
    align-items: center;
    list-style: none;
    padding: 0;
  }
  #menu ul li {
    margin: 0; /* Remove vertical spacing *
  }
  #menu ul li a:link {
    color: #ffffff;
    text-decoration: none;
    padding:10px 25px 10px 25px;
  }
  #menu ul li a:hover {
    background-color:#58784F;
  }
  #menu ul li a:active {
    background-color:#ff0000;
  }
  #menu ul li a:visited {
    background-color: transparent;
  }
  #menu-toggle {
    display: none; /* Hide menu toggle button *
  }*/
  .tagline {
    padding: 60px 0px 0px 15px;
  }
  #menu-toggle {
    top: 17px; /* 360+ 20px */
  }
  .hero {
    /*margin-top: clamp(65px, 18%, 180px);*/ /* 360+ 80 30 350; */
    margin-top: calc(7vh + 70px);
  }
 .hero h1 { /* Headline */
  width: 100%;
  }
  .formcontainer {
    width: min(70vw, 45rem);
  }
}
@media (min-width: 780px) {}
@media (min-width: 800px) {/* Samsung tablet portrait (x1112))   Phone landscape 800x360 (723x290) */}
@media (min-width: 810px) {}
@media (min-width: 820px) { /* GPT */
  .formcontainer {
    width: min(67vw, 45rem);
  }
}
@media (min-width: 834px) {}
@media (min-width: 834px) {}
@media (orientation: landscape) and (min-width: 850px) {
  .hero {
    margin-top: calc(15vh + 70px);
  }
  .formcontainer {
    width: clamp(63%, 63%, 750px);
  }
}
@media (min-width: 912px) { /* GPT */
  .hero { /* <===== DOESN'T WORK AT THIS SCREEN SIZE??? */
    margin-top: calc(20vh + 70px);
  }
  .formcontainer {
    width: min(62.5vw, 45rem);
  }
}
@media (min-width: 960px) {/* ONN Tablet landscape (x472) */
  .formcontainer {
    width: min(60vw, 45rem);
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {  /* Adjustments for higher DPI screens */} 


/* ########## LAPTOP/DESKTOP ##########  */
@media (min-width: 1024px) { /* GPT */
  .hero {
    margin-top: clamp(97px, 15%, 350px);
  }
  .about_wrapper {
    margin-top: calc(-20vw - 50px);
  }
  .about {
    padding: 1% 2% 2% 2%; 
  }
  .formcontainer {
    width: min(57vw, 45rem);
  }
}
@media (min-width: 1025px) {
  #menu li a {
    font-size: clamp(1rem, 1.2vw, 1rem);
  }
}
@media (min-width: 1100px) {
  .about_wrapper {
    margin-top: calc(-20vw - 60px);
  }
  .formcontainer {
    width: min(53.5vw, 45rem);
  }
}
@media (min-width: 1280px) {
/* Samsung tablet landscape (x632)) */
  .hero {
    margin-top: clamp(97px, 14%, 350px);
  }
 .hero h1 { /* Headline */
  font-size: min(9vw, 3.5rem);
  line-height: .95;
  }
  .hero h2 { /* Sub-Headline */
    font-size: min(4.5vw, 1.9rem);
    line-height: 2; /* 1600 = 2 */
  }
  .about_wrapper {
    margin-top: calc(-20vw - 70px);
  }
  .formcontainer {
    width: min(47.5vw, 45rem);
  }
}

@media (min-width: 1300px) {
  .about_wrapper {
    margin-top: calc(-20vw - 80px);
  }
}
@media (min-width: 1440px) { /* GPT */
/* Samsung tablet landscape (x632)) */
  .about_wrapper {
    margin-top: calc(-20vw - 90px);
  }
  .formcontainer {
    width: min(45vw, 45rem);
  }
}

@media (min-width: 1600px) {
/* Lenovo laptop */
  .about_wrapper {
    margin-top: calc(-20vw - 100px);
  }
}
@media (min-width: 1920px) { /* GPT */
/* HP laptop  (Full HD+) */
  .about_wrapper {
    margin-top: calc(-20vw - 115px);
  }
}
@media (min-width: 2560px) { /* GPT */
  .about_wrapper {
    margin-top: calc(-20vw - 135px);
  }
}





/*
########################################
                OTHERS
########################################
*/
/*@media (min-width: 450px) { /* <====== 450x441 Firefox Developer smallest width *
}
@media (min-width: 601px) { /* <====== 601x962 Onn tablet */
/*Onn tablet:
Portrait: 600x832(960) - Firefox | 602x795(601x962) - Chrome
Landscape: 960x472(600) - Firefox | 962x433(962x601) - Chrome
DPI 1.33
}*/