:root{ : --log_navy:#0D1B2A; : --log_teal:#00BFA6; : --log_mint:#22D3A6; : --log_gray_50:#F2F4F7; : --log_text:#0D1B2A; : --log_shadow_sm:0 6px 18px rgba(13,27,42,.08); : --log_shadow_md:0 10px 28px rgba(13,27,42,.12); : --log_radius_lg:16px; : --log_radius_md:12px; : --log_container_max:1200px; :} /* opt-in: only affects pages that add `.logistiyat-landing` on */ .logistiyat-landing{ color: var(--log_text); } .logistiyat-landing .container{ max-width: var(--log_container_max); } /* Header */ .logistiyat-landing .top-nav{ background: var(--log_navy); } .logistiyat-landing .top-nav .nav-link{ color: rgba(255,255,255,.92); } .logistiyat-landing .main-nav{ background: rgba(13,27,42,.92); backdrop-filter: blur(10px); } .logistiyat-landing .main-nav .nav-link{ color: rgba(255,255,255,.92) !important; font-family: inherit; font-size: 15px; font-weight: 500; text-decoration: none; } .logistiyat-landing .main-nav .nav-item a:hover{ color: var(--log_mint) !important; text-decoration: none; } .logistiyat-landing .main-nav .nav-item .active{ color: var(--log_teal) !important; text-decoration: none; } .logistiyat-landing .navbar-brand{ width: auto; } .logistiyat-landing .navbar-brand img{ width: auto; height: 44px; } @media (max-width: 576px){ .logistiyat-landing .navbar-brand img{height: 38px;} } /* CTA button in header */ .logistiyat-landing .link-btn a{ background: var(--log_teal); color: #fff !important; border-radius: 999px; padding: 8px 14px; margin: 6px 4px; box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; text-decoration: none !important; } .logistiyat-landing .link-btn a:hover{ background: var(--log_mint); color: #fff !important; transform: translateY(-1px); box-shadow: var(--log_shadow_sm); } .logistiyat-landing .link-btn a:focus-visible{ outline: 3px solid rgba(0,191,166,.35); outline-offset: 2px; } /* Hero */ .logistiyat-landing .banner{ height: auto; min-height: 620px; padding: 80px 0 56px; background: var(--log_navy) url(../../assets/img/landing/hero-city-truck.jpg) center/cover no-repeat; background-attachment: scroll; position: relative; } .logistiyat-landing .banner::before{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 500px at 60% 35%, rgba(0,191,166,.16), transparent 60%), linear-gradient(0deg, rgba(13,27,42,.82), rgba(13,27,42,.58)); pointer-events:none; } .logistiyat-landing .banner > .container{ position: relative; z-index: 1; } .logistiyat-landing .log-hero-title{ color:#fff; font-weight: 800; letter-spacing: 0; line-height: 1.25; font-size: 40px; margin: 0 0 14px; } .logistiyat-landing .log-hero-subtitle{ color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.9; margin: 0 0 22px; max-width: 56rem; } @media (max-width: 768px){ .logistiyat-landing .banner{min-height: 520px;padding: 64px 0 44px;} .logistiyat-landing .log-hero-title{font-size: 28px;} .logistiyat-landing .log-hero-subtitle{font-size: 15px;} } /* Buttons */ .logistiyat-landing .log-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius: 999px; padding: 12px 18px; font-weight: 700; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; line-height: 1; } .logistiyat-landing .log-btn-primary{ background: var(--log_teal); color:#fff !important; border: 1px solid var(--log_teal); box-shadow: 0 0 0 rgba(0,0,0,0); } .logistiyat-landing .log-btn-primary:hover{ background: var(--log_mint); border-color: var(--log_mint); transform: translateY(-1px); box-shadow: var(--log_shadow_sm); } .logistiyat-landing .log-btn-outline{ background: transparent; color:#fff !important; border: 1px solid rgba(255,255,255,.6); } .logistiyat-landing .log-btn-outline:hover{ background: rgba(13,27,42,.92); border-color: rgba(13,27,42,.92); transform: translateY(-1px); box-shadow: var(--log_shadow_sm); } .logistiyat-landing .log-btn:focus-visible{ outline: 3px solid rgba(0,191,166,.35); outline-offset: 2px; } /* Features */ .logistiyat-landing .log-features{ background: var(--log_gray_50); padding: 48px 0; } .logistiyat-landing .log-feature-card{ background:#fff; border-radius: var(--log_radius_lg); box-shadow: var(--log_shadow_sm); padding: 22px 18px; height: 100%; } .logistiyat-landing .log-feature-icon{ width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(0,191,166,.12); color: var(--log_teal); font-size: 22px; margin-bottom: 14px; } .logistiyat-landing .log-feature-title{ font-weight: 800; color: var(--log_navy); font-size: 18px; margin: 0 0 8px; } .logistiyat-landing .log-feature-desc{ margin: 0; color: rgba(13,27,42,.78); line-height: 1.9; font-size: 14px; } /* Compliance strip */ .logistiyat-landing .log-compliance{ background: #fff; border-top: 1px solid rgba(13,27,42,.08); border-bottom: 1px solid rgba(13,27,42,.08); padding: 18px 0; } .logistiyat-landing .log-compliance-inner{ display:flex; align-items:center; justify-content:center; gap: 14px; text-align:center; flex-wrap: wrap; } .logistiyat-landing .log-compliance-text{ color: var(--log_navy); font-weight: 700; } .logistiyat-landing .log-compliance-logo{ height: 34px; width: auto; } /* RTL/LTR niceties */ html[dir="rtl"] .logistiyat-landing .log-hero-subtitle{ letter-spacing: 0; }