:root { --navy: #071827; --navy2: #0b2538; --navy3: #10364d; --gold: #c9a45c; --gold-light: #e0c27e; --white: #f4f6f8; --muted: #aab7c2; --border: rgba(255,255,255,.10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; } a { color: inherit; text-decoration: none; } .jfg { width: min(1180px, 90%); margin: auto; } header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(5,20,32,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; } .dsh { display: flex; align-items: center; gap: 12px; } .dsh img { width: 52px; height: 52px; object-fit: contain; } .jhg { font-size: 18px; font-weight: 700; letter-spacing: 2px; } .gvs { display: block; font-size: 9px; letter-spacing: 4px; color: var(--gold-light); margin-top: 3px; } nav { display: flex; gap: 34px; } nav a { font-size: 14px; letter-spacing: 1px; color: #dbe2e8; position: relative; } nav a::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 0; height: 2px; background: var(--gold); transition: .3s; } nav a:hover::after { width: 100%; } .weu { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 76px; background-image: url("./hero-aircraft.png"); background-size: cover; background-position: 58% center; background-repeat: no-repeat; } .xes { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(3, 17, 29, 0.92) 0%, rgba(3, 17, 29, 0.78) 30%, rgba(3, 17, 29, 0.35) 55%, rgba(3, 17, 29, 0.08) 100% ); } .weu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 2; pointer-events: none; background: linear-gradient( transparent, rgba(4,17,27,.72) ); } .hww { position: relative; z-index: 10; width: min(1180px, 90%); margin: 0 auto; } .ppw { width: min(1620px, 52vw); padding: 80px 0 100px; } .weu h1 { margin: 0; font-size: clamp(55px, 6vw, 92px); line-height: .90; letter-spacing: 4px; font-weight: 750; text-shadow: 0 3px 20px rgba(0,0,0,.30); } .weu h1 span { display: block; margin-top: 20px; font-size: clamp(22px, 2.5vw, 35px); font-weight: 400; letter-spacing: 10px; } .heq { width: 80px; height: 3px; margin-top: 28px; background: var(--gold); } .jwj { max-width: 570px; margin-top: 20px; color: #d3dbe1; font-size: 16px; line-height: 1.8; text-shadow: 0 2px 5px rgba(0,0,0,.5); } .dlw { margin-top: 30px; font-size: clamp(24px, 2.5vw, 36px); font-weight: 300; letter-spacing: 1px; } .buttons { display: flex; gap: 18px; margin-top: 35px; } .btn { padding: 15px 26px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: 1px; transition: transform .25s, background .25s, border-color .25s; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--gold); color: #071827; } .btn-primary:hover { background: var(--gold-light); } .btn-outline { border: 1px solid rgba(255,255,255,.65); background: rgba(7,24,39,.25); backdrop-filter: blur(5px); } .btn-outline:hover { border-color: var(--gold); } .jjw { position: absolute; left: 0; top: 0; width: 200px; height: 200px; transform: translate(-50%, -50%); z-index: 4; border-radius: 50%; overflow: hidden; pointer-events: none; transition: width .15s linear, height .15s linear; } .jjw::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient( rgba(4,7,9,.72) 11% 64%, transparent 56% ); z-index: 1; } .qte { position: absolute; inset: 4%; border-radius: 50%; animation: hhw 4.5s linear infinite; will-change: transform; } @keyframes hhw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .qte > span { --angle: calc(var(--i) * 20deg); position: absolute; left: 50%; top: 50%; width: 10%; height: 43%; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(var(--angle)) skewX(-7deg); border-radius: 90% 20% 65% 20%; background: linear-gradient( 90deg, #101820 0%, #65717a 30%, #d1d7da 48%, #53616a 62%, #10161c 100% ); box-shadow: inset 2px 0 3px rgba(255,255,255,.22); } .nyf { position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 5; background: radial-gradient( circle at 35% 30%, #87959d, #36434b 45%, #080d11 78% ); box-shadow: 0 2px 8px rgba(0,0,0,.8); } .sop { position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; transform: translate(-50%, -50%); border-radius: 50%; border: clamp(1px, .25vw, 3px) solid transparent; border-top-color: rgba(255,255,255,.9); border-right-color: rgba(255,255,255,.55); } @media(max-width:900px) { .weu { background-position: 62% center; } .xes { background: rgba(4,17,27,.72); } .ppw { width: 100%; max-width: 600px; } .jjw { display: none; } } @media(max-width:560px) { .weu { min-height: 100svh; background-position: 66% center; } .weu h1 { font-size: 45px; } .weu h1 span { font-size: 19px; letter-spacing: 6px; } .dlw { font-size: 25px; } .jwj { font-size: 14px; } .buttons { flex-direction: column; align-items: flex-start; } } @media(prefers-reduced-motion: reduce) { .qte { animation: none; } } .aircraft { position: absolute; top: 25%; left: -200px; font-size: 42px; opacity: .18; animation: fly 25s linear infinite; } @keyframes fly { 0% { transform: translateX(0) translateY(100px) rotate(12deg); } 100% { transform: translateX(calc(100vw + 400px)) translateY(-180px) rotate(12deg); } } .dss { color: var(--gold-light); letter-spacing: 5px; font-size: 13px; /*font-weight: 600;*/ margin-bottom: 18px; } .btn { display: inline-block; padding: 14px 24px; border-radius: 3px; font-size: 13px; font-weight: 600; letter-spacing: 1px; transition: .25s; } .btn-primary { background: var(--gold); color: #071827; } .btn-primary:hover { background: var(--gold-light); } .btn-outline { border: 1px solid rgba(255,255,255,.25); } .btn-outline:hover { border-color: var(--gold); } section { padding: 100px 0; } .section-title { margin-bottom: 50px; } .section-label { color: var(--gold); font-size: 12px; letter-spacing: 4px; } .section-title h2 { margin: 10px 0 0; font-size: 36px; letter-spacing: 2px; } .section-title h2::after { content: ""; display: block; width: 55px; height: 2px; background: var(--gold); margin-top: 15px; } .about { background: #091d2c; } .about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; } .about-text { font-size: 17px; line-height: 1.9; color: #c3cdd5; } .values { display: grid; gap: 20px; } .value-box { padding: 22px; border-left: 2px solid var(--gold); background: rgba(255,255,255,.025); } .value-box strong { display: block; margin-bottom: 8px; letter-spacing: 1px; } .value-box span { color: var(--muted); font-size: 14px; } .services { position: relative; background: linear-gradient( rgba(3,17,29,.91), rgba(3,17,29,.94) ), url("services-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .services .jfg { position: relative; z-index: 2; } .service-card { min-height: 280px; padding: 32px 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient( 145deg, rgba(7,24,39,.76), rgba(7,24,39,.45) ); backdrop-filter: blur(7px); transition: transform .35s ease, border-color .35s ease, background .35s ease; } .service-card:hover { transform: translateY(-8px); border-color: rgba(201,164,92,.7); background: linear-gradient( 145deg, rgba(10,37,55,.90), rgba(7,24,39,.65) ); } .contact { position: relative; background: linear-gradient( 90deg, rgba(4,17,27,.95), rgba(4,17,27,.78) ), url("contact-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .contact .jfg { position: relative; z-index: 2; } .contact-box { padding: 30px; border-top: 2px solid var(--gold); border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,20,32,.64); backdrop-filter: blur(7px); transition: transform .3s ease, background .3s ease; } .contact-box:hover { transform: translateY(-5px); background: rgba(5,20,32,.80); } footer { padding: 30px 0; border-top: 1px solid var(--border); background: #04111b; color: #7f919f; font-size: 13px; } .footer-content { display: flex; justify-content: space-between; align-items: center; } @media(max-width:900px) { nav { display: none; } .hww { grid-template-columns: 1fr; text-align: center; } .ppw { padding-bottom: 0; } .jwj { margin-left: auto; margin-right: auto; } .buttons { justify-content: center; } .hero-logo img { max-width: 380px; } .about-grid { grid-template-columns: 1fr; } .service-grid { grid-template-columns: repeat(2,1fr); } .contact-grid { grid-template-columns: 1fr; } } @media(max-width:560px) { .jhg { font-size: 14px; } .service-grid { grid-template-columns: 1fr; } .weu h1 { font-size: 42px; } .dlw { font-size: 20px; } section { padding: 70px 0; } .footer-content { flex-direction: column; gap: 10px; text-align: center; } } @media (max-width: 900px) { .weu { min-height: 100svh; background-position: 70% center; } .xes { background: linear-gradient( to bottom, rgba(3,17,29,.08) 0%, rgba(3,17,29,.15) 30%, rgba(3,17,29,.55) 55%, rgba(3,17,29,.92) 78%, rgba(3,17,29,.98) 100% ); } .hww { min-height: calc(100svh - 76px); display: flex; align-items: flex-end; padding-bottom: 45px; } .ppw { width: 100%; max-width: 600px; padding: 300px 0 20px; } .jjw { display: block; } } @media (max-width: 560px) { .weu { min-height: 100svh; background-position: 70% center; } .hww { width: 90%; align-items: flex-end; padding-bottom: 25px; } .ppw { padding: 42vh 0 10px; } .weu h1 { font-size: clamp(38px, 12vw, 52px); } .weu h1 span { margin-top: 12px; font-size: clamp(16px, 5vw, 21px); letter-spacing: 5px; } .dss { font-size: 10px; letter-spacing: 3px; } .dlw { margin-top: 18px; font-size: 21px; } .jwj { font-size: 13px; line-height: 1.55; margin-top: 12px; } .buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .btn { padding: 11px 15px; font-size: 11px; } } .about { position: relative; background: linear-gradient( 90deg, rgba(4,17,27,.96), rgba(4,17,27,.88) ), url("about-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .about::before { content: ""; position: absolute; width: 600px; height: 600px; left: -300px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(201,164,92,.10), transparent 70% ); pointer-events: none; } .about .jfg { position: relative; z-index: 2; } .about-grid { display: grid; grid-template-columns: 380px 1fr; gap: 70px; align-items: center; } .about-logo { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; border: 1px solid rgba(255,255,255,.08); background: rgba(5,20,32,.32); backdrop-filter: blur(5px); } .about-logo img { width: 100%; max-width: 300px; object-fit: contain; filter: drop-shadow( 0 15px 25px rgba(0,0,0,.35) ); transition: transform .5s ease; } .about-logo:hover img { transform: scale(1.035); } .about-logo-line { width: 65px; height: 2px; margin: 28px 0 18px; background: var(--gold); } .about-logo span { color: var(--gold-light); font-size: 10px; letter-spacing: 3px; text-align: center; } .about-content { display: grid; gap: 35px; } .about-text { font-size: 17px; line-height: 1.9; color: #d1dae0; text-shadow: 0 2px 5px rgba(0,0,0,.4); }