body {
    background:white;
    font-family: sans-serif;
    height: 100vh;
        
}
#mainNavbar {
    margin: 0;
    background: #3e444fdd;
    }
#mainNavbar .nav-link {
    color:white;
    font-size: calc(12px + 0.5vw);
    font-weight: 300;
    letter-spacing: 1px;
    padding: 12px;
    }
#mainNavbar .nav-link:hover {
    text-decoration: rgb(193, 194, 194) solid underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 5px;
}
#mainNavbar .navbar-brand {
    color: white;
    font-size: calc(12px + 2.0vw);
    font-weight: 500;
    letter-spacing: 0.2rem; 
}
#iShowGroupName {
    letter-spacing: 0rem;
}
.tm {
    font-size: 90%;
}
.sectionHeader {
    height: 55px;
    background-color: white;
    color: #3e444f;
    font-weight: 500;
    font-size: calc(14px + 1.0vw);
    line-height: normal;
    } 
#about H1 {
    color: #3e444f;
    font-weight: 600;
    }
#about p {
    
    text-align:justify;
}
#about img { 
    font-size: calc(11px + 0.7vw);
    text-align:justify;
    height: 55vh;
    object-fit: cover;
    smin-height: 55vh;
    smax-height: 55vh;
    object-position: left;
    
}

#services, #applications, #contact {
    height: 55vh;
        
}

#servicesBody {
    background-image: url("img/services2.jpg");
    background-position:center;
    background-size: cover;  
    height: 45vh;
    
}
#servicesText { 
    
    color: black;
    position: relative;
    top: 35%;
    left:63%;
    max-width: 37%;  
    overflow-x:hidden;
}
#servicesText h3 {
    font-size: calc(12px + 1.5vw);
}
#servicesText h5 {
    font-size: calc(12px + 1.0vw);
    
}
#applicationsBody {
    background-image: url("img/brands_media.jpg");
    background-position:right;
    background-size: cover;       
    height: 45vh;
    
    }
#applicationsText { 
    position: relative;
    top:  65%;
    left: 2%;
    max-width: 98%;
    overflow: hidden;
    color: white;
    font-size: calc(12px + 2.5vw);
    font-weight: 600;
    line-height: 100%;
    
}
#contactBody {
    background-image: url("img/contact.jpg");
    background-position:right;
    background-size: cover;       
    height: 45vh;
    overflow: hidden;
    
}

#contactText { 
    position: relative;
    top:  20%;
    left: 15%;
    max-width: 70%;
    overflow: hidden;
    color: white;
    font-size: calc(12px + 2.5vw);
    font-weight: 600;
    line-height: 100%;
    background-color: #111111dd;
}
#contactText H3 {
    font-size: calc(10px + 1.8vw);
    text-decoration: white solid underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 15px;
    }
#contactText H4 {
    font-size: calc(10px + 1.4vw);=     
}
#contactText H5 {
    font-size: calc(8px + 1.3vw);
    }
#contactText H6 {
    font-size: calc(8px + 0.8vw);
    color: rgb(181, 181, 181);   
}
.card {
    border: 2px solid #3e444fdd;
      }        
        
.card-img-top {
            height: 13rem;
            object-fit: contain;
            padding: 15px;
            
                 }
footer {
    display: flex;
    color:white;
    background-color: black;
    font-size: calc(7px + 0.5vw);
    padding: 2%;
    line-height: normal;
    }
@media (orientation: portrait ) and (max-width: 765px) {
    #about H1 {
           font-size: 1.0rem;
        }
    #about p {
        font-size: 0.9rem;
    }
    #about img {
        height: 30vh;
        min-height:30vh;
            } 
    .sectionHeader {
            height: 45px;
            font-size: 1.0rem;
    }
    #servicesText {
        font-size: 1rem;
        color: black;
    }    
    #applicationsText {
        font-size: 1rem;
        color: white;
    }
    #services, #applications, #contact {
        height: 50h;
        
        
        }
    #servicesBody, #applicationsBody, #contactBody {
            height: 40vh;   
           
           
        }    
    footer {
        font-size: 0.6rem;
    }    
    }
@media (orientation: landscape ) and (max-width: 765px) {
 #about H1 {
        font-size: 1.0rem;
     }
 #about p {
     font-size: 0.9rem;
 }
 #about img {
     height: 30vh;
     min-height:30vh;
         } 
 .sectionHeader {
         height: 45px;
         font-size: 1.1rem;
 }
 .card-img-top {
    height: 9rem;
    object-fit: contain;
    padding: 5px;
     }
 
 #servicesText {
     font-size: 1rem;
     color: black;
 }    
 #applicationsText {
     font-size: 1rem;
     color: white;
 }
 #services, #applications, #contact {
     height: 90vh;
          
     }
 #servicesBody, #applicationsBody, #contactBody {
         height: 70vh;      
        
     }    
 footer {
     font-size: 0.6rem;
 }    
}
@media (orientation: landscape ) and (min-width: 766px) {
 .sectionHeader {
        height: 87px;
        font-size: calc(12px + 1.5vw)
}
 #about {
        height: 90vh;
    }    
 #about H1 {           
        font-size: calc(12px + 1.8vw);
        overflow:hidden;        
     }
 #about p {
     font-size: 1.3rem;
     padding-top: 20px;
 }
 #about img {
     height: 50vh;
     
         } 
 .card-img-top {
    height: 9rem;
    object-fit: contain;
    padding: 5px;
     }    
#servicesText h3 {font-size: calc(12px + 2.0vw);}
#servicesText h5 {font-size: calc(12px + 1.5vw);}
#applicationsText { font-size: calc(12px + 2.0vw); }
#services, #applications, #contact { height: 90vh; }
#servicesBody, #applicationsBody, #contactBody { height: 70vh;}    
footer {font-size: 0.9rem; }    

}
@media (orientation: portrait) and (min-width: 766px) {
 #mainNavbar .nav-link {
     padding: 10px;
     letter-spacing: 0px;
 }
 #about H1 {
        font-size: 1.8rem;
     }
 #about p {
     font-size: 1.2rem;
 }
 #about img {
     height: 35vh;
     min-height:35vh;
         } 
 .sectionHeader {
         height: 85px;
         font-size: 1.8rem;
 }
 #servicesText {
     font-size: 1.7rem;
     color: black;
 }    
 #applicationsText {
     font-size: 1.7rem;
     color: white;
 }
 #services, #applications, #contact {
     height: 55vh;
          
     }
 #servicesBody, #applicationsBody, #contactBody {
         height: 40vh;   
       
        
     }    
 footer {
     font-size: 0.8rem;
 }    
}