/*!
    Title: Dev Portfolio Template
    Version: 1.2.2
    Last Change: 03/25/2020
    Author: Ryan Fitzgerald
    Repo: https://github.com/RyanFitzgerald/devportfolio-template
    Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues

    Description: This file contains all the styles associated with the page
    that don't come from third party libraries. This file gets compiled using
    Gulp and send to the /css folder which is then loaded on the page.
*/
/*
    File Contents:

        1. Variables
        2. Mixins
        3. Global Styles
        4. Lead Styles
        5. About Styles
        6. Experience Styles
        7. Education Styles
        8. Project Styles
        9. Skills Styles
        10. Contact Styles
        11. Optional Section Styles
        12. Media Queries
*/
/*
    ------------------------
    ----- 1. Variables -----
    ------------------------
*/
/*
    ---------------------
    ----- 2. Mixins -----
    ---------------------
*/
/*
    ----------------------------
    ----- 3. Global Styles -----
    ----------------------------
*/
body {
    font-family: "Lato", sans-serif;
    font-size: 16px;
  /* Removed the extra closing brace */
  body.active {
    overflow: hidden;
    z-index: -1;
}
  
  .no-js #experience-timeline > div {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #dcd9d9;
  }
  .no-js #experience-timeline > div h3 {
    font-size: 1.5em;
    font-weight: 300;
    color: #BA0C2F;
    display: inline-block;
    margin: 0;
  }
  .no-js #experience-timeline > div h4 {
    font-size: 1.2em;
    font-weight: 300;
    color: #F45272;
    margin: 0 0 15px 0;
  }
  .no-js #experience-timeline > div p {
    color: #F45272;
    font-size: 0.9em;
    margin: 0;
  }
  .no-js #experience-timeline:before, .no-js #experience-timeline:after {
    content: none;
  }
  
  @keyframes dropHeader {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s;
  }
  header ul {
    display: inline-block;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  header li {
    display: inline-block;
  }
  header a {
    display: block;
    color: #BA0C2F;
    padding: 10px;
  }
  header a:hover {
    color: #8a0923;
    text-decoration: none;
    background: #eee;
    border-radius: 4px;
  }
  header a:focus {
    color: #BA0C2F;
    text-decoration: none;
  }
  header.active {
    display: block;
  }
  header.sticky {
    position: fixed;
    z-index: 999;
  }
  
  #menu.active {
    display: block;
  }
  
  #mobile-menu-open {
    display: none;
    cursor: pointer;
    position: fixed;
    right: 15px;
    top: 10px;
    color: #BA0C2F;
    font-size: 1.5em;
    z-index: 20;
    padding: 0 7px;
    border-radius: 4px;
    background: #fff;
  }
  
  #mobile-menu-close {
    display: none;
    text-align: right;
    width: 100%;
    background: #fff;
    font-size: 1.5em;
    padding-right: 15px;
    padding-top: 10px;
    cursor: pointer;
    color: #BA0C2F;
  }
  #mobile-menu-close span {
    font-size: 0.5em;
    text-transform: uppercase;
  }
  #mobile-menu-close i {
    vertical-align: middle;
  }
  
  footer {
    padding: 50px 0;
  }
  
  .copyright {
    padding-top: 20px;
  }
  .copyright p {
    margin: 0;
    color: #F45272;
  }
  
  .top {
    text-align: center;
  }
  .top span {
    cursor: pointer;
    display: block;
    margin: 15px auto 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #b9bfc4;
    text-align: center;
  }
  .top i {
    color: #F45272;
  }
  
  .social {
    text-align: right;
  }
  .social ul {
    margin: 5px 0 0 0;
    padding: 0;
  }
  .social li {
    display: inline-block;
    font-size: 1.25em;
    list-style: none;
  }
  .social a {
    display: block;
    color: #F45272;
    padding: 10px;
  }
  .social a:hover {
    color: #BA0C2F;
  }
  
  .btn-rounded-white {
    display: inline-block;
    color: #fff;
    padding: 15px 25px;
    border: 3px solid #fff;
    border-radius: 30px;
    transition: 0.5s ease all;
  }
  .btn-rounded-white:hover {
    color: #BA0C2F;
    background: #fff;
    text-decoration: none;
  }
  
  .shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  
  .shadow-large {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  
  .heading {
    position: relative;
    display: inline-block;
    font-size: 2em;
    font-weight: 300;
    margin: 0 0 30px 0;
  }
  .heading:after {
    position: absolute;
    content: "";
    top: 100%;
    height: 1px;
    width: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #BA0C2F;
  }
  
  .background-alt {
    background: #f2f2f5;
  }
  
  /*
      --------------------------
      ----- 4. Lead Styles -----
      --------------------------
  */
  #lead {
    position: relative;
    height: 100vh;
    min-height: 500px;
    max-height: 1080px;
    background: url(../images/lead-bg.jpg);
    background-size: cover;
    padding: 15px;
    overflow: hidden;
  }
  
  #lead-content {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  #lead-content h1, #lead-content h2 {
    margin: 0;
  }
  #lead-content h1 {
    color: #fff;
    font-weight: 900;
    font-size: 5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 0.9em;
  }
  #lead-content h2 {
    color: #fff;
    font-weight: 300;
    font-size: 2.25em;
    margin-bottom: 15px;
  }
  
  #lead-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(186, 12, 47, 0.65);
    z-index: 1;
  }
  
  #lead-down {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    bottom: 15px;
    color: #fff;
  }
  #lead-down span {
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #f45272;
    text-align: center;
  }
  #lead-down i {
    animation: pulsate 1.5s ease;
    animation-iteration-count: infinite;
    padding-top: 5px;
  }
  
  @keyframes pulsate {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1.2);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  /*
      ---------------------------
      ----- 5. About Styles -----
      ---------------------------
  */
  #about {
    padding: 75px 15px;
    border-bottom: 1px solid #dcd9d9;
  }
  #about h2 {
    color: #BA0C2F;
    font-weight: 700;
    margin-bottom: 20px;
  }
  #about #about-image {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  #about #about-image img {
    width: 20%;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  #about .row {
    display: flex;
    align-items: flex-start;
  }
  #about .col-md-4 {
    text-align: center;
  }
  #about .col-md-8 {
    text-align: left;
  }
  #about p {
    color: #F45272;
    margin: 0;
  }
  
  /*
      --------------------------------
      ----- 6. Experience Styles -----
      --------------------------------
  */
  #experience {
    padding: 50px 15px;
    text-align: center;
    border-bottom: 1px solid #dcd9d9;
  }
  #experience h2 {
    color: #BA0C2F;
    font-weight: 700;
  }
  
  #experience-timeline {
    margin: 30px auto 0 auto;
    position: relative;
    max-width: 1000px;
  }
  #experience-timeline:before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 303px;
    right: auto;
    height: 100%;
    width: 3px;
    background: #BA0C2F;
    z-index: 0;
  }
  #experience-timeline:after {
    position: absolute;
    content: "";
    width: 3px;
    height: 40px;
    background: #BA0C2F;
    background: linear-gradient(to bottom, #BA0C2F, rgba(186, 12, 47, 0));
    top: 100%;
    left: 303px;
  }
  
  .vtimeline-content {
    margin-left: 350px;
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 15px;
    border-radius: 3px;
    text-align: left;
  }
  .vtimeline-content h3 {
    font-size: 1.5em;
    font-weight: 300;
    color: #BA0C2F;
    display: inline-block;
    margin: 0;
  }
  .vtimeline-content h4 {
    font-size: 1.2em;
    font-weight: 300;
    color: #F45272;
    margin: 0 0 15px 0;
  }
  .vtimeline-content p {
    color: #F45272;
    font-size: 0.9em;
    margin: 0;
  }
  
  .vtimeline-point {
    position: relative;
    display: block;
    margin-bottom: 30px;
  }
  
  .vtimeline-icon {
    position: relative;
    color: #fff;
    width: 50px;
    height: 50px;
    background: #BA0C2F;
    border-radius: 50%;
    float: left;
    z-index: 99;
    margin-left: 280px;
  }
  .vtimeline-icon i {
    display: block;
    font-size: 2em;
    margin-top: 10px;
  }
  
  .vtimeline-date {
    width: 260px;
    text-align: right;
    position: absolute;
    left: 0;
    top: 10px;
    font-weight: 300;
    color: #BA0C2F;
  }
  
  /*
      -------------------------------
      ----- 7. Education Styles -----
      -------------------------------
  */
  #education {
    padding: 50px 15px 20px 15px;
    border-bottom: 1px solid #dcd9d9;
    text-align: center;
  }
  #education h2 {
    color: #BA0C2F;
    font-weight: 700;
    margin-bottom: 50px;
  }
  .education-logo {
    text-align: center; /* Center the logo horizontally */
    margin-bottom: 15px; /* Add spacing below the logo */
}

  .education-logo img {
    max-width: 100%; /* Ensure the logo scales responsively */
    height: auto; /* Maintain aspect ratio */
    max-height: 80px; /* Optional: Limit the height of the logo */
    display: inline-block; /* Ensure proper alignment */
}
  
  .education-block {
    max-width: 700px;
    margin: 0 auto 30px auto;
    padding: 15px;
    border: 1px solid #dcd9d9;
    text-align: left;
    background-color: #FFFFFF;
  }
  .education-block h3 {
    font-weight: 500;
    float: left;
    margin: 0;
    color: #000000;
  }
  .education-block span {
    color: #000000;
    float: right;
  }
  .education-block h4 {
    color: #000000;
    clear: both;
    font-weight: 500;
    font-style: italic;
    margin: 0 0 15px 0;
  }
  .education-block p, .education-block ul {
    margin: 0;
    color: #BA0C2F;
    font-size: 0.9em;
  }
  .education-block ul {
    padding: 0 0 0 15px;
  }
  
  /*
      -------------------------------
      ----- 8. Project Styles -----
      -------------------------------
  */
  #projects {
    padding: 50px 15px;
    border-bottom: 1px solid #dcd9d9;
    text-align: center;
  }
  #projects h2 {
    color: #BA0C2F;
    font-weight: 700;
    margin-bottom: 50px;
  }
  
  .project {
    position: relative;
    height: 300px;
    max-width: 900px;
    margin: 0 auto 30px auto;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
  
  .project-image {
    float: left;
    width: 300px;
    height: 300px;
    object-fit: contain;
  }
  
  .project-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 300px;
    padding: 15px;
  }

  .project-button {
    display: inline-block;
    color: #BA0C2F;
    font-weight: bold;
    padding: 5px 25px;
    border: 1px solid #BA0C2F;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  .project-button:hover {
    background: #f2f2f5;
  }

  .project-info h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #BA0C2F;
    margin: 0 0 15px 0;
  }
  .project-info p {
    color: #F45272;
    margin: 0 0 15px 0;
    font-size: 0.9em;
  }
  
  .no-image .project-info {
    position: relative;
    margin: 0;
    padding: 30px 15px;
    transform: none;
  }
  
  #more-projects {
    display: none;
  }
  
  /*
      -------------------------------
      ----- 9. Skills Styles -----
      -------------------------------
  */
  #skills {
    padding: 50px 15px;
    text-align: center;
  }
  #skills h2 {
    color: #BA0C2F;
    font-weight: 700;
    margin-bottom: 50px;
  }
  #skills ul {
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
  }
  #skills li {
    display: inline-block;
    margin: 7px;
    padding: 5px 10px;
    color: #BA0C2F;
    background: #ffffff;
    list-style: none;
    cursor: default;
    font-size: 1.2em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  
  /*
      -------------------------------
      ----- 10. Contact Styles -----
      -------------------------------
  */
  #contact {
    padding: 50px 15px;
    background: #BA0C2F;
    text-align: center;
  }
  #contact h2 {
    margin: 0 0 15px 0;
    color: #fff;
    font-weight: 500;
  }
  
  #contact-form {
    max-width: 500px;
    margin: 0 auto;
  }
  #contact-form input, #contact-form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: none;
    margin-bottom: 10px;
    background: #72071d;
    color: #fff;
    transition: 0.5s ease all;
  }
  #contact-form input::-webkit-input-placeholder, #contact-form textarea::-webkit-input-placeholder {
    color: #fff;
  }
  #contact-form input:-moz-placeholder, #contact-form textarea:-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  #contact-form input::-moz-placeholder, #contact-form textarea::-moz-placeholder {
    color: #fff;
    opacity: 1;
  }
  #contact-form input:-ms-input-placeholder, #contact-form textarea:-ms-input-placeholder {
    color: #fff;
  }
  #contact-form input:focus, #contact-form textarea:focus {
    outline: none;
    background: #420411;
  }
  #contact-form textarea {
    height: 150px;
    resize: none;
  }
  #contact-form button {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    border: none;
    color: #BA0C2F;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 0.5s ease all;
  }
  #contact-form button:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }
  
  /*
      ---------------------------------------
      ----- 11. Optional Section Styles -----
      ---------------------------------------
  */
  .optional-section {
    padding: 50px 15px;
    text-align: center;
    border-top: 1px solid #dcd9d9;
  }
  .optional-section h2 {
    color: #BA0C2F;
    font-weight: 700;
  }
  
  .optional-section-block {
    max-width: 700px;
    margin: 0 auto 30px auto;
    padding: 15px;
    border: 1px solid #dcd9d9;
    background: #fff;
    text-align: left;
  }
  .optional-section-block h3 {
    font-weight: 500;
    margin: 0 0 15px 0;
    color: #BA0C2F;
  }
  .optional-section-block h4 {
    color: #F45272;
    clear: both;
    font-weight: 500;
    margin: 0 0 15px 0;
  }
  .optional-section-block p, .optional-section-block ul {
    margin: 0 0 15px 0;
    color: #F45272;
    font-size: 0.9em;
  }
  .optional-section-block ul {
    padding: 0 0 0 15px;
  }

  /* Projects Section */
#projects {
    padding: 50px 15px;
    background: #f2f2f5; /* Alternate background color */
}

#projects .container {
    max-width: 1200px;
    margin: 0 auto;
}

.project {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border: 1px solid #dcd9d9;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
}

.project-image {
    flex: 1 1 300px;
    max-width: 300px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.project-info {
    flex: 2 1 600px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-info h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #BA0C2F; /* UGA red */
    margin-bottom: 10px;
}

.project-info p {
    font-size: 1em;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.6;
}

.project-button {
    display: inline-block;
    color: #BA0C2F; /* UGA red */
    font-weight: bold;
    padding: 10px 20px;
    border: 1px solid #BA0C2F;
    background-color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.project-button:hover {
    background: #BA0C2F; /* UGA red */
    color: #fff;
}

/* Certifications Section */
#certifications {
    padding: 50px 15px;
    background: #f2f2f5; /* Alternate background color */
    text-align: center;
}

.certification-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Force two equal-width columns */
    gap: 20px; /* Add spacing between rows and columns */
    justify-items: center; /* Center the cards horizontally */
}

.certification {
    width: 600px; /* Match the width of project blocks */
    aspect-ratio: 4/3;
    margin: 20px auto; /* Center the blocks and add spacing */
    perspective: 1000px; /* Enable 3D perspective for flip animation */
}

.certification-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.certification:hover .certification-card {
    transform: rotateY(180deg); /* Flip the card on hover */
}

.certification-front,
.certification-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide the back side when not flipped */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcd9d9;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
}

.certification-front {
    background: #fff;
    transform: rotateY(0deg); /* Default front side */
}

.certification-back h3 {
    font-size: 1.7em;
    font-weight: bold;
    margin: 0;
    color: #BA0C2F; /* UGA red */
}

.certification-back .date-earned {
    font-size: 0.9em;
    color: #555; /* Subtle gray color */
    font-style: italic;
}

.certification-back {
    background: #fff;
    transform: rotateY(180deg); /* Position the back side for the flip */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.certification-front img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
}

.date-earned {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #555; /* Subtle gray color */
    font-style: italic;
}

.heading {
    color: #BA0C2F;
    font-weight: 700;
    margin-bottom: 50px;
  }

.skills-list {
    list-style-type: disc;
    margin: 10px 0 0 20px; /* Add spacing and indentation */
    padding: 0;
    text-align: left; /* Align the list to the left */
}

.skills-list li {
    font-size: 0.9em;
    color: #333;
    margin-bottom: 5px; /* Add spacing between list items */
}

.skills-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between skill boxes */
    margin-top: 10px;
}

.skill-box {
    background: #fff; /* Light gray background */
    color: #BA0C2F; /* Text color */
    font-weight: bold;
    padding: 10px 15px;
    border: 1px solid #dcd9d9;
    border-radius: 5px;
    font-size: 0.9em;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
    flex: 1 1 auto; /* Allow boxes to grow and shrink */
    max-width: 150px; /* Limit the width of each box */
}

.cert-summary {
    margin: 20px auto; /* Center the summary and add spacing */
    max-width: 800px; /* Limit the width of the summary */
    text-align: center; /* Align text to the left */
    font-size: 0.9em; /* Adjust font size for readability */
    color: #000; 
}
  /*
      -----------------------------
      ----- 12. Media Queries -----
      -----------------------------
  */
  @media only screen and (max-width: 750px) {
    #experience-timeline:before, #experience-timeline:after {
      left: 23px;
    }
    .vtimeline-date {
      width: auto;
      text-align: left;
      position: relative;
      margin-bottom: 15px;
      display: block;
      margin-left: 70px;
    }
    .vtimeline-icon {
      margin-left: 0;
    }
    .vtimeline-content {
      margin-left: 70px;
    }
  }
  @media only screen and (max-width: 992px) {
    #lead {
      height: auto;
      min-height: auto;
      max-height: auto;
      padding: 100px 15px;
    }
    #lead-content {
      position: relative;
      transform: none;
      left: auto;
      top: auto;
    }
    #lead-content h1 {
      font-size: 3em;
    }
    #lead-content h2 {
      font-size: 1.75em;
      font-weight: 700;
    }
    #about {
      text-align: center;
    }
    #about p {
      text-align: left;
    }
  }
  @media only screen and (max-width: 768px) {
    header {
      position: fixed;
      display: none;
      z-index: 999;
      animation: none;
      bottom: 0;
      height: 100%;
    }
    #mobile-menu-open, #mobile-menu-close {
      display: block;
    }
    #menu {
      height: 100%;
      overflow-y: auto;
      box-shadow: none;
      border-radius: 0;
      width: 100%;
    }
    #menu li {
      display: block;
      margin-bottom: 10px;
    }
    #lead-content h1 {
      font-size: 2em;
    }
    #lead-content h2 {
      font-size: 1.3em;
      font-weight: 700;
    }
    #lead-content a {
      padding: 10px 20px;
    }
    #lead-down {
      display: none;
    }
    .education-block h3, .education-block span {
      float: none;
    }
    .project-image {
      display: none;
    }
    .project-info {
      position: relative;
      margin: 0;
      padding: 30px 15px;
      top: auto;
      transform: none;
    }
    footer {
      text-align: center;
    }
    .social {
      text-align: center;
    }
  }
  @media only screen and (max-width: 480px) {
    #lead-content h1 {
      font-size: 1.5em;
    }
    #lead-content h2 {
      font-size: 1em;
      font-weight: 300;
    }
    #lead-content a {
      font-size: 0.9em;
      padding: 5px 10px;
    }
  }
  @media (max-width: 768px) {
    .certification-row {
        grid-template-columns: 1fr; /* Switch to a single column on smaller screens */
    }
}}