/* =================================================================== SACHIN CHAUDHARY — COUNSELLING PROFILE SITE Design tokens live here. Change the values in :root to re-theme the whole site (colours, type, spacing, radii). =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600;700&display=swap'); :root{ /* ---- Colour palette (edit to re-theme) ---- */ --sage: #7C9885; /* primary — muted sage green */ --sage-deep: #4A6350; /* buttons, links, emphasis */ --sky: #A9C1C9; /* secondary accent — soft blue */ --sky-deep: #6E8E97; --cream: #F7F4EE; /* page background */ --sand: #ECE6D8; /* card / section background */ --ink: #2E3330; /* primary text */ --ink-soft: #5B6560; /* secondary text */ --line: #DCD5C4; /* hairline borders */ --white: #FFFFFF; /* ---- Surfaces that flip in dark mode (edit dark values below) ---- */ --surface: var(--white); /* cards: spec-card, contact-form, video-card, etc. */ --header-bg: rgba(247,244,238,.88); --overlay-bg: rgba(20,22,20,.88); /* lightbox / dark overlays */ --btn-hover-bg: var(--ink); /* btn-primary hover background */ --msg-success-bg: #E9F1EA; --msg-error-bg: #FBEAE8; --msg-error-ink: #B33A2E; --shadow-soft: 0 14px 28px -18px rgba(46,51,48,.25); /* ---- Type ---- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* ---- Layout ---- */ --max-w: 1120px; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 32px; --gap: clamp(1.25rem, 2.5vw, 2.5rem); /* ---- Motion ---- */ --ease: cubic-bezier(.4,0,.2,1); } /* =================================================================== DARK THEME Toggled by setting data-theme="dark" on (see theme toggle script in main.js). Only the tokens that need to flip are redefined here — everything else (spacing, radii, fonts) stays the same. =================================================================== */ [data-theme="dark"]{ --sage: #8FB09E; --sage-deep: #A9CBB4; --sky: #9FC0CB; --sky-deep: #C3DBE1; --cream: #1D211F; /* page background */ --sand: #262B28; /* card / section-alt background */ --ink: #ECEFEC; /* primary text */ --ink-soft: #A9B2AC; /* secondary text */ --line: #38403C; /* hairline borders */ --white: #FFFFFF; --surface: #262B28; --header-bg: rgba(20,23,21,.85); --overlay-bg: rgba(8,10,9,.92); --btn-hover-bg: #10201A; --msg-success-bg: #1F3227; --msg-error-bg: #3A211F; --msg-error-ink: #F0A399; --shadow-soft: 0 14px 28px -18px rgba(0,0,0,.55); } /* Respect system preference for first-time visitors who have not picked a theme yet (see main.js — it sets data-theme explicitly once a person toggles or if the OS is set to dark on first visit). */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body{ margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s var(--ease), color .3s var(--ease); } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); } p{ margin: 0 0 1em; color: var(--ink-soft); } a{ color: var(--sage-deep); text-decoration: none; } img{ max-width: 100%; display: block; } button{ font-family: inherit; cursor: pointer; } .container{ max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); } .eyebrow{ display: inline-block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); font-weight: 600; margin-bottom: .6em; } .section{ padding: clamp(3.5rem, 7vw, 6rem) 0; } .section-head{ max-width: 640px; margin: 0 0 2.5rem; } .section-alt{ background: var(--sand); } /* ---- Buttons ---- */ .btn{ display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.7em; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1.5px solid transparent; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--sage-deep); color: var(--white); } .btn-primary:hover{ background: var(--btn-hover-bg); color: var(--white); } .btn-outline{ border-color: var(--sage-deep); color: var(--sage-deep); background: transparent; } .btn-outline:hover{ background: var(--sage-deep); color: var(--white); } /* =================================================================== HEADER / NAV =================================================================== */ .site-header{ position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav{ display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; } .brand{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .5em; } .brand .leaf{ width: 22px; height: 22px; color: var(--sage-deep); } .nav-links{ display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links a{ color: var(--ink-soft); font-weight: 500; font-size: .95rem; position: relative; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background: var(--sage-deep); transition: width .25s var(--ease); } .nav-links a:hover::after{ width: 100%; } .nav-links a:hover{ color: var(--ink); } .nav-controls{ display:flex; align-items:center; gap:.7rem; } .nav-toggle{ display:none; background:none; border:none; padding:.4rem; } .nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin: 5px 0; transition: all .25s var(--ease); } /* ---- Theme toggle (light/dark) ---- */ .theme-toggle{ display:flex; align-items:center; justify-content:center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--sage-deep); flex-shrink: 0; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .theme-toggle:hover{ border-color: var(--sage-deep); transform: translateY(-2px); } .theme-toggle svg{ width: 19px; height: 19px; } .theme-toggle .icon-sun{ display: none; } .theme-toggle .icon-moon{ display: block; } [data-theme="dark"] .theme-toggle .icon-sun{ display: block; } [data-theme="dark"] .theme-toggle .icon-moon{ display: none; } /* =================================================================== HERO =================================================================== */ .hero{ padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); position: relative; overflow: hidden; } .hero .container{ display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-photo-wrap{ position: relative; aspect-ratio: 1 / 1; max-width: 380px; } .hero-photo-blob{ position: absolute; inset: -6%; background: linear-gradient(160deg, var(--sage) 0%, var(--sky) 100%); border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; z-index: 0; animation: blobShift 14s ease-in-out infinite; } @keyframes blobShift{ 0%,100%{ border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; } 50%{ border-radius: 58% 42% 40% 60% / 54% 60% 40% 46%; } } .hero-photo{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%; border: 6px solid var(--cream); } .hero-badges{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.2rem 0 1.4rem; } .badge{ font-size: .82rem; font-weight: 600; padding: .4em 1em; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--sage-deep); } .hero-title{ font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: .25em; } .hero-role{ font-size: 1.15rem; color: var(--sage-deep); font-weight: 600; margin-bottom: .2em; } .hero-qual{ color: var(--ink-soft); margin-bottom: .6rem; } .hero-fee{ display:flex; align-items:center; gap:.65em; margin: 0 0 1.1rem; font-size: .98rem; color: var(--ink-soft); } .fee-highlight{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding: .12em .65em .18em; } .fee-circle{ position:absolute; inset: -10px -6px -8px; width: calc(100% + 12px); height: calc(100% + 18px); pointer-events:none; } .fee-amount{ position:relative; z-index:1; font-weight:700; font-size:1.15rem; color: var(--ink); font-family: var(--font-serif, inherit); } .fee-label{ font-weight:500; } .hero-meta{ display:flex; flex-wrap:wrap; gap: 1.4rem; font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.6rem; } .hero-meta span{ display:flex; align-items:center; gap:.4em; } .hero-cta{ display:flex; gap: 1rem; flex-wrap: wrap; } /* =================================================================== ABOUT =================================================================== */ .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } .about-text p{ font-size: 1.02rem; } .about-quote{ background: var(--surface); border-radius: var(--radius-md); padding: 2rem; border: 1px solid var(--line); font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); position: relative; } .about-quote::before{ content: "\201C"; font-family: var(--font-display); font-size: 4rem; color: var(--sage); line-height: 0; display:block; margin-bottom: .6rem; } /* =================================================================== SPECIALIZATIONS =================================================================== */ .spec-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .spec-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .spec-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--sage); } .spec-icon{ width: 44px; height: 44px; border-radius: 12px; background: var(--sand); display:flex; align-items:center; justify-content:center; margin-bottom: 1rem; color: var(--sage-deep); } .spec-icon svg{ width: 22px; height: 22px; } .spec-card h3{ font-size: 1.05rem; margin-bottom: .35em; } .spec-card p{ font-size: .92rem; margin: 0; } /* =================================================================== APPROACH =================================================================== */ .approach{ display:grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); align-items: center; } .approach-visual{ aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--sky) 0%, var(--sage) 100%); position: relative; overflow: hidden; } .approach-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 30%; } .approach-list{ list-style:none; margin: 1.4rem 0 0; padding:0; display:grid; gap: .9rem; } .approach-list li{ display:flex; gap:.8em; align-items:flex-start; font-size: .97rem; color: var(--ink-soft); } .approach-list svg{ flex-shrink:0; width:20px; height:20px; color: var(--sage-deep); margin-top: .15em; } /* =================================================================== DETAILS =================================================================== */ .details-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .detail-block{ background: var(--surface); border-radius: var(--radius-md); padding: 1.5rem; border: 1px solid var(--line); text-align: center; } .detail-block .eyebrow{ display:block; margin-bottom:.5em; } .detail-block strong{ display:block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); } /* =================================================================== GALLERY — IMAGES =================================================================== */ .gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .gallery-item{ position:relative; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 1/1; cursor: pointer; border: 1px solid var(--line); background: var(--sand); } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease); } .gallery-item:hover img{ transform: scale(1.06); } .gallery-item .caption{ position:absolute; left:0; right:0; bottom:0; padding: .6rem .8rem; font-size: .82rem; font-weight: 600; color: var(--white); background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); opacity: 0; transition: opacity .25s var(--ease); } .gallery-item:hover .caption{ opacity: 1; } .download-btn{ position:absolute; top:.6rem; right:.6rem; z-index:2; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(20,22,20,.55); color:var(--white); transition: background .25s var(--ease); } .download-btn svg{ width:17px; height:17px; } .download-btn:hover{ background: var(--sage-deep); } /* Lightbox */ .lightbox{ position: fixed; inset: 0; z-index: 200; background: var(--overlay-bg); display:flex; align-items:center; justify-content:center; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .lightbox.is-open{ opacity: 1; pointer-events: auto; } .lightbox img{ max-width: min(90vw, 900px); max-height: 82vh; border-radius: var(--radius-sm); } .lightbox-caption{ color: var(--white); text-align:center; margin-top: 1rem; font-size:.95rem; } .lightbox-close{ position:absolute; top: 1.5rem; right: 1.5rem; width: 42px; height:42px; border-radius:50%; background: rgba(255,255,255,.12); border:none; color:var(--white); font-size: 1.4rem; display:flex; align-items:center; justify-content:center; } .lightbox-close:hover{ background: rgba(255,255,255,.25); } /* =================================================================== VIDEO GALLERY =================================================================== */ .video-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .video-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .video-card video{ width:100%; display:block; background:#000; aspect-ratio: 16/9; } .video-card .video-info{ padding: 1rem 1.2rem; } .video-card h3{ font-size: 1rem; margin: 0 0 .2em; } .video-card p{ font-size: .85rem; margin: 0; } .video-download-link{ display:inline-flex; align-items:center; gap:.4em; margin-top: .7rem; font-size:.85rem; font-weight:600; color: var(--sage-deep); } .video-download-link svg{ width:16px; height:16px; } .video-download-link:hover{ text-decoration: underline; } /* =================================================================== CONTACT =================================================================== */ .contact-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); } .contact-info{ display:grid; gap: 1.2rem; align-content:start; } .contact-info-item{ display:flex; gap: .9em; align-items:flex-start; } .contact-info-item svg{ width:22px; height:22px; color: var(--sage-deep); flex-shrink:0; margin-top:.15em; } .contact-info-item strong{ display:block; color: var(--ink); font-size:.95rem; } .contact-info-item span{ font-size:.88rem; color: var(--ink-soft); } .contact-form{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 2rem; display: grid; gap: 1.1rem; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4em; color: var(--ink); } .field input, .field textarea, .field select{ width:100%; padding: .75em .9em; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--cream); font-family: inherit; font-size: .95rem; color: var(--ink); transition: border-color .25s var(--ease), background .25s var(--ease); } .field select{ cursor: pointer; } .field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--sage-deep); background: var(--surface); } .field textarea{ resize: vertical; min-height: 110px; } .form-msg{ display:none; padding: .9em 1.1em; border-radius: var(--radius-sm); background: var(--msg-success-bg); color: var(--sage-deep); font-size: .9rem; font-weight: 600; } .form-msg.is-visible{ display:block; } .form-msg-error{ background: var(--msg-error-bg); color: var(--msg-error-ink); } .form-msg-error a{ color: var(--msg-error-ink); text-decoration: underline; } .btn[disabled]{ opacity: .65; cursor: not-allowed; transform: none !important; } /* =================================================================== FOOTER =================================================================== */ .site-footer{ border-top: 1px solid var(--line); padding: 2.5rem 0; text-align:center; color: var(--ink-soft); font-size: .85rem; } .footer-social{ display:flex; align-items:center; justify-content:center; gap:.6em; margin-bottom: .9rem; font-weight:600; } .footer-social a{ color: var(--sage-deep); } .footer-social a:hover{ color: var(--ink); } .footer-social span{ color: var(--line); } /* =================================================================== REVEAL ON SCROLL (subtle, respects reduced motion) =================================================================== */ .reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* =================================================================== RESPONSIVE Breakpoints: 1024px (small laptop/tablet landscape), 900px (tablet portrait), 700px (large phone), 480px (phone), 360px (small phone) =================================================================== */ @media (max-width: 1024px){ :root{ --max-w: 960px; } .spec-grid{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px){ .about-grid, .approach, .contact-wrap{ grid-template-columns: 1fr; } .spec-grid{ grid-template-columns: repeat(2, 1fr); } .details-grid{ grid-template-columns: repeat(2, 1fr); } .gallery-grid{ grid-template-columns: repeat(3, 1fr); } .video-grid{ grid-template-columns: 1fr; } .approach{ order: 1; } .approach-visual{ order: -1; min-height: 220px; } .hero .container{ grid-template-columns: minmax(220px, 320px) 1fr; gap: 2rem; } } @media (max-width: 760px){ .nav-links{ position: fixed; top: 64px; left:0; right:0; background: var(--cream); flex-direction: column; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--line); gap: 1rem; transform: translateY(-120%); transition: transform .3s var(--ease); max-height: calc(100vh - 64px); overflow-y: auto; } .nav-links.is-open{ transform: translateY(0); } .nav-toggle{ display:block; } .hero .container{ grid-template-columns: 1fr; text-align:center; } .hero-photo-wrap{ margin: 0 auto; max-width: 280px; } .hero-meta, .hero-cta, .hero-badges{ justify-content:center; } .approach-content{ text-align:left; } .spec-grid{ grid-template-columns: 1fr 1fr; } .details-grid{ grid-template-columns: 1fr 1fr; } .gallery-grid{ grid-template-columns: repeat(2, 1fr); } .form-row{ grid-template-columns: 1fr; } .section{ padding: 3rem 0; } } @media (max-width: 560px){ .hero-photo-wrap{ max-width: 220px; } .hero-cta{ flex-direction: column; align-items: stretch; } .hero-cta .btn{ justify-content: center; } .hero-badges{ gap: .45rem; } .badge{ font-size: .75rem; padding: .35em .8em; } .about-quote{ padding: 1.5rem; font-size: 1.05rem; } .contact-form{ padding: 1.4rem; } .spec-card, .detail-block{ padding: 1.3rem 1.1rem; } } @media (max-width: 480px){ .spec-grid, .details-grid{ grid-template-columns: 1fr; } .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: .7rem; } .lightbox{ padding: 1rem; } } @media (max-width: 360px){ .hero-title{ font-size: 1.8rem; } .brand{ font-size: 1.05rem; } .btn{ padding: .8em 1.3em; font-size: .88rem; } .container{ padding: 0 1rem; } } /* Larger screens: keep line lengths comfortable, don't let the hero photo grow unbounded */ @media (min-width: 1400px){ :root{ --max-w: 1240px; } } /* =================================================================== ADMIN PAGE =================================================================== */ .admin-body{ background: var(--sand); min-height: 100vh; } .admin-shell{ display:flex; min-height: 100vh; } .admin-sidebar{ width: 230px; background: var(--ink); color: var(--white); padding: 1.6rem 1.2rem; flex-shrink: 0; } .admin-sidebar .brand{ color: var(--white); margin-bottom: 2rem; font-size: 1.1rem; } .admin-nav{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; } .admin-nav button{ width:100%; text-align:left; background:none; border:none; color: rgba(255,255,255,.75); padding: .7em .9em; border-radius: var(--radius-sm); font-size: .92rem; font-weight:500; transition: background .2s var(--ease), color .2s var(--ease); } .admin-nav button:hover{ background: rgba(255,255,255,.08); color:var(--white); } .admin-nav button.is-active{ background: var(--sage-deep); color: var(--white); } .admin-main{ flex:1; padding: 2.2rem clamp(1.2rem, 3vw, 2.5rem); } .admin-note{ background: #FCF3D9; border: 1px solid #EBD98E; color: #7A5E00; padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 1.8rem; } .admin-panel{ display:none; } .admin-panel.is-active{ display:block; } .admin-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.4rem; flex-wrap: wrap; gap: 1rem; } .admin-table-wrap{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow-x: auto; } table{ width:100%; min-width: 560px; border-collapse: collapse; } th, td{ text-align:left; padding: .9em 1.1em; font-size: .88rem; border-bottom: 1px solid var(--line); } th{ background: var(--sand); font-weight:600; color: var(--ink); } td{ color: var(--ink-soft); } tr:last-child td{ border-bottom:none; } .thumb-cell{ display:flex; align-items:center; gap:.7em; } .thumb-cell img, .thumb-cell .thumb-fallback{ width: 44px; height:44px; border-radius:8px; object-fit:cover; background: var(--sand); flex-shrink:0; } .thumb-fallback{ display:flex; align-items:center; justify-content:center; font-size: .7rem; color: var(--ink-soft); } .row-actions{ display:flex; gap:.5rem; } .icon-btn{ border:1px solid var(--line); background: var(--white); border-radius: 8px; padding: .4em .7em; font-size: .8rem; color: var(--ink-soft); } .icon-btn:hover{ border-color: var(--sage-deep); color: var(--sage-deep); } .icon-btn.danger:hover{ border-color:#C1544A; color:#C1544A; } .empty-row td{ text-align:center; padding: 2.2rem; color: var(--ink-soft); } /* Admin modal form */ .modal-overlay{ position: fixed; inset:0; background: rgba(20,22,20,.55); display:none; align-items:center; justify-content:center; z-index: 300; padding: 1.5rem; } .modal-overlay.is-open{ display:flex; } .modal{ background: var(--white); border-radius: var(--radius-md); padding: 1.8rem; width: 100%; max-width: 440px; } .modal h3{ margin-bottom: 1rem; } .modal .field{ margin-bottom: 1rem; } .modal-actions{ display:flex; justify-content:flex-end; gap: .8rem; margin-top: 1.2rem; } /* =================================================================== ADMIN — RESPONSIVE (tablet / mobile) =================================================================== */ @media (max-width: 800px){ .admin-shell{ flex-direction: column; } .admin-sidebar{ width: 100%; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1.5rem; } .admin-sidebar .brand{ margin: 0; white-space: nowrap; } .admin-nav{ display: flex; flex-direction: row; gap: .5rem; overflow-x: auto; } .admin-nav li{ flex-shrink: 0; } .admin-main{ padding: 1.4rem 1rem; } } @media (max-width: 480px){ .admin-sidebar{ flex-wrap: wrap; } .admin-panel-head{ flex-direction: column; align-items: flex-start; } .admin-panel-head .btn{ width: 100%; text-align: center; justify-content: center; } .modal{ padding: 1.4rem; } }