/********** Template CSS **********/ /* @font-face { font-family: "Font Awesome 5 Free"; src: url("/css/fontawesome/all.min.css"); } */ :root { --primary: #015fc9; --secondary: #0dd3f1; --light: #f6f7fc; --dark: #15233c; --purple: #7836fa; --light-brown: #d99250; --lighter-brown: #d0995c; /* --brown: #967969; */ --brown: #5c4033; --light-blue: #1f51ff; --red: #6e260e; } .back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; } /*** Spinner ***/ #spinner { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; z-index: 99999; } #spinner.show { transition: opacity 0.5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Button ***/ .btn { transition: 0.5s; } .btn.btn-primary, .btn.btn-outline-primary:hover, .btn.btn-secondary, .btn.btn-outline-secondary:hover { color: #ffffff; } .btn.btn-primary:hover { background: var(--secondary); border-color: var(--secondary); } .btn.btn-secondary:hover { background: var(--primary); border-color: var(--primary); } .btn-square { width: 38px; height: 38px; } .btn-sm-square { width: 32px; height: 32px; } .btn-lg-square { width: 48px; height: 48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; } /*** Navbar ***/ .navbar.sticky-top { top: -100px; transition: 0.5s; /* Optional */ opacity: 70; backdrop-filter: blur(5px); box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2); } .navbar .navbar-brand img { max-height: 60px; } .navbar .navbar-nav .nav-link { margin-left: 25px; padding: 10px 0; color: #696e77; font-weight: 500; outline: none; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--primary); } .navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; vertical-align: middle; margin-left: 8px; } @media (max-width: 991.98px) { .navbar .navbar-brand img { max-height: 45px; } .navbar .navbar-nav { margin-top: 20px; margin-bottom: 15px; } .navbar .nav-item .dropdown-menu { padding-left: 30px; } } @media (min-width: 992px) { .navbar .nav-item .dropdown-menu { display: block; border: none; margin-top: 0; top: 150%; right: 0; opacity: 0; visibility: hidden; transition: 0.5s; } .navbar .nav-item:hover .dropdown-menu { top: 100%; visibility: visible; transition: 0.5s; opacity: 1; } } /*** Header ***/ .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; text-align: start; background-color: rgba(255, 255, 255, 0.3); /* background-color: rgba(0, 0, 0, 0.1); */ /* backdrop-filter: blur(10px); */ z-index: 1; overflow: hidden; } .caption-content { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); /* right: 0; */ text-align: center; /* background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); */ padding: 0.8rem; } .carousel-control-prev, .carousel-control-next { width: 15%; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; background-color: var(--primary); border: 15px solid var(--primary); border-radius: 50px; } @media (max-width: 1366px) { #header-carousel .carousel-item { position: relative; min-height: 620px; } #header-carousel .carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 768px) { #header-carousel .carousel-item { position: relative; min-height: 450px; } #header-carousel .carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; } } .carousel-img-custom { max-height: 760px; width: auto; height: auto; } .page-header { background: url(/img/banner/banner4.jpg) right center no-repeat; background-size: cover; max-height: 550px; max-width: 1920px; } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { font-weight: 500; } .page-header .breadcrumb-item a, .page-header .breadcrumb-item + .breadcrumb-item::before { color: #696e77; } .page-header .breadcrumb-item a:hover, .page-header .breadcrumb-item.active { color: var(--primary); } /*** Facts ***/ @media (min-width: 992px) { .container.facts { max-width: 100% !important; } .container.facts .facts-text { padding-left: calc(((100% - 960px) / 2) + 0.75rem); } .container.facts .facts-counter { padding-right: calc(((100% - 960px) / 2) + 0.75rem); } } @media (min-width: 1200px) { .container.facts .facts-text { padding-left: calc(((100% - 1140px) / 2) + 0.75rem); } .container.facts .facts-counter { padding-right: calc(((100% - 1140px) / 2) + 0.75rem); } } @media (min-width: 1400px) { .container.facts .facts-text { padding-left: calc(((100% - 1320px) / 2) + 0.75rem); } .container.facts .facts-counter { padding-right: calc(((100% - 1320px) / 2) + 0.75rem); } } .container.facts .facts-text { background: linear-gradient(rgba(1, 95, 201, 0.9), rgba(1, 95, 201, 0.9)); background-size: cover; } .container.facts .facts-counter { background: linear-gradient( rgba(246, 247, 252, 0.9), rgba(246, 247, 252, 0.9) ); background-size: cover; } .container.facts .facts-text .h-100, .container.facts .facts-counter .h-100 { padding: 1.5rem 0; display: flex; flex-direction: column; justify-content: center; } /*** Service ***/ /* .service-item { border: 0.9px solid var(--primary); transition: 0.2s linear; } .service-item:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); border: none; background-color: #f6f7fc; } */ .service-item .service-icon { width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; } .layanan-icon { max-height: 85px; max-width: 85px; /* height: 40px; */ } /*** Appointment ***/ .appointment { background: linear-gradient(rgba(1, 95, 201, 0.9), rgba(1, 95, 201, 0.9)); background-size: cover; } .appointment img { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } /*** Team ***/ .team-item { position: relative; overflow: hidden; box-shadow: 0 0 45px rgba(0, 0, 0, 0.07); } .team-item img { transition: 0.5s; } .team-item:hover img { transform: scale(1.1); } .team-text { position: absolute; width: 100%; left: 0; bottom: -50px; opacity: 0; transition: 0.5s; } .team-item:hover .team-text { bottom: 0; opacity: 1; } .team-item a.btn { color: var(--primary); } .team-item a.btn:hover { color: #ffffff; background: var(--primary); border-color: var(--primary); } /*** Testimonial ***/ .animated.pulse { animation-duration: 1.5s; } .testimonial-left, .testimonial-right { position: relative; } .testimonial-left img, .testimonial-right img { position: absolute; padding: 5px; border: 1px dashed var(--primary); border-radius: 10px; } .testimonial-left img:nth-child(1), .testimonial-right img:nth-child(3) { width: 70px; height: 70px; top: 10%; left: 50%; transform: translateX(-50%); } .testimonial-left img:nth-child(2), .testimonial-right img:nth-child(2) { width: 60px; height: 60px; top: 50%; left: 10%; transform: translateY(-50%); } .testimonial-left img:nth-child(3), .testimonial-right img:nth-child(1) { width: 50px; height: 50px; bottom: 10%; right: 10%; } .testimonial-carousel .owl-item img { width: 100px; height: 100px; } .testimonial-carousel .owl-nav { margin-top: 30px; display: flex; justify-content: center; } .testimonial-carousel .owl-nav .owl-prev, .testimonial-carousel .owl-nav .owl-next { margin: 0 5px; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: var(--dark); /* background: var(--primary); */ border-radius: 10px; font-size: 22px; transition: 0.5s; } .testimonial-carousel .owl-nav .owl-prev:hover, .testimonial-carousel .owl-nav .owl-next:hover { background: var(--secondary); } /*** Footer ***/ .footer { color: var(--dark); } .footer .btn.btn-link { display: block; margin-bottom: 5px; padding: 0; text-align: left; color: var(--dark); font-weight: normal; transition: 0.3s; } .footer .btn.btn-link::before { position: relative; color: var(--dark); margin-right: 10px; } .footer .btn.btn-link:hover { color: var(--red); letter-spacing: 0.5px; box-shadow: none; } /* Tes kelas active */ .footer .btn.btn-link:active { color: var(--red); } .footer .btn.btn-square { color: var(--dark); border: 1px solid var(--dark); } .footer .btn.btn-square:hover { color: var(--red); border-color: var(--red); transform: scale(1.1); } .footer .copyright { padding: 15px 0; font-size: 15px; border-top: 1px solid rgba(256, 256, 256, 0.1); } .footer .copyright a { color: var(--red); } .footer .copyright a:hover { color: #ffffff; } /* Personal icon */ .icon-custom { font-size: 45px; color: white; } .iframe-custom { position: relative; height: 80vh; /* padding-bottom: 40%; */ /* height: 0; */ overflow: hidden; } .iframe-custom iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Custom color */ .bg-brown { background-color: var(--lighter-brown); } .bg-light-brown { background-color: #a0522d; } .hover-blue:hover { color: var(--secondary); } .hover-brown:hover { color: var(--light-brown); } .hover-red-brown:hover { color: var(--red); } .spinner-border-big { width: 3.5rem; height: 3.5rem; } .fs-smol { font-size: 0.8rem; } /* Accordion transition, Layanan Kami */ .hover-fade a { display: block; position: relative; overflow: hidden; background-color: #fbfbfb; } .hover-fade img { width: 100%; height: auto; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .hover-fade:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)"; filter: alpha(opacity=0.5); opacity: 0.5; } /* Gallery foto popup */ .containers { position: relative; min-height: 100vh; background: #fff; } .containers .image-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 10px; } .containers .image-container .image { height: 250px; width: 350px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; cursor: pointer; } .containers .image-container .image img { display: block; height: 100%; width: 100%; object-fit: cover; transition: 0.2s linear; } .containers .image-container .image:hover img { transform: scale(1.1); } .containers .popup-image { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.9); height: 100%; width: 100%; z-index: 99999; display: none; } .containers .popup-image span { position: absolute; top: 0; right: 25px; font-size: 60px; font-weight: bolder; color: #fff; cursor: pointer; z-index: 100; } .containers .popup-image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 750px; object-fit: cover; } @media (max-width: 720px) { .containers .popup-image img { width: 95%; } } .big-icon { font-size: 1.5rem; color: var(--primary); } .text-top-header { color: var(--dark); } .single-post-image { border-radius: 0.375rem; max-height: 500px; overflow: hidden; /* Another version */ /* max-width: 60%; */ /* max-height: auto; */ /* margin: auto; */ } .multi-post-big { max-height: 400px; overflow: hidden; } .post-hover { transition: 0.2s linear; } .post-hover:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } .post-hover-bg { transition: 0.2s linear; } .post-hover-bg:hover { border: none; background-color: #f6f7fc; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } .post-tag-bg { position: absolute; background-color: rgba(0, 0, 0, 0.7); } .post-tag-bg a { color: #ffffff; } .post-tag-bg a:hover { color: #0dd3f1; } .rounded-top-left-custom { border-top-left-radius: 0.375rem; } .category-hover { transition: 0.2s linear; } .category-hover:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); border: none; } .foto-dokter { height: 195px; width: 175px; } .profil-dokter { position: relative; background-color: rgba(246, 247, 252, 0.95); margin-top: -50px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); } #quick-access-link a:hover span { text-decoration: underline; color: #0dd3f1; } .justify-paragraph-custom { text-align: justify; text-justify: inter-word; } .justify-paragraph-custom p { text-indent: 50px; } .justify-paragraph-custom img { width: 600px; height: 400px; } .text-brown { color: var(--brown); } .rsml-logo-footer { background-color: #ffffff; border-radius: 100%; width: 130px; height: 130px; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } .hover-link:hover { text-decoration: underline; color: #0dd3f1; } /* Override default table css to rounded-corner */ /* table { border-collapse: separate !important; border-spacing: 0 !important; } table tr th, table tr td { border-right: 1px solid #dee2e6 !important; border-bottom: 1px solid #dee2e6 !important; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #dee2e6 !important; } table tr th { border-top: 1px solid #dee2e6 !important; } */ /* top-left border-radius */ /* table tr:first-child th:first-child { border-top-left-radius: 0.65rem !important; } */ /* top-right border-radius */ /* table tr:first-child th:last-child { border-top-right-radius: 0.65rem !important; } */ /* bottom-left border-radius */ /* table tr:last-child td:first-child { border-bottom-left-radius: 0.65rem !important; } */ /* bottom-right border-radius */ /* table tr:last-child td:last-child { border-bottom-right-radius: 0.65rem !important; } */ .flex-equal > * { flex: 1; } @media (min-width: 768px) { .flex-md-equal > * { flex: 1; } }