:root{--bg-color:#F9F7F4;--accent-color:#C06C55;--text-primary:#4A4A4A;--text-secondary:#888888;--white:#FFFFFF;--nav-bg-scrolled:rgba(255,255,255,0.95);--font-heading:'Playfair Display',serif;--font-body:'Lato',sans-serif;--transition:all 0.4s ease} .fade-in-section{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease-out,transform 0.8s ease-out;will-change:opacity,transform} .fade-in-section.is-visible{opacity:1;transform:none} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);line-height:1.6;overflow-x:hidden} body.no-scroll{overflow:hidden} a{text-decoration:none;color:inherit;transition:var(--transition)} ul{list-style:none} img{width:100%;height:auto;display:block;object-fit:cover} h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400} .container{max-width:1200px;margin:0 auto;padding:0 20px} .section-padding{padding:100px 0} .btn{display:inline-block;padding:14px 32px;background-color:var(--accent-color);color:var(--white);font-family:var(--font-body);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:0.85rem;border:1px solid var(--accent-color);cursor:pointer} .btn:hover{background-color:transparent;color:var(--accent-color)} header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:15px 0;transition:var(--transition);background:transparent;backdrop-filter:none;box-shadow:none} header.scrolled{background:rgba(255,255,255,0.98);padding:25px 0;box-shadow:0 2px 20px rgba(0,0,0,0.05)} header.scrolled .logo,header.scrolled .nav-links a{color:var(--text-primary)} nav{display:flex;align-items:center;justify-content:flex-start;position:relative;height:100%;padding:0 20px;gap:15px} .header-social{position:fixed;right:80px;top:60px;display:flex;gap:12px;z-index:999;transition:var(--transition)} .menu-toggle{position:fixed;right:20px;top:60px;z-index:999;transition:var(--transition)} .logo{position:fixed;left:50%;top:60px;transform:translateX(-50%);font-size:1.2rem;font-weight:700;letter-spacing:2px;color:var(--text-primary);text-decoration:none;transition:var(--transition);display:flex;align-items:center;justify-content:center;z-index:999;background:transparent;padding:0} .logo img{height:180px;width:auto;display:block;filter:brightness(0) invert(1);transition:var(--transition);max-width:100%} header.scrolled .logo{opacity:0;visibility:hidden} header.scrolled .header-social{top:10px;transform:none} header.scrolled .menu-toggle{top:10px;transform:none} .nav-links{position:fixed;top:0;right:-100%;width:400px;height:100vh;background:rgba(255,255,255,0.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;transition:0.5s cubic-bezier(0.77,0,0.175,1);z-index:1001;box-shadow:-10px 0 30px rgba(0,0,0,0.15)} .nav-links.active{right:0} .nav-links a{color:var(--text-primary);font-family:var(--font-heading);font-size:2rem;text-transform:uppercase;letter-spacing:2px;text-decoration:none;transition:var(--transition);opacity:0;transform:translateY(20px)} .nav-links.active a{opacity:1;transform:translateY(0);transition-delay:0.2s} .nav-links a:hover{color:var(--accent-color);letter-spacing:4px} .menu-toggle{display:flex;flex-direction:column;justify-content:space-between;width:40px;height:32px;cursor:pointer;z-index:1002;transition:var(--transition);background:transparent;border:none;padding:0} .menu-toggle span{display:block;width:100%;height:3px;background-color:white;transition:all 0.3s ease-in-out;transform-origin:center} header.scrolled .menu-toggle span{background-color:var(--text-primary)} .menu-toggle.active span:nth-child(1){transform:translateY(11px) rotate(45deg)} .menu-toggle.active span:nth-child(2){opacity:0;transform:translateX(-20px)} .menu-toggle.active span:nth-child(3){opacity:0;transform:translateX(20px)} .menu-toggle.active span:nth-child(4){transform:translateY(-11px) rotate(-45deg)} .menu-toggle.active span{background-color:var(--text-primary)} .close-menu{display:none !important} .back-home-btn{position:fixed;left:40px;top:110px;z-index:999;color:#000 !important;transition:var(--transition);display:flex;align-items:center;justify-content:center;text-decoration:none} .back-home-btn i{width:120px;height:120px;stroke-width:6px;stroke:#000 !important;color:#000 !important} .back-home-btn:hover{transform:translateX(-5px)} header.scrolled .back-home-btn{top:25px;color:#000 !important} header.scrolled .back-home-btn i{stroke:#000 !important;color:#000 !important} @media (max-width:768px){.back-home-btn{left:20px;top:30px} .back-home-btn i{width:24px;height:24px} header.scrolled .back-home-btn{top:20px} } .home-button{position:fixed;left:30px;top:120px;z-index:999;background:transparent;color:#000;font-family:var(--font-heading);font-size:1rem;font-weight:600;text-decoration:none;padding:10px 20px;border:2px solid #000;border-radius:5px;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px} .home-button:hover{background:#000;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)} header.scrolled .home-button{top:140px} .hero{min-height:100vh;width:100%;position:relative;display:flex;align-items:flex-end;justify-content:flex-start;padding:180px 0 120px;text-align:left;color:var(--white);overflow:hidden} .hero-bg-slider{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2;overflow:hidden} .hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;transition:transform 1.5s ease-in-out;will-change:transform} .hero-slide-1{background-image:url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2600&auto=format&fit=crop');transform:translateX(0)} .hero-slide-2{background-image:url('../web foto2.jpg');transform:translateX(100%)} .hero-slide-3{background-image:url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=2600&auto=format&fit=crop');transform:translateX(100%)} .hero-bg-slider.slide-active-2 .hero-slide-1{transform:translateX(-100%)} .hero-bg-slider.slide-active-2 .hero-slide-2{transform:translateX(0)} .hero-bg-slider.slide-active-2 .hero-slide-3{transform:translateX(100%)} .hero-bg-slider.slide-active-3 .hero-slide-1{transform:translateX(100%)} .hero-bg-slider.slide-active-3 .hero-slide-2{transform:translateX(-100%)} .hero-bg-slider.slide-active-3 .hero-slide-3{transform:translateX(0)} @media (max-width:768px){.hero-slide-1{background-image:url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=800&auto=format&fit=crop')} } .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,rgba(10,10,10,0.75) 0%,rgba(0,0,0,0.35) 55%,rgba(0,0,0,0.65) 100%);z-index:-1} .hero-content{width:100%;position:relative;z-index:1} .hero-text{max-width:720px} .hero-eyebrow{font-size:0.85rem;letter-spacing:6px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:20px;display:inline-block} .hero-content h1{font-size:clamp(2.75rem,5vw,4.5rem);letter-spacing:1px;margin-bottom:1rem} .hero-lead{font-size:1.1rem;line-height:1.8;color:rgba(255,255,255,0.8);margin-bottom:2rem} .hero-cta{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:2.5rem;align-items:center} .whatsapp-btn{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);border-radius:50%;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 15px rgba(37,211,102,0.3)} .whatsapp-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px rgba(37,211,102,0.5)} .whatsapp-btn svg{width:28px;height:28px;fill:white} .btn-secondary{background-color:transparent;color:var(--accent-color);border-color:rgba(192,108,85,0.6)} .btn-secondary:hover{background-color:var(--accent-color);color:var(--white)} .hero .btn-secondary{color:var(--white);border-color:rgba(255,255,255,0.6)} .hero .btn-secondary:hover{background-color:rgba(255,255,255,0.9);color:var(--text-primary)} .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:20px} .hero-stat{padding:18px 22px;border:1px solid rgba(255,255,255,0.2);border-radius:12px;backdrop-filter:blur(8px);background:rgba(255,255,255,0.05)} .stat-number{display:block;font-size:2rem;font-weight:600;font-family:var(--font-heading)} .stat-label{font-size:0.85rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.75)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .about-img{position:relative} .about-img img{width:100%;height:600px;object-fit:cover;box-shadow:20px 20px 0px rgba(192,108,85,0.1)} .about-text h2{font-size:2.5rem;color:var(--accent-color);margin-bottom:30px;position:relative;display:inline-block} .about-text p{color:var(--text-secondary);margin-bottom:20px;font-size:1.05rem;font-weight:300} .signature{font-family:var(--font-heading);font-style:italic;font-size:1.8rem;color:var(--accent-color);margin-top:30px} #work{background-color:#fff} .section-header{text-align:center;margin-bottom:60px} .section-header h2{font-size:2.5rem;color:var(--accent-color);margin-bottom:10px} .section-header p{color:var(--text-secondary);font-family:var(--font-body);letter-spacing:1px} .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .project-card{position:relative;height:400px;overflow:hidden;cursor:pointer;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);background:var(--white)} .project-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 100%);opacity:0;transition:opacity 0.4s ease;z-index:1;border-radius:12px} .project-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,0.15)} .project-card:hover::before{opacity:1} .project-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.4,0,0.2,1)} .project-card:hover img{transform:scale(1.1)} .project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(192,108,85,0.95) 0%,rgba(192,108,85,0.85) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);padding:30px;text-align:center;z-index:2;border-radius:12px} .project-card:hover .project-overlay{opacity:1} .project-title{font-family:var(--font-heading);font-size:1.75rem;color:var(--white);margin-bottom:12px;transform:translateY(30px);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1) 0.1s;font-weight:600;letter-spacing:0.5px} .project-category{font-family:var(--font-body);text-transform:uppercase;font-size:0.85rem;letter-spacing:3px;color:rgba(255,255,255,0.9);transform:translateY(30px);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1) 0.2s;font-weight:400;margin-bottom:20px} .project-view-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.4);color:var(--white);font-family:var(--font-body);font-size:0.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:50px;transform:translateY(30px);opacity:0;transition:all 0.5s cubic-bezier(0.4,0,0.2,1) 0.3s;cursor:pointer;backdrop-filter:blur(10px)} .project-view-btn:hover{background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.6);transform:translateY(0) scale(1.05)} .project-card:hover .project-title,.project-card:hover .project-category,.project-card:hover .project-view-btn{transform:translateY(0);opacity:1} footer{text-align:center;padding:120px 20px 40px 20px;background-color:var(--bg-color);position:relative;overflow:hidden} footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2600&auto=format&fit=crop');background-size:cover;background-position:center;z-index:0} @media (max-width:768px){footer::before{background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=800&auto=format&fit=crop')} } footer::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(10,10,10,0.85) 0%,rgba(0,0,0,0.75) 100%);z-index:1} footer>*{position:relative;z-index:2} .footer-cta h2{font-size:3rem;color:var(--accent-color);margin-bottom:40px} .footer-links{display:flex;flex-direction:column;gap:15px;margin-bottom:60px} .footer-link{font-size:1.2rem;color:var(--white);position:relative;display:inline-block;margin:0 auto} .footer-link:hover{color:var(--accent-color)} .copyright{border-top:1px solid rgba(255,255,255,0.2);padding-top:40px;font-size:0.8rem;color:rgba(255,255,255,0.8);letter-spacing:1px} .contact-form-container{max-width:600px;margin:0 auto} .contact-form .form-group{margin-bottom:20px} .contact-form input,.contact-form textarea{width:100%;padding:15px;background-color:transparent;border:1px solid #ddd;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);outline:none;transition:border-color 0.3s ease} .contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent-color)} .contact-form button{width:100%;cursor:pointer} .contact-form button:disabled{opacity:0.6;cursor:not-allowed} .form-message{font-family:var(--font-body);font-size:0.9rem;line-height:1.5} .contact-form label{user-select:none} .contact-form input[type="checkbox"]{width:auto;margin:0;cursor:pointer} .discovery-btn{display:inline-block;padding:20px 60px;background:linear-gradient(135deg,var(--accent-color) 0%,#a85a42 100%);color:var(--white);font-family:var(--font-heading);font-size:1.2rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border-radius:8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 8px 25px rgba(192,108,85,0.3);text-decoration:none} .discovery-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(192,108,85,0.45);background:linear-gradient(135deg,#a85a42 0%,var(--accent-color) 100%)} .lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:2000;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity 0.3s ease} .lightbox.active{display:flex;opacity:1} .lightbox-content{position:relative;max-width:80%;width:1200px;max-height:85vh;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:60px} .lightbox-content img{max-width:55%;max-height:80vh;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,0.5)} .lightbox-counter{position:absolute;top:30px;left:50%;transform:translateX(-50%);color:#fff;font-size:1rem;font-family:var(--font-body);background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:20px;z-index:2001;letter-spacing:1px} .lightbox-close{position:absolute;top:30px;right:30px;color:#fff;font-size:2rem;cursor:pointer;z-index:2001;transition:transform 0.3s ease} .lightbox-close:hover{transform:rotate(90deg);color:var(--accent-color)} .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.7);font-size:4rem;cursor:pointer;padding:20px;z-index:2001;transition:all 0.3s ease;user-select:none} .lightbox-prev{left:20px} .lightbox-next{right:20px} .lightbox-nav:hover{color:var(--accent-color);transform:translateY(-50%) scale(1.1)} .lightbox-details{color:#fff;text-align:left;margin-top:0;max-width:35%} .lightbox-title{font-family:var(--font-heading);font-size:2rem;margin-bottom:10px;color:var(--white)} .lightbox-location{font-family:var(--font-body);font-size:0.9rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent-color);margin-bottom:20px} .lightbox-description{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:#ddd;font-weight:300} .faq-section{background:linear-gradient(180deg,var(--bg-color) 0%,#f5f3f0 100%)} .faq-container{max-width:900px;margin:0 auto} .faq-item{background:var(--white);margin-bottom:18px;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid rgba(192,108,85,0.08);transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .faq-item:hover{box-shadow:0 6px 24px rgba(0,0,0,0.1);border-color:rgba(192,108,85,0.2);transform:translateY(-2px)} .faq-item.active{border-color:rgba(192,108,85,0.3);box-shadow:0 8px 30px rgba(192,108,85,0.15)} .faq-question{padding:28px 35px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-heading);font-size:1.15rem;color:var(--text-primary);transition:all 0.3s ease;background:var(--white);position:relative} .faq-question::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-color);opacity:0;transition:opacity 0.3s ease} .faq-item.active .faq-question::before{opacity:1} .faq-question:hover{color:var(--accent-color);padding-left:40px} .faq-item.active .faq-question{color:var(--accent-color);font-weight:600} .faq-icon{font-size:1.8rem;color:var(--accent-color);font-weight:300;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);line-height:1;min-width:24px;text-align:center} .faq-item.active .faq-icon{transform:rotate(45deg)} .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1),padding 0.4s ease;padding:0 35px;background:rgba(249,247,244,0.5)} .faq-item.active .faq-answer{max-height:500px;padding:0 35px 28px 35px} .faq-answer p{color:var(--text-secondary);line-height:1.9;font-size:1.05rem;margin:0} .testimonials-section{background:linear-gradient(180deg,#fff 0%,var(--bg-color) 100%)} .testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:50px} .testimonial-card{background:var(--white);padding:40px;border-radius:16px;position:relative;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(192,108,85,0.08);overflow:hidden} .testimonial-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color) 0%,rgba(192,108,85,0.5) 100%);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease} .testimonial-card:hover::before{transform:scaleX(1)} .testimonial-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(192,108,85,0.15);border-color:rgba(192,108,85,0.2)} .testimonial-quote{font-size:4rem;color:var(--accent-color);opacity:0.15;position:absolute;top:15px;left:25px;font-family:Georgia,serif;line-height:1;font-weight:400} .testimonial-text{color:var(--text-primary);font-size:1.05rem;line-height:1.85;margin-bottom:28px;font-style:normal;position:relative;z-index:1;font-weight:300} .testimonial-author{display:flex;align-items:center;gap:18px;margin-top:25px;padding-top:25px;border-top:1px solid rgba(192,108,85,0.1)} .testimonial-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent-color) 0%,rgba(192,108,85,0.8) 100%);display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-heading);font-size:1.4rem;font-weight:600;box-shadow:0 4px 12px rgba(192,108,85,0.3);flex-shrink:0} .testimonial-info{flex:1} .testimonial-name{font-family:var(--font-heading);font-size:1.15rem;color:var(--text-primary);margin-bottom:5px;font-weight:600} .testimonial-project{font-size:0.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;font-weight:400} .testimonial-rating{display:flex;gap:4px;margin-top:18px;justify-content:flex-start} .star{color:#FFB800;font-size:1.2rem;filter:drop-shadow(0 1px 2px rgba(255,184,0,0.3))} @media (max-width:768px){.faq-question{padding:22px 24px;font-size:1.05rem} .faq-question:hover{padding-left:28px} .faq-answer{padding:0 24px} .faq-item.active .faq-answer{padding:0 24px 22px 24px} .testimonial-card{padding:30px 25px} .testimonials-grid{grid-template-columns:1fr;gap:25px} .testimonial-quote{font-size:3rem;top:12px;left:20px} .testimonial-avatar{width:50px;height:50px;font-size:1.2rem} } @media (max-width:600px){.faq-container{padding:0 10px} .testimonial-text{font-size:1rem} } .social-links{display:flex;gap:15px;align-items:center} .social-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--white);transition:var(--transition);text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.1)} .social-icon:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,0.15)} .social-icon svg,.social-icon img{width:20px;height:20px} .social-icon.instagram{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)} .social-icon.instagram svg{fill:white} .social-icon.behance{background:#1769ff} .social-icon.behance svg{fill:white} .social-icon.pinterest{background:#E60023} .social-icon.pinterest svg{fill:white} .social-icon.spotify{background:#1DB954;width:75px;height:75px;border-radius:50%;box-shadow:0 0 0 0 rgba(29,185,84,0.7);animation:pulse 2s infinite} .social-icon.spotify svg{fill:white;width:38px;height:38px} @keyframes pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(29,185,84,0.7)} 70%{transform:scale(1);box-shadow:0 0 0 15px rgba(29,185,84,0)} 100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(29,185,84,0)} } .spotify-wrapper{position:fixed;bottom:100px;right:40px;display:flex;align-items:center;justify-content:center;width:150px;height:150px;z-index:100} .spotify-wrapper .social-icon.spotify{position:relative;z-index:2} .spotify-text-svg{position:absolute;top:0;left:0;width:100%;height:100%;animation:rotate-text 10s linear infinite;pointer-events:none} .spotify-text-svg text{fill:#ffffff;font-family:var(--font-heading);text-transform:uppercase} @keyframes rotate-text{from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .header-social{display:flex;gap:12px;margin-left:auto;margin-right:20px} .header-social .social-icon{width:44px;height:44px;background:transparent;box-shadow:none} .header-social .social-icon svg,.header-social .social-icon img{width:24px;height:24px} .header-social .social-icon svg{fill:white} .header-social .social-icon:hover{background:rgba(255,255,255,0.1)} header.scrolled .header-social .social-icon svg{fill:var(--text-primary)} header.scrolled .header-social .social-icon:hover{background:rgba(0,0,0,0.05)} .footer-social{display:flex;gap:15px;justify-content:center;margin-top:30px} @media (max-width:768px){.header-social{display:flex;gap:8px;margin-right:10px} .header-social .social-icon{width:36px;height:36px} .header-social .social-icon svg{width:20px;height:20px} } .language-dropdown{position:fixed;top:60px;left:40px;z-index:1000} .lang-dropdown-btn{background:transparent;border:2px solid white;color:white;padding:8px 16px;font-size:0.9rem;font-weight:700;cursor:pointer;border-radius:6px;transition:var(--transition);font-family:var(--font-body);display:flex;align-items:center;gap:8px;min-width:80px} .lang-dropdown-btn:hover{background:rgba(255,255,255,0.1)} .lang-dropdown-btn svg{transition:transform 0.3s ease} .lang-dropdown-btn.active svg{transform:rotate(180deg)} header.scrolled .lang-dropdown-btn{border-color:var(--text-primary);color:var(--text-primary)} header.scrolled .lang-dropdown-btn:hover{background:rgba(0,0,0,0.05)} .lang-dropdown-menu{position:absolute;top:100%;left:0;margin-top:8px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;min-width:140px} .lang-dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)} .lang-option{display:block;width:100%;padding:12px 16px;background:transparent;border:none;color:var(--text-primary);font-size:0.9rem;font-weight:600;font-family:var(--font-body);text-align:left;cursor:pointer;transition:var(--transition)} .lang-option:hover{background:rgba(192,108,85,0.1)} .lang-option.active{background:var(--accent-color);color:white} @media (max-width:768px){.language-dropdown{top:30px;left:20px} .lang-dropdown-btn{padding:6px 12px;font-size:0.8rem;min-width:70px} .lang-option{padding:10px 14px;font-size:0.85rem} } @media (max-width:1024px){.hero{padding:140px 0 100px} .hero-stats{grid-template-columns:repeat(2,minmax(160px,1fr))} .portfolio-grid{grid-template-columns:repeat(2,1fr)} .about-img img{height:500px} } @media (max-width:768px){.hero{padding:120px 0 80px;text-align:center} .hero-text{text-align:center;margin:0 auto} .hero-cta{flex-direction:column} .hero-stats{grid-template-columns:repeat(2,minmax(140px,1fr))} .hero-content h1{font-size:2.5rem} .about-grid{grid-template-columns:1fr;gap:40px} .about-img img{height:400px;box-shadow:none} header{background:var(--nav-bg-scrolled)} nav{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:15px;position:relative} .logo{grid-column:2;justify-self:center;margin-bottom:0} .logo img{height:110px !important} header.scrolled .logo img{height:80px !important} .header-social{grid-column:3;justify-self:flex-end;margin-right:0} .menu-toggle{grid-column:4;justify-self:flex-end} .nav-links{width:100%;max-width:100vw;right:-100%} .nav-links.active{right:0} .header-social .social-icon{width:28px;height:28px} } @media (max-width:600px){.hero{padding:110px 0 70px} .hero-stats{grid-template-columns:1fr} .portfolio-grid{grid-template-columns:1fr} .footer-cta h2{font-size:2rem} .project-card{height:300px} .project-overlay{padding:20px} .project-title{font-size:1.5rem} .project-view-btn{padding:10px 20px;font-size:0.75rem} } @media (max-width:900px){.lightbox-content{flex-direction:column;width:95%} .lightbox-content img{max-width:100%;max-height:50vh;margin-bottom:20px} .lightbox-details{max-width:100%;text-align:center} .lightbox-counter{font-size:0.9rem;padding:6px 12px;top:20px} .lightbox-close{top:20px;right:20px;font-size:1.5rem} }