/* html {

} */

@font-face {
    font-family: 'EloquiaText'; /*a name to be used later*/
    src: url('fonts/EloquiaText-ExtraLight.otf'); /*URL to font*/
}

@font-face {
    font-family: 'EloquiaDisplay'; /*a name to be used later*/
    src: url('/fonts/EloquiaDisplay-ExtraBold.otf'); /*URL to font*/
}

body {
    background-color: black;

}

html {
    scroll-behavior: smooth;
}




@media screen and (max-width: 440px) {

ul {
    list-style-type: none;
    display: inline;
    
}

li {
    float: left;
    padding: 10px;
    font-family: EloquiaDisplay;
    font-size: 13px;

}




a {
    
    text-decoration: none;
    color: white;
    border: 1.5px solid white;
    border-radius: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: black;
}

}

@media screen and (min-width: 440px) {


ul {
    list-style-type: none;
    display: inline;
    
}

li {
    float: left;
    padding: 15px;
    font-family: EloquiaDisplay;
    font-size: 13px;

}

li a {
    text-decoration: none;
    color: white;
    border: 1.5px solid white;
    border-radius: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: black;
}

}

.hover-animate { 
    animation-name: hover-animate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}
 
@keyframes hover-animate {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

/* nav {
    position: fixed;
}
 */



a:hover {
    background-color: white;
    color: black;
}



@media screen and (max-width: 980px) {

    div.main h1 {
        margin: 0;
        width: auto;
        height: 0;
        margin-bottom: 100px;
        color: white;
        font-family: EloquiaDisplay;
        font-size: 110px;
        width: 100%;
        float: left;
        transform: translateX(-200%);
        opacity: 0;
        animation: slide-in-anim 1s ease-out forwards;



    }

    @keyframes slide-in-anim {
        20% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0%);
        }
    }


    h5 {
        font-size: 15px;
        width: auto;
        color: white; 
        float: right; 
        font-family: EloquiaText; 
        margin-left: 0px; 
        margin-top: 0px; 
        letter-spacing: 5px; 
        line-height: 40px;
        display: ;

    }

}

@media screen and (min-width: 980px) {

    div.main h1 {
        margin: 0;
        width: auto;
        height: 0;
        margin-bottom: 230px;
        color: white;
        font-family: EloquiaDisplay;
        font-size: 250px;
        width: 100%;
        float: left;
        transform: translateX(-200%);
        opacity: 0;
        animation: slide-in-anim 1s ease-out forwards;



    }

    @keyframes slide-in-anim {
        20% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0%);
        }
    }


    h5 {
        font-size: 19px;
        color: white; 
        float: right; 
        font-family: EloquiaText; 
        margin-left: 600px; 
        margin-top: -150px; 
        letter-spacing: 8px; 
        line-height: 60px;

    }

}




@media screen and (min-width: 1400px) {

    div.main h1 {
        margin: 0;
        width: auto;
        height: 0;
        margin-bottom: 230px;
        color: white;
        font-family: EloquiaDisplay;
        font-size: 250px;
        width: 100%;
        float: left;
        transform: translateX(-200%);
        opacity: 0;
        animation: slide-in-anim 1s ease-out forwards;



    }

    @keyframes slide-in-anim {
        20% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0%);
        }
    }


    h5 {
        font-size: 20px;
        color: white; 
        float: right; 
        font-family: EloquiaText; 
        margin-left: 600px; 
        margin-top: -200px; 
        letter-spacing: 10px; 
        line-height: 90px;

    }

}

section {

    margin-bottom: 80px;
}

/* About Section CSS */

div.about-para {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 4px;
    line-height: 45px;
    text-align: left;
}


/* Services Section CSS Code */


div h1.services-title {
    color: white;
    font-family: EloquiaDisplay;
    margin-top:90px;margin-bottom: 50px; 
}


div.webdesign {
    margin-bottom: 125px;
}

div h2.services-webdesign {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
}
div h2.services-webdesign2 {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    opacity: 5%;
    margin-top: -30px;
    margin-bottom: 20px;
}

div h6.services-webdesign-desc {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    width: 70%;

}

div.consulting {
    margin-bottom: 125px;
}

div h2.services-consulting {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    text-align: right;
}
div h2.services-consulting2 {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    opacity: 5%;
    margin-top: -30px;
    margin-bottom: 20px;
    text-align: right;
}

div h6.services-consulting-desc {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    width: auto;
    text-align: right;

}

div.graphiccontent {
    margin-bottom: 125px;
}

div h2.services-graphiccontent {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
}
div h2.services-graphiccontent2 {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    opacity: 5%;
    margin-top: -30px;
    margin-bottom: 20px;
}

div h6.services-graphiccontent-desc {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    width: 70%;

}


div h2.services-seo {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    text-align: right;
}
div h2.services-seo2 {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    opacity: 5%;
    margin-top: -30px;
    margin-bottom: 20px;
    text-align: right;
}

div h6.services-seo-desc {
    color: white;
    font-family: EloquiaText;
    letter-spacing: 3px;
    width: -70%;
    text-align: right;

}


div.seo {
    margin-bottom: 125px;
}

div.work-image {
    padding-bottom: 70px;
    display: inline-block;
}

div h1.work-title {
    color: white;
    font-family: EloquiaDisplay;
    margin-top:90px;margin-bottom: 20px; 
}

div.work-image:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

div.about-image:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
}