@keyframes float { 0%, to { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes mascot-float { 0%, to { transform: scaleX(-1) translateY(0) rotate(0deg); } 50% { transform: scaleX(-1) translateY(-12px) rotate(1.5deg); } } @keyframes mini-cloud-float { 0%, to { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .cloud, .cloud-layer, .hero-mascot-img, .hero-mascot { -webkit-animation: none !important; animation: none !important; } } :root { --primary-color: #2e67a8; --secondary-color: #1c3466; --gold-color: #ffc72c; --dark-blue-color: #0a1931; --light-blue-color: #2563eb; --white-color: #ffffff; --off-white-color: #f5f5f5; --dark-gray-color: #333333; --text-primary: #111; --card-border-gradient: conic-gradient( from 93deg, #fafe00 3%, #ff6f08 14%, #006aff 31%, #1500ff 42%, #006aff 50%, #1500ff 59%, #006aff 71%, #fafe00 98% ); --font-poppins: "Poppins", sans-serif; --font-lexend: "Lexend", sans-serif; --font-montserrat: "Montserrat", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body.about-page { background-image: url(../assets/about/web.webp); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; margin: 0; padding: 0; overflow-x: hidden; } body.about-page, html { overflow-x: hidden; } .hero-section { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: calc(100vh - 90px); padding: 120px 100px 80px 140px; text-align: left; overflow: hidden; gap: 50px; margin-top: 90px; } .cloud, .cloud-layer { position: absolute; pointer-events: none; z-index: 1; } .cloud-layer { inset: 0; overflow: hidden; } .cloud { left: 0; top: 0; background-image: url(../assets/clouds/intro-cloud.webp); background-size: contain; background-repeat: no-repeat; background-position: center; width: clamp(180px, 28vw, 450px); height: clamp(64px, 10vw, 160px); opacity: 0; will-change: transform; transform-origin: center; } .hero-content { position: relative; z-index: 2; flex: 0 0 55%; max-width: 55%; } .hero-heading { margin-bottom: 30px; display: flex; flex-direction: column; } .hero-title-line1, .hero-title-line2 { font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 800; font-size: 110px; line-height: 1; color: #1c3466; -webkit-text-fill-color: #1c3466; -webkit-text-stroke: 4px #f2af00; paint-order: stroke fill; text-shadow: 4px 6px 0 rgba(0, 0, 0, 0.15); margin: 0; padding: 0; } .hero-title-line2 { line-height: 1.1; color: #f2af00; -webkit-text-fill-color: #f2af00; -webkit-text-stroke: 4px #1c3466; margin: 0 0 0 160px; } .hero-description { font-family: "Lexend", sans-serif; font-size: 26px; line-height: 1.4; color: #111; margin: 0 0 40px 10px; font-weight: 600; text-align: left; max-width: 600px; } .hero-description .highlight { color: #1c3466; font-weight: 800; } .hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 30px auto 0; } .btn-primary, .btn-secondary { color: #1c3466; padding: 14px 36px; border: 2px solid #1c3466; border-radius: 8px; font-family: "Lexend", sans-serif; font-size: 20px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 4px 4px 0 rgba(28, 52, 102, 0.15); } .btn-primary { background-color: #f2af00; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover, .btn-secondary:hover, .learn-more-btn:hover { background-color: #e09f00; transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(28, 52, 102, 0.25); } .btn-secondary { background-color: #e8e8e8; } .btn-secondary:hover, .learn-more-btn:hover { background-color: #d5d5d5; } .hero-mascot-container { position: relative; z-index: 3; flex: 0 0 45%; max-width: 45%; display: flex; align-items: center; justify-content: center; } .hero-mascot-img { position: relative; width: 100%; max-width: 550px; height: auto; object-fit: contain; z-index: 2; animation: float 4s ease-in-out infinite; } .mascot-cloud { position: absolute; bottom: -40px; right: -20px; width: 500px; height: 300px; background-image: url(../assets/clouds/Cloud\ for\ Mascot.webp); background-size: contain; background-repeat: no-repeat; background-position: center bottom; z-index: 1; opacity: 0.8; } @media (max-width: 1400px) { .hero-title-line1, .hero-title-line2 { font-size: 80px; } .hero-title-line2 { margin-left: 100px; } .hero-description { font-size: 22px; } } @media (max-width: 1024px) { .hero-section { flex-direction: column; padding: 60px 30px; text-align: center; gap: 60px; } .hero-content { flex: 1; max-width: 100%; order: 1; display: flex; flex-direction: column; align-items: center; } .hero-mascot-container { flex: 1; max-width: 100%; order: 2; } .hero-title-line1, .hero-title-line2 { font-size: 60px; -webkit-text-stroke: 2px; text-align: center; } .hero-title-line2 { margin-left: 0; } .hero-description { font-size: 20px; text-align: center; margin: 20px auto 40px; } .hero-buttons { margin-left: 0; justify-content: center; } } @media (max-width: 768px) { .hero-title-line1, .hero-title-line2 { font-size: 45px; } .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } } body.about-page { background: linear-gradient(180deg, #ddf2ff 0, #aadbff 50%, #98d7ff 100%); min-height: 100vh; margin: 0; padding: 0; } .learn-more-btn { background-color: #78a2ff; color: #1c3466; padding: 14px 36px; border: 2px solid #1c3466; border-radius: 8px; font-family: "Lexend", sans-serif; font-size: 20px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 4px 4px 0 rgba(28, 52, 102, 0.15); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 30px auto 0; } .about-us-header { text-align: center; color: #1c3466; -webkit-text-fill-color: #1c3466; font-family: "Montserrat", sans-serif; font-style: normal; font-size: 15px; } .about-us-header-container { background-color: #f2ad0073; border-radius: 30px; margin: 100px auto; padding: 1px 42px; width: fit-content; } .PDA-container h1, .about-us-title { text-align: center; font-size: 60px; font-weight: 800; } .about-us-title { font-family: "Montserrat", sans-serif; font-style: normal; line-height: 1.1; color: #f2af00; -webkit-text-fill-color: #f2af00; -webkit-text-stroke: 4px #1c3466; paint-order: stroke fill; text-shadow: 4px 6px 0 rgba(0, 0, 0, 0.15); margin: 0 0 0 25px; padding: 0; } .about-us-description { text-align: center; font-family: "Lexend", sans-serif; font-size: 23px; line-height: 1.35; color: #111; margin: 15px auto 0; font-weight: 600; max-width: 760px; } .about-us-cards { background-color: #5f7fa8; width: 162px; min-height: 285px; height: auto; margin-top: 10px; padding: 28px 16px 26px; border-radius: 5%; clip-path: polygon(0 0, 78%0, 84% 4%, 100% 14%, 100% 100%, 14% 100%, 0 86%); flex-direction: column; gap: 18px; } .about-us-cards, .card-icon, .card-information { display: flex; align-items: center; } .card-information { flex-direction: column; gap: 12px; text-align: center; } .card-icon { justify-content: center; width: 100%; height: 70px; } .card-icon-img { width: 154px; height: 154px; object-fit: contain; display: block; } .card-information p, .card-information span { color: #fff; font-family: "Lexend", sans-serif; text-align: center; } .card-information span { font-size: 24px; font-weight: 700; margin-bottom: 6px; display: block; } .card-information p { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0 auto; max-width: 115px; } .about-us-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; margin-top: 10px; gap: 33px; } main { position: relative; } .about-cloud-bg { position: absolute; top: 80px; left: -300px; width: 100%; display: flex; justify-content: center; pointer-events: none; z-index: 0; } .about-cloud-img { width: 900px; max-width: 100%; opacity: 0.55; } .about-us-container, .about-us-content, .about-us-header-container, .herobuttons { position: relative; z-index: 1; } .about-hero, .hero-container { position: relative; height: 100%; border-radius: 25px; overflow: hidden; } .about-hero { margin: 90px auto 0; height: 450px; max-width: 1200px; } @media (min-width: 1025px) { body.about-page { font-family: "Poppins", sans-serif; } main#main-content { padding: 60px 20px; } .about-hero { margin: 40px auto 0; height: 574px; max-width: 1422px; } .about-hero .hero-container, .hero-image-wrapper { display: block; height: 100%; } .hero-image-wrapper { position: relative; width: 100%; z-index: 1; --r: 25px; --s: 52px; --x: 272px; --y: 145px; --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%); --_g: conic-gradient( from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0 ); --_d: calc(var(--s) + var(--r)); -webkit-mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y)); -webkit-mask-repeat: no-repeat; mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y)); mask-repeat: no-repeat; } .hero-image-wrapper::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); pointer-events: none; } .milcon-pic { width: 120%; height: 144%; display: block; object-fit: cover; border-radius: var(--r); } .hero-bottom-card, .hero-top-text { position: absolute; display: flex; flex-direction: column; } .hero-top-text { top: 10%; left: 2%; z-index: 10; max-width: 50%; } .hero-top-text .top-sub { color: #fff; font-weight: 600; font-size: 30px; text-shadow: 0 2px 1.2px var(--light-blue-color); } .hero-top-text .top-main { color: #0060e6; font-weight: 900; font-size: 42px; line-height: 1.1; margin: 0; text-shadow: 0px 4px 0px rgb(91 159 255); } .hero-bottom-card { bottom: -3px; left: 0px; z-index: 20; align-items: flex-start; justify-content: flex-start; width: calc(var(--x) + var(--r) + var(--s)); height: calc(var(--y) + var(--r) + var(--s)); padding: 10px 40px 30px 25px; box-sizing: border-box; } .hero-bottom-card .card-sub { background: #ff6f09; background: linear-gradient( to top, rgba(255, 111, 9, 1) 0%, rgba(255, 183, 0, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-size: 27px; font-weight: 500; margin: 0 -14px -4px; } .hero-bottom-card .card-main { font-size: 42px; font-weight: 700; background: #ff6f09; background: linear-gradient( to top, rgba(255, 111, 9, 1) 0%, rgba(255, 183, 0, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; line-height: 1; letter-spacing: 0.5px; } .hero-bottom-card .card-tagline { background: #ff6f09; background: linear-gradient( to top, rgba(255, 111, 9, 1) 0%, rgba(255, 183, 0, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-weight: 600; font-size: 14px; line-height: 1.4; margin-bottom: 10px; font-weight: normal; } .hero-bottom-card .btn-learn-more { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 150px; padding: 12px 66px; border-radius: 7px; cursor: pointer; font-size: 14px; font-weight: 700; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); margin-top: auto; align-self: center; margin-left: -23px; background: linear-gradient( to top, rgba(255, 111, 9, 1) 0%, rgba(255, 183, 0, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; border: 2px solid transparent; } .hero-bottom-card .btn-learn-more::before { content: ""; position: absolute; inset: 0; border-radius: 7px; padding: 2px; background: linear-gradient( to top, rgba(255, 111, 9, 1) 0%, rgba(255, 183, 0, 1) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .hero-bottom-card .btn-learn-more:hover { background: #1c3466; -webkit-text-fill-color: #fff; color: #fff; transform: translateY(-1px); } } .PDA-container { background: linear-gradient(180deg, #ffd500, #ff9100); padding: 5px 70px 70px; margin: 60px auto 0; max-width: 1200px; height: 250px; } .PDA-container h1 { background: linear-gradient(180deg, #002fff, #010741); font-family: "Poppins", sans-serif; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vision-mission-container { margin: -150px auto 100px; max-width: 1250px; display: flex; gap: 40px; align-items: flex-start; justify-content: center; z-index: 2; } .vision-mission-container h1, .vision-mission-container p { color: #fff; } .desktop-only, .mobile-only { font-family: "Poppins", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.9; text-align: justify; margin: 0; } .vision-mission-container h1 { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 45px; text-align: right; margin: 0; } .vision-card { width: 639.3px; height: 323px; } .mission-card { width: 849px; height: 346px; margin-top: 40px; } .mission-card, .vision-card { background: linear-gradient(176deg, #00aeff, #0244d3); border-radius: 30px; padding: 20px 30px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .mission-icon, .vision-icon { width: 60px; height: 60px; border-radius: 50%; object-fit: contain; } .mission-card-header, .vision-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .goal-header h1, .goal-header p { text-align: center; color: #1e376c; font-family: "Poppins", sans-serif; } .goal-header h1 { margin-top: 150px; font-weight: 800; font-size: 75px; } .goal-header p { margin: -20px auto 50px; max-width: 1290px; font-weight: 600; font-size: 24px; line-height: 36px; } .goal\.container { background: radial-gradient(circle at 10% 10%, #d0f4f0 0, transparent 50%), radial-gradient(circle at 90% 90%, #9bc5f1 0, transparent 50%), radial-gradient(circle at 50% 50%, #b2e6d4 0, transparent 50%), #bce0f4; padding: 60px 0 100px; margin-top: 20px; border-radius: 30px; } .aws-club-goals { display: grid; grid-template-columns: repeat(3, 408px); column-gap: 32px; row-gap: 32px; justify-content: center; max-width: 1400px; margin: 0 auto; padding: 40px 20px; } .goal-card, .inner-goal-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .goal-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.4); filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1)); padding: 24px; height: 380px; width: 408px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .goal-card:hover { transform: translateY(-5px); } .goal-card::after, .goal-card::before { display: none; content: none; } .inner-goal-card { height: 100%; width: 100%; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 15px rgba(0, 0, 0, 0.05); padding: 24px 20px 20px; box-sizing: border-box; } .goal-card-icon-container { display: flex; align-items: center; justify-content: center; background: #1c3466; border: 1.5px solid #e3cc49; border-radius: 50%; width: 44px; height: 44px; margin-top: 0; margin-bottom: 15px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(28, 52, 102, 0.15); } .goal-card-icon { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) saturate(100%) invert(84%) sepia(34%) saturate(6144%) hue-rotate(359deg) brightness(102%) contrast(105%); } .header-card { font-size: 18px; font-weight: 800; text-align: center; text-transform: uppercase; margin: 0 0 10px; line-height: 1.35; letter-spacing: 0.2px; } .card-info, .goal-card-btn, .header-card { color: #1e376c; font-family: "Poppins", sans-serif; } .card-info { font-size: 15px; font-weight: 500; text-align: center; line-height: 1.5; padding: 0 10px; margin: 0 0 16px; flex-grow: 1; display: block; overflow: hidden; } .goal-card-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 6px 20px; font-size: 12px; font-weight: 600; text-transform: lowercase; text-decoration: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); margin-top: auto; } .goal-card-btn:hover { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.9); transform: scale(1.03); } .goal-card-btn:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.15); } @media screen and (max-width: 1100px) { .aws-club-goals { width: 100%; box-sizing: border-box; grid-template-columns: 1fr; padding: 40px 16px; } } .skill-builder-container { margin: 0 auto 50px; border-radius: 36px; max-width: 1560px; height: 455px; overflow: hidden; position: relative; background: linear-gradient(180deg, #8fbeff 0, #1a79ff 50%, #040a50 94.71%); display: flex; justify-content: space-between; align-items: center; padding: 0 5%; } .offices-cards-container, .skill-builder-cards-container { display: flex; align-items: center; perspective: 1200px; gap: 0; margin-top: 60px; } .offices-cards, .skill-builder-cards { background: rgba(255, 255, 255, 0.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: rotateX(-70deg); transform: rotateY(60deg); transform-origin: left center; margin-right: -260px; transition: transform 0.3s; border-radius: 20px; height: 190px; width: 300px; padding: 15px; text-align: right; overflow: hidden; } .offices-cards h2, .skill-builder-cards h2 { text-align: left; color: #010741; font-family: "Poppins", sans-serif; } .offices-cards p { color: #010741; } .offices-cards p, .skill-builder-cards p { font-family: "Poppins", sans-serif; text-align: left; letter-spacing: 0.08em; } .offices-container h1, .skill-builder-container h1 { position: absolute; font-family: "Poppins", sans-serif; margin: 0; z-index: 10; } .skill-builder-container h1 { top: 25px; left: 90px; font-weight: 700; font-size: 40px; line-height: 60px; background: linear-gradient(186.43deg, #f2af00 46.54%, #ff6f08 96.04%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 3px 8px rgba(30, 30, 30, 0.25); } .offices-container, .queue-area { display: flex; position: relative; align-items: center; } .offices-container { margin: 0 auto 50px; border-radius: 36px; max-width: 1560px; height: 455px; overflow: hidden; background: linear-gradient( 180deg, rgba(255, 183, 0, 0.95) 0, rgba(242, 175, 0, 0.95) 30.29%, rgba(255, 111, 8, 0.95) 78.37% ); justify-content: space-between; padding: 0 5%; } .offices-container h1 { top: 30px; left: 107px; color: #123a90; font-size: 48px; font-weight: 800; line-height: 72px; } .offices-cards:hover, .skill-builder-cards:hover { cursor: pointer; } .offices-cards:active, .skill-builder-cards:active { background: rgba(12, 3, 92, 0.459); } .queue-area { width: 60%; height: 100%; perspective: 1500px; margin-top: 50px; } .queue-card, .queue-card-inner { position: absolute; box-sizing: border-box; } .queue-card { width: 250px; height: 287px; background: rgba(255, 255, 255, 0.5); border-radius: 14px; cursor: pointer; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: left center; } .queue-card-inner { width: 213px; height: 240px; left: 15px; top: 33px; background: rgba(237, 244, 255, 0.55); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; } .queue-card:hover { background: rgba(255, 255, 255, 0.25); } .spotlight-area { width: 32%; height: 100%; position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; perspective: 1000px; } .spotlight-card, .spotlight-card-inner { box-sizing: border-box; display: flex; flex-direction: column; } .spotlight-card { position: absolute; width: 323px; height: 370px; background: rgba(255, 255, 255, 0.95); border-radius: 14px; padding: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .spotlight-card-inner { width: 100%; flex-grow: 1; overflow-y: scroll; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); border-radius: 12px; padding: 24px; align-items: flex-end; text-align: right; margin-top: 20px; scrollbar-width: none; } .spotlight-icon-wrapper { margin-bottom: 20px; } .future-header-container h1, .spotlight-title { font-family: "Poppins", sans-serif; font-weight: 800; } .spotlight-desc, .spotlight-title { font-size: 22px; color: #1e376c; margin: 0 0 12px; opacity: 1; transform: none; } .spotlight-desc { font-size: 12.5px; line-height: 1.6; font-family: "Poppins", sans-serif; margin: 0; } .future-section { padding: 60px 40px; max-width: 1200px; margin: 80px auto 100px; position: relative; } .future-container { display: flex; align-items: center; gap: 40px; position: relative; z-index: 2; } .future-mascot-col { flex: 0 0 auto; width: 240px; display: flex; justify-content: center; align-items: center; } .future-mascot-img { width: 600px; height: 500px; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1)); animation: mascot-float 6s ease-in-out infinite; transform: scaleX(-1); transform-origin: center; will-change: transform; margin-left: -200px; } .future-content-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; } .future-header-container { margin-bottom: 10px; text-align: center; } .future-header-container h1 { font-size: clamp(28px, 3.2vw, 42px); background: linear-gradient(to bottom, #4363a6 0, #1c3466 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 8px; letter-spacing: -0.5px; line-height: 1.2; } .future-header-container p { font-family: "Poppins", sans-serif; font-size: clamp(14px, 1.5vw, 17px); font-weight: 600; color: #1c3466; opacity: 0.85; margin: 0; line-height: 1.4; } .future-cards-stack { display: flex; flex-direction: column; gap: 25px; height: 450px; overflow-y: scroll; scrollbar-width: none; } .future-card, .future-card-header { display: flex; width: 100%; box-sizing: border-box; } .future-card { position: relative; height: 288px; background: rgba(224, 242, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 24.74px 100px 24px 220px; box-shadow: 0 10px 30px rgba(31, 38, 135, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, background 0.4s ease; } .future-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(28, 52, 102, 0.1); background: rgba(224, 242, 255, 0.85); } .future-card-header { align-items: center; margin-bottom: 10px; padding: 0; position: static; } .future-card-cloud-icon { position: absolute; left: 16px; width: 121px; height: 121px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)); animation: mini-cloud-float 4s ease-in-out infinite; will-change: transform; } .future-card-title { font-family: "Poppins", sans-serif; font-size: clamp(32px, 2vw, 34px); font-weight: 500; line-height: 1.25; background: linear-gradient(to bottom, #4363a6 0, #1c3466 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; width: 100%; margin: 0; text-align: right; letter-spacing: -0.3px; white-space: nowrap; } .future-card-body { display: flex; align-items: flex-start; width: 100%; padding: 0; box-sizing: border-box; position: static; } .future-card-desc { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; color: #1e376c; line-height: 1.7; margin: 0; text-align: right; } .future-card-highlight { color: #1c3466; font-weight: 600; } .future-card-accent-bar { position: absolute; right: 48px; top: 65%; transform: translateY(-50%); width: 10px; height: 55%; background: linear-gradient(to bottom, #f2af00 0, #ff6f08 100%); border-radius: 6px; flex-shrink: 0; } @media (max-width: 1200px) { .future-section { padding: 40px 30px; } .future-mascot-col, .future-mascot-img { width: 220px; } } @media (max-width: 900px) { .future-section { padding: 40px 20px; margin: 40px auto; } .future-container { flex-direction: column; align-items: center; gap: 30px; } .future-mascot-col { width: 100%; justify-content: center; } .future-mascot-img { width: 200px; } .future-card { width: 100%; height: auto; min-height: 200px; padding: 32px 40px; align-items: flex-start; border-radius: 24px; position: relative; } .future-card-cloud-icon { position: absolute; height: 120px; width: 100px; right: 0; left: auto !important; top: auto !important; } .future-card-title { white-space: normal; text-align: left; } .future-card-desc { text-align: left; } .future-card-accent-bar { position: absolute; top: auto; right: auto; left: auto; width: 7px; height: 50% !important; border-radius: 10px; margin: 90px 0 0; display: block; background: linear-gradient(to bottom, #f2af00 0, #ff6f08 100%); } } @media (max-width: 768px) { .vision-mission-container { margin: 0 auto; } .vision-mission-container p { font-size: 15px; } .mission-card-header h1, .vision-card-header h1 { font-size: 25px; } .mission-icon, .vision-icon { width: 30px; height: 30px; } .mission-card, .vision-card { width: 400px; height: 300px; } .desktop-desc { display: none; } .mobile-desc { display: block; text-align: center; } .goal-header h1 { font-size: 40px; } .goal-header p { font-size: 11px; } .future-header-container h1 { text-align: left; font-size: 26px; } .future-header-container p { text-align: left; font-size: 13px; } } .mobile-only { display: none !important; } @media (max-width: 768px) { .mobile-only { display: block !important; } .desktop-only, .desktop-only-flex { display: none !important; } .about-hero, .about-hero .hero-container { height: auto !important; overflow: visible !important; border-radius: 0 !important; } .about-hero { padding: 0 !important; margin: -50px auto 0 !important; max-width: 100% !important; } .about-hero .hero-container { position: relative !important; display: flex !important; flex-direction: column !important; } .about-hero-slideshow { position: relative !important; display: block !important; width: 100% !important; height: 480px !important; overflow: hidden !important; } .about-hero-slideshow .slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 0 !important; transition: opacity 1.5s ease-in-out !important; } .about-hero-slideshow .slide.active { opacity: 1 !important; } .hero-arc-overlay { display: none !important; } .about-hero-slideshow::after { content: ""; position: absolute; bottom: -2px; left: -5%; width: 110%; height: 80px; background: #fff; border-radius: 50% 50%0 0/100% 100%0 0; z-index: 4; } .hero-logo-badge, .hero-logo-badge img { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: 0 0 !important; } .hero-logo-badge { position: absolute !important; display: flex !important; top: 345px !important; left: 50% !important; transform: translateX(-50%) !important; width: 110px !important; height: 110px !important; z-index: 10 !important; padding: 0 !important; } .hero-logo-badge img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .hero-mobile-content { display: block !important; padding: 0 24px !important; text-align: center !important; background: linear-gradient( 180deg, #fff 0, #fff8e1 25%, #ffdf6b 55%, #fbb515 80%, #fe9206 100% ) !important; color: #1c3466 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; box-shadow: 0 8px 24px rgba(254, 146, 6, 0.15) !important; position: relative !important; overflow: visible !important; z-index: 5 !important; } .hero-mobile-content h3 { font-family: "Poppins", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; color: #1c3466 !important; margin: -18px 0 8px !important; } .hero-mobile-content .hero-title-gradient { font-family: "Montserrat", sans-serif !important; font-size: 42px !important; font-weight: 900 !important; line-height: 1.05 !important; background: linear-gradient(180deg, #ff6f09 0, #ffb700 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; margin: 0 0 16px !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; } .hero-mobile-content p { font-size: 14px !important; font-weight: 500 !important; color: #333 !important; line-height: 1.6 !important; margin: 0 auto 24px !important; width: 85% !important; max-width: 290px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .hero-mobile-content .btn-learn-more { display: inline-block !important; padding: 4px 32px !important; width: 340px !important; max-width: 90% !important; border: 4px solid #f2af00 !important; border-radius: 8px !important; background: 0 0 !important; color: #fff !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; margin-bottom: 0 !important; transition: all 0.3s ease !important; } .mobile-pda-img { display: none !important; } .hero-mobile-content .btn-learn-more, .hero-mobile-content p, .mobile-pda-text { font-family: "Poppins", sans-serif !important; } .mobile-pda-text { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 26px !important; font-weight: 800 !important; text-align: center !important; white-space: nowrap !important; background: linear-gradient(180deg, #4363a6 0, #1c3466 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; padding: 32px 0 40px !important; letter-spacing: 0 !important; } .PDA-container, .goal-card::after { display: none !important; } .vision-mission-container { margin: -45px auto 30px !important; max-width: 92% !important; display: flex !important; flex-direction: row !important; gap: 0 !important; position: relative !important; min-height: 220px !important; align-items: flex-start !important; justify-content: center !important; z-index: 5 !important; } .mission-card, .vision-card { width: 58% !important; height: auto !important; min-height: 220px !important; padding: 12px 16px 18px !important; border-radius: 20px !important; position: absolute !important; cursor: pointer !important; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; margin-top: 0 !important; } .mission-card-header, .vision-card-header { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin-top: 0 !important; margin-bottom: 10px !important; } .mission-card-header h1, .vision-card-header h1 { font-size: 28px !important; font-weight: 800 !important; text-transform: uppercase !important; margin: 0 !important; text-align: left !important; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.25) !important; } .mission-icon, .vision-icon { width: 38px !important; height: 38px !important; } .vision-mission-container .mobile-only { display: block !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important; margin-top: 20px !important; } .vision-card.active { transform: translateX(0) translateY(20px) scale(1) !important; opacity: 1 !important; z-index: 3 !important; } .mission-card.inactive { transform: translateX(75px) translateY(75px) scale(0.9) !important; opacity: 0.55 !important; z-index: 2 !important; } .mission-card.active { transform: translateX(0) translateY(20px) scale(1) !important; opacity: 1 !important; z-index: 3 !important; } .vision-card.inactive { transform: translateX(-75px) translateY(75px) scale(0.9) !important; opacity: 0.55 !important; z-index: 2 !important; } .goal-header h1 { margin-top: 160px !important; font-size: 45px !important; background: linear-gradient(to bottom, #4363a6 0, #1c3466 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .goal-header p { font-size: 11px !important; padding: 20px 16px 0 !important; margin-bottom: 10px !important; line-height: 20px; } .aws-club-goals, .goal-card { box-sizing: border-box !important; } .aws-club-goals { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; column-gap: 13px !important; row-gap: 14px !important; padding: 24px 16px !important; max-width: 100% !important; margin: 0 auto !important; justify-items: center !important; } .goal-card { flex-direction: column !important; justify-content: flex-start !important; background: 0 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) !important; padding: 14px !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; width: 100% !important; max-width: 192px !important; height: 306px !important; } .goal-card::after { content: none !important; } .goal-card, .goal-card-icon-container, .inner-goal-card { display: flex !important; align-items: center !important; } .inner-goal-card { flex-direction: column !important; justify-content: flex-start !important; background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(16px) saturate(150%) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0-1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 rgba(255, 255, 255, 0.1) !important; width: 100% !important; height: 100% !important; padding: 16px 8px !important; box-sizing: border-box !important; } .goal-card-icon-container { justify-content: center !important; background: #1c3466 !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; margin-top: 0 !important; margin-bottom: 12px !important; flex-shrink: 0 !important; box-shadow: 0 4px 14px rgba(28, 52, 102, 0.2) !important; } .goal-card-icon { width: 34px !important; height: 34px !important; object-fit: contain !important; filter: brightness(0) saturate(100%) invert(84%) sepia(34%) saturate(6144%) hue-rotate(359deg) brightness(102%) contrast(105%) !important; } .card-info, .goal-card-btn, .header-card { color: #1c3466 !important; font-family: "Poppins", sans-serif !important; } .header-card { font-size: 11.5px !important; font-weight: 800 !important; text-align: center !important; text-transform: uppercase !important; margin: 0 0 10px !important; line-height: 1.35 !important; letter-spacing: 0.2px !important; } .card-info, .goal-card-btn { box-sizing: border-box !important; } .card-info { font-size: 9.5px !important; font-weight: 500 !important; text-align: center !important; line-height: 1.45 !important; padding: 0 !important; margin: 0 0 16px !important; max-height: none !important; opacity: 1 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 6 !important; -webkit-box-orient: vertical !important; flex-grow: 1 !important; } .goal-card-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; background: 0 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 4px !important; padding: 4px 14px !important; font-size: 10px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; margin-top: auto !important; width: auto !important; } .goal-card-btn:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.7) !important; transform: scale(1.03) !important; } .goal-card-btn:active { transform: scale(0.97) !important; background: rgba(255, 255, 255, 0.08) !important; } .skill-builder-container { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; padding: 20px !important; margin-bottom: 30px !important; } .skill-builder-container h1 { position: relative !important; top: auto !important; left: auto !important; margin-top: 0 !important; margin-bottom: 18px !important; font-size: 26px !important; line-height: 1.2 !important; text-align: center !important; width: 100% !important; } .skill-builder-mobile-drawer { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 15px !important; align-items: stretch !important; min-height: 400px !important; } .master-list-card, .master-list-container { display: flex !important; flex-direction: column !important; } .master-list-container { width: calc(50% - 12.5px) !important; background: 0 0 !important; border-radius: 12px !important; padding: 10px 0 !important; gap: 0 !important; } .master-list-card { position: relative !important; background: #6079a3 !important; border: 8px solid #23395d !important; color: #fff !important; font-family: "Poppins", sans-serif !important; padding: 10px !important; border-radius: 16px !important; text-align: center !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important; box-shadow: 0-4px 12px rgba(0, 0, 0, 0.15) !important; height: 160px !important; overflow: hidden !important; align-items: center !important; } .master-list-title { font-size: clamp(18px, 5vw, 26px) !important; font-weight: 700 !important; display: block !important; margin-bottom: 10px !important; line-height: 1.1 !important; word-break: normal !important; -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: break-word !important; } .master-list-desc { font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; color: rgba(255, 255, 255, 0.9) !important; margin: 0 !important; text-align: left !important; } .master-list-card:nth-child(1) { z-index: 1 !important; margin-top: 0 !important; } .master-list-card:nth-child(2) { z-index: 2 !important; margin-top: -100px !important; } .master-list-card:nth-child(3) { z-index: 3 !important; margin-top: -100px !important; } .master-list-card:nth-child(4) { z-index: 4 !important; margin-top: -100px !important; } .master-list-card:nth-child(5) { z-index: 5 !important; margin-top: -100px !important; } .master-list-card:nth-child(6) { z-index: 6 !important; margin-top: -100px !important; } .master-list-card:nth-child(7) { z-index: 7 !important; margin-top: -130px !important; } .master-list-card:nth-child(8) { z-index: 8 !important; margin-top: -130px !important; } .master-list-card.active { background: #edf4ff !important; border-color: #d9d9d9 !important; color: #1c3466 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; transform: scale(1.04) translateY(-8px) !important; } .master-list-card.active .master-list-title { font-weight: 800 !important; color: #1c3466 !important; } .master-list-card.active .master-list-desc { color: #333 !important; } .detail-panel-container, .detail-slide-card { border-radius: 16px !important; display: flex !important; overflow: hidden !important; } .detail-panel-container { width: calc(50% - 12.5px) !important; position: relative !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; } .detail-slide-card { background: #edf4ff !important; padding: 20px 16px 24px !important; width: 100% !important; min-height: 420px !important; flex-direction: column !important; justify-content: flex-start !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; transform: translateY(0) !important; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important; border: 8px solid #ececec !important; } .detail-slide-card::before, .detail-slide-inner::before { display: none !important; } .detail-slide-card.sliding-up-out { transform: translateY(-120%) !important; opacity: 0 !important; } .detail-slide-card.sliding-down-enter { transform: translateY(120%) !important; opacity: 0 !important; } .no-transition { transition: none !important; } .detail-slide-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 0 !important; margin-bottom: 18px !important; width: 100% !important; } .detail-slide-header h2 { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .detail-slide-card p, .detail-slide-header h2 { font-family: "Poppins", sans-serif !important; margin: 0 !important; } .detail-slide-header h2 { font-size: clamp(13px, 5.2vw, 20px) !important; font-weight: 800 !important; color: #1c3466 !important; background: linear-gradient(to bottom, #4363a6 0, #1c3466 100%); line-height: 1.3 !important; text-align: center !important; flex: 1 !important; word-break: normal !important; -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: break-word !important; } #mobile-office-detail-title.shrink-long-title, .detail-slide-header h2.shrink-long-title { font-size: clamp(13px, 3.8vw, 20px) !important; } .detail-slide-icon { width: 38px !important; height: 38px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .detail-slide-icon, .detail-slide-icon.dept-icon { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; } .detail-slide-icon img { width: 28px !important; height: 28px !important; object-fit: contain !important; } .detail-slide-inner { background: #f5f6f8 !important; border-radius: 8px !important; padding: 20px !important; margin: 0 !important; } .detail-slide-card p { font-size: clamp(12px, 3.5vw, 10px) !important; font-weight: 400 !important; color: #161b3c !important; line-height: 1.65 !important; text-align: right !important; } .offices-container { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; padding: 30px 20px !important; margin-bottom: 30px !important; background: linear-gradient( to bottom, #ffb700 0, #f2af00 30%, #ff6f08 78% ) !important; border-radius: 20px !important; } .offices-container .skill-builder-mobile-drawer { flex-direction: row-reverse !important; gap: 15px !important; } .offices-container h1 { position: relative !important; top: auto !important; left: auto !important; font-size: 32px !important; line-height: 1.2 !important; width: 100% !important; text-align: left !important; margin-top: 0 !important; margin-bottom: 18px !important; background: linear-gradient(to right, #24468f 0, #0a183d 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } #mobile-office-detail-card { width: 303px !important; height: 312px !important; margin-left: 0 !important; margin-right: 10px !important; min-height: auto !important; background: #fff !important; border: 8px solid #f5f6f8 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; padding: 16px 12px 20px !important; } #mobile-office-detail-card .detail-slide-header { flex-direction: row !important; justify-content: flex-start !important; margin-bottom: 8px !important; } #mobile-office-detail-card .detail-slide-icon { display: flex !important; background: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; border: 0 !important; } #mobile-office-detail-title { color: #e86016 !important; text-align: left !important; flex: none !important; font-size: clamp(15px, 4.5vw, 20px) !important; font-weight: 800 !important; margin-bottom: 8px !important; word-break: normal !important; -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: break-word !important; white-space: normal !important; } #mobile-office-detail-desc { color: #e86016 !important; text-align: right !important; font-weight: 500 !important; margin-top: 8px !important; line-height: 1.3 !important; font-size: 11.5px !important; } .offices-container .master-list-container { background: 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } .offices-container .master-list-card { background: #fce198 !important; border: 12px solid #ffb700 !important; border-radius: 24px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; padding: 8px 12px !important; } .offices-container .master-list-card.active { background: #fff !important; border: 6px solid #f5f6f8 !important; padding: 12px !important; border-radius: 20px !important; } .offices-container .master-list-card:nth-child(2), .offices-container .master-list-card:nth-child(3), .offices-container .master-list-card:nth-child(4), .offices-container .master-list-card:nth-child(5), .offices-container .master-list-card:nth-child(6), .offices-container .master-list-card:nth-child(7), .offices-container .master-list-card:nth-child(8) { margin-top: -106px !important; } .offices-container .master-list-title { color: #1c3466 !important; text-align: center !important; width: 100% !important; font-weight: 800 !important; font-size: clamp(20px, 5.5vw, 28px) !important; display: block !important; word-break: keep-all !important; white-space: nowrap !important; } .offices-container .master-list-desc { color: #1c3466 !important; text-align: left !important; background: 0 0 !important; padding: 0 !important; margin-top: 12px !important; line-height: 1.5 !important; font-size: 14px !important; } .future-section { padding: 10px 16px !important; margin: 30px auto 60px !important; } .future-cards-stack { height: auto !important; overflow: visible !important; } .future-card-header { position: relative !important; min-height: 58px !important; grid-column: 1/-1 !important; } .future-mascot-img { width: 180px !important; height: auto !important; margin-left: 0 !important; display: none !important; } .future-card { padding: 20px !important; position: relative !important; display: grid !important; grid-template-columns: 7px 1fr !important; } .future-card-body { grid-column: 2 !important; } .future-card-title { font-size: 24px !important; font-weight: 700 !important; white-space: normal !important; text-align: left !important; padding-right: 105px !important; line-height: 1.2 !important; } .future-card-desc { font-size: 14px !important; margin-left: 20px !important; text-align: left !important; } .future-card-cloud-icon { width: 95px !important; height: 95px !important; right: 5px !important; opacity: 1 !important; pointer-events: none !important; } .future-card-accent-bar { position: relative !important; left: auto !important; right: auto !important; top: 50% !important; bottom: auto !important; margin: 0 !important; grid-column: 1 !important; grid-row: 2 !important; width: 7px !important; height: auto !important; align-self: stretch !important; } } @media (max-width: 450px) { .offices-container .skill-builder-mobile-drawer, .skill-builder-mobile-drawer { gap: 6px !important; } .detail-panel-container, .master-list-container { width: calc(50% - 3px) !important; } #mobile-office-detail-card, .detail-slide-card, .master-list-card { border-width: 8px !important; border-radius: 16px !important; padding: 12px 6px !important; } #mobile-office-detail-card, .detail-slide-card { padding: 16px 8px 20px !important; } #mobile-office-detail-title, .detail-slide-header h2, .master-list-title, .offices-container .master-list-title { word-break: normal !important; -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: break-word !important; font-size: clamp(13px, 4.2vw, 18px) !important; } #mobile-office-detail-title, .detail-slide-header h2, .offices-container .master-list-title { font-size: clamp(15px, 4.8vw, 20px) !important; } #mobile-office-detail-title, .detail-slide-header h2 { font-size: clamp(12px, 3.8vw, 18px) !important; } #mobile-office-detail-title.shrink-long-title, .detail-slide-header h2.shrink-long-title { font-size: clamp(10.5px, 3.3vw, 13px) !important; line-height: 1.2 !important; } }