@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

* {
    font-family: 'Montserrat', sans-serif; 
}

/* color */
:root{
    --sr-dark : rgb(0, 0, 0);
    --sr-info :rgb(116, 188, 255);
    --sr-primary : rgb(55, 148, 235);
    --sr-light : #f7f7f7;
    --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);
    --sr-gold : rgb(218, 173, 26);
}

.bg-gold{
    background: var(--sr-gold);
}

.text-gold{
    color: var(--sr-gold);
}

body {
    background-color: var(--sr-light);
}

.nav-link{
    color: var(--sr-light-cool);
    transition: 0.5s;
}

.nav-link:hover{
    color: var(--sr-gold);
    border-bottom: var(--sr-gold);
}

.navbar-toggler{
    border: none;
    color: white;
}

.img-banner {
    background-image: url('../assets/img/carousel-website-25.7.22-copy-2-1520x799.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
}

.text-p {
    width: 53%;
}

.img-banner .text-p p {
    font-size: 78px;
    color: var(--sr-light);
    margin-left: 130px;
    letter-spacing: 10px;
}

.img-banner .join-p{
    margin-top: 25px;
    margin-left: 130px;
}

.img-banner .join-p b {
    color: var(--sr-light);
    letter-spacing: 5px;
}

#tentang .text-dark-website{
    color: var(--sr-dark);
}

.title-website{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--sr-gold);
}

.owl-theme .owl-dots .owl-dot span{
    background:  var(--sr-gold);
}

@media only screen and (max-width: 720px) {
    .img-banner {
        background-image: url('../assets/img/carousel-website-25.7.22-copy-2-1520x799.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
    }

    .img-banner .text-p {
        width: 75%;
    }
    
    .img-banner .text-p p {
        font-size: 28px;
        color: var(--sr-light);
        margin-left: 25px;
        letter-spacing: 5px;
    }
    
    .img-banner .join-p{
        margin-top: 15px;
        margin-left: 25px;
    }
    
    .img-banner .join-p b {
        font-size: 12px;
        color: var(--sr-light);
        letter-spacing: 5px;
    }
    
}