/* ============================================================
   PORTFOLIO TEMPLATE - EXPERIENCE PAGE STYLESHEET
   ============================================================
   Author: Portfolio Template
   Version: 1.0
   Last Updated: December 2025
   
   TABLE OF CONTENTS:
   ----------------------------------------------------------
   1.  IMPORTS & FONTS
   2.  RESET & BASE STYLES
   3.  SCROLLBAR STYLES
   4.  HEADER & NAVBAR
       4.1 Logo Styles
       4.2 Navigation Menu
       4.3 Hamburger Menu (Mobile)
   5.  EXPERIENCE SECTION
       5.1 Section Header & Quote
       5.2 Timeline Layout
       5.3 Timeline Icons/Circles
       5.4 Timeline Arrows
       5.5 Timeline Content Cards
       5.6 More Button (Back to Home)
       5.7 Experience Media Queries
   6.  FOOTER SECTION
       6.1 Footer Layout
       6.2 Footer Links
       6.3 Social Share
       6.4 Credits & Heart Animation
       6.5 Footer Media Queries
   7.  COMMON MEDIA QUERIES
   8.  SCROLL TO TOP BUTTON
   ============================================================ */


/* ============================================================
   1. IMPORTS & FONTS
   ============================================================ */
/* Fonts are loaded asynchronously from the HTML head */
@import url('theme-preset.css');


/* ============================================================
   2. RESET & BASE STYLES
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-body);
  font-family: var(--font-primary);
}

/* Text Selection Styles */
*::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}


/* ============================================================
   3. SCROLLBAR STYLES
   ============================================================ */
html::-webkit-scrollbar {
  width: .8rem;
}

html::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}


/* ============================================================
   4. HEADER & NAVBAR
   ============================================================ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.7rem 10%;
  height: 6.5rem;
  background-color: var(--bg-white);
  box-shadow: var(--shadow-light);
}

/* Section Base Styles */
section {
  min-height: 100vh;
  padding: 2rem 9%;
}

/* Section Heading Styles */
.heading {
  font-size: 3.5rem;
  color: var(--heading-color);
  font-weight: 800;
  text-align: center;
}

.heading span {
  color: var(--heading-span-color);
}

/* ----------------------------------------------------------
   4.1 Logo Styles
   ---------------------------------------------------------- */
header .logo {
  font-size: 1.9rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text-primary-color);
}

header .logo i {
  font-size: 2.2rem;
}

header .logo:hover {
  color: var(--accent-hover-color);
}

/* ----------------------------------------------------------
   4.2 Navigation Menu
   ---------------------------------------------------------- */
header .navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .navbar li {
  margin-left: 2.5rem;
}

header .navbar ul li a {
  font-size: 1.57rem;
  color: var(--text-primary-color);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04rem;
}

header .navbar ul li a.active,
header .navbar ul li a:hover {
  color: var(--main-color);
  border-bottom: .2rem solid var(--main-color);
  padding: .5rem 0;
}

/* ----------------------------------------------------------
   4.3 Hamburger Menu (Mobile)
   ---------------------------------------------------------- */
#menu {
  font-size: 3rem;
  cursor: pointer;
  color: rgb(24, 2, 63);
  display: none;
}

@media(max-width:768px) {
  #menu {
    display: block;
  }

  header .navbar {
    position: fixed;
    top: 6.5rem;
    right: -120%;
    width: 75%;
    height: 100%;
    text-align: left;
    align-items: flex-start;
    background-color: var(--bg-dark-blue);
  }

  header .navbar ul {
    flex-flow: column;
    padding: 1rem;
  }

  header .navbar ul li {
    text-align: center;
    width: 100%;
    margin: 1rem 0;
    border-radius: .5rem;
    width: 26rem;
  }

  header .navbar ul li a {
    display: block;
    padding: 1rem;
    text-align: left;
    color: var(--text-white);
    font-size: 2rem;
  }

  header .navbar ul li a.active,
  header .navbar ul li a:hover {
    padding: 1rem;
    color: var(--text-white);
    border-radius: .5rem;
    border-bottom: .5rem solid var(--main-color);
  }

  .fa-times {
    transform: rotate(180deg);
  }

  header .navbar.nav-toggle {
    right: 0;
  }
}


/* ============================================================
   5. EXPERIENCE SECTION
   ============================================================ */
.experience {
  margin-top: 5rem;
}

.experience .heading {
  margin-bottom: 2rem;
}

/* ----------------------------------------------------------
   5.1 Section Header & Quote
   ---------------------------------------------------------- */
.experience .quote {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4rem;
}

/* ----------------------------------------------------------
   5.2 Timeline Layout
   ---------------------------------------------------------- */
.experience .timeline {
  position: relative;
  max-width: 1200px;
  margin: 3rem auto;
}

/* Timeline Vertical Line */
.experience .timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background: #020133;
  top: 1rem;
  bottom: -4rem;
  left: 50%;
  margin-left: -3px;
  z-index: 1;
  pointer-events: none;
}

.experience .container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* ----------------------------------------------------------
   5.3 Timeline Icons/Circles
   ---------------------------------------------------------- */
.experience .container::after {
  content: "\f0b1";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: rgb(255, 255, 255);
  border: 4px solid var(--accent-orange);
  top: 15px;
  border-radius: 50%;
  z-index: 100;
  font-size: 1.89rem;
  text-align: center;
  font-weight: 900;
  color: #02094b;
  font-family: 'Font Awesome 5 Free';
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Timeline Position - Left & Right */
.experience .left {
  left: 0;
}

.experience .right {
  left: 50%;
}

/* ----------------------------------------------------------
   5.4 Timeline Arrows
   ---------------------------------------------------------- */
/* Arrows Pointing Right */
.experience .left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--accent-orange);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--accent-orange);
}

/* Arrows Pointing Left */
.experience .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--accent-orange);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--accent-orange) transparent transparent;
}

.experience .right::after {
  left: -16px;
}

/* ----------------------------------------------------------
   5.5 Timeline Content Cards
   ---------------------------------------------------------- */
.experience .content {
  background-color: var(--accent-orange);
  position: relative;
  border-radius: 6px;
}

.experience .content .tag {
  font-size: 1.3rem;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
}

.experience .content .desc {
  margin-left: 1.5rem;
  padding-bottom: 1rem;
}

.experience .content .desc h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.experience .content .desc p {
  font-size: 1.2rem;
}

/* ----------------------------------------------------------
   5.6 More Button (Back to Home)
   ---------------------------------------------------------- */
.morebtn {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

.morebtn .btn {
  position: relative;
  line-height: 0;
  padding: 1.6rem 3rem;
  border-radius: .5em;
  transition: 0.5s;
  color: var(--btn-text);
  background: var(--btn-bg);
  box-shadow: 0px 5px 10px var(--btn-shadow);
  text-align: center;
}

.morebtn .btn span {
  font-weight: 600;
  font-size: 1.7rem;
  font-family: var(--font-secondary);
}

.morebtn .btn i {
  margin-right: 0.5rem;
  font-size: 1.5rem;
  transition: 0.3s;
}

.morebtn .btn:hover {
  background: var(--btn-hover);
}

.morebtn .btn:hover i {
  transform: translateX(-8px);
}

/* ----------------------------------------------------------
   5.7 Experience Media Queries
   ---------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .experience .timeline::after {
    left: 31px;
  }

  .experience .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .experience .container::before {
    left: 60px;
    border: medium solid var(--accent-orange);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--accent-orange) transparent transparent;
  }

  .experience .left::after {
    left: 15px;
  }

  .experience .right::after {
    left: 15px;
  }

  .experience .right {
    left: 0%;
  }

  .experience .container::after {
    font-size: 2.2rem;
  }
}


/* ============================================================
   6. FOOTER SECTION
   ============================================================ */
.footer {
  min-height: auto;
  padding-top: 0;
  background: var(--bg-footer);
}

/* ----------------------------------------------------------
   6.1 Footer Layout
   ---------------------------------------------------------- */
.footer .box-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer .box-container .box {
  flex: 1 1 25rem;
  margin: 2rem;
}

.footer .box-container .box h3 {
  font-size: 2.5rem;
  color: #fff;
  padding-bottom: 1rem;
  font-weight: normal;
}

.footer .box-container .box p {
  font-size: 1.5rem;
  color: var(--text-grey);
  padding: .7rem 0;
  text-transform: none;
}

.footer .box-container .box p i {
  padding-right: 1rem;
  color: var(--accent-yellow);
}

/* ----------------------------------------------------------
   6.2 Footer Links
   ---------------------------------------------------------- */
.footer .box-container .box a {
  font-size: 1.5rem;
  color: rgb(238, 238, 238);
  padding: .3rem 0;
  display: block;
}

.footer .box-container .box a:hover {
  color: var(--accent-yellow);
}

/* ----------------------------------------------------------
   6.3 Social Share
   ---------------------------------------------------------- */
.footer .box-container .box .share {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.footer .box-container .box .share a {
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  text-align: center;
  border-radius: 5rem;
  font-size: 1.7rem;
  margin-right: 1rem;
  transition: .2s;
  background: rgb(230, 230, 230);
  color: #02094b;
  border: none;
}

.footer .box-container .box .share a:hover {
  background: transparent;
  transform: scale(0.98);
  border: .1rem solid rgb(180, 178, 178);
  color: var(--accent-yellow);
}

/* ----------------------------------------------------------
   6.4 Credits & Heart Animation
   ---------------------------------------------------------- */
.footer .credit {
  padding: 1rem 0 0 0;
  text-align: center;
  font-size: 1.5rem;
  font-family: var(--font-secondary);
  font-weight: 600;
  color: #fff;
  border-top: .1rem solid #fff3;
}

.footer .credit a {
  color: var(--accent-yellow);
}

/* Heart Icon Animation */
.footer .fa {
  color: var(--accent-red);
  margin: 0 .3rem;
  font-size: 1.5rem;
  animation: pound .35s infinite alternate;
}

@-webkit-keyframes pound {
  to {
    transform: scale(1.1);
  }
}

@keyframes pound {
  to {
    transform: scale(1.1);
  }
}

/* ----------------------------------------------------------
   6.5 Footer Media Queries
   ---------------------------------------------------------- */
@media(max-width:450px) {
  .footer .box-container .box {
    margin: 2rem;
  }

  .footer .box-container .box p {
    padding: 0.7rem;
  }

  .footer .box-container .box .share a {
    padding: 1.1rem;
  }
}


/* ============================================================
   7. COMMON MEDIA QUERIES
   ============================================================ */
@media(max-width:450px) {
  html {
    font-size: 55%;
  }

  body {
    padding-right: 0;
  }

  section {
    padding: 2rem;
  }
}


/* ============================================================
   8. SCROLL TO TOP BUTTON
   ============================================================ */
#scroll-top {
  position: fixed;
  top: -140%;
  right: 2rem;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  background: var(--accent-yellow);
  color: rgb(13, 0, 44);
  border-radius: 5rem;
  transition: 1s linear;
  z-index: 1000;
}

#scroll-top.active {
  top: calc(100% - 12rem);
}


/* ============================================================
   END OF STYLESHEET
   ============================================================ */