head, body {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
    background: rgb(5, 13, 19);
    background-size: cover;
    font-family: 'Josefin Sans', sans-serif;
    color: aliceblue;
    text-align: center;
    align-items: center;
}

/* navigation bar style for all other pages exc. home */
.nav2 {
    overflow: hidden;
    background-color: rgb(171, 207, 239);
    border-bottom: 5px rgb(4, 34, 56);
    border-bottom-style: double;
}
  
.nav2 a {
    float: left;
    color: rgb(5, 13, 19);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: bolder;
}

.nav2 a.left {
	float: left;
}
  
.nav2 a.left:hover {
    background-color: rgb(4, 34, 56);
    border: 3px solid rgb(171, 207, 239);
    color: aliceblue;
}
  
/* Create a right-aligned (split) link inside the navigation bar */
.nav2 a.split {
    float: right;
    background-color: rgb(5, 13, 19);
    padding: 14px 40px;
    color: aliceblue;
}
  
.nav2 a.split:hover {
    background-color: rgb(171, 207, 239);
    border: 3px solid rgb(4, 34, 56);
    color: rgb(5, 13, 19);
}

.container {
	padding: 5px 5%;
    
}

.header {
    text-align: left;
    margin-top: 5%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: aliceblue;
    text-shadow: 1px 1px 2px rgb(73, 97, 164), 0 0 1em rgb(71, 185, 217), 0 0 0.2em rgb(95, 189, 215);
}

.par {
    text-align: left;
    margin-top: 2%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: aliceblue;
}

.header2 {
    text-align: left;
    margin-top: 2%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color:rgb(52, 104, 144);
}

.link {
	color: rgb(50, 94, 128);
    font-size: 22px;
    font-weight: 600;
    transition: all 0.3s ease 0s;
    text-align: left;
    padding-top: 5px;
}

.box-container {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); 
    grid-auto-rows: 1fr;
    gap: 10px;
}

/* https://bestjquery.com/tutorial/service-box/demo192/# */
.serviceContainer {
	font-family: 'Josefin Sans';
	font-weight: bolder;
    padding: 25px;
    margin: 20px 5px 5px 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px -5px rgb(95, 189, 215);
    background: rgb(171, 207, 239);
    color: rgb(5, 13, 19);
    transition: all 0.3s ease 0s;
}

.serviceContainer:hover {
	background: rgb(52, 104, 144);
    color: aliceblue;
    font-weight: 500;
}

.serviceContainer .description {
	/* color: rgb(5, 13, 19); */
    font-size: 15px;
    line-height: 27px;
    font-weight: bolder;
    text-align: left;
    margin: 0 0 15px;
    transition: all 0.3s ease 0s;
    display: block;
}

.serviceContainer:hover .description {
    display: none;
}

.serviceContainer .view-link {
    display: none;
}

.serviceContainer:hover .view-link {
    display: inline-block;
	color: rgb(138, 223, 216);
    font-size: 17px;
    font-weight: 800;
    transition: all 0.3s ease 0s;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgb(129, 146, 191), 0 0 1em rgb(76, 196, 229), 0 0 2em rgb(109, 186, 205);
    padding: 10px;
    margin-top: 5px;
}

.serviceContainer:hover .view-link:hover {
    display: inline-block;
	color: rgb(13, 83, 129);
    background-color: rgb(171, 207, 239);
    font-size: 17px;
    font-weight: 900;
    transition: all 0.3s ease 0s;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgb(129, 146, 191), 0 0 1em rgb(76, 196, 229), 0 0 2em rgb(109, 186, 205);
    padding: 10px;
    margin-top: 5px;
}

.serviceContainer .service-icon {
	/* color: rgb(5, 13, 19); */
    font-size: 55px;
    margin: 0 0 20px;
    transition: all 0.3s ease 0s;
}

.serviceContainer .title {
	/* color: rgb(5, 13, 19); */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 27px;
    text-transform: capitalize;
    text-shadow: 1px 1px 2px rgb(73, 97, 164), 0 0 1em rgb(71, 185, 217), 0 0 0.2em rgb(95, 189, 215);
    margin: 0 0 10px;
    transition: all 0.3s ease 0s;
}
