/*========================================================= CONTACT HERO =========================================================*/ .contact-hero{ padding:100px 0; background: linear-gradient( 135deg, #0B1F3A 0%, #163A63 100%); color:var(--white); } .contact-hero .container{ max-width:1200px; } .contact-hero .breadcrumb{ display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; color:rgba(255,255,255,.75); } .contact-hero .breadcrumb a{ color:rgba(255,255,255,.85); transition:var(--transition); } .contact-hero .breadcrumb a:hover{ color:var(--accent); } .hero-subtitle{ display:inline-block; margin-bottom:18px; letter-spacing:2px; text-transform:uppercase; font-size:14px; font-weight:600; color:#D9B38C; } .contact-hero h1{ font-size:48px; color:var(--white); margin-bottom:20px; } .contact-hero p{ max-width:720px; font-size:16px; line-height:1.8; color:rgba(255,255,255,.82); } /*========================================================= CONTACT INFO =========================================================*/ .contact-info{ padding:100px 0; background:var(--background); } .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; align-items:stretch; } /*========================================================= CONTACT CARD =========================================================*/ .contact-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:35px; box-shadow:var(--shadow); transition:var(--transition); display:flex; flex-direction:column; height:100%; } .contact-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); } /*========================================================= ICON =========================================================*/ .contact-icon{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(31,78,121,.10); color:var(--secondary); font-size:28px; margin-bottom:25px; } /*========================================================= CARD TEXT =========================================================*/ .contact-card h3{ font-size:24px; color:var(--primary); margin-bottom:15px; } .contact-card p{ color:#64748B; line-height:1.8; margin-bottom:15px; } .contact-card strong{ color:var(--primary); } /*========================================================= CONTACT LIST =========================================================*/ .contact-list{ margin-top:20px; display:flex; flex-direction:column; gap:18px; list-style:none; padding:0; } .contact-list li{ display:flex; align-items:flex-start; gap:14px; } .contact-list i{ width:22px; color:var(--accent); font-size:18px; margin-top:4px; flex-shrink:0; } .contact-list span{ color:#475569; line-height:1.8; font-size:15px; } /*========================================================= QR CARD =========================================================*/ .qr-card{ justify-content:flex-start; text-align:center; } .qr-card p{ margin-bottom:20px; } .qr-image{ width:fit-content; max-width:100%; display:block; margin:20px auto 0; padding:12px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); } /*========================================================= MAP CARD =========================================================*/ .map-card{ overflow:hidden; } .map-card p{ margin-bottom:20px; } .map-card iframe{ width:100%; height:320px; border:none; border-radius:14px; display:block; margin-top:auto; } /*========================================================= EQUAL HEIGHT FIX =========================================================*/ .contact-grid>.contact-card{ min-height:560px; } .contact-card>*:last-child{ margin-bottom:0; } /*========================================================= CONTACT FORM =========================================================*/ .contact-form-section{ padding:100px 0; background:var(--white); } .contact-form{ max-width:1000px; margin:60px auto 0; background:var(--background); border:1px solid var(--border); border-radius:var(--radius); padding:45px; box-shadow:var(--shadow); } /*========================================================= FORM GRID =========================================================*/ .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; } /*========================================================= FORM GROUP =========================================================*/ .form-group{ display:flex; flex-direction:column; } .full-width{ grid-column:1/-1; margin-top:25px; } .form-group label{ margin-bottom:10px; font-size:15px; font-weight:600; color:var(--primary); } /*========================================================= INPUTS =========================================================*/ .form-group input, .form-group textarea{ width:100%; padding:15px 18px; font-family:'Poppins',sans-serif; font-size:15px; color:var(--text); background:var(--white); border:1px solid var(--border); border-radius:10px; transition:var(--transition); } .form-group textarea{ resize:vertical; min-height:180px; } /*========================================================= INPUT FOCUS =========================================================*/ .form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 4px rgba(31,78,121,.10); } /*========================================================= BUTTON =========================================================*/ .form-button{ text-align:center; margin-top:35px; } .form-button .primary-btn{ border:none; cursor:pointer; padding:16px 40px; font-size:16px; transition:var(--transition); } .form-button .primary-btn:hover{ transform:translateY(-3px); } /*========================================================= QUICK CONTACT =========================================================*/ .quick-contact{ padding:100px 0; background:var(--background); } .quick-contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:60px; } .quick-box{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:35px 25px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); } .quick-box:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); } .quick-box i{ font-size:36px; color:var(--accent); margin-bottom:20px; } .quick-box h3{ color:var(--primary); margin-bottom:12px; font-size:22px; } .quick-box p{ color:#64748B; line-height:1.7; } /*========================================================= RESPONSIVE =========================================================*/ @media(max-width:992px){ .contact-grid{ grid-template-columns:1fr; } .quick-contact-grid{ grid-template-columns:repeat(2,1fr); } .form-grid{ grid-template-columns:1fr; } } @media(max-width:768px){ .contact-hero{ padding:80px 0; } .contact-hero h1{ font-size:36px; } .contact-form{ padding:35px; } .contact-card{ padding:30px; min-height:auto; } .contact-grid>.contact-card{ min-height:auto; } .contact-cta h2{ font-size:32px; } } @media(max-width:576px){ .contact-hero h1{ font-size:30px; } .quick-contact-grid{ grid-template-columns:1fr; } .contact-form{ padding:25px; } .contact-card{ padding:25px; } .contact-icon{ width:60px; height:60px; font-size:24px; } .qr-image{ width:170px; } .map-card iframe{ height:250px; } }