@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Courgette&family=Lato&family=Source+Sans+Pro:wght@600&family=Sriracha&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

*{ box-sizing: border-box }
a{text-decoration: none; color: inherit}
a:hover{text-decoration: none; color: inherit}

body{
    font-family: Roboto, arial;
    margin: 0;
    line-height: 1.7;
    overflow-x: hidden;
    max-width: 100vw
}
.link-in-text{color: #007bff; text-decoration: none}
.link-in-text:hover{color: #007bff; text-decoration: underline}

/* Nav bar */
.navbar .navbar-brand {
    font: normal 2rem Roboto, arial;
    color: #fff;
}
.navbar .navbar-brand img{width: 5rem; filter: brightness(1.3)}
.navbar {
    padding: 0;
    z-index: 10;
    box-shadow: 0 0rem 1rem rgb(0 0 0 / 30%);
    background-color: transparent;
    width: 100%;
    -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}/*
.navbar-dark .navbar-brand:hover{
    color: #000
}*/
.navbar .navbar-nav{align-items: center}
.navbar .navbar-nav .nav-link, .btn-secondary {
    font: normal 20px Roboto, arial;
    color: #fff;
    padding: 1.8rem 1rem;
    border: none;
    background-color: transparent;
    border-radius: 0
}
.navbar:hover{color: #fff}
.navbar .navbar-toggler{margin: 0.8rem 0}
.navbar .navbar-toggler span{
    display: block;
    width: 2rem;
    height: .2rem;
    background-color: rgba(0, 0, 0, .6);
    margin: .5rem 0;
    border-radius: 5rem;
}
.navbar .navbar-nav .active>.nav-link, .navbar .navbar-nav .nav-link:hover{
    color: #007eea
}
.navbar .navbar-nav .active>.nav-link::after{
    content: "";
    position: relative;
    bottom: -.5rem;
    display: block;
    height: 0.2rem;
    background-color: #007eea;
}
.navbar .navbar-nav .nav-link.Registration{
    padding: .7rem;
    background-color: #007eea;
    color: #fff;
}
.navbar .navbar-nav .nav-link.Registration:hover{background-color: #006ac5}
.fixed-nav{
    position: fixed !important;
    top: -5.4rem;
    opacity: .99;
    background-color: #fff;   
    transform: translateY(5.3rem);
    box-shadow: 0 0rem 1rem rgba(0, 0, 0, .3);
    height: 5.3rem
}
.fixed-nav .navbar-brand{color: #000}
.fixed-nav .navbar-brand:hover{color: #000}
.fixed-nav .navbar-toggler span{background-color: rgba(0, 0, 0, .6) !important}
.fixed-nav .navbar-toggler{border-color: rgba(0, 0, 0, .1) !important}
.fixed-nav-hide{transform: translateY(0)}

.btn-secondary:active{color: #c6f7f1; background-color: #54be6d; border: none}
.btn-secondary:focus{color: #c6f7f1; background-color: #54be6d; border: none}
.show>.btn-secondary.dropdown-toggle:focus{box-shadow: none !important}

/* header.title */
header.title{
    font-weight: 600;
    font-size: 2.3rem;
    color: #007eea;
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
    letter-spacing: 0.07rem;
}
header.title::after{
    content: "";
    width: 5rem;
    height: 0.28rem;
    margin: auto;
    margin-top: .8rem;
    background-color: #007eea;
    display: block;
}

/* footer */
footer{
    color: #dddddd;
    margin-top: 5rem;
    background: #323a45;
    border-top: 3px solid #027851;
}
footer .row{
    justify-content: space-between;
    padding: 2vw;
    margin-top: 2rem;
    margin-bottom: 2rem;
    align-items: center;
}
footer .row img{
    width: 10rem
}
div.links-div h5{display: inline-block}
ul.links-ul{display: inline-block}
ul.links-ul li{
    display: inline-block
}
footer .row li a:hover{
    font-weight: bold
}
ul.links-ul li i{
    font-size: 1.2rem;
    color: #FFF;
    border-radius: 100%;
    background-color: #000;
    width: 2.195rem;
    text-align: center;
    padding: .5rem 0;
}
footer .row div.follow{padding-top: 3rem}
footer .row div.pages{padding-left: 4rem}
footer .row div.logo{padding: 0; display: flex; align-items: center;}
footer .row div.text{padding-left: 0}
footer .row h5{margin-left: 2rem}

.follow .fa-instagram:hover{background-image: linear-gradient(180deg, #8e3dbd, #c53187, #fa802b, #fdd679)}
.follow .fa-whatsapp:hover{background-color: #00e676}
.follow .fa-facebook:hover{background-color: #4267b2}
.follow .fa-facebook-messenger:hover{background-color: #0096ff}
.follow .fa-youtube:hover{background-color: #f00}

.footer-bottom{
    height: 2.2rem;
    background-color: #21262d;
    border-top: .1rem solid #5f5f5f;
}

/* Scroll Effects */
.fade-in, .fade-right, .fade-left{
    -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0;
}
.fade-in{transform: scale(0.5)}
.fade-right{transform: translateX(-2rem)}
.fade-left{transform: translateX(2rem)}

.appear{transform: scale(1); opacity: 1}
.disappear{transform: scale(0.5); opacity: 0}

/* Media */

@media(max-width:500px){
    
    .navbar .navbar-toggler{padding: .2rem .5rem; margin-right: .2rem;}
    .navbar .navbar-toggler span{width: 1.3rem; margin: .4rem 0}
    .navbar .navbar-brand{font-size: 1.4rem}
    .navbar .navbar-brand img{width: 4rem}
    .upper-bar ul.links-ul li i{font-size: .9rem; width: 1.9rem}
    .upper-bar .container .column span{margin-right: 10px}
}
@media(max-width:575px){
    footer .row div.pages{padding-left: 1rem; text-align: center}
    footer .row div.follow{text-align: center}
    footer .row div.follow h5{margin-left: 0}
    .carousel-caption h5{font-size: 1.3rem!important}
    .carousel-caption p{font-size: 1.05rem!important}
    header.title{font-size: 1.8rem}
}
@media(max-width:767px){ /* 768px */
    footer .row div.logo{
        border-bottom: .03rem solid #5f5f5f;
        text-align: center;
        margin-bottom: 2rem;
        display: block
    }
    footer .row{justify-content: center}
    
}
@media(max-width:780px){
    .upper-bar .container{max-width: none}
}
@media(max-width:991px){
    .navbar .navbar-nav{background-color: rgba(0, 0, 0, .8); border-radius: 0.35rem}
    .navbar .navbar-nav .nav-link{color: #fff}
}