@charset "UTF-8";
/* Home Page Stylesheet */

/* Hero Styles */
.hero {
    background: rgb(39,89,193);
    background: -moz-radial-gradient(circle, rgba(39,89,193,1) 0%, rgba(24,2,46,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(39,89,193,1) 0%, #18022e 100%);
    background: radial-gradient(circle, rgba(39,89,193,1) 0%, rgba(24,2,46,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2759c1",endColorstr="#18022e",GradientType=1);
    padding-top: 100px;
    padding-bottom: 100px; 
}
.hero1{
    color: #f2f2f2;
    text-align:center;
    margin-left: 10%;
    margin-right: 10%;
}

/* h Styles */
h1{
    font-size:64px;
}
h2{
    font-size:32px;
}
#actioncall{
    color:#4842DC;
    font-size:38px;
}
.fakelink {
    color:#03A9F4;
    font-weight: bold;
}

/* Main Content Styles */ 
#about{
    padding-top:10px;
    padding-bottom:10px;
}
#team{
    background-color:#E6E6E6;
    padding-bottom: 10px;
}
#services{
    background-color:#F4F4F4;
    position: relative;
    width:100%;
    padding-bottom: 10px;
}
#call p{
    text-align: center;
}

/* Service Boxes */
.servicesbox{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
}
.svs{
    width:70%;
}
.svb{
    width:20%;
    align-self: end;
    background-color: #4842DC;
    color:white;
    box-shadow: 10px 10px #929292;
}
.svb ul {
    list-style: square;
}

/* Team Styles */
.row {
    width: 100%;
    display:flex;
	flex-direction: column;
}
.teamrows{
    display:flex;
    flex-direction: row;
}
.columns {
	float: left;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
}
.row .columns p {
	padding-left: 10px;
	padding-right: 10px;
}

.thumbnail {
	width: 100px;
	height: 100px;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}

/* Dark Mode Styles */
#team.darkMode{
    background-color:#1C1B1E;
}
#services.darkMode{
    background-color: #252427;
}

/* Media Queries */
@media (max-width: 700px) {
 
    h1 {
        font-size:8.5vw;
    }
    h2 {
        font-size:5vw;
    }
    .row{
        flex-direction: column;
    }
    .teamrows{
        flex-direction: none;
        display: block;
    } 
    .columns{
        width: 100%
    }
}
@media (max-width: 800px) {
    .servicesbox{
        flex-direction: column;
    }
    .svs{
        width:100%;
    }
    .svb{
        align-self: center;
        width: 100%;
    }
}

@media (min-width: 1300px) {
    .row{
        flex-direction: row;
    }
    .teamrows{
        display: inline-flex;
    }
    .columns{
    }
}

@media (max-width: 350px){
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 18px;
    }
}