/* body{
  background-image: url('../img/background/landingPage.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
} */

/* body h1{
  font-size: 3rem;
  margin-top: 6em !important;
  margin-bottom: 10px;
  color: #F9F6EE;
} */

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Carousel Styles */
.carousel-wrapper {
    position: relative;
    width: 1100px;
    max-width: 95vw;
    box-sizing: border-box;
    /* 800px total width - 100px padding = 700px content area */
    margin: 0 auto;
    padding: 0 50px;
}

.carousel-container {
    overflow: hidden;
    padding: 20px 0 50px 0;
    /* Extra bottom padding for shadow/hover transform */
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 20px;
    width: max-content;
    /* Ensure track is wide enough */
}

.photo-item {
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ensure z-index allows overlap handling if needed */
    z-index: 1;
}

.photo-item img {
    transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    /* Force fully opaque */
    mix-blend-mode: normal !important;
    /* Ensure no blending */
    filter: none !important;
    /* Ensure no brightness/contrast filters */
    transform: scale(0.9);
    /* Default smaller size */
}

.photo-item.center-focus {
    z-index: 10;
    /* Bring center to front */
}

.photo-item.center-focus img {
    transform: scale(1.1);
    /* Larger center item */
    opacity: 1 !important;
    /* Full visibility */
    box-shadow: 0 10px 30px rgba(0, 199, 130, 0.5);
    /* Stronger glow */
}

.photo-item:hover img {
    /* Optional: allow hovering any item to see it clearly? No, sticking to center focus logic is cleaner for "carousel" feel. 
       But user might want to inspect side items. Let's make hover temporarily highlight */
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 199, 130, 0.4);
}

/* Ensure center-focus hover overrides or maintains dominance */
.photo-item.center-focus:hover img {
    transform: scale(1.15);
    /* Slightly bigger on hover */
    box-shadow: 0 15px 35px rgba(0, 199, 130, 0.6);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #00C782;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.carousel-btn:hover {
    background-color: #01301F;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

.carousel-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

/* End Carousel Styles */

.polaroid {
    width: 200px;
    background: #FFFFFF;
    padding: 10px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 199, 130, 0.3);
    border-radius: 5px;
    position: relative;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    /* Prevent shrinking in flex container */
}

/* LinkedIn Hover Effect */
.linkedin-photo-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.hover-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.hover-overlay i {
    font-size: 3rem;
    /* Large icon */
    color: #00C782;
    /* Green as requested */
    background-color: white;
    /* Optional: for contrast if needed, or transparent */
    border-radius: 5px;
    /* If using background */
    /* Remove background if user wants just the symbol, but "parte azul a verde" usually implies the standard icon color logic. 
       Let's stick to just coloring the icon green as requested: "símbolo... com a parte azul a verde". 
       A standard FA icon is text. So color: #00C782.
       Maybe add a white backdrop to make it readable over the face? 
       "símbolo do linkedin no centro" - simple icon.
    */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
}

.linkedin-photo-link:hover .hover-overlay {
    opacity: 1;
}

.linkedin-photo-link:hover img {
    filter: brightness(0.7);
    /* Dim image slightly to make icon pop */
    transition: filter 0.3s ease;
}

.polaroid:hover {
    transform: scale(1.05);
}

.photo-container {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    height: 200px;
    /* Fixed height for consistency */
    display: flex;
    align-items: flex-end;
    /* Align to bottom like typical headshots */
    justify-content: center;
}

.photo-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
    mix-blend-mode: multiply;
}

/* Standardize head sizes: Higher zoom for far away photos, lower for close-ups */
.photo-container img {
    transform-origin: center;
}

.img-zoom-xs img {
    transform: scale(0.8);
}

.img-zoom-sm img {
    transform: scale(1.0);
}

.img-zoom-sm-minus img {
    transform: scale(0.9);
}

.img-zoom-sm-plus img {
    transform: scale(1.2);
}

.img-zoom-sm-plus-offset-down img {
    transform: scale(1.2) translateY(15%);
}

.img-zoom-md-minus img {
    transform: scale(1.3);
}

.img-zoom-md-minus-offset-down img {
    transform: scale(1.3) translateY(15%);
}

.img-zoom-custom-125 img {
    transform: scale(1.25);
}

.img-zoom-custom-115 img {
    transform: scale(1.15);
}

.img-zoom-custom-135-offset-down img {
    transform: scale(1.35) translateY(15%);
}

.img-zoom-custom-145-offset-down img {
    transform: scale(1.45) translateY(15%);
}

.img-zoom-custom-155-offset-down img {
    transform: scale(1.55) translateY(15%);
}

.img-zoom-custom-165-offset-down img {
    transform: scale(1.65) translateY(15%);
}

.img-zoom-custom-175-offset-down img {
    transform: scale(1.75) translateY(10%);
}

.img-zoom-xs-custom img {
    transform: scale(0.85);
}

.img-zoom-md img {
    transform: scale(1.4);
}

.img-zoom-lg img {
    transform: scale(1.6);
}

.img-zoom-xl img {
    transform: scale(1.8);
}

.img-zoom-2xl img {
    transform: scale(2.0);
}

.img-zoom-3xl img {
    transform: scale(2.2);
}

.linkedin-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.linkedin-logo img {
    width: 50px;
}

.photo-container:hover .linkedin-logo {
    opacity: 1;
}

.description {
    margin-top: 10px;
}

.description strong {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
}