/* GENERAL */

body{
    font-family:'Open Sans', sans-serif;
    background-color:#F5FAFD;
}

h1,h2,h3,h4,h5,h6{
    font-weight:600;
}

h1{
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    color: #493497;
    font-size:60px;
    margin-bottom:30px;
}

h2{
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    color: #493497;
    font-size:46px;
    display: inline-block;
}

h3{
    font-family:'Muli', sans-serif;
    line-height: 1.5rem;
    font-weight: 800;
    color: #3C424F;
    text-transform: uppercase;
    font-size:16px;
}

h4{
    font-family:'Muli', sans-serif;
    line-height: 1.5rem;
    font-weight: 800;
    color: #3C424F;
    font-size:14px;
    text-align:left;
    margin-bottom:10px;
}

h5{
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    color: #493497;
    font-size:35px;
    margin-bottom:30px;
}

.shadow-large-black{
    box-shadow: 0 10px 30px 0 rgba(49,52,57,.3),0 10px 30px rgba(0,0,0,.08);
}

.shadow-border{
    width: 100%;
    height: 0.3em;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.purpletext{
    color: #6F59B7;
}

section{
    padding:50px 0 20px 0;
    margin: 10px auto;
}

section .heading{
    text-align:center;
    font-weight:bold;
    padding-bottom:40px;
}

.grey-background{
    background-color:#F5FAFD;
    border-radius:25px;
}

ul{
    list-style: none;
}

.purplecolor{
    background-color:#8A77D0;
}

.greycolor{
    background-color:grey;
}

.divider-purple{
    background-color:#493497;
    opacity: 0.8;
    height:2px;
    width:75%;
    margin: 10px auto 30px;
}

.divider{
    background-color:white;
    opacity: 0.8;
    height:1px;
    margin-bottom:20px;
}


/* NAVBAR */

.navbar{
    background: rgb(42,46,87);
    text-transform: uppercase;
}

.nav-item span{
    margin-bottom:5px;
    font-size: 20px;
}

#myNavBar .navbar-nav{
    text-align: center;
}

#myNavBar .navbar-brand{
    font-size:30px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
}

#myNavBar .nav-link{
    color:white !important;
    margin: 0 6px;
    font-size:16px;
}

.nav-item.active, .nav-item:hover{
    background-color: grey;
    border-radius: 10px;
    color:#F5FAFD !important;
}

#logo{
    background-color:white;
    border: 2px solid grey;
    border-radius:35px;
    height:65px;
    width:65px;
    margin-right: 20px;
    padding: 7.5px 5.5px;
}

.img-logo{
    width:50px;
    height:50px;
}

.img-language{
    width:20px;
    height:20px; 
}

.icon-content{
    height:60px;
    width:60px;
    padding-top:15px;
    font-size:30px;
    color: white;
    background-color:#493497;
    text-align:center;
    border: 2px solid #493497;
    border-radius:10%;
    margin-bottom:20px;
}

.icon-service{
    margin-bottom:20px;
}

#buttonDropdown{
    background: rgb(42,46,87);
    color:#fff;
    padding: 10px 10px;
}

.dropdown-menu{
    background: rgb(42,46,87);
    border:none;
    min-width:50px !important;
}

.dropdown-menu li{
    width: 50px;
}

/* SKILLS */

#concept, #expertise{
    padding: 15px 0 15px 0;
    margin-bottom:30px;
}

#services .large{
    height:80px;
    width:80px;
    padding-top:20px;
    font-size:40px;
    color: #fff;
    text-align:center;
    border-radius:100%;
    margin-bottom:20px;
}

.button2{
    border: 1px solid #493497;
    background: white;
    color:black;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    font-size:25px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius:15px;
    text-decoration: none;
}

.button2:hover{
    background: #cecece;
}

.row-card{
    height:100%;
    margin:auto;
    padding: 10px 5px 0px;
}

#concept li::before{
    content: "►";
    color: #6F59B7;
    font-weight: bold;
    margin-right: 0.5em;
}

.padcard{
    height:100%;
    margin:auto;
    padding: 15px 2px 5px;
}

.nav-item button{
    font-weight: 600;
    font-size:25px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
}

#portfolio i {
    height:60px;
    width:60px;
    padding-top:15px;
    font-size:25px;
    color: white;
    background-color:#8A77D0;
    text-align:center;
    border: 2px solid #8A77D0;
    border-radius:20%;
    margin-bottom:20px;
    position:absolute;
    right: -5px;
    top:-5px;
}

#portfolio .col-sm-12{
    margin-bottom:10px;
}

#articles .col-md-6{
    margin-bottom:10px;
}

.content{
    padding:20px 20px 0px;
}

.img-articles{
    margin-top:10px;
}

/* FOOTER */

footer{
    background-color: rgb(42,46,87);
    padding: 20px 0 5px;
    opacity: 0.8;
}

footer span{
    color:#8A77D0;
    font-size: 30px;
    margin-right: 10px;
}

footer .icon{
    text-align:right;
}

footer .zoom:hover{
    font-size: 40px;
}

footer p{
    color: #fff;
    text-align: left;
    font-size:16px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    font-weight: normal;
}

.popover{
    background: #F5FAFD;
    font-size:16px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    color:#fff;
}

#contact-form{
    padding: 20px 30px;
}

.form-floating label{
    position: absolute;
    top:-15px;
}

#contact-form label{
    text-align:center;
    font-size:20px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
}

.comments{
    margin-top:5px;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;;
    font-style:italic;
    font-size:15px;
    color: red;
    height: 25px;
}

#contact-form input[type=submit]{
    margin: 20px auto 0px;
    display: block;
}

.button1{
    border: 1px solid #ddd;
    background: #493497;
    color:#fff;
    font-family: 'Rajdhani', 'Open Sans', sans-serif;
    font-size:25px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius:15px;
    transition:all 0.3s ease-in 0s;
}

.button1:hover{
    background: #3C424F;
    border-color: #8A77D0;
    font-weight:bold;
}

.message{
    text-align: center;
    margin-top:40px;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
}

.icon-send{
    color:#8A77D0;
    font-size:30px;
    margin-top: 10px;
    margin-right: 10px;
}