/* Google Font (Poppins) already linked in index.html — removed the duplicate @import here so the font isn't fetched twice. */ /*================================================== RESET ==================================================*/ *{ margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; } html{ scroll-behavior:smooth; } body{ background:#f5f6fa; color:#222; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ text-decoration:none; } ul{ list-style:none; } /*================================================== TOP OFFER BAR ==================================================*/ .top-bar{ height:46px; background:#121A2F; overflow:hidden; display:flex; align-items:center; position:relative; z-index:1001; } .offer-track{ display:flex; width:max-content; animation:scrollOffer 22s linear infinite; } .offer{ color:#fff; font-size:18px; font-weight:600; padding:0 70px; white-space:nowrap; } .offer span{ color:#FFD54A; } @keyframes scrollOffer{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } } /*================================================== HEADER ==================================================*/ header{ position:sticky; top:0; left:0; width:100%; background:#fff; box-shadow:0 2px 15px rgba(0,0,0,.08); z-index:1000; } .container{ width:95%; max-width:1280px; margin:auto; } /*================================================== NAVBAR ==================================================*/ .navbar{ display:grid; grid-template-columns:220px 1fr 340px; align-items:center; column-gap:20px; height:70px; } /*================================================== LOGO ==================================================*/ .logo{ font-size:28px; font-weight:700; color:#2f63e5; } .logo span{ color:#16a34a; } /*================================================== MENU ==================================================*/ .nav{ display:flex; justify-content:center; align-items:center; gap:30px; } .nav a{ color:#444; font-size:15px; font-weight:500; position:relative; transition:.3s; } .nav a:hover, .nav a.active{ color:#2f63e5; } .nav a::after{ content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:#2f63e5; transition:.3s; } .nav a:hover::after, .nav a.active::after{ width:100%; } /*================================================== SEARCH BOX ==================================================*/ .search-box{ display:flex; align-items:center; height:46px; border:2px solid #e5e5e5; border-radius:12px; overflow:hidden; background:#fff; } .search-box input{ flex:1; height:100%; border:none; outline:none; padding:0 15px; font-size:14px; } .search-box input::placeholder{ color:#888; } .search-box button{ width:95px; height:100%; border:none; cursor:pointer; background:#2f63e5; color:#fff; font-size:14px; font-weight:600; transition:.3s; } .search-box button:hover{ background:#1d4ed8; } /*================================================== MOBILE DEFAULT ==================================================*/ .mobile-search{ display:none; } .menu-btn{ display:none; background:none; border:none; cursor:pointer; font-size:28px; color:#333; } /*================================================== RESPONSIVE - TABLET & MOBILE ==================================================*/ @media (max-width:992px){ .container{ width:100%; padding:0 12px; } .navbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 0; height:auto; } .logo{ order:1; } .menu-btn{ display:flex; align-items:center; justify-content:center; order:2; width:42px; height:42px; border:none; background:transparent; font-size:28px; cursor:pointer; color:#333; flex-shrink:0; z-index:10000; } .desktop-search{ display:none; } .mobile-search{ display:block; order:3; width:100%; margin-top:12px; } .mobile-search .search-box{ width:100%; height:48px; border:1.5px solid #e8eaf0; border-radius:999px; overflow:visible; display:flex; align-items:center; background:#fff; box-shadow:0 4px 14px rgba(47,99,229,.08); padding:3px 3px 3px 0; transition:border-color .25s, box-shadow .25s; } .mobile-search .search-box:focus-within{ border-color:#2f63e5; box-shadow:0 4px 18px rgba(47,99,229,.22); } /* Search icon sits inside the input itself, no extra markup needed */ .mobile-search .search-box input{ flex:1; height:100%; padding:0 14px 0 42px; font-size:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%23a3a9bb' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14'/%3E%3C/svg%3E") no-repeat 14px center; background-size:16px; } .mobile-search .search-box input::placeholder{ color:#9aa0b4; } .mobile-search .search-box button{ width:42px; height:42px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#2f63e5,#1d4ed8); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 10px rgba(47,99,229,.35); transition:transform .2s, box-shadow .2s; } .mobile-search .search-box button:active{ transform:scale(.92); } .mobile-search .search-box{ width:100%; } .nav{ position:fixed; top:110px; left:-100%; width:260px; height:calc(100vh - 110px); background:#fff; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; transition:left .3s ease; box-shadow:0 8px 30px rgba(0,0,0,.15); z-index:9999; } .nav.active{ left:0; } .nav a{ width:100%; padding:18px 22px; border-bottom:1px solid #ececec; font-size:15px; } .nav a::after{ display:none; } /* Offer Bar */ .top-bar{ height:42px; } .offer{ font-size:14px; padding:0 35px; } } /*================================================== SMALL MOBILE ==================================================*/ @media (max-width:576px){ .logo{ font-size:20px; } .mobile-search .search-box{ height:42px; } .mobile-search .search-box input{ padding:0 10px 0 36px; background-position:12px center; background-size:14px; font-size:12px; } .mobile-search .search-box button{ width:36px; height:36px; } .mobile-search .search-box button svg{ width:15px; height:15px; } .offer{ font-size:13px; padding:0 28px; } } /*================================================== EXTRA SMALL DEVICES ==================================================*/ @media (max-width:380px){ .container{ padding:0 10px; } .logo{ font-size:18px; } .mobile-search .search-box{ height:38px; } .mobile-search .search-box input{ font-size:10px; padding:0 8px 0 30px; background-position:10px center; background-size:12px; } .mobile-search .search-box button{ width:32px; height:32px; } .mobile-search .search-box button svg{ width:13px; height:13px; } .offer{ font-size:12px; padding:0 20px; } }