@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html, body { margin: 0; height: 100%; background: #fff; font-family: "Poppins", sans-serif; font-optical-sizing: auto; font-size: 16px; font-weight: 400; color: var(--dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: rgba(0,0,0,.01) 0 0 1px; scroll-behavior: smooth; }

:root {
  --primary: #ea9602;
  --secondary: #0694bc;
  --dark: #032b45;
}
.navbr-custom { width: 100%; background: #fff; padding: 15px 0; box-shadow: 0 2px 12px rgba(136,136,136,0.2); position: fixed; left: 0; top: 0; z-index: 1000; }
.navbr-custom .navbar-brand { width: 170px; border: 0; outline: 0; text-decoration: none; }
.navbr-custom .navbar-nav { margin-left: auto; }
.navbr-custom a.nav-link { font-size: 15px; font-weight: 400; color: #000; padding: 0 10px !important; text-decoration: none; position: relative; transition: all 0.3s ease-in-out; }
.navbr-custom a.nav-link:hover, .navbr-custom a.nav-link.active { color: var(--secondary); }
.navbr-custom a.nav-link::after { content: ''; width: 0; height: 1px; background: var(--primary); border-radius: 2px; position: absolute; left: 10px; bottom: -5px; transition: all 0.3s ease-in-out; }
.navbr-custom a.nav-link:hover::after, .navbr-custom a.nav-link.active::after { width: calc(100% - 20px); }
button.navbar-toggler { border: 0; outline: 0; padding: 0; box-shadow: none; font-size: 30px; color: var(--secondary); }
@media screen and (max-width: 991px) and (min-width: 769px) {
    .container { max-width: 950px; }
    .navbar-expand-lg>.container { padding: 0 15px; }
    .navbr-custom { padding: 10px 0; }
    .navbr-custom .navbar-brand { width: 130px; }
    .navbar-nav { padding: 15px 0 0 !important; }
    .navbar-nav a.nav-link { line-height: 40px; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .navbr-custom a.nav-link::after { display: none; }
}
@media screen and (max-width: 768px) {
    .navbar-expand-lg>.container { padding: 0 15px; }
    .container { max-width: 950px; }
    .navbr-custom { padding: 10px 0; }
    .navbr-custom .navbar-brand { width: 110px; }
    .navbar-nav { padding: 15px 0 0 !important; }
    .navbar-nav a.nav-link { font-size: 14px; line-height: 30px; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .navbr-custom a.nav-link::after { display: none; }
    .row { margin-left: -10px; margin-right: -10px; }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { padding-left: 10px; padding-right: 10px; }
}

.home-banner { width: 100%; height: auto; padding-top: 75px; position: relative; }
.home-banner .banner-bg { width: 100%; position: relative; overflow: hidden; }
.home-banner .banner-bg::before { content: ''; width: 100%; display: block; padding-top: 40%; position: relative; left: 0; top: 0; }
.home-banner.other .banner-bg { opacity: 0.85; }
.home-banner.other .banner-bg::before {padding-top: 25vh; }
.home-banner .banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; position: absolute; left: 0; top: 0; }
.home-banner .txt-over { width: 100%; height: 100%; position: absolute; display: flex; align-items: flex-end; justify-content: center; left: 0; top: 0; }
.home-banner .txt-over .contain { display: block; text-align: center; width: 100%; max-width: 900px; padding: 60px 30px; background: rgba(0,0,0,0.45); border-radius: 20px; backdrop-filter: blur(7px); position: absolute; transform: translate(-50%,-50%); left: 50%; top: calc((100% + 93px) / 2); }
.home-banner .txt-over .contain::after { content: ''; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid var(--primary); border-radius: 15px; position: absolute; left: 15px; top: 15px; }
.home-banner .txt-over h2 { font-size: 50px; font-weight: 600; line-height: 60px; color: var(--primary); margin-bottom: 0; }
.home-banner .txt-over h4 { font-size: 24px; font-weight: 400; line-height: 32px; color: #fff; margin-bottom: 25px; }
.home-banner .txt-over .checks { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 30px; margin: 0 auto; }
.checks .check { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; font-size: 18px; line-height: 22px; font-weight: 400; color: #fff; }
.checks .check img { width: 22px; }
.link-row { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; margin: 30px auto 0; }
.link-row a.more-link:last-child { background: #fff; color: var(--dark); }
@media screen and (max-width: 991px) {
    .home-banner { padding-top: 62px; }
}
@media screen and (max-width: 768px) {
    .home-banner { padding-top: 58px; }
    .home-banner .banner-bg::before { padding-top: 80%; }
    .home-banner.other .banner-bg::before {padding-top: 25%; }
    .home-banner .txt-over .contain { max-width: 90%; padding: 30px 20px; }
    .home-banner .txt-over .contain::after { width: calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px; }
    .home-banner .txt-over h2 { font-size: 36px; line-height: 42px; }
    .home-banner .txt-over h4 { font-size: 20px; line-height: 24px; }
    .home-banner .txt-over .checks { gap: 20px; }
    .checks .check { gap: 10px; text-align: left; font-size: 15px; line-height: 20px; }
    .checks .check img { width: 20px; }
}
@media screen and (max-width: 425px) {
    .home-banner .txt-over .contain { padding: 25px 18px; border-radius: 15px; top: calc((100% + 64px) / 2) }
    .home-banner .txt-over .contain::after { width: calc(100% - 14px); height: calc(100% - 14px); top: 7px; left: 7px; }
    .home-banner .txt-over h2 { font-size: 28px; line-height: 28px; margin-bottom: 10px; }
    .home-banner .txt-over h4 { font-size: 16px; line-height: 20px; margin-bottom: 15px; }
    .home-banner .txt-over .checks { gap: 15px; margin: 10px auto; }
    .checks .check { font-size: 13px; line-height: 18px; gap: 6px; }
    .checks .check img { width: 18px; }
    .link-row { margin-top: 15px; }
}

.section { width: 100%; padding: 70px 0; }
.bg-booking { width: 100%; padding: 80px 0; background: transparent url(../images/booking-block-bg.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; position: relative; }
.bg-booking::before { content: ''; width: 100%; height: 100%; background: rgba(255,255,255,0.3); position: absolute; left: 0; top: 0; }
.section.bg-about { width: 100%; background: transparent url(../images/booking-block-bg.jpg) no-repeat center center; background-attachment: fixed; background-size: cover; position: relative; }
.section.bg-about::before { content: ''; width: 100%; height: 100%; background: rgba(255,255,255,0.7); position: absolute; left: 0; top: 0; }
.section.bg-gray { background: #b0dcff; }
.section.footer { background: #151515; }
p { font-size: 15px; line-height: 21px; font-weight: 400; margin-bottom: 16px; }
p b { font-weight: 600; }
h5 { font-size: 18px; line-height: 26px; font-weight: 400; margin-bottom: 16px; }
a.more-link, button.form-submit { display: block; width: fit-content; background: var(--primary); border: 0; outline: 0; box-shadow: none; font-size: 16px; font-weight: 400; line-height: 22px; color: #fff; text-align: center; text-decoration: none; padding: 14px 30px; border-radius: 25px; margin: 30px 0; min-width: 150px; transition: all 0.3s ease-in-out; }
a.more-link:hover, button.form-submit:hover { background: var(--secondary); }
.mission-left, .mission-right { background: rgba(0,188,212,0.2); padding: 15px 20px; }
.mission-right { background: transparent; }
@media screen and (max-width: 768px) {
    .section { padding: 40px 0; }
    .bg-booking { padding: 40px 0; }
    p { font-size: 14px; line-height: 17px; margin-bottom: 12px; }
    h5 { font-size: 15px; line-height: 21px; margin-bottom: 12px; }
    a.more-link, button.form-submit { font-size: 14px; line-height: 20px; padding: 10px 20px; border-radius: 20px; margin: 20px auto; min-width: 130px; }
}

.heading, .heading2 { width: fit-content; max-width: calc(100% - 220px); height: auto; display: block; margin: 0 auto 24px; text-align: center; text-transform: uppercase; position: relative; }
.heading::before, .heading::after, .heading2::after { content: ''; width: 100px; height: 1px; background: #13aba6; position: absolute; bottom: 23px; left: -110px; }
.heading::after, .heading2::after { left: auto; right: -110px; }
.heading2.after-none::after { display: none; }
/* .heading2::after { left: auto; ri } */
.heading p { font-size: 16px; font-weight: 400; line-height: 24px; margin-bottom: 0px; }
.heading h5 { font-size: 24px; font-weight: 500; line-height: 32px; margin-bottom: 0px; }
.heading h3, .heading2 h3 { font-size: 36px; font-weight: 700; line-height: 46px; margin-bottom: 0; }
.heading2 { max-width: fit-content; margin: 0 0 24px; text-align: left; }
.heading2 h3 { font-weight: 400; }
@media screen and (max-width: 768px) {
    .heading, .heading2 { max-width: calc(100% - 60px); margin: 0 auto 16px; }
    .heading::before, .heading::after, .heading2::after { width: 20px; bottom: 15px; left: -30px; }
    .heading::after, .heading2::after { left: auto; right: -30px; }
    .heading p { font-size: 13px; line-height: 18px; }
    .heading h5 { font-size: 16px; line-height: 22px; }
    .heading h3, .heading2 h3 { font-size: 24px; line-height: 32px; }
    .heading2 { margin: 0 0 16px; }
}

.lrg-card { width: 100%; height: auto; margin-bottom: 15px; background: #fff; border: 1px solid #ddd; border-radius: 15px; padding: 15px; position: relative; }
.lrg-card .card-img { width: fit-content; height: 180px; display: block; margin: 20px auto; }
.lrg-card .card-img img { height: 100%; }
/* .lrg-card .card-bg { width: 100%; overflow: hidden; position: relative; }
.lrg-card .card-bg::before { content: ''; width: 100%; padding-top: 150%; display: block; left: 0; top: 0; }
.lrg-card .card-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 0; } */
/* .lrg-card .lrg-card-over { width: 100%; height: 80%; background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)); padding: 25px 28% 0 25px; position: absolute; left: 0; top: 0; } */
.lrg-card .lrg-card-body { width: 100%; padding: 15px; }
.lrg-card .lrg-card-body p { -webkit-box-orient: vertical; display: block; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
.lrg-card h4 { font-size: 30px; line-height: 36px; font-weight: 400; text-transform: uppercase; margin-bottom: 15px; position: relative; }
.lrg-card h4 b { font-weight: 600; }
.lrg-card h4::after { content: ''; width: 50px; height: 3px; background: var(--primary); border-radius: 2px; position: absolute; left: 0; bottom: -5px; }
@media screen and (max-width: 768px) {
    .lrg-card { padding-bottom: 15px; }
    .lrg-card .card-bg::before { padding-top: 120%; }
    .lrg-card .lrg-card-over { padding: 15px 15% 0 15px; }
    .lrg-card h4 { font-size: 22px; line-height: 28px; margin-bottom: 12px; }
}

.frame-img { width: 100%; border-radius: 15px; overflow: hidden; position: relative; }
.frame-img::after { content: ''; width: 100%; padding-top: 60%; position: relative; display: block; left: 0; top: 0; }
.frame-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 0; }

.owl-stage { display: flex; flex-direction: row; align-items: stretch; }
.owl-stage .owl-item { position: relative; margin: 0; padding: 0; }
.owl-stage .owl-item .item-card { position: relative; height: 100%; }
.owl-nav button { background: transparent !important; outline: 0 !important; }
.owl-nav button span { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: block; font-size: 0; position: relative; transition: all 0.3s ease-in-out; }
.owl-nav button span:hover { background: var(--secondary); }
.owl-nav button span::after { content: ''; width: 14px; height: 14px; border-top: 1px solid #fff; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid #fff; position: absolute; transform: rotate(-45deg); left: 16px; top: 13px; }
.owl-nav button.owl-next span::after { transform: rotate(135deg); left: 10px; }

.item-card { width: calc(100% - 2px); background: #fff; border: 1px solid #ddd; border-radius: 15px; display: flex; flex-direction: column; justify-content: space-between; }
.item-card .card-body { padding: 25px 35px 0px; }
.item-card p { font-size: 15px; line-height: 21px; font-weight: 400; color: #282727; position: relative; }
.item-card p::before { content: '\275D'; font-size: 60px; color: rgba(2,39,57,0.1); position: absolute; left: -30px; top: -5px;}
.item-card.other p::before { display: none; }
.item-card .card-foot { padding: 15px 35px; border-top: 1px solid rgba(2,39,57,0.1); }
.item-card h5 { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--primary); margin-bottom: 0; }
.item-card h6 { font-size: 12px; line-height: 16px; font-weight: 400; color: #282727a2; margin-bottom: 0; }
@media screen and (max-width: 768px) {
    .item-card .card-body { padding: 20px 25px 0px; }
    .item-card p { font-size: 13px; line-height: 18px; }
    .item-card p::before { font-size: 40px; left: -20px; }
    .item-card .card-foot { padding: 12px 25px; }
    .item-card h5 { font-size: 13px; line-height: 19px; }
    .item-card h6 { font-size: 11px; line-height: 15px; }
}

.pro-card { width: 100%; height: calc(100% - 15px); margin-bottom: 15px; display: block; border: 1px solid #ddd; border-radius: 15px; text-align: left; }
.pro-card .img-top { width: calc(100% - 30px); overflow: hidden; border-radius: 10px; margin: 15px 15px; position: relative; }
.pro-card .img-top::before { content: ''; width: 100%; padding-top: 60%; display: block; left: 0; top: 0; }
.pro-card img { width: 100%; height: 100%; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 0; }
.pro-card .card-body { padding: 0px 15px 15px; }
.pro-card .defi-row { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pro-card a.left-link { width: fit-content; font-size: 12px; line-height: 12px; font-weight: 400; color: #282727a2; background: rgba(226,232,240,.8); padding: 4px 8px; border-radius: 3px; text-decoration: none; }
.pro-card h6 { font-size: 11px; line-height: 13px; color: #282727a2; margin-bottom: 0; }
.pro-card h4 { font-size: 18px; line-height: 24px; font-weight: 500; color: #282727; margin-bottom: 10px; -webkit-box-orient: vertical; display: block; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.pro-card p { font-size: 15px; line-height: 21px; font-weight: 400; color: #282727; margin-bottom: 10px; -webkit-box-orient: vertical; display: block; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; }
.pro-card a.more-link { font-size: 15px; padding: 8px 20px; margin: 15px auto 0 0; }
@media screen and (max-width: 768px) {
    .pro-card a.left-link { font-size: 11px; line-height: 11px; padding: 3px 6px; }
    .pro-card h6 { font-size: 10px; line-height: 12px; }
    .pro-card h4 { font-size: 16px; line-height: 22px; margin-bottom: 8px; }
    .pro-card p { font-size: 14px; line-height: 19px; }
    .pro-card a.more-link { font-size: 13px; padding: 6px 17px; }
}

/* .footer .footer-top { padding: 50px 0; } */
.footer .footer-top .pay-img { width: 170px; margin-bottom: 15px; }
.footer .footer-top p { font-size: 14px; font-weight: 400; line-height: 23px; color: rgba(255,255,255,0.7); }
.footer .footer-top p a {font-size: 14px; font-weight: 400; line-height: 21px; color: var(--secondary); margin-bottom: 6px; text-decoration: none; transition: all 0.3s ease-in-out; }
.footer .footer-top .nav-title { font-size: 17px; line-height: 20px; font-weight: 600; color: #fff; margin-bottom: 18px; }
.footer .footer-top a.footer-nav { display: block; font-size: 14px; font-weight: 400; line-height: 21px; color: var(--secondary); margin-bottom: 6px; text-decoration: none; transition: all 0.3s ease-in-out; }
.footer .footer-top a.footer-nav:hover, .footer .footer-top p a:hover { color: rgba(255,255,255,0.9); }
@media screen and ( max-width: 991px ) {
    .footer .footer-top .nav-title { font-size: 15px; line-height: 19px; }
    .footer .footer-top .pay-img { width: 130px; }
}
@media screen and ( max-width: 768px ) {
    .footer .footer-top { text-align: left; }
    .footer .footer-top .pay-img { width: 110px; }
}

.footer .footer-bottom { background: #111; padding-top: 30px; border-top: 1px solid rgba(10,222,248,0.2); }
.footer .footer-bottom .divider { width: 100%; height: 1px; background-color: #8f8f8f66; margin-bottom: 16px; }
.footer .footer-bottom p { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.5); margin-bottom: 0; }
.footer .footer-bottom a.footer-nav2 { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.65); text-decoration: none; margin-left: 24px; transition: all 0.3s ease-in-out; }
.footer .footer-bottom a.footer-nav2:hover { color: rgba(255,255,255,0.9); }
@media screen and ( max-width: 768px ) {
    .footer .footer-bottom p { text-align: center; }
    .footer .footer-bottom a.footer-nav2 { margin: 0 12px; }
}

.social-row { width: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; margin-bottom: 30px; }
.social-row a.social { font-size: 16px; color: var(--secondary); text-decoration: none; width: 36px; height: 36px; padding-top: 11px; background: #000; border-radius: 50%; text-align: center; line-height: 16px; transition: all 0.3s ease-in-out; }
.social-row a.social:hover { color: rgba(255,255,255,0.9); }
@media screen and ( max-width: 991px ) {
    .social-row { margin: 0 0 0 auto; }
}
@media screen and ( max-width: 768px ) {
    .social-row { margin: 0; }
}

.gal-row { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(calc((100% - 30px) / 4), 1fr)); /* grid-auto-rows: 125px; */ grid-auto-flow: dense; }
.gal-row a.gal-img { /*width: calc((100% - 30px) / 4);*/ border: 0; border-radius: 10px; text-decoration: none; overflow: hidden; position: relative; cursor: zoom-in; }
.gal-row a.gal-img::before { content: ''; display: block; width: 100%; padding-top: 70%; position: relative; left: 0; top: 0; }
.gal-row a.gal-img::after { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.6) url(../images/logo-white.svg) no-repeat center center; background-size: 180px 180px; position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.5s ease-in-out; }
.gal-row a.gal-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 0; transform: scale(1); transition: all 0.5s ease-in-out; }
.gal-row a.gal-img:first-child { grid-column: span 2; grid-row: span 2;}
.gal-row a.gal-img:nth-child(2) { grid-row: span 2;}
.gal-row a.gal-img:hover img { transform: scale(1.1); }
.gal-row a.gal-img:hover::after { background-size: 130px 130px; opacity: 1; }
@media screen and ( max-width: 768px ) {
    .gal-row { grid-gap: 8px; grid-template-columns: repeat(auto-fit, minmax(calc((100% - 8px) / 2), 1fr)); }
}

.form-card { width: 100%; height: auto; background: rgba(0,188,212,0.1); padding: 80px 50px; border: 1px solid rgba(2,39,57,0.1); }
form .form-group { margin-bottom: 20px; }
form label { font-size: 15px; line-height: 21px; font-weight: 400; margin-bottom: 5px; }
form input.form-control, form input.form-control:focus-within,
form textarea.form-control, form textarea.form-control:focus-within { height: 45px; border: 1px solid rgba(0,188,212,0.4); border-radius: 6px; outline: 0; box-shadow: none; font-size: 15px; font-weight: 400; padding: 0 15px; }
form textarea.form-control, form textarea.form-control:focus-within { height: auto; padding: 10px 15px; resize: none; }
form input.form-control::placeholder, form textarea.form-control::placeholder { color: rgba(0,0,0,0.3); }
@media screen and ( max-width: 768px ) {
    .form-card { padding: 30px 20px; }
    form .form-group { margin-bottom: 15px; }
    form label { font-size: 13px; line-height: 19px; margin-bottom: 5px; }
    form input.form-control, form input.form-control:focus-within,
    form textarea.form-control, form textarea.form-control:focus-within { height: 40px; border-radius: 4px; font-size: 14px; padding: 0 12px; }
    form textarea.form-control, form textarea.form-control:focus-within { height: auto; padding: 8px 12px; }
}

.contact-detail { margin-top: 50px; }
.contact-detail h5 { padding-left: 36px; text-align: left; position: relative; }
.contact-detail h5 i { font-size: 23px; color: var(--secondary); position: absolute; left: 0; }
@media screen and (max-width: 768px) {
    .contact-detail { margin-top: 30px; }
    .contact-detail h5 { padding-left: 28px; }
    .contact-detail h5 i { font-size: 19px; }
}

.testimonials { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(calc((100% - 30px) / 3), 1fr)); /* grid-auto-rows: 125px; */ grid-auto-flow: dense; }
@media screen and ( max-width: 768px ) {
    .testimonials { grid-gap: 8px; grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); }
}

.sticky-whatsapp { width: 65px; height: auto; position: fixed; right: 20px; bottom: 15vh; z-index: 1000; cursor: pointer; }
@media screen and ( max-width: 768px ) {
    .sticky-whatsapp { width: 50px; right: 10px; bottom: 12vh; }
}