/*Background  colours*/

.bg-secondary {
    background: linear-gradient(to right, #8C9EFF, #B388FF);
}

.bg-transparent {
    background: rgba(0,4,46,0.25);
}

.bg-semi-transparent {
    background: rgba(0,4,46,0.75);
}

.bg-transparent-light {
    background: rgba(255,255,255, 0.45);
}

.bg-blue-gradient {
    background: linear-gradient(#18AFFF, #0E208C);
    color: white;
    text-align: center;
    
}

.bg-purple-gradient {
    background: linear-gradient(#A651D0, #411F51);
    color: white;
    text-align: center;
}

.bg-red-gradient {
    background: linear-gradient(#FF0900, #5A0300);
    text-align: center;
    color: white;
}

.bg-blue-purple {
    background: linear-gradient(to bottom right, #3023AE, #C86DD7);
    color: white;
    text-align: center;
}

.bg-blue-green {
    background: linear-gradient(to bottom right, #0E228D, #6FF062);
    color: white;
    text-align: center;
}

.bg-turquoise {
    background: linear-gradient(to bottom, #b3ecec, #3bd6c6);
    color: #263238;
}

.bg-orange-gradient {
    background: linear-gradient(#F9E28B,#E2843F);
    color: #452DB3;
    text-align: center;
}

.bg-green-gradient {
    background: linear-gradient(#1CD915, #106F0C);
    color: white;
    text-align: center;
}

/* Layouts */

.header {
    padding: 1rem;
}


.shaddow-effect {
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.25);
}

.rounded {
    border-radius: 10px;
}

.space-5 {
    height: 5%;
}


.space-10 {
    height: 10%;
}


.space-15 {
    height: 15%;
}


.space-20 {
    height: 20%;
}


.space-30 {
    height: 30%;
}


.space-40 {
    height: 40%;
}


.space-50 {
    height: 50%;
}

p {
    font-size: 1.1rem;
}


/* Special effects */

.dropdown div {
    transition: 2s;
    transition-delay: .5s;
}

.dropdown:hover div {
    display: list-item;
}

.nav-link:hover {
    cursor: pointer;
}

/*  size responsive */
@media screen and (min-width:576px) {
    h3.variable {
        font-size: 2.25rem;
    }
}

@media screen and (min-width:768px) {
    h3.variable {
        font-size: 2.75rem;
    }
}

@media screen and (min-width:992px) {
    h3.variable {
        font-size: 3rem;
    }
}

@media screen and (min-width:1200px) {
    h3.variable {
        font-size: 3.5rem;
    }
}