/*02-18-24*/
:root{
    --brandColor1: rgba(28,192,172,1);
    --brandColor1Hover: rgba(28,192,172,.821);
    --brandColor2Hover: rgba(65,28,77,.821);
    --brandColor2Hex: #411c4d;
    --brandColorsGradient: linear-gradient(to right, rgba(65,28,77,.07120), rgba(28,192,172,.075));
    --additiveColor1: white;
    --additiveColor2: whitesmoke;
    --bgImage: url(../imgs/technology-6701406_1920.jpg);
}

*{padding: 0; margin: 0; float: left; position: relative; box-sizing: border-box; display: 0; text-decoration: none; list-style-type: none;}

b,i,em,strong,span{float: none;}


h1{font-size: 32pt;}
h2{font-size:33pt;}
h3{font-size: 24pt;}
p,ul{font-family:sans-serif;}
a{font-size: 16pt;}
address{font-size: 13pt; font-family: sans-serif;}

.section{width: 100vw; min-height: 400px;}

/*----------header code starts here--------------*/
.header{width: 100vw; max-height: 150px; padding: 0px; background-color: transparent; position:fixed; top:0; z-index:20;}
#emLogo{width: 60px; height: auto; margin: 5px 10px 0px 0px; }
.header hgroup{min-width: 320px; min-height: 50px; margin: 0px 10px 10px 10px; padding-top: 5px;}

.header hgroup a h1{text-decoration: none; color:var(--additiveColor1);}

#topNav{margin: 5px 10px 0px 0px; float: right; color:var(--additiveColor1);}
#topNav #dropNav{min-width: 120px; max-width: 160px; height: 50px; margin: 0px 5px; display: flex; flex-direction: column; align-items: center;}
#topNav a{width: 120px; height: 50px; margin: 0px 5px; 
    display: flex; flex-direction: row; justify-content: center; align-items: center; color: var(--additiveColor2);
}
#dropNav ul a{width: 180px; height: 60px;}
#dropNavlis{display: none; position: absolute; top: 50px; z-index: 9; padding: 8px 0px;}
#dropNavlis a{margin: 2.5px 0; text-align: center; background-color: var(--brandColor2Hex); font-size: 12.5pt;}
#dropNavlis a:hover{border-bottom: 1px solid var(--additiveColor1);  background-color: var(--brandColor2Hover);}
#dropNav:hover #dropNavlis{display: block;}
.top-li a{color:var(--additiveColor1); font-family: serif;}
.white-bottom:hover{border-bottom: 5px solid var(--additiveColor1);}
.purple-bottom:hover{border-bottom: 5px solid var(--brandColor2Hex);}
/*----------header code ends here--------------*/

/*----------landing section code ends here--------------*/
#landing{
    height:550px;
    color: var(--additiveColor2); 
    display: flex; flex-direction: column; justify-content: center;
    background-image: var(--bgImage); background-size: cover; background-position: center center;}
#landing-filter{
    width: 100vw; min-height: 550px; height: 100%; background-color: rgba(0,0,0,.000000196);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #411c4d;}

#landing-text{padding:15px; max-width: 1280px; background-color:rgba(255,255,255,.675); display: flex; flex-direction: column; align-items: center; justify-content: center; top:-20px; text-align: center; text-shadow: -1.25px -1.25px 3.5px #fff;} 
#landing-h2{margin: 0px 0px 10px 0px; text-transform: uppercase;}
#small{float:none; font-size: 28pt;}
#landing-p{max-width: 620px; text-align:center; font-style:italic;}
/*----------landing section ends here--------------*/

/*----------about section starts here--------------*/
#about{min-height: 100px; padding: 50px 80px; text-align:center; background-color: var(--additiveColor2); display: flex; flex-direction: column; align-items: center; justify-content: center;}
#about h3,#about p{clear:both;}
#about p{margin:10px;}
/*----------about section ends here--------------*/

/*----------services section starts here--------------*/
#services{background-color: var(--additiveColor1); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}

#services input{display: none;}

.service{width: calc(50% - 0px); min-width: 380px; height: 520px; padding: 20px 0px; margin: 0px; background-color: var(--brandColorHx); border: 10px solid var(--additiveColor2); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}

.service-card{
    width: 75%; height: 100%; min-width: 360px; background-color: var(--additiveColor1); transform-style: preserve-3d; transition-duration: 1.86s; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.service-front{
    max-width: 100%; height: 100%; padding-top: 50px; background-color: var(--additiveColor1); background-image: var(--brandColorsGradient); position: absolute; top: 0; backface-visibility: hidden;
}
.service-back{max-width: 100%; height: 100%; background-color: var(--additiveColor1); background-image: var(--brandColorsGradient); position: absolute; top: 0; transform: rotateY(180deg); backface-visibility: hidden;}

.service hgroup{
    width: 100%; min-height: 100px; padding: 10px 10px; margin-top: 10px; display: flex; flex-direction: row; justify-content: center;
}

.service hgroup .img{width: 100px; height: 100px; overflow: hidden;}
.service hgroup .img img{width: auto; height: 100%;}

#service1 hgroup{margin-bottom: 10px;}
#service1 hgroup .img{width: 80px; height: 80px; overflow: hidden;}
#service1 hgroup .img img{width:auto;height:100%; position:absolute;left:-15px;}

.service hgroup h3{
    min-width: 100px; max-width: calc(100% - 150px); min-height: 100px; color: var(--brandColor2Hex); display: flex; flex-direction: row; align-items: flex-start; justify-content: center; text-align:center;
}

#service1 hgroup h3{
    min-width: 100px; max-width: calc(100% - 150px); min-height: 100px; padding: 0px 0px 0px 10px; color: var(--brandColor2Hex); display: flex; flex-direction: row; align-items: flex-start; justify-content: center; text-align: left;
}
.service p{width: 100%; padding: 5px 15px; margin: 5px 0px;}
.service-front .front-p{
    height: 100%; max-height: 250px; padding: 40px 15px; text-align: center;
    flex-direction: column; justify-content: center;}
.service-back .p{height: 100%; max-height: 265px; padding: 0px 20px; overflow: scroll; display: inline-block;}

.services-btn{height: 50px; padding: 10px; background-color: var(--brandColor2Hex); color: var(--additiveColor1); position: absolute; bottom: 10px; right: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center;}
.services-btn:hover{background-color: var(--brandColor2Hover);
    box-shadow: 0px 0px 1px 0 rgba(80,05,80,0.752);}
.services-btn a{width: 100%; height: 100%; color: var(--additiveColor1); display: flex; 
flex-direction: row; justify-content: center; align-items: center;}

.services-btn{text-transform: capitalize;}
#service1 .services-btn{font-size: 13pt;}

#services:has(#chk2:checked) #service-card2{transform: rotateY(180deg);}
#services:has(#chk3:checked) #service-card3{transform: rotateY(180deg);}
#services:has(#chk4:checked) #service-card4{transform: rotateY(180deg);}
#services:has(#chk5:checked) #service-card5{transform: rotateY(180deg);}
#services:has(#chk6:checked) #service-card6{transform: rotateY(180deg);}
/*----------services section ends here--------------*/



/*----------contact section ends here--------------*/
#contact{min-height: 200px; background-color: var(--brandColor2Hex); color: var(--additiveColor1); display: flex; flex-direction: column; align-items: center; padding: 50px 0px;}
#contactUs{width: 100%; font-size: 26pt; text-align:center;}
#infoContact{margin-bottom: 10px;}
/*----------contact section ends here--------------*/


/*----------footer section starts here--------------*/
footer{width: 100vw; min-height: 50px; max-height: 100px; padding: 10px; background-color: var(--additiveColor2); display: flex; flex-direction: row; align-items: center; justify-content: center;}
footer p{width: 100%; text-align: center; font-family: sans-serif; font-size: 11pt;}
/*----------footer section ends here--------------*/



/*----------media queries start here--------------*/

@media only screen and (min-width: 1272px){}
@media only screen and (max-width: 960px) and (min-width: 641px){}
@media only screen and (max-width: 768px){
    .service-back .p{max-height: 215px;}
}
@media only screen and (max-width: 759px) and (min-width: 240px){
    .service{width: calc(100% - 20px);}
    .service-card{width: 75%; height: 100%; min-width: 360px;}
    
}
@media only screen and (max-width: 1220px) and (min-width: 615px){
    .service hgroup h3{font-size: 22pt;}    
}
@media only screen and (max-width: 474px){
    #landing-text{top:25px;}
}
@media only screen and (max-width: 414px){
    #landing-text{top:35px;}
    .header{padding-top:10px;}
    .header hgroup{min-width: 100px;}
    .header hgroup h1{font-size: 30pt;}
    .header .top-li a{color:black;}
}
@media only screen and (max-width: 614px) and (min-width: 240px){
    #landing-text{margin-top:50px;}
    .service hgroup h3{font-size: 22pt;}    
}
/*----------media queries end here--------------*/