/* ========================================================= BODRUM ADVENTURE - WE OFFER THE BEST BANNER ========================================================= */ 
.ba-best-banner { position: relative; width: 100%; padding: 110px 0; overflow: hidden; 
    background-image: linear-gradient( 120deg, rgba(4, 18, 35, .96) 0%, rgba(7, 35, 60, .90) 45%, rgba(3, 18, 34, .92) 100% ), 
    url('/Sistem/bg1.png'); background-size: cover; background-position: center; background-attachment: fixed; } /* ========================================================= OVERLAY ========================================================= */ .ba-best-overlay { position: absolute; inset: 0; background: radial-gradient( circle at 20% 20%, rgba(0, 190, 255, .16), transparent 30% ), radial-gradient( circle at 85% 70%, rgba(255, 183, 60, .14), transparent 30% ); pointer-events: none; } /* ========================================================= MOVING LIGHT EFFECT ========================================================= */ .ba-best-light { position: absolute; width: 450px; height: 450px; border-radius: 50%; filter: blur(120px); opacity: .35; pointer-events: none; } .ba-light-one { background: #00bfff; top: -150px; left: -150px; animation: baLightMoveOne 10s ease-in-out infinite alternate; } .ba-light-two { background: #ffc45e; bottom: -180px; right: -150px; animation: baLightMoveTwo 12s ease-in-out infinite alternate; } @keyframes baLightMoveOne { 0% { transform: translate(0, 0); } 100% { transform: translate(220px, 120px); } } @keyframes baLightMoveTwo { 0% { transform: translate(0, 0); } 100% { transform: translate(-220px, -100px); } } /* ========================================================= HEADING ========================================================= */ .ba-best-heading { max-width: 820px; margin: 0 auto 45px; position: relative; z-index: 2; } .ba-best-mini-title { display: inline-flex; align-items: center; padding: 8px 18px; margin-bottom: 18px; border-radius: 50px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 3px; } .ba-best-heading h2 { margin: 0; color: #ffffff; font-size: clamp(38px, 5vw, 66px); font-weight: 800; line-height: 1.08; letter-spacing: -2px; } .ba-best-heading h2 span { background: linear-gradient( 90deg, #ffffff, #63d9ff, #ffd383 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ba-best-heading p { max-width: 700px; margin: 22px auto 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.8; } /* ========================================================= CARD ========================================================= */ .ba-best-card { position: relative; height: 100%; min-height: 245px; padding: 35px 30px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.15); background: linear-gradient( 145deg, rgba(255,255,255,.12), rgba(255,255,255,.035) ); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.22); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease; } /* LIGHT BORDER */ .ba-best-card::before { content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.18), transparent ); transform: skewX(-20deg); transition: .8s; } .ba-best-card:hover::before { left: 150%; } /* GLOW */ .ba-best-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; bottom: -70px; border-radius: 50%; background: rgba(55, 193, 255, .18); filter: blur(10px); transition: .45s ease; } .ba-best-card:hover::after { width: 240px; height: 240px; background: rgba(255, 190, 88, .18); } .ba-best-card:hover { transform: translateY(-12px) scale(1.015); border-color: rgba(255,255,255,.32); box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 45px rgba(41, 190, 255, .15); } /* ========================================================= ICON ========================================================= */ .ba-best-icon { position: relative; z-index: 2; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; border-radius: 20px; background: linear-gradient( 145deg, rgba(255,255,255,.22), rgba(255,255,255,.07) ); border: 1px solid rgba(255,255,255,.18); transition: .45s ease; } .ba-best-icon img { width: 42px; height: 42px; object-fit: contain; filter: brightness(0) invert(1); transition: .45s ease; } .ba-best-card:hover .ba-best-icon { transform: translateY(-5px) rotate(-4deg) scale(1.08); background: rgba(255,255,255,.20); } .ba-best-card:hover .ba-best-icon img { transform: scale(1.10); } /* ========================================================= CONTENT ========================================================= */ .ba-best-content { position: relative; z-index: 2; } .ba-best-content h4 { margin-bottom: 13px; color: #ffffff; font-size: 21px; font-weight: 700; } .ba-best-content p { margin: 0; color: rgba(255,255,255,.67); font-size: 14px; line-height: 1.75; transition: .35s ease; } .ba-best-card:hover .ba-best-content p { color: rgba(255,255,255,.88); } /* ========================================================= NUMBER ========================================================= */ .ba-best-number { position: absolute; top: 20px; right: 25px; color: rgba(255,255,255,.08); font-size: 52px; font-weight: 900; line-height: 1; transition: .45s ease; } .ba-best-card:hover .ba-best-number { color: rgba(255,255,255,.15); transform: translateY(-4px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { .ba-best-banner { padding: 85px 0; background-attachment: scroll; } .ba-best-heading h2 { font-size: 45px; } } @media (max-width: 767px) { .ba-best-banner { padding: 70px 0; } .ba-best-heading { margin-bottom: 25px; } .ba-best-heading h2 { font-size: 36px; letter-spacing: -1px; } .ba-best-heading p { font-size: 14px; } .ba-best-card { min-height: auto; padding: 28px 25px; } } @media (max-width: 575px) { .ba-best-heading h2 { font-size: 31px; } .ba-best-mini-title { font-size: 10px; letter-spacing: 2px; } }