/*global rules start*/
body {
    --bgColor1: #011627;
    --whiteColor: #FDFFFC;
    --blueColor: #4285F4;
    --redColor: #DB4437;
    --yellowColor: #F4B400;
    --greenColor: #0F9D58;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.container {
    width: 90%;
    margin: auto;
}

/*golbal rules end*/

/*header start*/
header {
    min-height: 500px;
}

header nav {
    background-color: var(--bgColor1);
    color: var(--whiteColor);
    padding: 7px
}

header nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav ul {
    list-style-type: none;
}

header nav ul li {
    display: inline-block;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
}

header nav ul li a {
    text-decoration: none;
    color: var(--whiteColor);
}

header nav ul li a:hover {
    color: #CCC
}


header .heading {
    text-align: center;
    background-color: var(--blueColor);
    padding: 30px;
}

header .heading .boxes {
    display: flex;
}

header .heading .boxes .box {
    margin: 12px;
    padding: 10px;
    background-color: var(--whiteColor);
    flex-basis: 25%;
    box-shadow: 5px 5px 15px rgba(85, 85, 85, 0.671)
}

header .heading .boxes .box:first-of-type {
    border-top: 5px solid var(--greenColor)
}

header .heading .boxes .box:nth-of-type(2) {
    border-top: 5px solid var(--redColor);
}

header .heading .boxes .box:nth-of-type(3) {
    border-top: 5px solid var(--yellowColor);
}

header .heading .boxes .box:nth-of-type(4) {
    border-top: 5px solid var(--bgColor1);
}

header .heading .boxes .box i {
    display: block;
    text-align: left
}

header .heading .boxes .box:first-of-type i {
    color: var(--greenColor);
}

header .heading .boxes .box:nth-of-type(2) i {
    color: var(--redColor);
}

header .heading .boxes .box:nth-of-type(3) i {
    color: var(--yellowColor);
}

header .heading .boxes .box:nth-of-type(4) i {
    color: var(--bgColor1);
}


/*header end*/

/*slider start*/
.slider {
    position: relative;
    height: 600px;

}

.slider .slide {
    height: 100%;
    width: 100%;
    padding: 10px;
    position: absolute;
    left: 0;
    top: 0
}

.slider .slide:first-of-type {
    background-image: url('../img/img1.jpg');
    background-size: cover;
}

.slider .slide:nth-of-type(2) {
    background-image: url('../img/img2.jpg');
    background-size: cover;
}

.slider .slide:nth-of-type(3) {
    background-image: url('../img/img3.jpg');
    background-size: cover;
}

.slider .slide h1 {
    margin-top: 0;
    color: var(--whiteColor);
    text-align: center;
    padding: 30px;
    font-size: 50px;
    width: 50%;
    background-color: var(--bgColor1);
    margin: 20px auto 100px auto
}

.slider q {
    display: block;
    width: 70%;
    margin: auto;
    padding: 7px;
    text-align: center;
    color: #FFF;
    font-size: 30px;
    font-weight: 550;
    font-style: italic;
    background-color: rgba(0, 0, 0, 0.63);
}

.slider .arrows {
    color: var(--whiteColor);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 99;
    width: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}

.slider .arrows span i {
    cursor: pointer;

}


.comingSlide {
    animation: coming .5s ease-in-out;
    -webkit-animation: coming .5s ease-in-out;
}

@keyframes coming {
    0% {
        opacity: .0;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }

    50% {
        opacity: .5;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
        -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
        -o-transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}



/*slider end*/

/*activtes start*/
.activities {
    height: 700px;
    background-color: #DDD;
    overflow: hidden;
}

.activities .container {
    overflow: hidden;

}

.activities .container img,
.activities .container .cards {
    float: left;
    width: 50%;
}

.activities .cards {
    padding-top: 20px;
    box-sizing: content-box;
}

.activities .cards .card {
    color: var(--whiteColor);
    padding: 30px 60px;
    margin-bottom: 7px;

}

.activities .cards .card:first-child {
    background-color: var(--blueColor);
}

.activities .cards .card:nth-child(2) {
    background-color: var(--greenColor);
}

.activities .cards .card:nth-child(3) {
    background-color: var(--redColor);
}

.activities .cards .card p {
    line-height: 1.8;
    font-size: 18px;
}


/*activities end*/


footer {
    background-color: var(--bgColor1);
    color: #EEE;
    margin-bottom: 0
}

footer .container {
    justify-content: space-between;
    display: flex;
    padding: 30px;
}



footer .logo img {
    width: 50%;
}

footer .box h3 {
    margin-bottom: 20px;
}



footer .box ul {
    list-style: none;
    list-style-position: inside;
    padding-left: 5px
}

footer .box ul li {
    margin-bottom: 15px;
}

footer .box:last-of-type ul li {
    display: inline-block;
    font-size: 35px;
    margin-left: 10px;
}

footer .box:last-of-type ul li:hover {
    color: #6c5ce7;
    cursor: pointer;
}

footer .credit {
    background-color: #000;
    color:var(--whiteColor);
    display: flex;
    justify-content: space-evenly;
    padding: 15px;
   

}
footer .credit p{
    margin: 0;
    padding: 7px;
}
footer  .credit .fa-heart {
    color: #F00;
    font-size: 20px
}