/*
   filename: mainGlendaStyles.css
   author:   Andre Long
*/

html
{
   height: -webkit-fill-available;
}

body
{
   background-color: #F0FFF0;
   color: black;
   width: 100%;
   margin: 0 auto;
   padding: 0;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
   height: 100vh;
   height: -webkit-fill-available;
}

h1
{
   text-align: center;
}

.mainMenu
{
   /*background-color: #ffffff; */ 
   text-align: center;
   width: 100%;
   height: 80px;
   background-image: linear-gradient(#F0FFF0, #2F9FDE);
}

ul
{
   list-style-type: none;
   width: 100%;
}
.topMenuItem
{ 
   display: inline-block;
   text-decoration: none;
   margin-left: 5%;
   margin-right: 5%;
   width: 104px;
   height: 20px;
   vertical-align:top;
   position: relative;
}

.topMenuItem:hover
{
   background-color:#F8F8FF;
   color:black;
   width: 104px;
   height: 20px;
   
}

.topMenuItem .dropdown
{
   display: none;
   color:#7FFF00;
   text-decoration: none;
    
}

.topMenuItem:hover .dropdown
{
   display: block;
   color:#A52A2A;
   text-decoration: none;
   position: relative;
   left: -40%;
   
}

.topMenuItem .dropdown:hover
{
  /* color:#FF1493; */
   color:green;
   position:relative; 
   display:block;
   
}

#homeHeader
{
   box-sizing: border-box;
}

.pageHeader
{
   box-sizing: border-box;
}


/********************** IMAGE STYLES ********************************************/
.featured-image
{
   width: 50%;
   height: 50%;
   float: left;
   margin-right: 4px;
}

#teamPics
{
   width: 100%;
   display:flex;
   justify-content: space-between;
   align-items: center; 
   display:flex;
   flex-wrap:wrap;
}

.card
{
   border: 1px solid black;
   width: 30%; /* Set a width for the div */
   height:auto; /* Set a height for the div */
   background-color: lightblue; /* Just for visibility */
   text-align: center; /* Centers text inside the div */
   border-radius: 8px;
   box-shadow: 0px 2px 4px rgba(0,0,0,0,2);
   margin: 20px;
   overflow: hidden;
   
}

.logo
{
   
   width:  3%;
   height: 20%;
   
}

.team-image
{
   width: 25%;
   height: auto;
   margin-bottom: 0;
}

#middle-contact-div
{
   width: 100%;
   height: 300px;
   background-color:#7393B3;

}

#myFounder
{
   width: 15%;
   height: 100%;
   margin-left: 5%;
   margin-right: 5%;
}

#logoPic
{
    width:  20%;
    height: 100%;
    margin: 0;
}

.general-contact-form
{
   width: 50%;
   height: 100%;
   float: left;
   
}

#SacHome
{
   width: 100%;
   margin:auto;
}

.allPageHeader
{
   width: 100%;
   height: 400px;
   margin: auto;
}

.pdf-holder
{
   width:100%;
   position:relative;
   left:5%;
   
}



/********************** MORE PAGE STYLES ********************************************/

.executive
{
   margin-left: 1%;
}

.about
{
   margin-left: 1%;
   
}

.aboutList
{
   list-style-type: circle;
}

.about-general
{
    border: 1px solid red;
}

/********************************** Read More Styles *********************************/

.initialText
{
   text-align: right; 
}

.extraText
{
    display: none;
    
}


p
{
   display: inline; 
   text-align: justify;
}


input[type="checkbox"]
{
    height:2em;
    display:block;
    -moz-appearance: none; /* FireFox */
    -webkit-appearance: none /* Sarfari */
}

label
{
    position: relative;
    padding: 2%;
    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
    
}

label:before
{
    content: "Read More";
    
}

input[type="checkbox"]:checked ~ label:before
{
    content: "Read Less";
}

.dots:has(~ input[type="checkbox"]:checked)
{
   display: none;
}

.extraText:has(~ input[type="checkbox"]:checked)
{
   display: inline;
   text-align: left; 
   
}

/********************************** Service Styles *********************************/
.general-service-items
{
    list-style-type: disc;
}




video
{
   margin: 0 0 20px 0;  
}

/********************** MEDIA QUERY STYLES ********************************************/

@media(max-width:600px)
{
   .mainMenu
   {
      white-space: nowrap;
  
   }

   .topMenuItem
   { 
      text-decoration: none;
      width: 10%;
      height: 20px;
      vertical-align:top;
      position: relative;
      left:-10%;
      color:red;
      display: inline-block;
      
   }

   .topMenuItem:hover
   {
      background-color:pink;
      color: black;
   }

   .topMenuItem .dropdown
   {
      display: none;
      color:#7FFF00;
      text-decoration: none;
   }

   .topMenuItem:hover .dropdown
   {
      display: block;
      color:#A52A2A;
      text-decoration: none;
      position: relative;
      left:-35%;
      width: auto;
   }

   .topMenuItem .dropdown:hover
   {
      color:white;
      position:relative; 
      display: inline-block;
   }
   
   .card
   {
       border: 1px solid black;
       width: 100%; /* Set a width for the div */
       height:auto; /* Set a height for the div */
       background-color: lightblue; /* Just for visibility */
       text-align: center; /* Centers text inside the div */
       border-radius: 8px;
       box-shadow: 0px 2px 4px rgba(0,0,0,0,2);
       margin: 20px;
       overflow: hidden;
   }
}