:root{
    --color-primary : #2289FF;
    --color-secondary : #314862 !important;
    --color-acent : #193F6A;
    --font-poppin : 'Poppins', serif;
}


/* Custom classes */

.bg-primary {
    background-color: var(--color-primary);
}

.color-primary {
    color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
} 

.color-secondary {
    color:var(--color-secondary) ;
}

.bg-acent {
    background-color: var(--color-acent);
}

.color-acent {
    color: var(--color-acent);

}

 /* Header style*/

header.header {
    width: 100%;
}

.header nav.navbar{
    box-shadow: none;
    color: var(--color-secondary);
}

.header nav.navbar .navbar-brand{
    font-family: var(--font-poppin);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-secondary);
}

.header nav.navbar .nav-link {
    color: var(--color-secondary);
    font-family: var(--color-secondary);
    font-weight: 500;
    padding: 10px 20px;

}
 
.header nav.navbar .nav-item {
    margin: auto;
}

.btn-theme {
    box-shadow: none;
    margin: 0;
    font-family : var(--font-poppin);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 8px 20px ;
    border-radius: 20px 0px 20px 20px;
}

.btn-theme:hover {
    background-color: var(--color-acent);
    box-shadow: none;
    color: #ffffff;
}

.btn-theme-2{
    box-shadow: 0 10px 20px 0px rgb(34 137 255/52%);
    margin: 0;
    font-family : var(--font-poppin);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 10px 30px ;
    border-radius: 30px;
}

.btn-theme2:hover {
    background-color: var(--color-acent);
    box-shadow: none;
    color: #ffffff !important;
}

.btn-play{
    box-shadow: none;
    margin: 0;
    font-family : var(--font-poppin);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 10px 16px ;
    border-radius: 100%;
    transition: 0.5s ease;
}

.btn-play:hover {
    background-color: var(--color-acent);
    box-shadow: none;
    color: #ffffff;
}


.header .navbar .nav-link:hover,
.header .navbar .nav-link:active{
    color: var(--color-primary);
}


/* Hero banner */

#hero-banner {
    width: 100%;
    padding: 80px 0;
    color: val(--color-secondary);
    font-family: var(--font-poppin);
}

#hero-banner p{
    font-weight: 400;
}

#hero-banner .image{
    border-radius:80px 80px 0px  80px ;
    overflow: hidden;
}

/* About Section */


#about-section {
    width: 100%;
    padding: 120px 0;
    background-color: #eeeeee;
    font-family: var(--font-poppin);
}

#about-section .image {
    border-radius: 80px 80px 0px  80px;
    overflow: hidden;
}

#about-section .image img{
   width: 100%;
   height: 400px;
   object-fit: cover;
}


#services-section {
    margin: 100px 0;
    padding: 100px 0;
    font-family: var(--font-poppin);
}

#services-section .services-shadow{
    padding: 20px 30px;
    text-align: center;
    border-radius: 0px 30px 30px 0px;
    margin: 10px;
}

#services-section .services-shadow i.fas{
    padding: 20px;
    width: 62px;
    background-color: #eeeeee;
    color: var(--color-primary);
    font-size: 20px;
    border-radius: 100%;
    text-align: center;
}

#services-section .services-shadow p{
    font-size: 13px ;
    font-weight:400;
}
 

/* footer */

footer {
    width: 100%;
    padding: 50px 0;
    background-color: var(--color-primary);
    color: white;
    font-family: var(--font-poppin);
    border-radius: 100px 0 0 0;
}



footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul li a{
    color: white;
    font-size: 13px;
}

footer ul li a :hover{
    opacity: 0.7;
    color: white;

}