/* ========================================================== Dr. Georgios Mavrolefteros Website style.css Main CSS Loader ========================================================== */ /* Design System */ @import url("variables.css"); /* Website Structure */ @import url("layout.css"); /* Reusable Components */ @import url("components.css"); /* Individual Pages */ @import url("pages.css"); /* Animations */ @import url("animations.css"); /* ---------- ABOUT PAGE PHOTO LAYOUT ---------- */ .about-profile{ display:flex; align-items:center; gap:40px; max-width:1000px; margin:0 auto; } .about-photo{ width:250px; height:250px; flex-shrink:0; overflow:hidden; border-radius:50%; box-shadow:var(--shadow-lg); } .about-photo img{ width:100%; height:100%; display:block; object-fit:cover; } @media (max-width:768px){ .about-profile{ flex-direction:column; text-align:center; } } /* ---------- ABOUT PAGE LAYOUT ---------- */ .about-profile{ display:flex; align-items:flex-start; gap:50px; max-width:1100px; margin:0 auto; } .about-photo{ width:260px; height:260px; flex-shrink:0; border-radius:50%; overflow:hidden; box-shadow:var(--shadow-lg); } .about-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .about-content{ flex:1; } .about-content h1{ margin-top:0; margin-bottom:25px; } .about-content p{ margin-bottom:20px; line-height:1.8; } @media(max-width:768px){ .about-profile{ flex-direction:column; align-items:center; text-align:center; } .about-photo{ width:220px; height:220px; } } /* ---------- SERVICES PAGE ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } .service-card{ background:white; padding:35px 30px; border-radius:15px; box-shadow:var(--shadow-lg); transition:transform 0.3s ease; } .service-card:hover{ transform:translateY(-5px); } .service-card h2{ font-size:1.35rem; margin-bottom:15px; } .service-card p{ line-height:1.8; color:#555; } @media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .services-grid{ grid-template-columns:1fr; } .service-card{ padding:25px 20px; } } /* ---------- HOME HERO ---------- */ .hero{ padding:80px 0; } .hero-content{ display:flex; align-items:center; justify-content:space-between; gap:50px; } .hero-text{ flex:1; } .hero-text h1{ font-size:3rem; margin-bottom:15px; } .hero-text h2{ font-size:1.5rem; margin-bottom:25px; font-weight:500; } .hero-text p{ line-height:1.8; margin-bottom:20px; } .hero-buttons{ display:flex; gap:20px; margin-top:30px; } .hero-image{ width:320px; height:320px; flex-shrink:0; overflow:hidden; border-radius:50%; box-shadow:var(--shadow-lg); } .hero-image img{ width:100%; height:100%; object-fit:cover; } @media(max-width:900px){ .hero-content{ flex-direction:column-reverse; text-align:center; } .hero-image{ width:260px; height:260px; } .hero-buttons{ justify-content:center; } } /* ---------- SERVICES PAGE REFINEMENT ---------- */ .services-section{ margin-bottom:60px; } .services-heading{ text-align:center; font-size:2rem; margin-bottom:35px; font-weight:500; } .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .service-card{ background:white; padding:35px 30px; border-radius:15px; box-shadow:var(--shadow-lg); transition:transform 0.3s ease; } .service-card:hover{ transform:translateY(-5px); } .service-card h3{ margin-bottom:18px; font-size:1.25rem; } .service-card p{ line-height:1.8; color:#555; } @media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .services-grid{ grid-template-columns:1fr; } .services-heading{ font-size:1.6rem; } .service-card{ padding:25px 20px; } } /* ---------- FAQ PAGE ---------- */ .faq-container{ max-width:900px; margin:40px auto 0; } .faq-item{ background:white; padding:30px; margin-bottom:25px; border-radius:15px; box-shadow:var(--shadow-lg); } .faq-item h2{ font-size:1.25rem; margin-bottom:15px; } .faq-item p{ line-height:1.8; color:#555; } @media(max-width:600px){ .faq-item{ padding:25px 20px; } .faq-item h2{ font-size:1.1rem; } } /* ---------- CONTACT PAGE ---------- */ .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } .contact-card{ background:white; padding:35px 30px; border-radius:15px; box-shadow:var(--shadow-lg); text-align:center; } .contact-card h2{ font-size:1.3rem; margin-bottom:15px; } .contact-card p{ line-height:1.7; color:#555; } .contact-card a{ text-decoration:none; font-weight:600; } .contact-message{ max-width:800px; margin:60px auto 0; text-align:center; padding:40px; background:white; border-radius:15px; box-shadow:var(--shadow-lg); } .contact-message h2{ margin-bottom:20px; } .contact-message p{ line-height:1.8; margin-bottom:30px; } @media(max-width:900px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .contact-grid{ grid-template-columns:1fr; } .contact-message{ padding:30px 20px; } } /* ========================================================== MOBILE MENU - FINAL POSITIONING ========================================================== */ .mobile-toggle{ display:none; background:none; border:none; font-size:28px; cursor:pointer; padding:8px; line-height:1; z-index:1001; } @media(max-width:768px){ .site-header{ position:relative; z-index:1000; } .header-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; } .mobile-toggle{ display:block; position:relative; z-index:1002; } .main-nav{ display:none !important; width:100%; flex-basis:100%; background:white; margin-top:10px; padding:10px 0; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.12); } .main-nav.active{ display:block !important; } .main-nav ul{ display:flex; flex-direction:column; width:100%; margin:0; padding:0; list-style:none; } .main-nav li{ width:100%; text-align:center; margin:0; } .main-nav li a{ display:block; width:100%; padding:14px 20px; text-decoration:none; } }