/* ============================================ MONLIS Website - Studio Services Section 8 service cards in 4x2 grid Figma node:2:2887 ============================================ *//* ========================================== SERVICES CONTAINER Figma specs:- Background:gradient #0a0a0a to #1a1a1a - Padding:128px top ========================================== */.studio-services {width:100%;background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 50%,#0a0a0a 100%);padding:128px 0;position:relative;overflow:hidden;}/* Decorative blur elements */.studio-services::before,.studio-services::after {content:'';position:absolute;border-radius:50%;filter:blur(64px);opacity:0.3;pointer-events:none;}.studio-services::before {width:256px;height:256px;top:0;left:0;background:rgba(255,255,255,0.1);}.studio-services::after {width:384px;height:384px;bottom:0;right:0;background:rgba(255,255,255,0.1);}.studio-services__container {max-width:1340px;margin:0 auto;padding:0 48px;display:flex;flex-direction:column;gap:80px;}/* ========================================== SECTION HEADER Title with decorative line ========================================== */.studio-services__header {display:flex;align-items:flex-start;gap:32px;}.studio-services__header-line {width:80px;height:2px;background:linear-gradient(180deg,#ffffff 0%,#6a7282 100%);margin-top:27px;flex-shrink:0;}.studio-services__header-content {position:relative;}/* Blur decoration behind title */.studio-services__header-content::before {content:'';position:absolute;width:128px;height:64px;top:-8px;left:-8px;background:rgba(255,255,255,0.05);filter:blur(24px);border-radius:9999px;}.studio-services__title {font-family:var(--font-secondary);font-weight:600;font-size:36px;line-height:54px;letter-spacing:1.8px;text-transform:uppercase;color:var(--color-white);margin:0 0 8px 0;position:relative;}.studio-services__subtitle {font-family:var(--font-secondary);font-weight:400;font-size:14px;line-height:21px;letter-spacing:0.35px;color:#99a1af;margin:0;}/* ========================================== SERVICES GRID 4 columns,2 rows ========================================== */.studio-services__grid {display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}/* ========================================== SERVICE CARD Figma specs:- Background:rgba(255,255,255,0.1) - Border:1px solid rgba(255,255,255,0.1) - Border-radius:16px - Shadow:0px 10px 15px -3px rgba(0,0,0,0.1) ========================================== */.studio-services__card {background-color:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1);border-radius:16px;overflow:hidden;box-shadow:0px 10px 15px -3px rgba(0,0,0,0.1),0px 4px 6px -4px rgba(0,0,0,0.1);display:flex;flex-direction:column;transition:transform 0.3s ease,box-shadow 0.3s ease;}.studio-services__card:hover {transform:translateY(-4px);box-shadow:0px 20px 25px -5px rgba(0,0,0,0.2),0px 8px 10px -6px rgba(0,0,0,0.1);}/* Card Image */.studio-services__card-image-wrapper {position:relative;width:100%;height:280px;overflow:hidden;}.studio-services__card-image {width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}.studio-services__card:hover .studio-services__card-image {transform:scale(1.05);}/* Image overlay gradient */.studio-services__card-image-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);opacity:0.6;pointer-events:none;}/* Card Content */.studio-services__card-content {padding:24px;display:flex;flex-direction:column;gap:12px;}/* Card Header (title arrow) */.studio-services__card-header {display:flex;align-items:center;justify-content:space-between;}.studio-services__card-title {font-family:var(--font-secondary);font-weight:600;font-size:16px;line-height:24px;letter-spacing:0.4px;text-transform:uppercase;color:var(--color-white);margin:0;}.studio-services__card-arrow {width:20px;height:20px;display:flex;align-items:center;justify-content:center;}.studio-services__card-arrow svg {width:14px;height:14px;stroke:var(--color-white);stroke-width:1.5;fill:none;}/* Card divider line */.studio-services__card-divider {width:100%;height:2px;background:linear-gradient(90deg,#ffffff 0%,rgba(255,255,255,0.4) 50%,rgba(0,0,0,0) 100%);}/* Card description */.studio-services__card-description {font-family:var(--font-secondary);font-weight:400;font-size:13px;line-height:21px;color:#d1d5dc;margin:0;}/* Card CTA button */.studio-services__card-cta {display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 20px;background-color:var(--color-black);border-radius:9999px;font-family:var(--font-secondary);font-weight:600;font-size:11px;line-height:16.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-white);margin-top:8px;align-self:flex-start;transition:background-color 0.2s ease;}.studio-services__card-cta:hover {background-color:#333;}/* Section bottom divider */.studio-services__divider {width:100%;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0) 100%);}/* ========================================== RESPONSIVE STYLES ========================================== *//* Large Desktop (1440px) */@media (max-width:1440px) {.studio-services__container {padding:0 40px;}.studio-services__grid {gap:24px;}}/* Desktop (1200px) */@media (max-width:1200px) {.studio-services {padding:100px 0;}.studio-services__grid {grid-template-columns:repeat(3,1fr);}.studio-services__title {font-size:32px;line-height:48px;}}/* Tablet (1024px) */@media (max-width:1024px) {.studio-services {padding:80px 0;}.studio-services__container {gap:60px;}.studio-services__grid {grid-template-columns:repeat(2,1fr);gap:20px;}.studio-services__header-line {width:60px;}.studio-services__title {font-size:28px;line-height:42px;}}/* Mobile (768px) */@media (max-width:768px) {.studio-services {padding:60px 0;}.studio-services__container {padding:0 20px;gap:40px;}.studio-services__header {flex-direction:column;gap:16px;}.studio-services__header-line {margin-top:0;width:60px;}.studio-services__title {font-size:24px;line-height:36px;}.studio-services__grid {grid-template-columns:1fr;gap:16px;}.studio-services__card-image-wrapper {height:45vh;min-height:250px;max-height:380px;}}/* Small Mobile (480px) */@media (max-width:480px) {.studio-services {padding:40px 0;}.studio-services__container {padding:0 15px;gap:32px;}.studio-services__title {font-size:20px;line-height:30px;}.studio-services__card-content {padding:20px;}.studio-services__card-title {font-size:14px;}}