@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-BlackItalic.woff2') format('woff2'), url('../fonts/Montserrat-BlackItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Black.woff2') format('woff2'), url('../fonts/Montserrat-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraLight.woff2') format('woff2'), url('../fonts/Montserrat-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Italic.woff2') format('woff2'), url('../fonts/Montserrat-Italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'), url('../fonts/Montserrat-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'), url('../fonts/Montserrat-ExtraLightItalic.woff') format('woff'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'), url('../fonts/Montserrat-ExtraBold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'), url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Medium.woff2') format('woff2'), url('../fonts/Montserrat-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'), url('../fonts/Montserrat-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'), url('../fonts/Montserrat-MediumItalic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-LightItalic.woff2') format('woff2'), url('../fonts/Montserrat-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Light.woff2') format('woff2'), url('../fonts/Montserrat-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ThinItalic.woff2') format('woff2'), url('../fonts/Montserrat-ThinItalic.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Thin.woff2') format('woff2'), url('../fonts/Montserrat-Thin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }  :root { --container-width: 90%; --max-width: 1600px; --primary-color: #00A2B0; --secondary-color: #3BC1CC; --tertiary-color: #000000; --quaternary-color: #F4F4F4; --quinary-color: #3BC1CC; --font-family: 'Montserrat'; --spacing-small: 8px; --spacing-medium: 16px; --spacing-large: 32px; --border-radius: 4px; --z-index-modal: 1000; --z-index-header: 999; --transition-speed: 0.3s; --transition-ease: ease-in-out; } .debug { outline: 1px solid red !important; }  * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-family), sans-serif; transition: all var(--transition-speed) var(--transition-ease); } ::selection { background-color: var(--primary-color); color: white; } html, body { font-size: 16px; } @media (min-width: 1440px) { html, body { font-size: 17px !important; } } @media (max-width: 934px) { html, body { font-size: 15px !important; } } body { width: 100%; min-height: 100vh; --webkit-font-smoothing: antialiased; --moz-osx-font-smoothing: grayscale; position: relative; }  h1, h2, h3, h4, h5, h6 { font-weight: inherit; letter-spacing: 0.5px; } p, ul, a { letter-spacing: 0.3px; } h1 { font-size: 2.986rem; line-height: 1.15; margin-bottom: 1rem; font-weight: bold; } @media (max-width: 600px) { h1 { font-size: 2.488rem !important; } h2 { font-size: 2.368rem !important; } } h2 { font-size: 2.488rem; line-height: 1.15; margin-bottom: 1rem; font-weight: bold; } h3 { font-size: 2.074rem; line-height: 1.15; margin-bottom: 1rem; } h4 { font-size: 1.728rem; line-height: 1.15; margin-bottom: 1rem; } h5 { font-size: 1.44rem; line-height: 1.15; } h6 { font-size: 1.2rem; line-height: 1.15; margin-bottom: 1rem; } p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; } ul { font-size: 1rem; line-height: 1.6; margin-top: 14px; margin-bottom: 14px; list-style-position: inside; }  input, textarea, select, button { font-family: inherit; font-size: 1rem; color: inherit; border: 1px solid #ccc; border-radius: var(--border-radius); padding: var(--spacing-small); font-weight: 400; } input:focus { border-color: var(--teritary-color); } button { background-color: var(--primary-color); color: white; border: none; transition: background-color var(--transition-speed); } button:hover { background-color: var(--secondary-color); } a, button { cursor: pointer; display: inline-block; text-decoration: none; font-size: 1rem; } select, input { font-size: 1rem; } a:focus, button:focus, input:focus { outline: none; outline-offset: 0px; }  img, video { max-width: 100%; height: auto; display: block; }  label { position:relative; display:block; } @media (max-width: 600px) { .btn { width: 100%; } } .hero-home { height: 757px; overflow: hidden; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; background-image: url('https://bcdb.nl/wp-content/uploads/2025/09/gebouw-buitenkant-scaled-1.webp'); background-size: cover; background-position: bottom; border-radius: 16px; } .hero-home .content { padding-left: 2rem; padding-bottom: 2rem; display: flex; flex-flow: column; justify-content: end; grid-area: 2 / 1 / 3 / 3; } .hero-home .content h1 { max-width: 480px; color: white; } .hero-home .points { background-color: #fff; padding-left: 1rem; border-radius: 13px 0 0; display: grid; gap: 1rem; grid-area: 2 / 4 / 3 / 5; justify-content: center; grid-template-rows: 1fr 1fr; position: relative; padding-top: 1rem; } .hero-home .points .svg-rounded { position: absolute; right: 0; bottom: -2%; width: 105.5%; height: auto; z-index: -1; } @media (max-width: 1770px) { .hero-home .points .svg-rounded { position: absolute; right: -1%; bottom: -2%; width: 106.5%; height: auto; z-index: -1; } } @media (max-width: 1650px) { .hero-home .points .svg-rounded { position: absolute; right: -1%; bottom: -2%; width: 106.5%; height: auto; z-index: -1; } } .hero-home .points > div, .hero-home .points > a { background-color: var(--quaternary-color); padding: 1rem; border-radius: 13px; width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: start; justify-content: center; flex-flow: column; } .hero-home .points .pulse-point { content: ''; width: 17px; height: 17px; display: inline-block; border-radius: 50%; background-color: var(--primary-color); animation: pulse-point 2s ease-out forwards infinite; } @keyframes pulse-point { 0% { box-shadow: 0 0 0 0px rgba(0, 162, 176, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(0, 162, 176, 0); } 100% { box-shadow: 0 0 0 0px rgba(0, 162, 176, 0); } } .hero-home .points > div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .hero-home .hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; border-radius: 26px; grid-area: 1 / 1 / 3 / 5; } .hero-home:after { display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; border-radius: 26px; background: #000000; background: -webkit-linear-gradient(20deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%); background: -moz-linear-gradient(20deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%); background: linear-gradient(20deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0); } .hero-home > div { z-index: 1; } @media (max-width: 900px) { .hero-home { grid-template-columns: 1fr !important; grid-template-rows: 2fr !important; height: auto !important; } .hero-home .content, .hero-home .points { grid-area: unset !important; padding: 0; } .hero-home .points .svg-rounded { display: none !important; } .hero-home .content { padding: 2.68rem 1rem !important; position: relative; } .hero-home .content > h1, .hero-home .content > div { z-index: 1; } .hero-home .content::after { display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; border-radius: 8px; background: #000000; background: -webkit-linear-gradient(10deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background: -moz-linear-gradient(10deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(10deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0); } .hero-home::after { display: none !important; } }  .cards { background-color: var(--quaternary-color); } .cards > div > div:not(.bg-primary-clr) { background-color: #fff; } .cards .bg-primary-clr { color: white; } .cards .bg-primary-clr svg path { fill: white; }   .keypoints ul { list-style: none; display: flex; flex-flow: column; gap: .68rem; } .keypoints ul li { display: flex; align-items: center; gap: .3rem; } .keypoints ul li::before { width: 1.34rem; height: 1.34rem; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 37.39 37.39'%3E%3Cpath fill='%2304a1b0' d='m16.078 27.294 13.18-13.18L26.64 11.5 16.078 22.06l-5.328-5.328-2.617 2.617Zm2.617 10.1a18.2 18.2 0 0 1-7.291-1.472 18.88 18.88 0 0 1-5.936-4 18.878 18.878 0 0 1-4-5.936A18.2 18.2 0 0 1 0 18.695a18.2 18.2 0 0 1 1.472-7.291 18.878 18.878 0 0 1 4-5.936 18.879 18.879 0 0 1 5.936-4A18.2 18.2 0 0 1 18.695 0a18.2 18.2 0 0 1 7.291 1.472 18.879 18.879 0 0 1 5.936 4 18.879 18.879 0 0 1 4 5.936 18.2 18.2 0 0 1 1.472 7.291 18.2 18.2 0 0 1-1.472 7.291 18.879 18.879 0 0 1-4 5.936 18.881 18.881 0 0 1-5.936 4 18.2 18.2 0 0 1-7.291 1.464Zm0-3.739A14.434 14.434 0 0 0 29.3 29.3a14.434 14.434 0 0 0 4.347-10.609A14.434 14.434 0 0 0 29.3 8.082a14.434 14.434 0 0 0-10.609-4.346A14.434 14.434 0 0 0 8.082 8.082a14.434 14.434 0 0 0-4.347 10.609A14.434 14.434 0 0 0 8.086 29.3a14.434 14.434 0 0 0 10.609 4.351Zm0-14.96Z' data-name='Path 2'/%3E%3C/svg%3E"); display: block; }  .inset-1 { grid-area: 1/4; position: relative; } .inset-1::after { position: absolute; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.999' height='23' viewBox='0 0 23.999 23'%3E%3Cpath fill='%23fff' d='M0 23.001v-.731h1.66S23.953 22.131 23.999 0v23Z' data-name='Intersection 1'/%3E%3C/svg%3E"); right: 0; bottom: -5px; } .inset-2 { grid-area: 2/3; position: relative; } .inset-2::after { position: absolute; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.999' height='23' viewBox='0 0 23.999 23'%3E%3Cpath fill='%23fff' d='M0 23.001v-.731h1.66S23.953 22.131 23.999 0v23Z' data-name='Intersection 1'/%3E%3C/svg%3E"); right: 0; bottom: -5px; } @media (max-width: 900px) { .hero-home .inset-2, .hero-home .inset-1 { display: none; } .hero-home { border-radius: 0 !important; background: none !important; } .hero-home .points { border-radius: 0px !important; display: flex !important; padding: 0 !important; padding-top: 1rem !important; min-height: 321px; flex-flow: column; } .hero-home .content { background-image: url('https://bcdb.nl/wp-content/uploads/2025/09/gebouw-buitenkant-scaled-1.webp'); background-size: cover; } .hero-home .points > div, .hero-home .content { border-radius: 8px !important; } } .slider-content-area { position: relative; height: 40vh; display: flex; align-items: center; justify-content: space-between; gap: 3rem; border-radius: 24px; overflow: hidden; } .slider-content-area .slider-content { display: flex; align-items: start; flex-flow: column; height: 100%; } .slider-tool-wrapper { height: 90%; position: absolute; right: 1rem; top: 5%; z-index: 4; } .slider-tool { display: flex; align-items: center; justify-content: space-between; flex-flow: column; height: 100%; background: #ffffff; background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.49) 0%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.49) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.49) 0%, rgba(255, 255, 255, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0); padding: 1.1rem; border-radius: 3rem; } .slider-tool button { background: none !important; padding: 0 !important; } .slider-tool svg { height: 2rem; width: auto; } .review { color: #fff; font-size: 1.68rem; font-weight: 500; max-width: 1049px; } .name-wrapper { position: absolute; left: 0; bottom: 0; padding: 1.44rem; background-color: #fff; border-radius: 0 24px 0 0; width: 25%; text-align: center; } .slider-content-area img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .mySwiper.swiper { height: 100%; width: 100%; } .mySwiper .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.34rem; }  .pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-vertical { display: flex; align-items: center; gap: 6px; justify-content: center; position: relative; transform: none !important; } .swiper-pagination-bullet { width: 25px !important; height: 6px !important; border-radius: 3rem !important; } .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 30px !important; background: #000000; } @media (max-width: 900px) { .review { font-size: 1rem; } .name-wrapper { width: auto !important; max-width: 87% !important; padding: 1rem !important; } .name-wrapper p { font-size: .8rem !important; } .slider-content-area .swiper-slide { padding: 1.24rem !important; } .slider-content-area img { object-position: top right; z-index: -3; } .slider-content-area .swiper-slide::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); left: 0; top: 0; z-index: -2; }  .slider-tool-wrapper { display: none; } } header.absolute { position: absolute; left: 0; top: 0; width: 100%; } header nav ul { list-style: none; display: flex; align-items: center; gap: 1rem; } header nav ul a { color: var(--teritary-color); } header nav ul li.current-menu-item a { font-weight: 600; } header a img, footer a img { max-width: 174px; } .hamburger-wrapper { display: none; } .phone-btn { display: none !important; } @media (max-width: 900px) { nav { position: fixed; display: flex; justify-content: center; align-items: center; left: 0; top: -100%; width: 100%; height: 100%; background-color: #fff; transition: .4s cubic-bezier(.79,.14,.15,.86); z-index: 4; } nav.open { top: 0; } nav ul { display: flex; flex-flow: column; width: 90%; } nav ul li a { font-size: 1.34rem; } .phone-btn { display: inline-flex !important; width: 90%; position: absolute !important; left: 5%; bottom: 3%; } .hamburger-wrapper { display: flex !important; justify-content: center; align-items: center; } #toggle { display: none; } .hamburger, .header-logo { z-index: 5; } header nav ul li.current-menu-item a { color: var(--primary-color); }  .hamburger { cursor: pointer; height: 45px; scale: .85; } .hamburger div { position: relative; width: 3em; height: 7px; border-radius: 1px; background-color: var(--primary-color); margin-top: 8px; transition: all 0.3s ease-in-out; } #toggle:checked + .hamburger .top-bun { transform: rotate(-45deg); margin-top: 25px; } #toggle:checked + .hamburger .bottom-bun { opacity: 0; transform: rotate(45deg); } #toggle:checked + .hamburger .meat { transform: rotate(45deg); margin-top: -7px; } #toggle:checked + .hamburger + .nav { top: 0; transform: scale(1); } nav li, nav .phone-btn { opacity: 0; transform: translateY(-20px); } nav li.animate-in, nav .phone-btn.animate-in { animation: slideFadeIn 0.4s forwards; } @keyframes slideFadeIn { to { opacity: 1; transform: translateY(0); } } }  .btn.outlined { background: transparent; border: 2px solid #fff; font-weight: 600; } .btn.outlined:hover { background: #fff !important; color: var(--primary-color); } footer { background-color: #f4f4f4; position: relative; display: flex; flex-flow: column; align-items: center; padding-top: 14rem; margin-top: 16rem; } footer ul { list-style: none; margin: 0; } footer ul li { margin: 10px 0; } footer ul a { color: var(--tertiary-color); } .cta-wrapper { position: absolute; top: -205px; } .cta-container { background-color: var(--primary-color); border-radius: 24px; padding: 2rem 4rem; min-height: 410px; align-items: center; position: relative; color: #fff; } .cta-container img { position: absolute; bottom: 0; right: 0; width: 50%; height: 130%; object-fit: contain; } @media (max-width: 900px) { footer .cta-container { padding: 1.68rem !important; } .cta-container img { display: none; } } .short-hero { background-color: #F4F4F4; min-height: 34vh; display: flex; align-items: center; } .slider-faciliteiten { overflow: hidden; } .slider-faciliteiten .swiper { overflow: visible !important; } .slider-faciliteiten .swiper-element { width: 100%; } .slider-faciliteiten .swiper-element img { aspect-ratio: 2/1; height: 294px; object-fit: cover; } .button-prev, .button-next { width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .button-prev svg, .button-next svg { width: 10px; height: auto; } .button-next:not(:disabled) svg path, .button-prev:not(:disabled) svg path { fill: #fff; } .button-prev:disabled, .button-next:disabled { background: #F4F4F4; } @media(max-width: 600px) { .slider-faciliteiten .swiper-element img { height: 234px !important; } } @media(max-width: 600px) { .impression > div:first-child { order: 2; } } .contact-form { grid-template-columns: 30% 1fr; gap: 4rem; background-color: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.09); margin-top: -84px !important; } .contact-info { background-color: var(--primary-color); display: flex; flex-flow: column; justify-content: center; padding: 3.44rem 3rem; } .contact-info ul { list-style: none; margin: 0; display: flex; flex-flow: column; gap: 1rem; } .contact-info h3 { color: #fff; } .contact-info li a { display: flex; align-items: center; gap: .68rem; color: #fff; } .contact-info li a svg { width: 1.34rem; height: auto; } .contact-form form { display: grid; gap: 1rem; width: 90%; max-width: 744px; } .contact-form form input { padding: .8rem 0; border: 0px; border-bottom: 1px solid #ccc; border-radius: 0px; } .contact-form form input:focus, .contact-form form textarea:focus { border-color: #4a4a4a } .contact-form form textarea { padding: .8rem 0; border: 0px; border-bottom: 1px solid #ccc; border-radius: 0px; outline: none; resize: none; height: auto; } .contact-form form textarea::placeholder { opacity: .65; } .contact-form form textarea:focus::placeholder { opacity: 1; } @media (max-width: 900px) { .contact-info { padding: 2.44rem 1rem !important; } .contact-form { padding: 0; padding-bottom: 1rem; } } .container { width: var(--container-width); max-width: var(--max-width); margin: 0 auto; } .container-expanded { width: calc(var(--container-width) + 4%); max-width: calc(var(--max-width) + 44px); margin: 0 auto; }  .primary-clr { color: var(--primary-color); } .secondary-clr { color:var(--secondary-color); } .tertiary-clr { color:var(--tertiary-color); } .quaternary-clr { color:var(--quaternary-color); } .quinary-clr { color:var(--quinary-color); }  .bg-primary-clr { background-color: var(--primary-color) } .bg-secondary-clr { background-color: var(--secondary-color) } .bg-tertiary-clr { background-color: var(--tertiary-color) } .bg-quaternary-clr { background-color: var(--quaternary-color) } .bg-quinary-clr { background-color: var(--quinary-color) }  .object-cover { object-fit: cover } .object-contain { object-fit: contain }  .br-full { border-radius: 100% } .br-null { border-radius: 0 } .br-n5 { border-radius: 0.090rem; } .br-n4 { border-radius: 0.146rem; } .br-n3 { border-radius: 0.236rem; } .br-n2 { border-radius: 0.382rem; } .br-n1 { border-radius: 0.618rem; } .br { border-radius: 1rem; } .br-1 { border-radius: 1.618rem; } .br-2 { border-radius: 2.618rem; } .br-3 { border-radius: 4.236rem; } .br-4 { border-radius: 6.854rem; } .br-5 { border-radius: 11.09rem; } .br-6 { border-radius: 17.944rem; } .br-7 { border-radius: 29.034rem; } .br-8 { border-radius: 46.978rem; } .br-9 { border-radius: 76.012rem; } .br-10 { border-radius: 122.99rem; }  .grid { display: grid } .grid.col-1 { grid-template-columns: 1fr } .grid.col-2 { grid-template-columns: 1fr 1fr } .grid.col-3 { grid-template-columns: 1fr 1fr 1fr } .grid.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr } .grid.row-1 { grid-template-rows: 1fr } .grid.row-2 { grid-template-rows: 1fr 1fr } .grid.row-3 { grid-template-rows: 1fr 1fr 1fr } .grid.row-4 { grid-template-rows: 1fr 1fr 1fr 1fr }  .flex { display: flex } .flex-wrap { flex-wrap: wrap } .flex-column { flex-flow: column }  .items-ytop { align-items: start } .items-ycenter { align-items: center } .items-ybottom { align-items: end } .items-xstart { justify-content: start } .items-xcenter { justify-content: center } .items-xevenly { justify-content: space-evenly } .items-xbetween { justify-content: space-between } .items-xend { justify-content: end }  .gap-n5 { gap: 0.090rem } .gap-n4 { gap: 0.146rem } .gap-n3 { gap: 0.236rem } .gap-n2 { gap: 0.382rem } .gap-n1 { gap: 0.618rem } .gap { gap: 1rem } .gap-1 { gap: 1.618rem } .gap-2 { gap: 2.618rem } .gap-3 { gap: 4.236rem } .gap-4 { gap: 6.854rem } .gap-5 { gap: 11.09rem } .gap-5 { gap: 17.944rem } .gap-6 { gap: 29.034rem } .gap-7 { gap: 46.978rem } .gap-8 { gap: 76.012rem } .gap-9 { gap: 122.99rem }  .mx-auto { margin-left: auto; margin-right: auto } .my-auto { margin-top: auto; margin-bottom: auto } .m-null { margin: 0 } .p-null { padding: 0 }  .pd-n5 { padding: 0.090rem; } .pd-n4 { padding: 0.146rem; } .pd-n3 { padding: 0.236rem; } .pd-n2 { padding: 0.382rem; } .pd-n1 { padding: 0.618rem; } .pd { padding: 1rem; } .pd-1 { padding: 1.618rem; } .pd-2 { padding: 2.618rem; } .pd-3 { padding: 4.236rem; } .pd-4 { padding: 6.854rem; } .pd-5 { padding: 11.09rem; } .pd-6 { padding: 17.944rem; } .pd-7 { padding: 29.034rem; } .pd-8 { padding: 46.978rem; } .pd-9 { padding: 76.012rem; } .pd-10 { padding: 122.99rem; }  .pt-n5 { padding-top: 0.090rem; } .pt-n4 { padding-top: 0.146rem; } .pt-n3 { padding-top: 0.236rem; } .pt-n2 { padding-top: 0.382rem; } .pt-n1 { padding-top: 0.618rem; } .pt { padding-top: 1rem; } .pt-1 { padding-top: 1.618rem; } .pt-2 { padding-top: 2.618rem; } .pt-3 { padding-top: 4.236rem; } .pt-4 { padding-top: 6.854rem; } .pt-5 { padding-top: 11.09rem; } .pt-6 { padding-top: 17.944rem; } .pt-7 { padding-top: 29.034rem; } .pt-8 { padding-top: 46.978rem; } .pt-9 { padding-top: 76.012rem; } .pt-10 { padding-top: 122.99rem; }  .pb-n5 { padding-bottom: 0.090rem; } .pb-n4 { padding-bottom: 0.146rem; } .pb-n3 { padding-bottom: 0.236rem; } .pb-n2 { padding-bottom: 0.382rem; } .pb-n1 { padding-bottom: 0.618rem; } .pb { padding-bottom: 1rem; } .pb-1 { padding-bottom: 1.618rem; } .pb-2 { padding-bottom: 2.618rem; } .pb-3 { padding-bottom: 4.236rem; } .pb-4 { padding-bottom: 6.854rem; } .pb-5 { padding-bottom: 11.09rem; } .pb-6 { padding-bottom: 17.944rem; } .pb-7 { padding-bottom: 29.034rem; } .pb-8 { padding-bottom: 46.978rem; } .pb-9 { padding-bottom: 76.012rem; } .pb-10 { padding-bottom: 122.99rem; }  .pl-n5 { padding-left: 0.090rem; } .pl-n4 { padding-left: 0.146rem; } .pl-n3 { padding-left: 0.236rem; } .pl-n2 { padding-left: 0.382rem; } .pl-n1 { padding-left: 0.618rem; } .pl { padding-left: 1rem; } .pl-1 { padding-left: 1.618rem; } .pl-2 { padding-left: 2.618rem; } .pl-3 { padding-left: 4.236rem; } .pl-4 { padding-left: 6.854rem; } .pl-5 { padding-left: 11.09rem; } .pl-6 { padding-left: 17.944rem; } .pl-7 { padding-left: 29.034rem; } .pl-8 { padding-left: 46.978rem; } .pl-9 { padding-left: 76.012rem; } .pl-10 { padding-left: 122.99rem; }  .pr-n5 { padding-right: 0.090rem; } .pr-n4 { padding-right: 0.146rem; } .pr-n3 { padding-right: 0.236rem; } .pr-n2 { padding-right: 0.382rem; } .pr-n1 { padding-right: 0.618rem; } .pr { padding-right: 1rem; } .pr-1 { padding-right: 1.618rem; } .pr-2 { padding-right: 2.618rem; } .pr-3 { padding-right: 4.236rem; } .pr-4 { padding-right: 6.854rem; } .pr-5 { padding-right: 11.09rem; } .pr-6 { padding-right: 17.944rem; } .pr-7 { padding-right: 29.034rem; } .pr-8 { padding-right: 46.978rem; } .pr-9 { padding-right: 76.012rem; } .pr-10 { padding-right: 122.99rem; }  .mn-n5 { margin-right: 0.090rem; } .mn-n4 { margin-right: 0.146rem; } .mn-n3 { margin-right: 0.236rem; } .mn-n2 { margin-right: 0.382rem; } .mn-n1 { margin-right: 0.618rem; } .mn { margin-right: 1rem; } .mn-1 { margin-right: 1.618rem; } .mn-2 { margin-right: 2.618rem; } .mn-3 { margin-right: 4.236rem; } .mn-4 { margin-right: 6.854rem; } .mn-5 { margin-right: 11.09rem; } .mn-6 { margin-right: 17.944rem; } .mn-7 { margin-right: 29.034rem; } .mn-8 { margin-right: 46.978rem; } .mn-9 { margin-right: 76.012rem; } .mn-10 { margin-right: 122.99rem; }  .mt-n5 { margin-top: 0.090rem; } .mt-n4 { margin-top: 0.146rem; } .mt-n3 { margin-top: 0.236rem; } .mt-n2 { margin-top: 0.382rem; } .mt-n1 { margin-top: 0.618rem; } .mt { margin-top: 1rem; } .mt-1 { margin-top: 1.618rem; } .mt-2 { margin-top: 2.618rem; } .mt-3 { margin-top: 4.236rem; } .mt-4 { margin-top: 6.854rem; } .mt-5 { margin-top: 11.09rem; } .mt-6 { margin-top: 17.944rem; } .mt-7 { margin-top: 29.034rem; } .mt-8 { margin-top: 46.978rem; } .mt-9 { margin-top: 76.012rem; } .mt-10 { margin-top: 122.99rem; }  .mb-n5 { margin-bottom: 0.090rem; } .mb-n4 { margin-bottom: 0.146rem; } .mb-n3 { margin-bottom: 0.236rem; } .mb-n2 { margin-bottom: 0.382rem; } .mb-n1 { margin-bottom: 0.618rem; } .mb { margin-bottom: 1rem; } .mb-1 { margin-bottom: 1.618rem; } .mb-2 { margin-bottom: 2.618rem; } .mb-3 { margin-bottom: 4.236rem; } .mb-4 { margin-bottom: 6.854rem; } .mb-5 { margin-bottom: 11.09rem; } .mb-6 { margin-bottom: 17.944rem; } .mb-7 { margin-bottom: 29.034rem; } .mb-8 { margin-bottom: 46.978rem; } .mb-9 { margin-bottom: 76.012rem; } .mb-10 { margin-bottom: 122.99rem; }  .ml-n5 { margin-left: 0.090rem; } .ml-n4 { margin-left: 0.146rem; } .ml-n3 { margin-left: 0.236rem; } .ml-n2 { margin-left: 0.382rem; } .ml-n1 { margin-left: 0.618rem; } .ml { margin-left: 1rem; } .ml-1 { margin-left: 1.618rem; } .ml-2 { margin-left: 2.618rem; } .ml-3 { margin-left: 4.236rem; } .ml-4 { margin-left: 6.854rem; } .ml-5 { margin-left: 11.09rem; } .ml-6 { margin-left: 17.944rem; } .ml-7 { margin-left: 29.034rem; } .ml-8 { margin-left: 46.978rem; } .ml-9 { margin-left: 76.012rem; } .ml-10 { margin-left: 122.99rem; }  .mr-n5 { margin-right: 0.090rem; } .mr-n4 { margin-right: 0.146rem; } .mr-n3 { margin-right: 0.236rem; } .mr-n2 { margin-right: 0.382rem; } .mr-n1 { margin-right: 0.618rem; } .mr { margin-right: 1rem; } .mr-1 { margin-right: 1.618rem; } .mr-2 { margin-right: 2.618rem; } .mr-3 { margin-right: 4.236rem; } .mr-4 { margin-right: 6.854rem; } .mr-5 { margin-right: 11.09rem; } .mr-6 { margin-right: 17.944rem; } .mr-7 { margin-right: 29.034rem; } .mr-8 { margin-right: 46.978rem; } .mr-9 { margin-right: 76.012rem; } .mr-10 { margin-right: 122.99rem; }  .w-1 { width: 1%; } .w-2 { width: 2%; } .w-3 { width: 3%; } .w-4 { width: 4%; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-33 { width: 33.3333%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-66 { width: 66.6667%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; } .w-auto { width: auto; }  .h-1 { height: 1%; } .h-2 { height: 2%; } .h-3 { height: 3%; } .h-4 { height: 4%; } .h-5 { height: 5%; } .h-10 { height: 10%; } .h-15 { height: 15%; } .h-20 { height: 20%; } .h-25 { height: 25%; } .h-30 { height: 30%; } .h-33 { height: 33.3333%; } .h-40 { height: 40%; } .h-50 { height: 50%; } .h-60 { height: 60%; } .h-66 { height: 66.6667%; } .h-70 { height: 70%; } .h-75 { height: 75%; } .h-80 { height: 80%; } .h-90 { height: 90%; } .h-100 { height: 100%; } .h-full-screen { height: var(--vh-unit); min-height: var(--min-height); } .max-h-screen { max-height: var(--vh-unit); min-height: var(--min-height); }  .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-right { text-align: right; } .fw-thin { font-weight: 100; } .fw-extralight { font-weight: 200; } .fw-light { font-weight: 300; } .fw-regular { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .fw-extrabold { font-weight: 800; } .fw-black { font-weight: 900; }  @media screen and (max-width: 1000px) { .grid:not(.keep-grid) { grid-template-columns: 1fr !important; } .flex:not(.keep-flex) { flex-flow: column !important; } }  input::placeholder { opacity: 0.65; } input:focus::placeholder { opacity: 1; }  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ --webkit-box-shadow: 0 0 0 30px white inset !important; }  .input { position: relative; } .input-control { width: 100%; padding: 0.9em 0.5em 0.9em 1.1em; font-size: 16px; line-height: 1.25; border: 1px solid #ccc; border-radius: 0.25rem; outline: none; box-sizing: border-box; } .input-control:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }  .input.floating > label { position: absolute; top: calc(50% - 0.5rem); left: 1.1em; height: auto; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; line-height: 1; } .input.floating .input-control:placeholder-shown:not(:focus) ~ label { opacity: 0.65; transform: scale(1) translateY(0); } .input.floating .input-control:not(:placeholder-shown), .input.floating .input-control:focus { padding-top: 1.35em; padding-bottom: 0.45em; } .input.floating .input-control:not(:placeholder-shown) ~ label, .input.floating .input-control:focus ~ label { opacity: 0.65; transform: scale(0.8) translateY(-0.70rem) translateX(0rem); } .input.floating .input-control:-webkit-autofill ~ label, .input.floating .input-control:-webkit-autofill:focus ~ label { opacity: 0.65; transform: scale(0.8) translateY(-0.70rem) translateX(0rem); } .input.floating .input-control:-webkit-autofill { padding-top: 1.35em; padding-bottom: 0.45em; }  .input.icon svg:not(.visibility-off, .visibility-on) { position: absolute; top: 0.85em; left: 0.45em; width: 1.25em; display: inline-flex; justify-content: center; align-items: center; fill: black; opacity: 0.65; } .input.icon .input-control { padding-left: 1.95em; }  .input.floating.icon label { left: 1.95em; }  .input.password .visibility-off { position: absolute; top: 1em; right: 0.6em; width: 1.25em; height: 20px; display: none; cursor: pointer; } .input.password .visibility-on { position: absolute; top: 1em; right: 0.6em; width: 1.25em; height: 20px; display: none; cursor: pointer; }  a.btn, button.btn { background-color: var(--primary-color); color: white; padding: 1rem 1.44rem; border-radius: 5px; line-height: 1; text-align: center; position: relative; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; scale: .98; transition: .2s ease-in-out; } a.btn::before { content: attr(data-text); display: inline-block; position: absolute; transform: translateY(-350%) rotate(-12deg); transition: .25s; } a.btn span { transform-origin: center center; transform: translateY(0%) rotate(0deg); transition: .25s; }  a.btn:has(span):hover { scale: 1; background-color: var(--primary-color) !important; } a.btn:hover span { transform: translateY(350%) rotate(12deg); } a.btn:hover::before { transform: translateY(0%) rotate(0deg); } a.btn p, button.btn p { line-height: 1; margin: 0; } a.btn.icon, button.btn.icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; } a.btn:hover, button.btn:hover { background-color: var(--secondary-color); } a.btn.pulse, button.btn.pulse { animation: btnpulse 1.5s forwards infinite; } @keyframes btnpulse { 0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); } } a.btn.icon svg, button.btn.icon svg { fill: white; height: 1.4rem; width: auto; }