/* ==================================================================

*   Ceevee Media Queries
*   url: styleshout.com
*   03-18-2014

/* ================================================================== */


/* screenwidth less than 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

   /* header styles
   ------------------------------------------------------------------ */
   header .banner-text h1 {
      font: 80px/1.1em 'opensans-bold', sans-serif;
      letter-spacing: -1px;
      margin: 0 auto 12px auto;
   }

}

/* screenwidth less than 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

   /* header styles
   ------------------------------------------------------------------ */
   header .banner {
      padding-bottom: 12px;
   }

   header .banner-text h1 {
      font: 78px/1.1em 'opensans-bold', sans-serif;
      letter-spacing: -1px;
   }

   header .banner-text h3 {
      font: 17px/1.9em 'librebaskerville-regular', serif;
      width: 80%;
   }

   header .banner-text hr {
      width: 65%;
      margin: 12px auto;
   }

   /* nav-wrap */
   #nav-wrap {
      font: 11px 'opensans-bold', sans-serif;
      letter-spacing: 1.5px;
   }









   /* About Section
   ------------------------------------------------------------------- */
   #about .profile-pic {
      width: 114px;
      height: 114px;
      margin-left: 12px;
   }

   #about .contact-details {
      width: 50%;
   }

   #about .download {
      width: 50%;
   }

   /* Resume Section
   ------------------------------------------------------------------- */
   #resume h1 {
      font: 16px/24px 'opensans-bold', sans-serif;
   }

   #resume .main-col {
      padding-right: 5%;
   }

   /* Testimonials Section
   ------------------------------------------------------------------- */
   #testimonials .header-col h1:before {
      font-size: 66px;
      line-height: 66px;
   }

   #testimonials blockquote p {
      font-size: 22px;
      line-height: 46px;
   }

   /* Call to Action Section
   ------------------------------------------------------------------- */
   #call-to-action .header-col h1:before {
      font-size: 66px;
      line-height: 66px;
   }

   /* Contact Section
   ------------------------------------------------------------------- */
   #contact .section-head {
      margin-bottom: 30px;
   }

   #contact .header-col h1:before {
      font-size: 66px;
      line-height: 66px;
   }

   #contact .section-head p.lead {
      font: 17px/33px opensans-light, sans-serif;
   }


}

/* mobile wide/smaller tablets
---------------------------------------------------------------------- */

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

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font: 12px 'opensans-bold', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;
      width: auto;
      position: fixed;
      top: 0;
      right: 0;
   }

   #nav-wrap>a {
      width: 48px;
      height: 48px;
      text-align: left;
      background-color: #1b519d;
      position: relative;
      border: none;
      float: right;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;

      position: relative;
      top: 0px;
      right: 0px;
   }

   #nav-wrap>a:before,
   #nav-wrap>a:after {
      position: absolute;
      border: 2px solid #fff;
      top: 35%;
      left: 25%;
      right: 25%;
      content: '';
   }

   #nav-wrap>a:after {
      top: 60%;
   }

   /* toggle buttons */
   #nav-wrap:not( :target)>a:first-of-type,
   #nav-wrap:target>a:last-of-type {
      display: block;
   }

   /* hide menu panel */
   #nav-wrap ul#nav {
      height: auto;
      display: none;
      clear: both;
      width: auto;
      float: right;

      position: relative;
      top: 12px;
      right: 0;
   }

   /* display menu panels */
   #nav-wrap:target>ul#nav {
      display: block;
      padding: 30px 20px 48px 20px;
      background: #1f2024;
      margin: 0 30px;
      clear: both;
   }

   ul#nav li {
      display: block;
      height: auto;
      margin: 0 auto;
      padding: 0 4%;
      text-align: left;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted;
   }

   ul#nav li a {
      display: block;
      margin: 0;
      padding: 0;
      margin: 12px 0;
      line-height: 16px;
      /* reset line-height from 48px */
      border: none;
   }


   /* Header Styles
   -------------------------------------------------------------------- */
   header .banner {
      padding-bottom: 12px;
      padding-top: 6px;
   }

   header .banner-text h1 {
      font: 68px/1.1em 'opensans-bold', sans-serif;
   }

   header .banner-text h3 {
      font: 16px/1.9em 'librebaskerville-regular', serif;
      width: 85%;
   }

   header .banner-text hr {
      width: 80%;
      margin: 18px auto;
   }

   /* header social links */
   header .social {
      margin: 18px 0 24px 0;
      font-size: 24px;
      line-height: 36px;
   }

   header .social li {
      margin: 0 10px;
   }

   /* scrolldown link */
   header .scrolldown {
      display: none;
   }


   /* About Section
   -------------------------------------------------------------------- */
   #about .profile-pic {
      width: 114px;
      height: 114px;
      margin-left: 12px;
   }

   #about .download .button {
      width: 100%;
      text-align: center;
      padding: 15px 20px;
   }

   #about .main-col {
      padding-right: 30px;
   }


   /* Resume Section
   --------------------------------------------------------------------- */
   #resume .header-col {
      padding-top: 0;
      margin-bottom: 48px;
      text-align: center;
   }

   #resume h1 {
      letter-spacing: 3px;
   }

   #resume .main-col {
      padding-right: 30px;
   }

   #resume h3,
   #resume .info {
      text-align: center;
   }

   .bars {
      width: 100%;
   }


   /* Call To Action Section
   /* ----------------------------------------------------------------- */
   #call-to-action {
      text-align: center;
   }

   #call-to-action h1 {
      font: 16px/24px 'opensans-bold', sans-serif;
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
   }

   #call-to-action h1 span {
      display: block;
   }

   #call-to-action .header-col h1:before {
      content: none;
   }

   #call-to-action p {
      font-size: 15px;
   }


   /* Portfolio Section
   /* ----------------------------------------------------------------- */
   #portfolio-wrapper .columns {
      margin-bottom: 40px;
   }

   .popup-modal {
      max-width: 85%;
   }


   /* Testimonials Section
   ----------------------------------------------------------------------- */
   #testimonials .text-container {
      text-align: center;
   }

   #testimonials h1 {
      font: 16px/24px 'opensans-bold', sans-serif;
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
   }

   #testimonials h1 span {
      display: block;
   }

   #testimonials .header-col h1:before {
      content: none;
   }

   #testimonials blockquote {
      padding-bottom: 24px;
   }

   #testimonials blockquote p {
      font-size: 20px;
      line-height: 42px;
   }

   /* Control Nav */
   .flex-control-nav {
      text-align: center;
      margin-left: -30px;
   }


   /* contact Section
   ----------------------------------------------------------------------- */
   #contact {
      padding-bottom: 66px;
   }

   #contact .section-head {
      margin-bottom: 12px;
   }

   #contact .section-head h1 {
      font: 16px/24px 'opensans-bold', sans-serif;
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
   }

   #contact h1 span {
      display: block;
   }

   #contact .header-col {
      padding-top: 0;
   }

   #contact .header-col h1:before {
      content: none;
   }

   #contact .section-head p.lead {
      text-align: center;
   }

   /* form */
   #contact label {
      float: none;
      width: 100%;
   }

   #contact input,
   #contact textarea,
   #contact select {
      margin-bottom: 6px;
      width: 100%;
   }

   #contact button.submit {
      margin: 30px 0 24px 0;
   }

   #message-warning,
   #message-success {
      width: 100%;
      margin-left: 0;
   }


   /* footer
   ------------------------------------------------------------------------ */

   /* copyright */
   footer .copyright li:before {
      content: none;
   }

   footer .copyright li {
      margin-right: 12px;
   }

   /* social links */
   footer .social-links {
      font-size: 22px;
   }

   footer .social-links li {
      margin-left: 18px;
   }

   /* Go To Top Button */
   #go-top {
      margin-left: -22px;
   }

   #go-top a {
      width: 54px;
      height: 54px;
      font-size: 18px;
      line-height: 54px;
   }


}

/* mobile narrow
  -------------------------------------------------------------------------- */

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

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap ul#nav {
      width: auto;
      float: none;
   }

   /* header styles
   -------------------------------------------------------------------- */
   header .banner {
      padding-top: 24px;
   }

   header .banner-text h1 {
      font: 40px/1.1em 'opensans-bold', sans-serif;
      margin: 0 auto 24px auto;
   }

   header .banner-text h3 {
      font: 14px/1.9em 'librebaskerville-regular', sans-serif;
      width: 90%;
   }

   /* header social links */
   header .social {
      font-size: 20px;
   }

   header .social li {
      margin: 0 6px;
   }

   /* footer
   ------------------------------------------------------------------------ */

   /* social links */
   footer .social-links {
      font-size: 20px;
   }

   footer .social-links li {
      margin-left: 14px;
   }

   /* Resume Section - Mobile Skills */
   #resume .skills-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0;
      margin: 0;
      scroll-snap-type: x mandatory;
   }

   #resume .skills-wrapper {
      display: flex;
      flex-direction: row;
      min-width: 100%;
      gap: 0;
      padding: 0;
      margin: 0;
   }

   #resume .skill-category {
      width: 100%;
      min-width: 100%;
      background: #f8f8f8;
      padding: 15px;
      border-radius: 0;
      box-shadow: none;
      scroll-snap-align: start;
   }

   #resume .skill-category h3 {
      font-size: 16px;
      margin-bottom: 15px;
      color: #1b519d;
      text-align: center;
      padding-bottom: 8px;
      border-bottom: 1px solid #e0e0e0;
   }

   #resume .skill-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      padding: 0 5px;
   }

   #resume .skill-item {
      position: relative;
      width: 100%;
      height: 100px;
      margin: 0;
      padding: 0;
      background: white;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      touch-action: manipulation;
   }

   #resume .skill-item-content {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      transition: transform 0.3s ease;
   }

   #resume .skill-item-front {
      background: white;
      z-index: 2;
   }

   #resume .skill-item-back {
      background: #1b519d;
      color: white;
      transform: translateY(100%);
   }

   #resume .skill-item.flipped .skill-item-front {
      transform: translateY(-100%);
   }

   #resume .skill-item.flipped .skill-item-back {
      transform: translateY(0);
   }

   #resume .skill-item i {
      font-size: 24px;
      margin-bottom: 5px;
      color: #1b519d;
   }

   #resume .skill-item-back i {
      color: white;
   }

   #resume .skill-item span {
      font-size: 13px;
      font-weight: 500;
      color: #333;
      text-align: center;
   }

   #resume .skill-item-back span {
      color: white;
   }

   #resume .skill-points {
      font-size: 11px;
      margin-top: 5px;
      color: rgba(255, 255, 255, 0.9);
      display: block;
      background: rgba(0, 0, 0, 0.2);
      padding: 3px 8px;
      border-radius: 10px;
   }

   /* DevOps Skills Specific */
   #resume .devops-skills .skill-item {
      background: #f0f7ff;
   }

   #resume .devops-skills .skill-item-back {
      background: #1b519d;
   }

   /* Git Skills Specific */
   #resume .git-skills .skill-item {
      background: #fff0f0;
   }

   #resume .git-skills .skill-item-back {
      background: #d73a49;
   }

   /* Navigation Dots */
   #resume .skills-nav {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 15px;
      padding: 0 15px;
   }

   #resume .skills-nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ccc;
      transition: all 0.3s ease;
   }

   #resume .skills-nav-dot.active {
      background: #1b519d;
      transform: scale(1.2);
   }

}

/* Mobile-First Enhancements
---------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
   /* General Styles */
   body {
      font-size: 16px;
      line-height: 1.6;
   }

   section {
      padding: 20px 0;
   }

   /* Skills Section - Mobile */
   #resume .work {
      margin-bottom: 30px;
   }

   #resume .header-col {
      text-align: center;
      margin-bottom: 20px;
   }

   #resume .header-col h1 {
      font-size: 24px;
   }

   #resume .main-col {
      padding: 0 10px;
   }

   /* Skill Cards */
   .skill-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 0 5px;
   }

   .skill-card {
      perspective: 1000px;
      height: 120px;
      width: 100%;
   }

   .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      cursor: pointer;
   }

   .skill-card.flipped .card-inner {
      transform: rotateY(180deg);
   }

   .card-front,
   .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .card-front {
      background: white;
   }

   .card-back {
      background: #1b519d;
      color: white;
      transform: rotateY(180deg);
      padding: 10px;
   }

   .skill-icon-container {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .skill-logo {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
   }

   .skill-icon {
      font-size: 32px;
      color: #1b519d;
   }

   .card-back ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
   }

   .card-back li {
      font-size: 12px;
      margin-bottom: 5px;
      line-height: 1.4;
   }

   /* Category-specific styles */
   #resume .work:nth-child(2) .card-back { /* DevOps Skills */
      background: #1b519d;
   }

   #resume .work:nth-child(3) .card-back { /* Git Skills */
      background: #d73a49;
   }

   #resume .work:nth-child(4) .card-back { /* Security Skills */
      background: #2ecc71;
   }

   #resume .work:nth-child(5) .card-back { /* Design Skills */
      background: #9b59b6;
   }
}

/* Touch Device Enhancements */
@media only screen and (hover: none) and (pointer: coarse) {
   .skill-card {
      -webkit-tap-highlight-color: transparent;
   }

   .skill-card:active {
      transform: scale(0.98);
   }

   .card-front,
   .card-back {
      touch-action: manipulation;
   }

   .skill-icon-container {
      width: 50px;
      height: 50px;
   }

   .skill-logo {
      max-width: 80%;
      max-height: 80%;
   }

   .card-back li {
      font-size: 11px;
      margin-bottom: 4px;
   }
}

/* Extra Small Mobile Devices
---------------------------------------------------------------------- */
@media only screen and (max-width: 320px) {
   /* Header */
   header .banner-text h1 {
      font: 28px/1.1em 'opensans-bold', sans-serif;
   }

   header .banner-text h3 {
      font: 13px/1.5em 'librebaskerville-regular', serif;
   }

   /* Navigation */
   #nav-wrap ul#nav {
      padding: 15px;
   }

   ul#nav li a {
      font-size: 14px;
      padding: 8px 12px;
   }

   /* About Section */
   #about .profile-pic {
      width: 120px;
      height: 120px;
   }

   #about .main-col {
      padding: 0 10px;
   }

   /* Resume Section */
   #resume .bars .skills li .bar-wrap em {
      font-size: 13px;
   }

   #resume .bars .skills li .bar-wrap .bar {
      height: 6px;
   }

   /* Contact Section */
   #contact input,
   #contact textarea,
   #contact select {
      padding: 10px;
      font-size: 14px;
   }

   /* Footer */
   footer .social-links li {
      margin: 0 6px;
   }

   footer .copyright {
      font-size: 13px;
   }
}