@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');

/* GLOBAL */


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {font-size: 2.5em !important;} @media (max-width: 768px){h1 {font-size: 26px!important;}}
h2 {font-size: 1.8em!important;} @media (max-width: 768px){h2 {font-size: 22px!important;}}
h3 {font-size: 1.4em!important;} @media (max-width: 768px){h3 {font-size: 20px!important;}}
h4 {font-size: 1.3em!important;} @media (max-width: 768px){h4 {font-size: 18px!important;}}
h5 {font-size: 1.2em!important;} @media (max-width: 768px){h5 {font-size: 17px!important;}}
h6, .h6 {font-size: 1.1em!important;} @media (max-width: 768px){h6 {font-size: 16px!important;}}

.h6 {
    color: #000000 !important;
    font-weight: bold;
}

p {
    font-size: 1em;
}

body {
    width: 100%;
    font-family:Arial, Helvetica, sans-serif;
    height: 100%;
    background: url("/img/pexels-la-miko-3616773.jpg");
} 


@media (max-width: 768px)
 {

    body {
        font-size: 16px;
    }
 }


/* NAVIGATION SECTION */

.navbar {
    background-color: #1a191d;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 1;
    width: 100%;
    max-width: auto;
    margin: auto;
}

.learn-more {
    margin-top: 2em;
}

.button-text a {
    color: #000000;

}


.navbar.active {
    z-index: 2;
    position: fixed;
    background-color: #fff;
    

    /*top: -120px;*/
}

.navbar.active .navbar-toggler .fas {
    color: rgba(245, 18, 18, 0.842);
} 



.navbar-toggler {
    transition: all 0.2s ease-in-out;
}

.navbar-toggler .fas {
    color: rgb(255, 255, 255);

}



.navbar-brand {
    transition: all 0.2s ease-in-out;
    padding:0 4em !important;
}

.nav-item .nav-link {
    color: #fff!important;
}


.navbar a,
.nav-item a {
    color: #ffffff;
    transition: all 0.2s ease-in-out;
}


.navbar a:not(.navigation-brand):hover,
.navbar.active .nav-link:hover {
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(245, 18, 18, 0.842), 
                0 0 25px rgba(245, 18, 18, 0.842), 
                0 0 50px rgba(245, 18, 18, 0.842), 
                0 0 200px rgba(245, 18, 18, 0.842);
    transform: scale(0.98);
}

.navbar.active a,
.navbar.active .navbar-brand strong,
.navbar.active .navbar-brand span:nth-child(4){
    color: #1a191d !important;
}


.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 0 4em!important;
}

.navbar-nav .nav-item {
    text-wrap: nowrap;
}



.nav-link a {
    color: #fff;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    backdrop-filter: blur(35px);
    overflow-x: hidden;
    transition: 0.2s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.563rem;
    color: rgba(245, 18, 18, 0.842);
    display: block;
    transition: all 0.2s ease-in-out;
}

.sidenav a:hover {
    color: rgba(245, 18, 18, 0.842);
    transform: scale(0.98);
    font-weight: 600;

}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 2.25rem;
    margin-left: 50px;
    
}


.fa,
.fab {
    font-size: 1.25rem;
}


.text-white h1 {
    font-size: 3em!important;
}

.text-white h2 {
    font-size: 2em!important;
}

/* NAVIGATION SECTION ENDS HERE */


/* Header content */



.btn {
    color: #000000;
    backdrop-filter: blur(15px);
    margin-top: 20px;
    transition: all 0.1s ease-in-out;
    border-width: 4px;
}


.fas {
    color: #ffffff;
}

.arrow-top .fas {
    position: fixed;
    display: inline-block;
    color: #ffffff;
    font-size: 0.95rem;
    backdrop-filter: blur(8px);
    padding: 18px;
    text-align: center;
    bottom: 50px;
    right: 50px;
    z-index: 1;
    border-radius: 50%;
    background: rgba(245, 18, 18, 0.842);
}

.arrow-top .fas:hover {
    color: #ffffff;
    background-color: #000000;
}


.arrow-top.pageUp .fas {
    animation-duration: 1s;
    animation-name: moveInRight;
    transition: all 0.2s ease-in-out;
}


#section07 a span {

    position: absolute;
    text-align: center;
    width: 21px;
    height: 21px;
    border-left: 2px solid rgba(245, 18, 18, 0.842);
    border-bottom: 2px solid rgba(245, 18, 18, 0.842);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb07 2s infinite;
    animation: sdb07 2s infinite;
    opacity: 0;
    bottom: 1em;
    
    /*margin-top: 140px;*/

}

#section07 a span:nth-of-type(1) {
    bottom: 110px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

#section07 a span:nth-of-type(2) {
    bottom: 95px;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

#section07 a span:nth-of-type(3) {
    bottom: 80px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

@-webkit-keyframes sdb07 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes sdb07 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* .navbar, */




/* SKILLS SECTION */


#skills-section {
    width: 95%;
    max-width: 1476px;
    margin: auto;e
    border-radius: 3rem;
    background: url('/img/pexels-la-miko-3616773.jpg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    /*padding-bottom: 2rem;*/
}

.skills h2 {
    letter-spacing: 5px;
    color: #000000;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: rgba(245, 18, 18, 0.842);
    text-underline-offset: 12px;
    padding-top: 25px;
}


.skills-flex {
    padding-top: 20px;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 150px;
}




.list-group-item {
    background-color: transparent;
    border: thin solid transparent;
    font-weight: 600;
}


li {
    list-style-type: none;
}


.skills-list li::before {
    content: "\2022 ";
    color: rgba(245, 18, 18, 0.842);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}


/* SKILLS SECTION ENDS HERE */




/* SERVICES SECTION */

.services {
    /*margin: 50px 0 250px 0;*/
    padding: 4em 0em;
    position: relative;
    max-height: auto;
}

.services h2 {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: rgba(245, 18, 18, 0.842);
    text-underline-offset: 12px;
    text-align: center;
}

.container-services {
    max-height: auto;
    text-align: center;
    padding-top: 50px;
}

.container-services .row {
    display: flex;
    gap: 10px;
    max-width: 1476px;
    margin: auto;
}

.container-services .fas,
.container-services .fa-wordpress
{
    color: rgba(245, 18, 18, 0.842);
    font-size: 2.125rem;
}

.col-md {
    color: #000000;
    transition: all 0.1s ease-in-out;
    cursor: cell;
    padding: 15px;
}

.col-md h4 {
    margin-top: 10px;
}

.col-md h6 {
    font-size: 0.875rem;
}

.col-md:hover {
    transform: scale(0.96);
}


/* SERVICES SECTION ENDS HERE */


/* PROJECT SECTION */

/* Within style tags in your html file */

.grid-item {
    float: left;
}

.grid-item img {
    display: block;
    max-width: 100%;
}

.projects {
    margin: auto;
    text-align: center;
    max-width: 1476px;
    padding: 4em 0;
}

.grid {
    width: 100%;
    max-width: 1476px;
    margin: auto;
    padding-bottom: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}


.project-title h2 {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: rgba(245, 18, 18, 0.842);
    text-underline-offset: 12px;

}

.project-menu {
    padding-top: 2em;
    color: rgb(255, 255, 255);
    position: relative;
}

.col-md-4 {
    margin-top: 2rem;
}


.nav {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.nav-item button {
    background-color: transparent;
    color: rgb(255, 255, 255);
    font-size: 0.875rem;
    transition: all 0.1s ease-in-out;
    backdrop-filter: blur(15px);
}

.nav-item button:hover {
    color: #ffffff;
    background: rgba(245, 18, 18, 0.842);
    transform: scale(0.98);
}


.card {
    width: 100%;
    max-width: 400px;
    max-height: 190px;
}


.card-body {
    color: #000000;
    cursor: cell;
}

.card-body a {
    background-color: rgb(0, 0, 0);
    transition: all 0.1s ease-in-out;
    color: #000000;
    cursor: cell;
}

.tab-content {
    padding-top: 60px;
}


.card-body a:hover {
    background-color: rgba(245, 18, 18, 0.842);
    color: #fff;
}


.figure .fas {
    color: #000000;
}



.cta a {
    color: #000000;
}


.card:hover {
    transform: scale(0.98);
}


/* BUTTONS */

.learn-more {
    padding: 1em 4em;
    border: 0.1em solid #1a191d;
    border-radius: 4em;
    position: relative;
    overflow: hidden;
    background-color: #1a191d;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    transition: .3s;
    z-index: 1;
    font-family: inherit;
    backdrop-filter: blur(15px);
}

.learn-more:hover {
    background: transparent;
    border: 0.1em solid transparent;
}


.learn-more a {
    transition: all 0.2s ease-in-out;
    color: #fff;
}


.learn-more:hover a {
    color: rgba(245, 18, 18, 0.842);

    
}


.projects-flex,
.container-sm {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}


.cta {
    border: none;
    background: none;
}

.cta span {
    padding-bottom: 7px;
    letter-spacing: 4px;
    font-size: 14px;
    padding-right: 15px;
    text-transform: uppercase;
}

.cta .fas {
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.cta:hover .fas {
    transform: translateX(0);
}

.cta:active .fas {
    transform: scale(0.8);
}

.hover-underline-animation {
    position: relative;
    color: rgb(255, 255, 255);
    padding-bottom: 20px;
    
}

.hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
    margin-left: 2.8rem;
}

.cta:hover .hover-underline-animation:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.figure-caption {
    color: rgba(245, 18, 18, 0.842);
    font-weight: bolder;
    font-size: 1.3em;;

}

.figure-img {
    width: 100%; 
    height: 14em;
}


/*PROJECT SECTION ENDS HERE */




/* CONTACT FORM */

#contact-section {
    max-width:1476px;
    width: 98%;
}

.contact-content {
    margin: 0px 0 50px 0;
    max-height: auto;
}


.contact-form {
    background-image: url("/img/pexels-la-miko-3616773.jpg");
    background-position: bottom;
    background-size: cover;
    width: 100%;
    border-radius: 3rem;
    margin: auto;
    padding:2em;
}

#contact-section h2 {
    letter-spacing: 5px;
    color: #000000;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: rgba(245, 18, 18, 0.842);
    text-underline-offset: 12px;
}


::placeholder {
    color: #fff;
}



.form-left,
.form-right {
    width: 100%;
    max-width: 300px;
    margin: auto;
    padding-top: 25px;
}

.form-control:focus {
    border-color: rgba(245, 18, 18, 0.842);
    box-shadow: 0 0 0 0.1rem rgba(245, 18, 18, 0.842);
}


textarea {
    resize: none;
}

textarea:focus {
    color: rgba(245, 18, 18, 0.842);
}

#btn-form {
    width: 100%;
    max-width: 300px;
    background-color: transparent;
    border: thin solid rgba(245, 18, 18, 0.842);
    color: #000000;
}

#btn-form:hover {
    color: rgba(245, 18, 18, 0.842);
    background: rgba(255, 255, 255, 0.842);
    box-shadow: 0 0 5px rgba(245, 18, 18, 0.842), 
                0 0 25px rgba(245, 18, 18, 0.842), 
                0 0 50px rgba(245, 18, 18, 0.842), 
                0 0 100px rgba(245, 18, 18, 0.842);
    transform: scale(0.98);

}

.alert {
    z-index: -1;
    transition: all 0.2s ease-in-out;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: auto;
    text-align: center;
}



/* FOOTER SECTION */


.footer {
    width: 100%;
    text-align: center;
    background-color: #1a191d;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 1;
    width: 100%;
    max-width: auto;
    margin: auto;
    display: flex;
    align-items: center;

}


.footer a {
    color: rgb(255, 255, 255);
}

.footer a:hover {
    color: rgba(245, 18, 18, 0.842);
}




/* FOOTER ENDS HERE */



/* BUTTON SECTION  */

.contact-form button {

    font-family: inherit;
    font-size: 16px;
    background: transparent;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
}

.contact-form button span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.contact-form button svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.contact-form button:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

.contact-form button:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.contact-form button:hover span {
    transform: translateX(12em);
}

.contact-form button:active {
    transform: scale(0.95);
}


.form-outline .form-control {
    border: 0.1em solid #1a191d;
}

@keyframes fly-1 {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}




/* KEYFRAMES FOR SCROLLING AND HOVER EFFECT */

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}



@keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }

}

@keyframes movedown {
    0% {
        opacity: 0;
        transform: translatey(100px);
    }

    80% {
        transform: translatey(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}


@media (max-width:1200px) {
    .navbar-nav,
    .navbar-brand  {
        padding: 0!important;
    }

    

    


}



@media screen and (max-width:840px) {
    .skills-flex hr {
        display: none;
    }

    .skills-flex {
        padding-top: 25px;
    }

    .skills-flex h3 {
        font-size: 20px;
        font-weight: 600;
        color: rgba(245, 18, 18, 0.842);
    }
}


@media screen and (max-width:769px) {
    .skills-flex {
        text-align: center;
        gap: 20px;
    }

    .navbar-brand {
        font-size: 1.1em;;
    }

    .text-white h1 {
        font-size: 2em!important;
    }

    .services {
        padding: 1em 0;
    }
}