@import "tailwindcss";
/*
    Desktop: 1920×1080, 1366×768, 1536×864, 1280×720
    Mobile: 360×800, 390×844, 393×873, 412×915
    Tablet: 768×1024, 1280×800, 800×1280, 820×1180
    */
:root {
  color-scheme: light dark;
  /* --background: #ffffff;
  --foreground: #171717; */
}

/* @media (prefers-color-scheme: dark) {
  .logo {
    background-image: url(./media/eddlogo.png);
  }
} */


@media only screen and (max-width: 600px) {
  body {
    .copyright{
      font-size:  clamp(.18em, 1.5vh, 7em);
    }
    .footer{
      /* display: flex;
      flex-direction: column; */
      display: grid;
      grid-template-columns: 20% 80%;
      grid-row: auto auto auto;
  
    }
    .footerdisclaimer{
  
      display: inline-flex;
      justify-content: space-evenly;
      grid-column: 1/ span 2;
      grid-row: 3 / span 1;
    }
    .footerlines{
      flex-direction: column-reverse;
      margin-bottom: 3vh;
    }
    .grow:hover,
    .grow:focus {
      transform: scale(1.10);
      font-weight: 500;
    }
    .grow:active {
      transform: scale(.75);
    }
    h2.title{
      margin-top: 5vh;
    }
    .header{
      height:15vh;
    }
    .icon{
      height: 3vh;
      margin:10px;
    }
    .inline-flex{
      display: flex;
      flex-direction: column;
    }
    .logo{
      height: 12vh;
      width: 12vh;
      margin-right: -5vw;
    }
    .menu{
      gap: .5rem;
      float: right;
      font-weight: 600;
      font-size:  clamp(.2em, 2vh, 9em); 
      margin-top: 3vh;
    }
    .mx-auto{
      padding-top: 2vh;
    }
    p.footertxt{
      width:100vw;
      text-align: center;
      font-size:  clamp(.15em, 1.5vh, 6em); 
    }
    .mission p{
      text-align: left;
    }
    .page{
      font-size: clamp(.5em, 2vh, 10em); 
    }
    .service {
        padding: 1vw;
        height:15vh;
        font-size: clamp(.5em, 2vh, 8em); 
    }  
    .servicebox {
      padding: .75rem;
      margin-bottom: 0.15rem;
      min-width:33vw;
      max-width: 40vw;
      font-size:clamp(.5em, 2vh, 8em); 
    }
     .serviceinfobox{
      text-align: left;
      margin-top: 0vh;
      width: 90%;
     }
    .servicepageselection{
      width:95%;
    }
    .services {
        grid-template-columns: auto auto;
        padding: 1vw;
    }
    .servicescontainer {
      margin-top: 1vh;
    }
    .serviceselectionbox{
      margin-left:2vw;
      flex-direction: row;
      width:100%;
      overflow: auto;
    }
    .spacer{
      height:15vh
    }
    .splashpiccont{
      height:40vh;
    }
    .splashpic{
      width: 100%;
      aspect-ratio: auto;
      object-fit: cover;
      margin-bottom: 1vh;
    }
     .trigger-button{
      margin-left: 1vw;
      margin-right: 1vw;
        font-size:  clamp(.2em, 2vh, 9em); 
    } 
    .txt {    
        font-size: clamp(.6em, 2.5vh, 9em);
        line-height: 3vh;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    .uspic {
      width: 15vw;
      height: 22vw;

    }
    .ustxt{
      text-align: left;
    }
    .why{
      margin-left: 3vw;
      margin-right: 5vw;
    }
  }
}

a{
  text-decoration: none;
  color:  light-dark(#001C34, #CCDEEE);
}

body {
  background: light-dark(#E5ECF2, #001C34);
  color: light-dark(#001C34, #CCDEEE);
  /* background: var(--background); */
  /* color: var(--foreground); */
  font-family: Arial, Helvetica, sans-serif;
}

.page{
  font-family: ui-sans-serif;
  background-color: light-dark(#E5ECF2, #001C34);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: clamp(.6em, 2.5vh, 10em);

}
.mission p{
  text-align: justify;
}
p.footertxt {
 width: 55vw;
 margin-left: 2vw;
}
.abouttxt{
  margin-right: 5vw;
  margin-left: 5vw;
  text-align: justify;
}
.footerdisclaimer{
  margin-left: auto; 
  margin-right: auto;
  /* gap: 5vw; */

  display: inline-flex;
  justify-content: space-evenly;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  
}

.icon {
  height: 5vh;
  margin:15px;
  padding: 1px;
}

.mission{
  margin: 2vh 5vw;
}
.serviceselectionbox{
  margin-left:4vw;
  display: flex;
  flex-direction: column;
}

.social {
  display:flex;
  flex-direction: row;
  align-content: space-evenly;
  margin-left: 30vw;
  margin-top:auto;
  margin-bottom: auto;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.splash {
  margin-top: 1.25rem;
}

.splashpic {
  height: 60vh;
  width:100vw;
  margin-bottom: 3vh;
}

.splashtxt {
  text-align: justify;
  font-size: clamp(.7em, 3vh, 10em);
  margin-left: 4vw;
  margin-right: 10vw;
  margin-bottom: 2vh;
  margin-top:2vh;
}
.center{
  display:flex;
 align-items: center;
 justify-content: center;
 margin:auto;
 width:90%;
}
.title {    
    font-size: clamp(1.4em, 5vh, 17em);
    font-weight: 500;
    margin-left: 3vw; 
    color:  light-dark(#001C34, #CCDEEE);
    
}

h1.title{
  margin:auto;
  text-align: center;
}

p{
  font-size:clamp(.6em, 2.5vh, 9em);
}

.lgtxt {
  font-size: 3vh;
  margin-bottom: 5vh;
  text-align: justify;
}

.logo {
  margin-top: 3vh;
  margin-left:2vw;
  height: 18vh;
  width: 18vh;
  background-image: url(./media/EDD-logo.png);
  background-repeat:  no-repeat;
  background-size:  contain;
}

.menu {
  gap: 2.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  float: right;
  font-weight: 700;
  margin-right: 5vw;
  font-size: 1rem;
  margin-top: 5vh;
}

.header{
  z-index: 90;
  display:flex;
  position: fixed;
  top: 0px;
  align-items: center;
  justify-content: space-between;
  background-color: light-dark(#CCDEEE, #003159);
  width: 100%;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0,0,0,0.05);
  height: 20vh;
  padding-bottom: 2vh;
  color: light-dark(#001C34, #CCDEEE);
  margin-left: -2vw;
}

.spacer {
  height: 18vh;
  background-color: light-dark(#E5ECF2, #001C34);
}

.uspic {
  width: 10vw;
  height: 15vw;
  float: left;
  margin: 1vh;
  margin-right: 2vw;
  margin-left: 3vw;
  border: 1px solid black;
  color:transparent;
}

 
  h2.title{
    margin-top: 3vh;
    margin-bottom: 2vh;
  }
.contactcontainer{
  margin-top: 10vh;
  display:flex;
  flex-direction: column;
  margin-left: 5vw;
}
.ustxt {
  margin: 1vh 5vw 5vw 15vw;
  text-align: justify;
}
.team{
  margin-bottom: 5vh;
  display: flex;
  flex-direction: column;
}
.footer {
  background-color: light-dark(#CCDEEE, #003159);
  width: 100vw;
  margin-top: auto;
  /* display: flex;
  flex-direction: row;
   align-items: center; */
   display: grid;
   grid-template-columns: 30% 70%;
   grid-template-rows: auto auto;
  
}
.footlogo {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.copyright{
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

.mx-auto {
  /* margin-left: auto; 
  margin-right: auto; */
  margin-left: 25%;
  padding-top: 7vh;
  padding-bottom: 1vh;
}

.footercontent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width:40vw;
}

.footerlines {
  display: inline-flex;
  margin-bottom: 2vh;
  justify-content: center;
}

.footertxt {
  font-size: 2.5vh;
  justify-content: center;
}

p.footertxt{
  width: 55vw;
  margin-left: 2vw;
}

.trigger-button{
  margin-left: 2vw;
  margin-right: 2vw;
}

.trigger-button:hover {
  text-decoration: underline;
  font-weight: 800;
  font-size: 2.25vh;
}
button{
  border:none;
  background-color: transparent;
}

.close {
  margin-left: 1vh;
  font-size:1.5em;
}

.services {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    padding-left: 4vw;
    padding-right:4vw;
    padding-top:2vh;
    padding-bottom:2vh;
    
}

.service {
    padding: 1.5vw;
    margin: 1.5vw;
    background-color: light-dark(#CCDEEE, #01437B);
    border-radius: 15px;
    height:20vh;
    grid-column: span 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 2.5vh;
    
}

.servicescontainer {
 margin-top: 5vh;
}

.txt {    
        color: light-dark(black, white);
        font-size:clamp(.6em, 2.5vh, 9em);
        line-height: 3vh;
        
}

.grow {
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
  }
  
  .grow:hover,
  .grow:focus {
    transform: scale(1.20);
    font-weight: 500;
  }
  
  .grow:active {
    transform: scale(.90);
  }

  .nogrow:hover,
  .nogrow:active {
      height: 15vw;
  }

  .nogrow:active{
      height: 15vw;
  }

 .bgblue-50 {
  background-color: light-dark(#E5ECF2, #001C34);
}

.bgblue-100 {
  background-color: light-dark(#CCDEEE, #001C34);
}

.bgsecondaryblue-50 {
  background-color: light-dark(#DEE7EE, #01437B);
}

.h-20vh {
  height: 20vh;
}

.txtsz2vh {
  font-size: clamp(.5em, 2vh, 8em); 
}

.top{
  z-index: 50;
}
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 90; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: light-dark(rgb(0,0,0), #fff); /* Fallback color */
  background-color: light-dark(rgba(0,0,0,0.4), #fff); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: light-dark(#fefefe, #001C34 );
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid light-dark(#888, #2f2e2e );
  width: 80%; /* Could be more or less, depending on screen size */
}

.modaltxtbx {
  margin-left: 2vw;
  margin: 1.25rem;
  height: 80vh;
  overflow-y: auto;                          
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: light-dark(black, white);
  text-decoration: none;
  cursor: pointer;
} 
main{
  width:100%;
}
.serviceinfobox{
  margin-left: 2vw;
  margin-top: 12vh;
  margin-bottom: 2vh;
  width: 55%;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(107,114,128,0.05) inset;
  text-align: justify;
  padding: 0.75rem;
  margin-right: 5vw;
}
.servicepageselection{
  margin-bottom: 2vh;
  margin-top: 5vh;
  width:40%;
}

.servicebox {
  padding: 1.25rem;
  text-align: left;
  box-shadow: 0 0 0 0px #fff,   0 0 0 calc(1px + 0px) #CCDEEE, 0 0 #0000;
  margin-bottom: 0.25rem;
  background-color: light-dark(#CCDEEE, #003159);
  font-size: clamp(.8em,3.5vh,11em); 
}

.followingspace {
  margin-top: 2vh;
}

.why{
  margin-left: 4vw;
  margin-bottom: 5vh;
  margin-right: 4vw;
  text-align: justify;
}

.antialiased {
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
}

.fixed {
  position: fixed;
}

.flex {
display: flex;
}

.flex-col {
flex-direction: column;
}

.float-right {
  float: right;
}

.font-bold {
  font-weight: 700;
}

.gap-10 {
  gap: 2.5rem;
}

.h-18vh {
  height: 18vh;
}

.inline-flex {
  display: inline-flex;
}

.inset-shadow-sm {
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0,0,0,0.05) inset;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.m-2 {
  margin: 0.5rem;
}

.m-1 {
  margin: 0.25rem;
}

.mb-1vh{
  margin-bottom: 1vh;
}

.mb-2vh {
  margin-bottom: 2vh;
}

.ml-2vw {
  margin-left: 2vw;
}

.ml-4vw {
  margin-left: 4vw;
}
 
.ml-5vw {
  margin-left: 5vw;
}

.mr-1vh {
  margin-right: 1vh;
}

.mr-5vw {
   margin-right: 5vw;
}

.mt-2vh {
  margin-top: 2vh;
}

.mt-3vh {
  margin-top: 3vh;
}

.mt-5vh {
  margin-top: 5vh;
}

.mt-9vh {
  margin-top: 9vh;
}

.mt-auto {
  margin-top: auto;
}

.min-h-screen {
  min-height: 100vh;
}


.p-3 {
  padding: 0.75rem;
}

.p-5 {
  padding: 1.25rem;
}

.pb-2vh {
  padding-bottom: 2vh;
}

.ring-1 {
  box-shadow: 0 0 0 0px #fff,   0 0 0 calc(1px + 0px) rgb(59,130,246,0.5), 0 0 #0000;
}

.shadow-sm {
  box-shadow: 0 0 #000 , 0 0 #000, 0 1px 2px 0 rgb(0,0,0,0.05);
}

.text-left {
  text-align: left;
}

.text-primaryblue {
  color: light-dark(#001C34, #CCDEEE);
}

.top-0 {
  top: 0px;
}

ul{list-style-type: none;;}

.w-80vw {
  width: 80vw;
}

.w-screen {
  width: 100vw;
}