@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

/* color */
:root{
    --sr-army : #941e29;
    --sr-army-50 : #941e2a93;
    --sr-dark : rgb(86, 86, 86);
    --sr-info :rgb(116, 188, 255);
    --sr-primary : rgb(55, 148, 235);
    --sr-light : rgb(248, 248, 248);
    --sr-white : rgb(255, 255, 255);
    --sr-orange : rgb(255, 115, 55);
    --sr-orange-50 : rgb(255, 137, 87);
    --sr-light-cool : rgb(241, 241, 241);
}

body{
    background-color: var(--sr-light);
}
.sub-navbar{
    background: var(--sr-army);
}


.sub-navbar .container a{
    text-decoration: none;
    color: var(--sr-white);
    font-size: 80%;
}

.text-dark-website{
    color: var(--sr-dark );
}

.text-pink{
    color: var(--sr-army);
}

.text-link{
    color: var(--sr-army);
    background: #363636;
    transition: 0.5s;
}

.text-link:hover{
    color: var(--sr-white);
}


.icon-sosmes a i:hover{
    color: var(--sr-info);
    transition: 0.5s;
}

.navbar .container .navbar-toggler
{
    border: none;
}

.navbar .container .navbar-toggler .bi-list{
    color: var(--sr-army);
}

.navbar-nav .nav-item .nav-link{
    color: var(--sr-army);
    border-bottom: 2px solid var(--sr-white);
}

.navbar-nav .nav-item .nav-link:hover{
    border-bottom: 2px solid var(--sr-army);
}

.container .title-website{
    color: var(--sr-army);
    font-family: 'Abril Fatface', cursive;
    font-style: italic;
}

/* Margin Top */

.mt-website-1{
    margin-top: 20px;
}

.mt-website-2{
    margin-top: 20px;
}

.mt-website-3{
    margin-top: 30px;
}

.mt-website-4{
    margin-top: 40px;
}

.mt-website-5{
    margin-top: 50px;
}

.mt-website-6{
    margin-top: 60px;
}

.mt-website-7{
    margin-top: 70px;
}

.btn-website{
    background: var(--sr-army);
    color: var(--sr-white);
    padding: 20%;
}

.btn-orange {
    color: var(--sr-white);
    background: var(--sr-orange);
    padding: 20%;
}

.btn-orange:hover {
    color: var(--sr-white);
    background: var(--sr-orange-50);
    border: none;
}

.btn-website:hover{
    background: var(--sr-army-50);
    color: var(--sr-white);
    border: none;
}

.owl-theme .owl-dots .owl-dot span{
    background:  var(--sr-army-50)
}

.bg-gradient{
    background: rgb(233,60,111);
    background: linear-gradient(114deg, rgba(233,60,111,1) 35%, rgba(238,121,182,0.896796218487395) 100%);
}

