@import url('https://fonts.googleapis.com/css?family=Calistoga|PT+Sans&display=swap');

html {
    scroll-behavior: smooth;
  }

.color-primary-0 {
    color: #629CF3
}

/* Main Primary color */

.color-primary-1 {
    color: #F3F8FE
}

.color-primary-2 {
    color: #9DC1F6
}

.color-primary-3 {
    color: #2B7CF2
}

.color-primary-4 {
    color: #0363F0
}

/* General styles */

body {
    margin: 0%;
    font-family: 'PT Sans','Lexend Deca', sans-serif;
    background-color: #9DC1F6;
    /* color: black; */
}

main {
    width: 100vw;
}

.bg-image {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.box-shadow-full {
    padding: 3.5rem 1.5rem;
    position: relative;
    background-color: #fff;
    margin-bottom: 3rem;
    z-index: 2;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}

.box-shadow-img {
    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.3);
}

/* Section */

.sect-padtop4 {
    padding-top: 4rem;
}

.sect-margtop4 {
    margin-top: 4rem;
}

/* Navigation bar */
#mainNavbar{
    transition: 2s;
}

#mainNavbar i{
    margin-right: 0.5rem;
}

#mainNavbar a{
    color: white;
}

.nav-item{
    font-size: 1.3rem;
}

.navbar-brand{
    font-family: 'Calistoga', cursive;
    font-size: 2rem;
}

.menu-clear {
    background: none !important;
    padding-top: 1.5rem;
}

/* Home section*/

#home {
    height: 100vh;
    flex-direction: column;
    text-align: center;
    color: #fff;
}

.home-content {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-title {
    font-weight: bolder;
    font-size: 3em;
}

.home-subtitle {
    font-weight: lighter;
    font-size: 2.5em;
}

/* About section */

.about-label{
    font-weight: bold;
    font-size: 1.1rem;
}

.about-title{
    font-size: 2rem;
  position: relative;
}

#about img{
    margin-left: 1rem;
}

.skl-icon{
    font-size: 2rem;
}

footer {
    text-align: center;
    padding: 20px 0px;
    color: white;
    background-color: #134074;
    font-weight: bolder;
}

/* service box */
.serviceBox{
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    padding: 50px 10px 20px;
}
.serviceBox .service-icon{
    color: #B53471;
    background: #fff;
    font-size: 50px;
    line-height: 120px;
    width: 120px;
    height: 120px;
    margin: 0 auto 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),-14px -14px 0px #B53471;
    transform: rotate(45deg);
    transition: all 0.3s;
}
.serviceBox .service-icon i.fa{ transform: rotate(-45deg); }
.serviceBox:hover .service-icon{
    font-size: 60px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8),-14px -14px 0px #B53471;
}
.serviceBox .title{
    color: #B53471;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.serviceBox .description{
    color: #888;
    font-size: 15px;
    line-height: 25px;
    margin: 0 0 15px;
}
.serviceBox .read-more{
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 15px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.serviceBox .read-more:hover{
    color: #B53471;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.serviceBox .read-more:before{
    content: '';
    background: #B53471;
    height: 100%;
    width: 100%;
    transform: scale(1) skew(-20deg);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all 0.3s;
}
.serviceBox .read-more:hover:before{ transform: scale(0) skew(-20deg); }
.serviceBox.purple .service-icon{
    color: #5758BB;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),-14px -14px 0px #5758BB;
}
.serviceBox.purple:hover .service-icon{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8),-14px -14px 0px #5758BB;
}
.serviceBox.purple .title,
.serviceBox.purple .read-more:hover{
    color: #5758BB;
}
.serviceBox.purple .read-more:before{ background: #5758BB; }
.serviceBox.blue .service-icon{
    color: #17a8d8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),-14px -14px 0px #17a8d8;
}
.serviceBox.blue:hover .service-icon{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8),-14px -14px 0px #17a8d8;
}
.serviceBox.blue .title,
.serviceBox.blue .read-more:hover{
    color: #17a8d8;
}
.serviceBox.blue .read-more:before{ background: #17a8d8; }
.serviceBox.green .service-icon{
    color: #149e5d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),-14px -14px 0px #149e5d;
}
.serviceBox.green:hover .service-icon{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8),-14px -14px 0px #149e5d;
}
.serviceBox.green .title,
.serviceBox.green .read-more:hover{
    color: #149e5d;
}
.serviceBox.green .read-more:before{ background: #149e5d; }
@media only screen and (max-width:990px){
    .serviceBox{ margin: 0 0 40px; }
}

.back-to-top {
    z-index: 500;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}