/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: Bolt - Free Bootstrap 3 Theme
 * Version: 1.0
 * URL: http://blacktie.co
 */

/* FONTS */

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,700,900);

/* OVERALL ASPECT */

body {
  background-color: #f2f2f2;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 16px;
  color: #555;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  margin-top: 70px;
}

/* Make images responsive by default to prevent overflow on small screens */
img {
  max-width: 100%;
  height: auto;
}

/* Reserve space to reduce CLS when possible via utility classes */
.img-square-150 {
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
}

.img-square-100 {
  width: 100px;
  height: 100px;
  aspect-ratio: 1/1;
}

.img-square-64 {
  width: 64px;
  height: 64px;
  aspect-ratio: 1/1;
}

.img-app-icon {
  width: 120px;
  height: 120px;
  aspect-ratio: 1/1;
}

/* Generic aspect ratio helpers */
.ar-1-1 {
  aspect-ratio: 1/1;
}

.ar-3-4 {
  aspect-ratio: 3/4;
}

.ar-4-3 {
  aspect-ratio: 4/3;
}

.ar-16-9 {
  aspect-ratio: 16/9;
}

/* Global design tokens */
:root {
  --tile-radius: 12px;
  --social-icon-color: #74cfae;
  --page-padding-x: 50px;
  --nav-height: 70px;
}

/* Titles */

h1,
h2,
h3,
h4,
h5,
.row.centered.mt.grid img:hover {
  filter: grayscale(0%);
}

h6 {
  font-family: 'Raleway';
  font-weight: 300;
  color: #333;
}

/* Paragraph & Typographic */

p {
  line-height: 28px;
  margin-bottom: 25px;
}

.centered {
  text-align: center;
}

.mt {
  margin-top: 40px;
}

.m {
  margin-bottom: 20px;
}

.m img {
  border-radius: 20%;
}

/* Links */

a {
  color: #f85c37;
  word-wrap: break-word;
  -webkit-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -moz-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -ms-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -o-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
}

a:hover,
a:focus {
  color: #7b7b7b;
  text-decoration: none;
  outline: 0;
}

a:before,
a:after {
  -webkit-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -moz-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -ms-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  -o-transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
  transition:
    color 0.1s ease-in,
    background 0.1s ease-in;
}

/* Layout wrapper for consistent horizontal padding */
.page-container {
  padding-left: var(--page-padding-x);
  padding-right: var(--page-padding-x);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Bottom spacing after screenshot groups */
.screens-section {
  padding-bottom: 50px;
}

/* Align all text elements to same left edge */
.page-container h1,
.page-container h2,
.page-container h3,
.page-container p {
  margin-left: 0;
}

.page-container ul {
  margin-left: 20px;
}

@media (max-width: 700px) {
  .page-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Bootstrap Modifications */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

button:focus {
  outline: 0;
}

.navbar {
  font-weight: 800;
  font-size: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #ffffff;
}

/* Remove Bootstrap's pill-style active background to let our rounded button show */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: inherit;
  background-color: transparent;
  margin-top: 0;
}

.navbar-brand {
  font-size: 60px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-left img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  float: left;
  border-spacing: inherit;
  border-color: aquamarine;
  border: 3px solid #74cfae;
}

.btn-theme {
  color: #ffffff;
  background-color: #74cfae;
  border-color: transparent;
}

.btn {
  padding: 10px 30px;
  margin-bottom: 0;
  font-size: 18px;
  border: 5px solid transparent;
  border-radius: 8px;
}

.lead {
  letter-spacing: 1px;
}

/* Subtle UI polish */
.btn-theme {
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.navbar-contact {
  padding: 8px 16px;
  line-height: 1.2;
  margin-top: 0;
}

/* Vertically center button-style nav links across all pages */
.navbar .navbar-nav > li > a.navbar-contact.navbar-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Ensure full navbar content (profile image + buttons) vertically centers */
/* Flex layout for vertical centering without collapsing horizontal spacing */
.navbar .navbar-collapse.collapse {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  /* keep natural wide space */
}

/* Left group (profile image) */
.navbar-left {
  display: flex;
  align-items: center;
  margin-right: 0;
  /* no forced extra reduction */
}

/* Nav list on the right pushes itself to far edge creating original gap */
.navbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Ensure any nav UL gets vertical centering for items */
.navbar .navbar-nav {
  display: flex;
  align-items: center;
}

.btn-theme:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  background-color: #5ec8a7;
}

/* Navbar scroll state */
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Focus accessibility */
body.user-tabbing a:focus-visible,
body.user-tabbing button:focus-visible,
body.user-tabbing .segment:focus-visible {
  outline: 3px solid #74cfae;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Project tile micro interaction */
.img-container img {
  transition:
    transform 0.35s cubic-bezier(0.25, 0.9, 0.25, 1),
    box-shadow 0.35s ease;
  will-change: transform;
}

.img-container img:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Service card reveal depth */
.service-card {
  transform: translateY(18px) rotateX(6deg);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.16, 0.8, 0.3, 1),
    opacity 0.8s ease;
  transform-style: preserve-3d;
}

.service-card.revealed {
  transform: translateY(0) rotateX(0deg);
  opacity: 1;
}

/* Counters section */
#counters {
  background: #ffffff;
  padding: 50px 0;
}

#counters .counter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

#counters .counter-box {
  text-align: center;
  min-width: 150px;
}

#counters .counter-box h3 {
  font-size: 46px;
  margin: 0;
  font-weight: 700;
  color: #0d6ca3;
}

#counters .counter-box p {
  margin-top: 8px;
  font-size: 16px;
}

/* Segment progress bar */
.segment-progress {
  height: 4px;
  background: #d1ece6;
  margin-top: 14px;
  border-radius: 2px;
  overflow: hidden;
}

.segment-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #74cfae;
  transition: transform 0.45s cubic-bezier(0.25, 0.9, 0.25, 1);
}

/* Spark elements */
.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at center, #ffffff 0%, #74cfae 70%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.6s cubic-bezier(0.25, 0.9, 0.25, 1),
    opacity 0.6s ease;
  mix-blend-mode: screen;
}

/* Magnetic CTA baseline to avoid layout shift */
#email-me {
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Card style for services */
.service-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Portfolio image polish */
.img-container img {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: var(--tile-radius);
}

.img-container img:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

/* Portfolio "card" look without changing markup */
.row.centered.mt.grid .img-container a,
.row.centered.mt.grid .m a {
  display: inline-block;
  background: transparent;
  /* match image size, no extra background */
  border-radius: var(--tile-radius);
  /* match image radius */
  padding: 0;
  /* ensure wrapper is same size as image */
  overflow: hidden;
  /* clip image corners cleanly */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* Ensure images inside tiles inherit the same radius as the wrapper */
.row.centered.mt.grid .img-container img,
.row.centered.mt.grid .m img {
  border-radius: inherit;
  display: block;
  /* remove inline-gap that can show behind corners */
}

.row.centered.mt.grid .img-container a:hover,
.row.centered.mt.grid .m a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  background: transparent;
  /* keep same size on hover */
}

/* Remove side shadow effect inside segmented slider lists */
.projects-slider .img-container a,
.projects-slider .m a {
  box-shadow: none !important;
}

.projects-slider .img-container a:hover,
.projects-slider .m a:hover {
  box-shadow: none !important;
  transform: translateY(-4px);
}

/* Social icons (unified across all pages) */
#social i.fa {
  font-size: 40px;
  color: var(--social-icon-color);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

#social a:hover i.fa {
  transform: translateY(-2px) scale(1.08);
  color: #0d6ca3;
}

/* Segmented control & slider */
.segmented-block {
  padding: 16px 14px 8px;
  margin: 10px auto 20px;
}

.segment-control {
  display: inline-flex;
  background: rgba(125, 226, 209, 0.35);
  /* match turquoise theme */
  border-radius: 12px;
  padding: 6px;
  gap: 6px;
}

.segment-control .segment {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  color: #0d6ca3;
  cursor: pointer;
}

.segment-control .segment.active {
  background: #ffffff;
  box-shadow: none;
  /* remove inner shadow look */
}

.projects-slider {
  position: relative;
  overflow: hidden;
  /* hide the non-selected slide */
  width: 100%;
  margin-top: 18px;
}

.projects-track {
  display: flex;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.45s ease;
}

.projects-slide {
  width: 50%;
  flex: 0 0 50%;
}

.projects-slide .row.centered.mt.grid {
  display: block;
}

/* Navigation links emphasis */
.navbar .nav > li > a {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Equal-height service rows */
.services-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.services-row > [class*='col-'] {
  /* Make bootstrap columns participate as flex items */
  float: none;
  display: flex;
  flex-direction: column;
  /* Mobile default: full width */
  flex: 0 0 100%;
  max-width: 100%;
}

.services-row > [class*='col-'] .service-card {
  height: 100%;
}

.services-row .service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Small screens (>=768px): match col-sm-6 => 50% */
@media (min-width: 768px) {
  .services-row > [class*='col-'] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Medium and up (>=992px): match col-md-4/col-lg-4 => 33.333% */
@media (min-width: 992px) {
  .services-row > [class*='col-'] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

.services-row .service-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Section copy width */
#green .lead {
  max-width: 920px;
  margin: 10px auto 0;
}

/* Responsive tuning for hero title */
@media (max-width: 767px) {
  .title {
    margin: 12vw;
    margin-left: 6vw;
  }
}

/* WRAP SECTIONS */

/* hello */

#hello {
  background-color: #031926;
  position: relative;
  /* Fill viewport minus navbar and show a small peek of next section */
  min-height: calc(100vh - var(--nav-height, 70px) - 20px);
  overflow: hidden;
}

/* Ensure inner wrappers don't steal the positioning context and inherit height */
#hello > .col-lg-12,
#hello .row {
  position: static !important;
  min-height: inherit;
  width: 100%;
}

#hello h1 {
  font-size: clamp(28px, 8vw, 64px);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7de2d1;
  line-height: 1.1;
  margin: 0 0 8px;
}

#hello h2 {
  color: #9dbebb;
  font-weight: 400;
  font-size: clamp(16px, 2.8vw, 28px);
  line-height: 1.35;
}

/* Generic .title is used elsewhere; hero gets a scoped override */
#hello .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 6vw;
  text-align: center;
  width: min(1100px, 100%);
  float: none !important;
  z-index: 2;
  /* above background, below particles */
}

/* Make the particles background fill the entire hero */
#particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* render stars above title */
  pointer-events: auto;
  /* allow interaction with particles */
  width: 100%;
  height: 100%;
}

/* Ensure the canvas created by particles.js receives events */
#particles canvas {
  pointer-events: auto;
  display: block;
}

/* Avoid text being selected when tapping/dragging over the hero */
#hello .title,
#hello .title h1,
#hello .title h2 {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#details,
#details-sm,
#details-lg,
#details-xlg {
  width: 100%;
  padding: 50px;
  background-color: #e6f2f1;
}

/* Remove fixed heights so content can grow naturally */
#details,
#details-sm,
#details-lg,
#details-xlg {
  padding: 60px 50px 50px;
  /* a little extra top room for project header */
}

#details h1,
#details-sm h1,
#details-lg h1,
#details-xlg h1 {
  font-weight: 400;
  color: #0d6ca3;
}

#details h3,
#details-sm h3,
#details-lg h3,
#details-xlg h3 {
  color: #0d6ca3;
}

#details p,
#details-sm p,
#details-lg p,
#details-xlg p {
  color: #0d6ca3;
}

#details span,
#details-sm span,
#details-lg span,
#details-xlg span {
  font-weight: 400;
}

#details img:not(.project-logo),
#details-sm img:not(.project-logo),
#details-lg img:not(.project-logo),
#details-xlg img:not(.project-logo) {
  float: right;
  border-radius: 10%;
  width: 30vw;
  height: 30vw;
  margin-right: 10px;
}

/* Project header layout (title left, logo right) */
.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 50px;
  margin-bottom: 30px;
  /* ensure following headings sit closer but not overlapping */
}

.project-header h1 {
  margin: 0;
  flex: 1 1 300px;
}

.project-logo {
  float: none !important;
  width: 300px;
  height: 300px;
  max-width: 100%;
  border-radius: 10%;
  object-fit: contain;
  /* preserve intrinsic aspect ratio inside square */
  aspect-ratio: 1 / 1;
  margin: 0;
  flex: 0 0 auto;
  /* prevent stretching */
  background-color: rgba(0, 0, 0, 0.02);
  /* subtle backdrop for non-square images */
}

@media (max-width: 800px) {
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .project-logo {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 1720px) {
  .title {
    margin-left: 25vw;
  }
}

/* Removed old fixed height media query overrides to allow natural stacking */

/* Classes */

#classes {
  background-color: #e6f2f1;
  /*3a3c48*/
  padding-top: 50px;
  margin-bottom: 0px;
  padding-bottom: 50px;
}

#classes h2 {
  color: #0d6ca3;
  font-weight: 400;
}

#classes .col-lg-5 img {
  width: 300px;
}

#meetup-icon {
  /*    position: absolute;*/
  width: 100px;
  margin: 20px;
}

/* Green */

#green {
  background-color: #7de2d1;
  padding-top: 30px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/* When #green is used as a screenshots section ensure bottom spacing applies */
#green.screens-section {
  padding-bottom: 90px !important;
}

#green h2 {
  color: #0d6ca3;
  font-weight: 400;
}

/* Extra bottom spacing for screenshots section title (Quick Cash) */
.program-shots-title {
  margin-bottom: 32px;
}

#green .storyboard {
  width: 100%;
  margin: 20px;
  padding-right: 100px;
}

#green .shotsCollection {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

#green .shotsCollection .screenShots {
  flex: 0 1 180px;
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 18px;
  /* phone-like rounded corners */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  /* subtle lift */
}

/* Habitara page screenshots: ensure they don't overflow even without .shotsCollection wrapper */
#green .screenShots {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 10px 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

@media (max-width: 700px) {
  #green .shotsCollection .screenShots {
    flex: 0 1 45%;
    width: 45%;
  }

  #green {
    padding-left: 30px;
    padding-right: 30px;
  }
}

iframe {
  padding-left: 50px;
  padding-right: 50px;
  width: 100%;
}

/* Photo */

#photo {
  background-color: #7de2d1;
  background: url('../../assets/img/apps.jpeg');
  background-size: contain;
  padding-top: 50px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/* Skills */

#skills {
  background-color: #5e807f;
  padding-top: 150px;
  padding-bottom: 50px;
  margin-top: 150px;
}

#skills h3 {
  color: white;
}

#skills p {
  color: white;
  font-weight: 400;
}

/* Social Links */

#social {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #ffffff;
}

@media (max-width: 768px) {
  #social {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

#social i {
  /* retain generic selector for any non-FontAwesome icons */
  font-size: 40px;
  color: var(--social-icon-color);
}

#social .col-md-2:hover {
  background-color: #e6f2f1;
}

#social .col-md-2 {
  padding: 30px;
  border-radius: 100%;
}

/* Footer */

#f {
  padding-top: 20px;
  background-color: #74cfae;
}

#f p {
  color: white;
  text-align: right;
  font-weight: 400;
}

/* Image */

.grid img {
  opacity: 0.6;
  width: 150px;
  height: 150px;
}

.grid img:hover {
  opacity: 1;
}

.img-container img {
  background-color: white;
  object-fit: contain;
}

/* Force specific images to fill their square tile */
.img-container img.cover-image {
  object-fit: cover;
}

/* * {
    border: #031926 solid 2px;
} */
/* Mobile horizontal padding adjustments */
@media (max-width: 700px) {
  .navbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  #counters {
    padding-left: 12px;
    padding-right: 12px;
  }

  #f {
    padding-left: 12px;
    padding-right: 12px;
  }
}