@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background: rgb(146,156,206);
    background: linear-gradient(108deg, rgba(146,156,206,1) 12%, rgba(119,24,245,1) 100%); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5 { font-family: "Jost", sans-serif; font-weight: 700; font-style: normal; color: #FFF; font-size: 2.2em; }
p { font-family: "Jost", sans-serif; font-optical-sizing: auto; font-style: normal; color: #FFF; font-size: 1.2em; font-weight: 400; }

/*Navbar*/
.navbar { background-color: #000 !important; }
.navbar img { max-width: 200px; height: auto; }
.navbar ul { text-align: center; }
.navbar li a {  color: #FFF; font-weight: 500; }

/*Section*/
section { text-align: center; }
section h1 { color: #000 !important; font-size: 2.5em; }
section p { font-size: 1.3em; padding: 1% 0; }

/*Hero Section*/
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://risaraeanne.co.za/images/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

#hero h1 { color: #FFF !important; font-size: 3em; }

/*About Section*/
#about .img-fluid { width: 80%; border-radius: 20px; }

/*Awards Section*/
#awards { background-color: #000; }
#awards h2 { padding-bottom: 3%; }
#awards .card { border: 1.5px solid #9592923d;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); }
#awards .card-header { font-size: 1.5em; font-weight: 500; }

#awards .card-body {
    background: linear-gradient(rgba(0, 0, 0, 0.69), rgba(0, 0, 0, 0.69)), url("https://risaraeanne.co.za/images/award-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#awards hr { opacity: 70%; }
#awards .card p { color: #FFF; font-weight: 400; text-align: left; font-size: 1.2em; }
#awards .card-body i { color: rgba(84, 97, 190, 0.8); font-size: 1.2em; padding-right: 1%;}

/*Services Section*/
#services hr { opacity: 70%; }
#services .card { border: none; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
#services .card  li { background: transparent; color: #FFF; }

#services .col-md-4:nth-child(1) .card {
    background:  linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://risaraeanne.co.za/images/pooja-img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 2% 2%;
}

#services .col-md-4:nth-child(2) .card {
    background:  linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://risaraeanne.co.za/images/party-img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 2% 2%;
}

#services .col-md-4:nth-child(3) .card {
    background:  linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("https://risaraeanne.co.za/images/dj-img.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 2% 2%;
}

/*Contact Section*/
#contact { background-color: #000; }
#contact a { background-color:transparent; border: 2px solid #FFF; padding: 1% 4%; border-radius: 30px; }
#contact a:hover { background-color: rgba(146,156,206,1); border: none; transition: 0.5s; }
#contact .socials { margin-top: 5%; }
#contact .socials a { border: none; }
#conact .socials .bi-instagram { color: rgb(241, 145, 161) !important; }
#contact .row {margin-top: 1%;}

/*Footer Section*/ 
#footer p { color: #FFF; padding: 0; }
#footer a { text-decoration: none; color: #FFF; }
#footer a:hover { color: #000; transition: 0.7s; }

#footer i {
  font-size: 1.5em;
  padding: 6px 10px;
  margin-right: 10px;
  color: #000;
  border: 2px solid #000;
  border-radius: 50px;
}

#footer a { text-decoration: none; }
#footer i:hover { background-color: #000; color: #FFF; }

@media (max-width: 768px) {
    /*Navbar*/
    .navbar img { max-width: 200px; height: auto; }

    /*About*/
    #about .img-fluid {width: 100%; }

    #about h2, #about p { text-align: center; padding: 0 3%; }
}