:root {
    --pr-color : #29D9D5;
    --bg-color : #18181C;
    --sc-color : #E0E0E0;
    --gray-color : #BDBDBD;
    --gray1-color : #828282;
}
body{
    background-color: var(--bg-color);
}
.nav-color{
    background-color: var(--bg-color);
    transition: ease-in-out;
}


/* Navbar */
.font-roboto {
    font-family: 'Roboto', sans-serif;
    color: var(--sc-color);
}
.font-slab {
    font-family: 'Roboto Slab', serif;
    color: var(--sc-color)
}
.nav-link.active {
    color: var(--secondary-color);
}
.text-bgcolor{
    color: var(--bg-color);    
}
.bg-color{
    background-color: var(--bg-color);
}
.primary-color{
    color: var(--pr-color);
}
.secondary-color{
    color: var(--sc-color);
}
.gray-color{
    color: var(--gray-color)
}
.gray1-color{
    color: var(--gray1-color);
}
.navbar-fixed-top.scrolled {
    background-color: var(--bg-color) !important;
    transition: background-color 200ms linear;
}


/* Section 1*/


.section1{
    background-image: url(../img/bg1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-line h1{
    font-weight: 500;
    font-size: 60px;
}
.email-border{
    padding: 12px 32px;
    width: 176px;
    height: 55px;
    background: #29D9D5;
    border-radius: 4px;
}
.text-color:hover{
    color: var(--pr-color);
}

/* Section 2 */


.section2{
    background-image: url(../img/bg2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-line2 h1{
    font-weight: 500;
    font-size: 48px;
    text-align: center;
}

/* Section 3 */
.section3{
    background-image: url(../img/bg3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Section 4 */
.section4{
    background-image: url(../img/bg4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Section 5 */

.section5{
    background-image: url(../img/bg5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Footer */
.footer{
    background-image: url(../img/footerbg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Modal */
.tittle-modal{
    font-weight: 500;
    font-size: 18px;
}
.content-modal{
    font-weight: 400;
    font-size: 12px;
    line-height: 170%;
}

/* SVG */
.icon:hover {
    fill: var(--pr-color);
}
.svgoutline {
    fill: #0d6efd;
}
.btn:hover .svgoutline {
    fill: #fff;
}