/* ========================================================= Contiderma – main stylesheet Shared rules first; page-specific rules are scoped with a body class, e.g. ========================================================= */ /* ---------- Shared (all pages) ---------- */ :root { --navy:#0d2c4f; --purple:#3d3a94; --text:#333; --light:#f7f7f7; --border:#e3e3e3; --accent:#b9d3cc; } /* ---------- Home page ---------- */ body.page-index { --text:#444; } /* ---------- Shared (all pages) ---------- */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'Marcellus',serif; color:var(--text); background:#fff; line-height:1.6; overflow-x:hidden; } img { max-width:100%; display:block; } a { text-decoration:none; color:inherit; } h1, h2, h3, h4 { font-family:'Marcellus',serif; font-weight:400; color:#222; } .container { width:100%; max-width:1200px; margin:0 auto; padding:0 20px; } header { position:sticky; top:0; z-index:100; background:#fff; } .nav { display:flex; align-items:center; justify-content:space-between; height:80px; gap:20px; } .logo img { height:75px; width:auto; } .menu { display:flex; align-items:stretch; align-self:stretch; list-style:none; margin-left:auto; } .menu li { display:flex; align-items:center; position:relative; } .menu li+li::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:24px; background:#e8e8e8; } .menu a { display:flex; align-items:center; padding:0 20px; font-family:Arial,Helvetica,sans-serif; font-size:15px; font-weight:700; color:#333; transition:color .3s; } .menu a:hover, .menu a.active { color:var(--purple); } .has-sub { position:relative; } .has-sub:hover>a { color:var(--purple); } .submenu { list-style:none; position:absolute; top:100%; left:0; min-width:220px; background:#f0f0f0; box-shadow:0 6px 14px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s; z-index:200; } .has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform:translateY(0); } .menu .submenu li { display:block; } .menu .submenu li::before { display:none; } .menu .submenu li+li { border-top:1px solid #dcdcdc; } .menu .submenu a { padding:10px; height:auto; font-family:'Marcellus',serif; font-weight:400; font-size:15px; color:#555; } .menu .submenu a:hover { color:var(--purple); background:#e8e8ee; } .sub-toggle { display:none; } .search { display:flex; align-items:center; gap:10px; border:1px solid #d5d5d5; border-radius:30px; padding:0 18px; height:45px; margin-left:20px; } .search input { border:0; outline:0; font-family:Arial,Helvetica,sans-serif; font-size:14px; width:125px; background:transparent; color:#555; } .search i { color:var(--purple); font-size:14px; } .quote-btn { background:#3E4095; border-color:#3E4095; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:600; color:#fff; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s; } .quote-btn i { color:#fff; } .quote-btn:hover { background:#2f3175; border-color:#2f3175; } .hamburger { display:none; background:none; border:0; font-size:24px; color:var(--navy); cursor:pointer; } /* ---------- Home page ---------- */ .slider { position:relative; overflow:hidden; background:#fff; } .slides { display:flex; transition:transform .7s ease; } .slide { min-width:100%; } .slide img { width:100%; height:auto; object-fit:cover; } .slider-btn { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border:0; border-radius:2px; background:#444; color:#fff; cursor:pointer; font-size:14px; z-index:5; transition:background .3s; } .slider-btn:hover { background:#222; } .prev { left:15px; } .next { right:15px; } .dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; } .dots button { width:9px; height:9px; border-radius:50%; border:0; background:#333; opacity:.6; cursor:pointer; padding:0; } .dots button.active { background:#2d8cf0; opacity:1; } .welcome { background:var(--light); padding:60px 0 20px; text-align:center; } .welcome h2 { font-size:38px; margin-bottom:18px; } .welcome p { max-width:860px; margin:0 auto; font-size:15px; line-height:2; } .care { background:var(--light); padding:60px 0 90px; } .care h3 { text-align:center; font-size:30px; margin-bottom:55px; color:#333; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .care-card { overflow:hidden; display:block; } .care-card img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s; } .care-card:hover img { transform:scale(1.06); } .concerns { padding:80px 0; background:#f6f6f6 url(https://contiderma.in/wp-content/uploads/2022/03/white-elegant-texture-screensaver_23-2148421855.png) center / cover no-repeat fixed; } .section-tag { text-align:center; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#444; margin-bottom:8px; } .concerns h2 { text-align:center; font-size:30px; margin-bottom:60px; color:#333; } .concern h4 { text-align:center; font-size:20px; color:#444; margin-bottom:18px; } .concern-box { position:relative; overflow:hidden; cursor:pointer; } .concern-box img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s; } .concern-box .overlay { position:absolute; inset:0; background:rgba(40,30,25,.65); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; font-family:'Marcellus',serif; font-size:17px; line-height:1.8; opacity:0; transition:opacity .5s; } .concern-box:hover .overlay, .concern-box.show .overlay { opacity:1; } .concern-box:hover img { transform:scale(1.05); } .business { padding:100px 0; } .business .wrap { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .business h2 { font-size:30px; margin-bottom:14px; color:#333; } .business p { font-size:15px; line-height:1.9; text-align:justify; } .form-box { border-left:6px solid var(--accent); border-right:6px solid var(--accent); padding:20px 22px; } .form-box input, .form-box textarea { width:100%; border:1px solid var(--border); padding:10px 12px; font:inherit; font-size:13px; margin-bottom:12px; outline:0; transition:border-color .3s; } .form-box input:focus, .form-box textarea:focus { border-color:var(--purple); } .form-box textarea { height:80px; resize:vertical; } .form-box button { border:1px solid var(--border); background:#fff; color:#777; padding:8px 18px; font:inherit; font-size:13px; cursor:pointer; transition:.3s; } .form-box button:hover { background:var(--purple); color:#fff; border-color:var(--purple); } /* ---------- Shared (all pages) ---------- */ footer { background:#e6e6e6; font-family:'Marcellus',serif; color:#222; } .foot-top { padding:30px 0 50px; border-top:1px solid #ddd; } .foot-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; } footer h3 { font-size:32px; margin-bottom:34px; color:#222; } footer h3 span { color:var(--purple); } footer p { font-size:15px; line-height:1.95; color:#222; max-width:590px; } .foot-links { margin-top:22px; font-size:15px; line-height:1.9; color:#444; } .foot-links a { color:var(--purple); } .foot-links a:hover { text-decoration:underline; } .corp { color:var(--purple); font-size:21px; margin:-4px 0 14px; } .info li { list-style:none; display:flex; gap:6px; align-items:flex-start; margin-bottom:24px; font-size:17px; color:#222; } .info li i { background:var(--purple); color:#fff; width:30px; height:24px; display:grid; place-items:center; font-size:15px; flex-shrink:0; } .info a { color:#1e9be9; } .info a.phone { color:#222; } .foot-social { display:flex; gap:5px; } .foot-social a { width:30px; height:25px; background:var(--purple); color:#fff; display:grid; place-items:center; font-size:15px; } .foot-social a:hover { background:var(--navy); } .copy-bar { border-top:1px solid #d6d6d6; padding:32px 0; } .copy { display:flex; justify-content:space-between; align-items:center; font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#111; } .to-top { color:#888; font-size:18px; } .page-banner { position:relative; background:#8fb0d0; } .page-banner { overflow:hidden; } .page-banner img { width:100%; aspect-ratio:1366/90; height:auto; min-height:60px; object-fit:cover; object-position:left top; } .breadcrumb { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); display:flex; gap:14px; align-items:center; font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#111; white-space:nowrap; } .breadcrumb i { font-size:10px; } .breadcrumb a:hover { color:var(--purple); } /* ---------- About Us page ---------- */ .who { background:#e3f6f3 url(https://contiderma.in/wp-content/uploads/2022/02/Screenshot_35-3.png) center / cover no-repeat fixed; padding:70px 0; } .who .wrap { display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center; } .who img { width:100%; max-width:460px; margin:0 auto; } .who h1 { font-size:44px; line-height:1.2; } .who h2 { font-size:34px; margin-bottom:10px; } .body-text p { font-family:Arial,Helvetica,sans-serif; font-size:14.5px; line-height:2.05; color:#333; margin-bottom:24px; } .body-text p:last-child { margin-bottom:0; } .ethics { padding:90px 0; background:#f6f6f4 url(https://contiderma.in/wp-content/uploads/2022/02/Screenshot_35-2.png) center / cover no-repeat fixed; } .ethics .wrap { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; } .eyebrow { font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; color:#333; } .ethics h2 { font-size:34px; margin-bottom:6px; } .ethics .img-slot { width:100%; max-width:450px; margin-left:auto; } .ethics .img-slot img { width:100%; } .values { padding:80px 0 70px; text-align:center; background:#f3f5f5 url(https://contiderma.in/wp-content/uploads/2022/02/Screenshot_33-3.png) center / cover no-repeat fixed; } .values h3 { font-size:28px; } .values .sub { font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; color:#333; margin-bottom:45px; } .values-img { width:100%; max-width:1100px; margin:0 auto; } .circles { display:none; justify-content:center; flex-wrap:wrap; gap:12px; } .circle { width:190px; height:170px; border-radius:50%; margin-left:-55px; background:radial-gradient(circle at 40% 35%,#aeb0f5 0%,#8a88e6 45%,#6461c9 100%); box-shadow:inset 0 -12px 20px rgba(40,30,120,.35),0 12px 18px rgba(80,70,160,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; transition:transform .35s; } .circle:first-child { margin-left:0; } .circle:hover { transform:translateY(-8px); z-index:2; } .circle i { font-size:52px; color:#111; } .circle span { font-family:'Poppins',sans-serif; font-weight:500; font-size:17px; color:#111; } /* ---------- Careers page ---------- */ .careers { padding:80px 0; background:linear-gradient(160deg,#f4fbfa 0%,#fff 50%,#f3f3f7 100%); } .careers .wrap { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .careers .pic img { width:100%; max-width:480px; margin:0 auto; } .careers h1 { font-size:44px; line-height:1.2; color:#222; } .careers h2 { font-size:26px; color:var(--purple); margin-bottom:26px; } .cv-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; border-left:6px solid #b9d3cc; border-right:6px solid #b9d3cc; padding:22px; } .cv-form .full { grid-column:1/-1; } .cv-form input, .cv-form textarea { width:100%; border:1px solid #e3e3e3; background:#fff; padding:11px 12px; font-family:Arial,Helvetica,sans-serif; font-size:13px; outline:0; transition:border-color .3s; } .cv-form input:focus, .cv-form textarea:focus { border-color:var(--purple); } .cv-form textarea { height:110px; resize:vertical; } .cv-form label { font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; color:#333; display:block; margin-bottom:6px; } .cv-form input[type=file] { padding:8px; cursor:pointer; } .cv-form input[type=file]::file-selector-button { border:0; background:var(--purple); color:#fff; padding:6px 14px; margin-right:10px; cursor:pointer; font-family:inherit; } .cv-form .hint { font-family:Arial,sans-serif; font-size:11px; color:#777; margin-top:4px; } .cv-form button { justify-self:start; border:1px solid var(--purple); background:var(--purple); color:#fff; padding:10px 30px; font-family:Arial,Helvetica,sans-serif; font-size:14px; cursor:pointer; transition:.3s; } .cv-form button:hover { background:#fff; color:var(--purple); } /* ---------- Contact Us page ---------- */ .contact { padding:110px 0 80px; background:#fafafa; } .contact .tag { text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; color:#444; margin-bottom:130px; } .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .card { background:#fafafa; border:1px solid #ececec; padding:30px 22px 40px; text-align:center; min-height:287px; transition:box-shadow .3s,transform .3s; } .card:hover { box-shadow:0 10px 25px rgba(61,58,148,.1); transform:translateY(-4px); } .card .ic { width:70px; height:70px; border-radius:50%; background:var(--purple); color:#fff; display:grid; place-items:center; font-size:24px; margin:0 auto 26px; } .card h4 { font-size:22px; color:#222; margin-bottom:6px; } .card p, .card a { font-size:17px; line-height:1.6; color:#444; } .card a:hover { color:var(--purple); } .contact h2 { font-size:28px; color:#222; margin:70px 0 28px; } .contact-form { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 5px; } .contact-form .full { grid-column:1/-1; } .contact-form input, .contact-form textarea { width:100%; border:1px solid #e3e3e3; background:#fff; padding:10px 10px; font-family:Arial,Helvetica,sans-serif; font-size:13px; outline:0; transition:border-color .3s; } .contact-form input:focus, .contact-form textarea:focus { border-color:var(--purple); } .contact-form textarea { height:112px; resize:vertical; } .contact-form button { grid-column:1/-1; justify-self:center; margin-top:24px; border:1px solid var(--purple); background:var(--purple); color:#fff; padding:14px 15px; border-radius:3px; font-family:Arial,Helvetica,sans-serif; font-size:16px; cursor:pointer; transition:.3s; } .contact-form button:hover { background:#fff; color:var(--purple); } /* ---------- Contract Manufacturing page ---------- */ .cm { background:#eef6f6 url(https://contiderma.in/wp-content/uploads/2022/02/Screenshot_33-4.png) center / cover no-repeat fixed; padding:60px 0 90px; } .cm-row { display:grid; grid-template-columns:1fr 410px; gap:50px; align-items:start; } .cm-row.rev { grid-template-columns:410px 1fr; margin-top:40px; } .cm-row img { width:100%; max-width:410px; margin:0 auto; box-shadow:0 10px 30px rgba(61,58,148,.12); } .cm h1 { font-size:46px; line-height:1.1; color:#222; margin-bottom:22px; } .cm h2 { font-size:24px; line-height:1.55; color:#222; margin:30px 0 14px; } .cm-row.rev h2 { color:var(--purple); margin-top:20px; } .cm p { font-size:14px; line-height:1.8; color:#3a3a3a; margin-bottom:14px; } /* ---------- Products page ---------- */ .products { padding:30px 0 80px; background:#fafafa; } .products h1 { font-size:42px; color:#222; margin-bottom:22px; } .page-products .product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .page-products .product { background:#fff; border:1px solid #dcdcdc; transition:box-shadow .3s; } .page-products .product:hover { box-shadow:0 8px 22px rgba(61,58,148,.12); } .page-products .product .thumb { position:relative; display:block; overflow:hidden; background:#fff; } .page-products .product .thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s; } .page-products .product .thumb::after { content:""; position:absolute; inset:0; background:rgba(61,58,148,.2); opacity:0; transition:opacity .3s; } .page-products .product .view { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%) scale(.7); width:50px; height:50px; border-radius:50%; background:#fff; color:var(--purple); display:grid; place-items:center; font-size:18px; opacity:0; transition:.3s; } .page-products .product .thumb:hover img { transform:scale(1.05); } .page-products .product .thumb:hover::after { opacity:1; } .page-products .product .thumb:hover .view { opacity:1; transform:translate(-50%,-50%) scale(1); } .page-products .product h4 { font-size:19px; text-align:left; padding:18px 16px 20px; border-top:1px solid #ececec; } .page-products .product h4 a { color:#222; transition:color .3s; } .page-products .product h4 a:hover { color:var(--purple); } .page-products .product { position:relative; cursor:pointer; } .page-products .product h4 a::after { content:""; position:absolute; inset:0; z-index:3; } /* ---------- Shared (all pages) ---------- */ .filter-section { background:linear-gradient(180deg,#fff 0%,#f7f7fb 100%); padding:35px 0; border-bottom:1px solid #e6e6ef; } .tabs-box { background:#fff; border:1px solid #ececf3; border-radius:8px; box-shadow:0 12px 30px rgba(61,58,148,.08); padding:22px 26px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:1100px; margin:0 auto; } .tab { border:1px solid var(--purple); background:var(--purple); color:#fff; font-family:'Marcellus',serif; font-size:15px; letter-spacing:.3px; padding:8px 20px; border-radius:4px; cursor:pointer; transition:background .25s,color .25s,transform .25s,box-shadow .25s; } .tab:hover { background:#2e2b7a; transform:translateY(-2px); box-shadow:0 6px 14px rgba(61,58,148,.25); } .tab.active { background:#fff; color:var(--purple); border-color:var(--purple); box-shadow:inset 0 0 0 1px var(--purple); } .products-section { background:#f1f1f6; padding:45px 0 80px; } .results-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:1032px; margin:0 auto 24px; padding-bottom:14px; border-bottom:1px solid #dcdce6; } .results-bar h3 { font-size:24px; color:#222; } .results-bar span { font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#666; } /* ---------- Section Wise page ---------- */ .page-section-wise .product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1032px; margin:0 auto; } .page-section-wise .product { background:#fff; border:1px solid #dedee8; padding:9px; animation:fade .4s ease; transition:box-shadow .3s,transform .3s; } .page-section-wise .product:hover { box-shadow:0 14px 30px rgba(61,58,148,.15); transform:translateY(-4px); } .page-section-wise .product .thumb { position:relative; display:block; overflow:hidden; border:7px solid #b7b5de; } .page-section-wise .product .thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s; } .page-section-wise .product .thumb:hover img { transform:scale(1.05); } .page-section-wise .product h4 { margin-top:8px; background:var(--purple); text-align:center; font-size:18px; padding:9px 10px; } .page-section-wise .product h4 a { color:#fff; } .page-section-wise .product:hover h4 { background:#2e2b7a; } /* ---------- Shared (all pages) ---------- */ .empty { grid-column:1/-1; text-align:center; padding:40px; color:#666; } /* ---------- Section Wise page ---------- */ .page-section-wise .product { position:relative; cursor:pointer; } .page-section-wise .product h4 a::after { content:""; position:absolute; inset:0; z-index:3; } /* ---------- Concern Wise page ---------- */ .page-concern-wise .product-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:830px; margin:0 auto; } .page-concern-wise .product-grid .product { width:calc((100% - 36px)/3); } .page-concern-wise .product { background:#fff; border:1px solid #dedee8; padding:9px; animation:fade .4s ease; transition:box-shadow .3s,transform .3s; } .page-concern-wise .product:hover { box-shadow:0 14px 30px rgba(61,58,148,.15); transform:translateY(-4px); } .page-concern-wise .product .thumb { position:relative; display:block; overflow:hidden; border:7px solid #b7b5de; } .page-concern-wise .product .thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s; } .page-concern-wise .product .thumb:hover img { transform:scale(1.05); } .page-concern-wise .product h4 { margin-top:8px; background:var(--purple); text-align:center; font-size:18px; padding:9px 10px; } .page-concern-wise .product h4 a { color:#fff; } .page-concern-wise .product:hover h4 { background:#2e2b7a; } .page-concern-wise .product { position:relative; cursor:pointer; } .page-concern-wise .product h4 a::after { content:""; position:absolute; inset:0; z-index:3; } /* ---------- Single product page ---------- */ .crumb-bar { background:#f5f5f5; border-bottom:1px solid #e8e8e8; padding:22px 20px; } .crumb-bar .breadcrumb { position:static; transform:none; justify-content:center; flex-wrap:wrap; white-space:normal; font-family:'Marcellus',serif; font-size:14px; font-weight:700; color:#111; } .single { background:#fafafa; padding:20px 0 70px; } .p-nav { display:flex; justify-content:space-between; align-items:center; max-width:1050px; margin:0 auto 20px; font-size:22px; color:#888; } .p-nav a:hover { color:var(--purple); } .p-nav .grid-ic { font-size:20px; } .p-wrap { display:grid; grid-template-columns:516px 1fr; gap:22px; max-width:1060px; margin:0 auto; align-items:start; } .p-img { position:relative; overflow:hidden; background:#fff; cursor:zoom-in; } .p-img img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .4s; } .p-img:hover img { transform:scale(1.04); } .zoom-btn { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:#fff; border:0; color:#111; font-size:15px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.15); } .p-info h1 { font-size:34px; color:#111; padding:0 0 12px; margin-bottom:34px; position:relative; } .p-info h1::after { content:""; position:absolute; left:0; bottom:0; width:100px; height:1px; background:#ddd; } .p-info .generic { font-size:14px; color:#444; margin-bottom:18px; } .p-meta { font-family:Arial,sans-serif; font-size:14px; color:#333; padding-bottom:22px; border-bottom:1px solid #e5e5e5; } .p-meta .lbl { color:#777; font-family:'Marcellus',serif; } .p-meta a { color:#1e8fd8; font-family:'Marcellus',serif; } .share { display:flex; align-items:center; gap:16px; padding:16px 0 28px; font-family:Arial,sans-serif; font-size:13px; color:#333; } .share a { color:#999; font-size:13px; } .share a:hover { color:var(--purple); } .acc { border:1px solid #e3e3e3; background:#fff; } .acc-head { display:flex; align-items:stretch; width:100%; border:0; background:#fafafa; cursor:pointer; text-align:left; border-bottom:1px solid #e3e3e3; } .acc-head .sign { width:44px; display:grid; place-items:center; border-right:1px solid #e3e3e3; color:#1e8fd8; font-size:18px; padding:12px 0; } .acc-head .t { padding:14px 10px; color:#1e8fd8; font-family:Arial,sans-serif; font-size:13px; font-weight:700; } .acc-body { padding:14px 18px 18px; } .acc.closed .acc-body { display:none; } .acc.closed .acc-head { border-bottom:0; } .attr { width:100%; border-collapse:collapse; font-size:13px; } .attr th, .attr td { border:1px solid #e3e3e3; padding:9px 14px; } .attr th { width:150px; background:#f5f5f5; font-family:Arial,sans-serif; color:#222; } .attr td { font-style:italic; color:#555; } .side-nav { position:fixed; bottom:40px; display:flex; align-items:center; z-index:50; height:72px; transition:transform .3s; } .side-nav .arr { width:32px; height:100%; background:#1e8fd8; color:#fff; display:grid; place-items:center; font-size:13px; } .side-nav img { width:72px; height:72px; object-fit:cover; background:#fff; } .side-nav.prev { left:0; transform:translateX(-72px); } .side-nav.next { right:0; flex-direction:row-reverse; transform:translateX(72px); } .side-nav:hover { transform:none; } .lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; place-items:center; z-index:500; padding:20px; cursor:zoom-out; } .lightbox.open { display:grid; } .lightbox img { max-width:min(90vw,800px); max-height:90vh; } @keyframes fade { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} } /* ========================================================= Responsive: (max-width:1150px) ========================================================= */ @media (max-width:1150px) { /* ---------- Shared (all pages) ---------- */ .menu a { padding:0 12px; font-size:14px; } .search input { width:90px; } } /* ========================================================= Responsive: (max-width:900px) ========================================================= */ @media (max-width:900px) { /* ---------- Shared (all pages) ---------- */ .hamburger { display:block; } .search { display:none; } .menu { position:absolute; top:80px; left:0; right:0; height:auto; background:#fff; flex-direction:column; align-items:stretch; max-height:0; overflow:hidden; transition:max-height .4s; box-shadow:0 8px 12px rgba(0,0,0,.06); } .menu.open { max-height:400px; } .menu li { display:block; border-top:1px solid #f0f0f0; } .menu li+li::before { display:none; } .menu a { padding:14px 20px; } .menu.open { max-height:600px; } .menu .has-sub { display:flex; flex-wrap:wrap; } .has-sub>a { flex:1; } .sub-toggle { display:block; background:none; border:0; border-left:1px solid #f0f0f0; width:52px; font-size:14px; color:#333; cursor:pointer; } .sub-toggle i { transition:transform .3s; } .has-sub.sub-open .sub-toggle i { transform:rotate(180deg); } .submenu { position:static; min-width:0; width:100%; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; background:#f6f6f6; } .has-sub.sub-open .submenu { display:block; } .menu .submenu li { border-top:1px solid #e8e8e8; } .menu .submenu a { padding:12px 20px 12px 36px; } /* ---------- Home page ---------- */ .grid-3 { grid-template-columns:repeat(2,1fr); } .business .wrap, .foot-grid { grid-template-columns:1fr; } /* ---------- Shared (all pages) ---------- */ .foot-grid { grid-template-columns:1fr; gap:40px; } footer h3 { margin-bottom:20px; } /* ---------- About Us page ---------- */ .who .wrap, .ethics .wrap, .foot-grid { grid-template-columns:1fr; } .who h1, .who h2 { text-align:center; } .ethics .img-slot { margin:0 auto; } /* ---------- Careers page ---------- */ .careers .wrap, .foot-grid { grid-template-columns:1fr; } .careers .wrap { gap:30px; } .careers h1, .careers h2 { text-align:center; } .careers .pic img { max-width:360px; } /* ---------- Contact Us page ---------- */ .cards { grid-template-columns:repeat(2,1fr); } .contact { padding:70px 0 60px; } .contact .tag { margin-bottom:50px; } /* ---------- Contract Manufacturing page ---------- */ .cm-row, .cm-row.rev { grid-template-columns:1fr; gap:30px; } .cm-row.rev .pic { order:2; } .cm h1 { font-size:36px; } /* ---------- Products page ---------- */ .page-products .product-grid { grid-template-columns:repeat(2,1fr); gap:22px; } .products h1 { font-size:36px; } /* ---------- Section Wise page ---------- */ .page-section-wise .product-grid { grid-template-columns:repeat(2,1fr); } /* ---------- Concern Wise page ---------- */ .page-concern-wise .product-grid .product { width:calc((100% - 18px)/2); } /* ---------- Single product page ---------- */ .p-wrap { grid-template-columns:1fr; gap:26px; max-width:560px; } .side-nav { display:none; } } /* ========================================================= Responsive: (max-width:600px) ========================================================= */ @media (max-width:600px) { /* ---------- Shared (all pages) ---------- */ .nav { height:66px; } .menu { top:66px; } .logo img { height:44px; } /* ---------- Home page ---------- */ .slider-btn { width:30px; height:30px; font-size:12px; } .dots { bottom:8px; } .welcome { padding:40px 0 10px; } .welcome h2 { font-size:26px; } .welcome p { font-size:14px; line-height:1.8; } .care { padding:40px 0 50px; } .care h3, .concerns h2, .business h2 { font-size:22px; } .care h3 { margin-bottom:30px; } .grid-3 { grid-template-columns:1fr; gap:28px; } .concerns { padding:50px 0; } .concerns h2 { margin-bottom:35px; } .concern-box .overlay { font-size:16px; padding:20px; } .business { padding:50px 0; } /* ---------- Shared (all pages) ---------- */ footer h3 { font-size:24px; } .info li { font-size:15px; margin-bottom:16px; } .copy { font-size:12px; } .page-banner { height:auto; } .page-banner img { height:82px; width:auto; max-width:none; min-height:0; aspect-ratio:auto; object-fit:fill; margin-bottom:-20px; } .page-banner .breadcrumb { position:static; transform:none; justify-content:center; flex-wrap:wrap; white-space:normal; position:relative; top:auto; left:auto; z-index:1; background:#f5f5f5; border-bottom:1px solid #e8e8e8; padding:9px 12px; font-size:13px; gap:8px; } /* ---------- About Us page ---------- */ .who { padding:45px 0; } .who img { max-width:300px; } .who h1 { font-size:32px; } .who h2 { font-size:26px; } .body-text p { font-size:14px; line-height:1.9; margin-bottom:16px; } .ethics { padding:50px 0; } .ethics h2 { font-size:26px; } .values { padding:50px 0; } .values h3 { font-size:24px; } .values .sub { margin-bottom:30px; } .values-img { display:none; } .circles { display:flex; } .circle, .circle:first-child { margin-left:0; width:130px; height:120px; } .circle i { font-size:34px; } .circle span { font-size:14px; } /* ---------- Careers page ---------- */ .careers { padding:45px 0; } .careers .pic img { max-width:280px; } .careers h1 { font-size:32px; } .careers h2 { font-size:20px; margin-bottom:18px; } .cv-form { grid-template-columns:1fr; padding:16px; border-width:4px; } .cv-form button { justify-self:stretch; } /* ---------- Contact Us page ---------- */ .contact { padding:45px 0; } .contact .tag { margin-bottom:30px; } .cards { grid-template-columns:1fr; gap:16px; } .card { min-height:0; padding:26px 18px 30px; } .contact h2 { font-size:24px; margin:45px 0 20px; text-align:center; } .contact-form { grid-template-columns:1fr; gap:12px; } .contact-form button { justify-self:stretch; margin-top:10px; } /* ---------- Contract Manufacturing page ---------- */ .cm { padding:40px 0 50px; } .cm h1 { font-size:28px; margin-bottom:16px; } .cm h2 { font-size:19px; margin:22px 0 10px; } .cm p { font-size:14px; line-height:1.8; } .cm-row img { max-width:340px; } /* ---------- Products page ---------- */ .products { padding:40px 0 50px; } .products h1 { font-size:28px; margin-bottom:22px; text-align:center; } .page-products .product-grid { gap:14px; } .page-products .product h4 { font-size:16px; padding:12px 12px 14px; } .page-products .product .view { width:40px; height:40px; font-size:15px; } /* ---------- Shared (all pages) ---------- */ .filter-section { padding:22px 0; } .tabs-box { padding:14px 10px; gap:8px; } .tab { font-size:13px; padding:6px 12px; } .products-section { padding:30px 0 50px; } .results-bar { margin-bottom:16px; padding-bottom:10px; } .results-bar h3 { font-size:19px; } .results-bar span { font-size:13px; } /* ---------- Section Wise page ---------- */ .page-section-wise .product-grid { gap:10px; } .page-section-wise .product { padding:6px; } .page-section-wise .product .thumb { border-width:4px; } .page-section-wise .product h4 { font-size:15px; padding:7px 6px; } /* ---------- Concern Wise page ---------- */ .page-concern-wise .product-grid { gap:10px; } .page-concern-wise .product-grid .product { width:calc((100% - 10px)/2); } .page-concern-wise .product { padding:6px; } .page-concern-wise .product .thumb { border-width:4px; } .page-concern-wise .product h4 { font-size:15px; padding:7px 6px; } /* ---------- Single product page ---------- */ .crumb-bar { padding:16px 12px; } .crumb-bar .breadcrumb { font-size:12px; gap:6px; } .p-nav { margin-bottom:12px; } .p-info h1 { font-size:28px; margin-bottom:22px; } .attr th { width:100px; } .attr th, .attr td { padding:8px 10px; } } /* ========================================================= Enquiry forms (Home, Contact Us, Product popup, Serums) ========================================================= */ .form-box select, .contact-form select { width:100%; border:1px solid var(--border); background:#fff; padding:10px 12px; font-family:Arial,Helvetica,sans-serif; font-size:13px; color:#555; outline:0; cursor:pointer; transition:border-color .3s; } .form-box select { margin-bottom:12px; } .form-box select:focus, .contact-form select:focus { border-color:var(--purple); } .license-field { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; border:1px solid var(--border); background:#fff; padding:9px 12px; font-family:Arial,Helvetica,sans-serif; font-size:13px; color:#444; } .form-box .license-field { margin-bottom:12px; } .license-field p { width:100%; font-size:14px; color:#333; } .license-field label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; } .form-box .license-field input[type=radio], .contact-form .license-field input[type=radio] { width:auto; margin:0; padding:0; accent-color:var(--purple); cursor:pointer; } .form-msg:empty { display:none; } .form-msg { font-family:Arial,Helvetica,sans-serif; font-size:14px; margin-bottom:12px; } .contact-form { grid-template-columns:repeat(6,1fr); gap:18px 10px; } .contact-form > input, .contact-form > select, .contact-form > .license-field { grid-column:span 2; } .contact-form > .half { grid-column:span 3; } .contact-form > .full, .contact-form > .form-msg { grid-column:1/-1; } /* ---------- Send Enquiry button (single product) ---------- */ .enquiry-btn { display:inline-flex; align-items:center; gap:10px; margin-top:24px; border:1px solid var(--purple); background:var(--purple); color:#fff; padding:12px 28px; border-radius:3px; font-family:Arial,Helvetica,sans-serif; font-size:16px; cursor:pointer; transition:.3s; } .enquiry-btn:hover { background:#fff; color:var(--purple); } /* ---------- Enquiry popup ---------- */ .enq-modal { position:fixed; inset:0; z-index:600; background:rgba(13,20,40,.6); display:grid; place-items:center; padding:20px; opacity:0; transition:opacity .3s; } .enq-modal[hidden] { display:none; } .enq-modal.open { opacity:1; } .enq-dialog { width:100%; max-width:520px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.3); transform:translateY(20px); transition:transform .3s; } .enq-modal.open .enq-dialog { transform:none; } .enq-head { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--purple); color:#fff; padding:16px 22px; } .enq-head h3 { color:#fff; font-size:24px; } .enq-head p { font-family:Arial,Helvetica,sans-serif; font-size:14px; opacity:.85; } .enq-close { width:36px; height:36px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:transparent; color:#fff; font-size:17px; cursor:pointer; flex-shrink:0; transition:.3s; } .enq-close:hover { background:#fff; color:var(--purple); } .enq-body { overflow-y:auto; background:#fafafa; } .enq-body .form-box { border:0; padding:22px; } .enq-body .form-box button { width:100%; border-color:var(--purple); background:var(--purple); color:#fff; padding:12px; font-family:Arial,Helvetica,sans-serif; font-size:15px; } .enq-body .form-box button:hover { background:#fff; color:var(--purple); } body.modal-open { overflow:hidden; } @media (max-width:900px) { .contact-form > input, .contact-form > select, .contact-form > .license-field, .contact-form > .half { grid-column:span 3; } } @media (max-width:600px) { .contact-form > input, .contact-form > select, .contact-form > .license-field, .contact-form > .half, .contact-form > textarea { grid-column:1/-1; } .enquiry-btn { width:100%; justify-content:center; } .enq-modal { padding:10px; } .enq-head h3 { font-size:20px; } .enq-body .form-box { padding:16px; } } /* ========================================================= Serums page (category listing + Enquire Us sidebar) ========================================================= */ .shop { background:#fafafa; } .shop-wrap { display:grid; grid-template-columns:minmax(0,1fr) 420px; max-width:1366px; margin:0 auto; } .shop-main { padding:30px 20px 60px 80px; } .shop-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 14px 14px 14px; margin-bottom:22px; background:repeating-linear-gradient(135deg,#f3f3f3 0 2px,#fafafa 2px 7px); } .shop-count { font-size:15px; color:#888; } .shop-sort { width:230px; border:1px solid var(--border); background:#fff; padding:9px 10px; font-family:Arial,Helvetica,sans-serif; font-size:13px; color:#333; outline:0; cursor:pointer; } .shop-sort:focus { border-color:var(--purple); } .shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .shop-card { position:relative; background:#fff; border:1px solid #e4e4ee; padding:10px; cursor:pointer; box-shadow:0 4px 14px rgba(61,58,148,.06); transition:box-shadow .3s,transform .3s,border-color .3s; } .shop-card:hover { border-color:#cfcde8; box-shadow:0 14px 30px rgba(61,58,148,.15); transform:translateY(-4px); } .shop-thumb { display:block; overflow:hidden; border:6px solid #d9d8ef; } .shop-thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s; } .shop-card:hover .shop-thumb img { transform:scale(1.04); } .shop-card h4 { font-size:19px; text-align:center; padding:14px 10px 6px; } .shop-card h4 a { color:#222; } .shop-card h4 a::after { content:""; position:absolute; inset:0; } .shop-card:hover h4 a { color:var(--purple); } .shop-side { border-left:1px solid #e6e6e6; padding:30px 20px 20px; } .shop-side h3 { font-size:32px; color:#222; padding-bottom:22px; border-bottom:1px solid #e6e6e6; margin-right:-20px; } .shop-side .form-box { background:#fff; padding:30px 30px 26px; border-left-width:12px; border-right-width:12px; } .shop-side .form-box button { margin-top:4px; } @media (max-width:1150px) { .shop-wrap { grid-template-columns:minmax(0,1fr) 360px; } .shop-main { padding:30px 20px 50px; } .shop-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:900px) { .shop-wrap { grid-template-columns:1fr; } .shop-side { border-left:0; border-top:1px solid #e6e6e6; padding:30px 20px 50px; } .shop-side h3 { margin-right:0; } .shop-side .form-box { max-width:560px; } } @media (max-width:600px) { .shop-main { padding:20px 16px 40px; } .shop-toolbar { flex-direction:column; align-items:stretch; gap:10px; } .shop-sort { width:100%; } .shop-grid { gap:12px; } .shop-card { padding:6px; } .shop-thumb { border-width:4px; } .shop-card h4 { font-size:16px; padding:10px 6px 4px; } .shop-side { padding:24px 16px 40px; } .shop-side h3 { font-size:26px; padding-bottom:14px; } .shop-side .form-box { padding:18px 16px; border-left-width:6px; border-right-width:6px; } } /* ---------- Enquiry form: Name / Email / Phone / City – 2 per row ---------- */ .form-box[action] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; } .form-box[action] > * { grid-column:1/-1; min-width:0; } .form-box[action] > input[type=text], .form-box[action] > input[type=email], .form-box[action] > input[type=tel] { grid-column:auto; } .form-box[action] > button { justify-self:start; } .enq-body .form-box[action] > button { justify-self:stretch; } /* Drug License + GST Number side by side */ .form-box[action] > .license-field { grid-column:auto; align-content:start; gap:6px 12px; padding:9px 10px; } /* Fixed (parallax) backgrounds – About Us, Home concerns, Contract Manufacturing – scroll normally on touch devices, where background-attachment:fixed is unsupported or jumpy */ @media (max-width:900px), (hover:none) { .page-about .who, .page-about .ethics, .page-about .values, .page-index .concerns, .page-contract-manufacturing .cm { background-attachment:scroll; } } /* ========================================================= Blogs page (list + pagination) & Single blog page ========================================================= */ .blog-list { background:#fafafa; padding:50px 0 80px; } .blog-head { text-align:center; max-width:720px; margin:0 auto 44px; } .blog-head h1 { font-size:36px; margin-bottom:10px; } .blog-head p:not(.section-tag) { font-size:15px; line-height:1.9; color:#555; } .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .blog-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #e4e4ee; box-shadow:0 4px 14px rgba(61,58,148,.06); transition:box-shadow .3s,transform .3s,border-color .3s; } .blog-card:hover { border-color:#cfcde8; box-shadow:0 14px 30px rgba(61,58,148,.15); transform:translateY(-4px); } .blog-thumb { display:block; overflow:hidden; } .blog-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s; } .blog-card:hover .blog-thumb img { transform:scale(1.05); } .blog-body { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:20px 22px 22px; } .blog-cat { display:inline-block; background:var(--purple); color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:12px; } .blog-meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-family:Arial,Helvetica,sans-serif; font-size:12.5px; color:#888; margin-bottom:10px; } .blog-meta i { color:var(--purple); margin-right:6px; } .blog-card h2 { font-size:21px; line-height:1.4; margin-bottom:10px; } .blog-card h2 a { color:#222; transition:color .3s; } /* whole card clickable */ .blog-card h2 a::after { content:""; position:absolute; inset:0; } .blog-card:hover h2 a { color:var(--purple); } .blog-card .excerpt { font-size:14.5px; line-height:1.8; color:#555; margin-bottom:18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .read-more { margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; color:var(--purple); } .read-more i { font-size:12px; transition:transform .3s; } .blog-card:hover .read-more i { transform:translateX(5px); } /* Pagination */ .pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:54px; } .page-btn { min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #dcdbea; background:#fff; color:#333; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; transition:.3s; } a.page-btn:hover { border-color:var(--purple); color:var(--purple); box-shadow:0 6px 14px rgba(61,58,148,.12); } .page-btn.current { background:var(--purple); border-color:var(--purple); color:#fff; } .page-btn.disabled { opacity:.45; cursor:not-allowed; } .page-gap { padding:0 4px; font-family:Arial,Helvetica,sans-serif; color:#999; } /* ---------- Single blog page ---------- */ .post { background:#fafafa; padding:40px 0 80px; } .post-wrap { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:36px; } .post-main { background:#fff; border:1px solid #e4e4ee; padding:36px 40px 40px; min-width:0; } .post-main h1 { font-size:36px; line-height:1.3; margin-bottom:12px; } .post-hero { width:100%; aspect-ratio:16/9; object-fit:cover; margin:22px 0 30px; } .post-content { font-size:16px; line-height:1.95; color:#444; } .post-content p { margin-bottom:18px; } .post-content h2 { font-size:26px; line-height:1.35; margin:34px 0 12px; } .post-content h3 { font-size:21px; margin:28px 0 10px; } .post-content ul { list-style:none; margin-bottom:20px; } .post-content li { position:relative; padding-left:28px; margin-bottom:8px; } .post-content li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:1px; font-size:13px; color:var(--purple); } .post-content blockquote { margin:26px 0; padding:22px 26px; border-left:5px solid var(--purple); background:#f4f3fb; font-size:19px; line-height:1.7; color:#333; } .post-content img { width:100%; margin:10px 0 26px; } .post-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:30px; padding-top:20px; border-top:1px solid #eee; } .post-foot .share { padding:0; } .post-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:Arial,Helvetica,sans-serif; font-size:13px; } .post-tags span { font-weight:700; color:#222; margin-right:2px; } .post-tags a { border:1px solid #dcdbea; padding:5px 12px; color:#555; transition:.3s; } .post-tags a:hover { background:var(--purple); border-color:var(--purple); color:#fff; } /* Previous / next post */ .post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; } .post-nav a { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid #e4e4ee; background:#fafafa; transition:.3s; } .post-nav a:hover { border-color:#cfcde8; background:#fff; box-shadow:0 10px 24px rgba(61,58,148,.12); } .post-nav .post-next { justify-content:flex-end; text-align:right; } .post-nav .arr { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--purple); color:#fff; font-size:14px; transition:transform .3s; } .post-prev:hover .arr { transform:translateX(-4px); } .post-next:hover .arr { transform:translateX(4px); } .post-nav small { display:block; font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#888; } .post-nav strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:400; font-size:16px; line-height:1.4; color:#222; } .post-nav a:hover strong { color:var(--purple); } /* sirf "Next" ho (sabse purana post) to wo right side me */ @media (min-width:601px) { .post-nav .post-next:first-child { grid-column:2; } } /* Right: sticky CTA (article on the left scrolls) */ .post-cta { position:sticky; top:100px; overflow:hidden; background:linear-gradient(160deg,var(--purple) 0%,var(--navy) 100%); color:#fff; padding:32px 28px 26px; box-shadow:0 14px 34px rgba(61,58,148,.22); } .post-cta::before { content:""; position:absolute; right:-70px; top:-70px; width:190px; height:190px; border-radius:50%; border:28px solid rgba(255,255,255,.07); } .cta-tag { font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .post-cta h3 { position:relative; color:#fff; font-size:27px; line-height:1.3; margin-bottom:12px; } .post-cta > p:not(.cta-tag) { font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.8; opacity:.88; } .post-cta ul { list-style:none; margin:18px 0 4px; font-family:Arial,Helvetica,sans-serif; font-size:14px; } .post-cta li { position:relative; padding-left:26px; margin-bottom:9px; } .post-cta li::before { content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:0; color:var(--accent); } .post-cta .enquiry-btn { width:100%; justify-content:center; margin-top:20px; background:#fff; border-color:#fff; color:var(--purple); font-weight:700; } .post-cta .enquiry-btn:hover { background:transparent; color:#fff; } .cta-call { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); font-family:Arial,Helvetica,sans-serif; font-size:17px; font-weight:700; color:#fff; } .cta-call .ic { width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.14); transition:background .3s; } .cta-call:hover .ic { background:rgba(255,255,255,.28); } .cta-call small { display:block; font-size:12px; font-weight:400; opacity:.75; } @media (max-width:1150px) { .post-wrap { grid-template-columns:minmax(0,1fr) 320px; gap:26px; } .post-main { padding:30px 28px 34px; } } @media (max-width:900px) { .blog-grid { grid-template-columns:repeat(2,1fr); gap:20px; } .blog-head h1 { font-size:30px; } .post-wrap { grid-template-columns:1fr; } .post-cta { position:relative; top:auto; } .post-main h1 { font-size:30px; } } @media (max-width:600px) { .blog-list { padding:34px 0 50px; } .blog-head { margin-bottom:28px; } .blog-head h1 { font-size:26px; } .blog-grid { grid-template-columns:1fr; } .blog-card h2 { font-size:19px; } .pagination { gap:6px; margin-top:36px; } .page-btn { min-width:38px; height:38px; padding:0 11px; font-size:13px; } .post { padding:20px 0 50px; } .post-main { padding:20px 16px 24px; } .post-main h1 { font-size:25px; } .post-hero { margin:16px 0 22px; } .post-content { font-size:15px; } .post-content h2 { font-size:22px; margin-top:28px; } .post-content blockquote { padding:16px 18px; font-size:17px; } .post-nav { grid-template-columns:1fr; } .post-cta { padding:26px 20px 22px; } .post-cta h3 { font-size:24px; } }