File manager

File manager - Edit - /home/custbahd/vianmedicalcenter.com/index.html

Back
<!DOCTYPE html> <html lang="en"> <head> <title>Vian Medical Center ©</title> <!-- Social Share Data --> <meta content="text/html; charset=utf-8" name="Content-Type"> <link rel="canonical" href="https://vianmedicalcenter.com/"> <meta property="og:image" content="https://vianmedicalcenter.com/images/stock/3.jpg"> <!-- Less than 65 characters --> <meta property="og:title" content="Vian Medical Center ©"> <meta property="og:url" content="https://vianmedicalcenter.com/"> <!-- Less than 300 characters --> <meta property="og:description" content="A Service Full Of Life"> <meta property="og:site_name" content="Vian Medical Center ©"> <!-- Twitter Cards --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://vianmedicalcenter.com/"> <meta name="twitter:title" content="Vian Medical Center ©"> <meta name="twitter:description" content="A Service Full Of Life"> <meta name="twitter:image" content="https://vianmedicalcenter.com/images/stock/3.jpg"> <meta name="twitter:site" content="@vianmedical"> <meta name="twitter:creator" content="@vianmedical"> <!-- Favicon --> <link rel="icon" href="images/logo.png"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="description" content="A Service Full Of Life"> <meta name="keywords" content="Ear, Nose & Throat (ENT), ENT Doctors, Medicine, Treatment, General Medicine, Orolaryngology, Pediatric Care, Gynecology, Radiology, Urology, Surgery, Internal Medicine, Orthopedic, Laboratory, Ultra Sound Scan, Body Checkup, Immunization, Consultation, Emergency, best ent specialist doctors in kampala Uganda Naguru, Best Clinic Services, Clinic, ent ear nose and throat medical health center in near uganda kampala ntinda najjera naguru kisasi kyanja, ent specialist near me, ent hospitals in kampala, ent doctor kampala uganda"> <meta name="author" content="Custom Webs"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- MAIN CSS --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/navbarr/style.css"> <!--Animations--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <link rel="stylesheet" type="text/css" href="css/Attention/blink.css"> <link rel="stylesheet" type="text/css" href="css/Attention/bounce.css"> <link rel="stylesheet" type="text/css" href="css/Attention/flicker.css"> <link rel="stylesheet" type="text/css" href="css/Attention/jello.css"> <link rel="stylesheet" type="text/css" href="css/Attention/pulsate.css"> <link rel="stylesheet" type="text/css" href="css/Attention/shake.css"> <link rel="stylesheet" type="text/css" href="css/Attention/vibrate.css"> <link rel="stylesheet" type="text/css" href="css/Attention/wobble.css"> <link rel="stylesheet" type="text/css" href="css/Background/background.css"> <link rel="stylesheet" type="text/css" href="css/Bounce/bounce.css"> <link rel="stylesheet" type="text/css" href="css/Text/blur-out.css"> <link rel="stylesheet" type="text/css" href="css/Text/flicker-glow.css"> <link rel="stylesheet" type="text/css" href="css/Text/focus-in.css"> <link rel="stylesheet" type="text/css" href="css/Text/tracking-in.css"> <link rel="stylesheet" type="text/css" href="css/Text/tracking-out.css"> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-983C9L9S21"></script> <script> window.dataLayer = window.dataLayer \|\| []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-983C9L9S21'); </script> <meta name="msvalidate.01" content="F1F0C96323C5E2487FC2FCA5FC96400F" /> <script src="https://plugin.nytsys.com/api/site/16c80cc4-52d0-494d-b67d-2e7df3aa380a/nytsys.min.js" ></script> <style type="text/css" media="screen"> header { height: 40px; } header p { font-weight: bold; font-size: 14px; margin-top: -4px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } /Navbar/ .navbar { height: 0; display: none; } /* If the screen size is 767.98px wide or less / @media screen and (max-width: 767.98px) { .navbar { display: block; margin-top: 0; height: 100px; } .navbarr { display: none; } .navbar-default .navbar-nav li a { margin-top: 2px; margin-left: 10px; font-size: 14px; } .navbar-default .navbar-nav li.appointment-btn a { margin-top: 5px; margin-right: 25px; } } /Toggler/ .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 21px; margin-right: 0; margin-bottom: 8px; background-color: transparent; background-image: none; border-radius: 4px; box-shadow: 0 0 1px 1px #C95E4F; } .navbar-default .navbar-nav li a { color: #95434C; } .navbar-collapse { margin-left: -90px !important; width: 116% !important; background: white !important; } / If the screen size is 767.98px wide or less / @media screen and (max-width: 767.98px) { .navbar-collapse { margin-left: -25px !important; width: 116% !important; background: white; } header { padding: 30px; } header i { font-size: 30px !important; margin-top: 10px; } header a { font-size: 30px; margin-top: 10px; } header p { margin-top: -16px; font-size: 30px; padding: 5px; } header span { font-size: 30px; } header .row{ } } /Navbar Icons/ .head-icons { position: absolute; width: 25%; margin-left: 56%; top: 34px; border-radius: 6px; } .head-icons i{ font-size: 16px; padding: 6px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } / If the screen size is 768px wide or more / @media screen and (min-width: 768px) { .head-icons { position: absolute; width: 10%; margin-left: 1035px; top: 100px; } } /Logo/ .navbar-header a img { float: left; margin-left: 2px; margin-top: -13px; width: 150px; } .navbar-header .icon-img { margin-top: -13px; margin-left: -26px; width: 60px; } / If the screen size is 768px wide or more / @media screen and (min-width: 768px) { .navbar-header a img { float: left; margin-left: 2px; margin-top: -8px; width: 200px; } .navbar-header .icon-img { margin-top: -10px; width: 80px; } } /Top Slider Buttons/ .btn-gray { background: linear-gradient(-90deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 10s ease infinite; animation: gradient 10s ease infinite; } .btn-blue { background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-animation: gradient 10s ease infinite; animation: gradient 10s ease infinite; } /Top Slider Responsive/ / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .caption h3 { font-size: 30px !important; } .caption h1 { font-size: 100px !important; } .caption a { font-size: 30px !important; } } /Background/ .background-overlay, .background-overlay-black { position: relative; z-index: 2; background-position: center center; background-size: cover; } .background-overlay:before, .background-overlay-black:before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .background-overlay:before { background-color: rgba(0, 0, 0, 0.5); } .background-overlay-black:before { background-color: rgba(23, 24, 24, 0.7); } /About Info Responsive/ .about-info img { width: 6%; margin-top: -5px; margin-bottom: 5px; } .about-info b { margin-left: 1px; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .about-info p { font-size: 18px !important; } .about-info img { width: 10%; margin-top: -5px; margin-bottom: 15px; } .about-info b { font-size: 30px !important; margin-left: 4px; } } /Services Grid/ .services { font-weight: bold; text-align: center; text-transform: uppercase; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } .grid-services { font-weight: bold; text-align: center; text-transform: uppercase; background: linear-gradient(90deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 10s ease infinite;animation: gradient 10s ease infinite; } .appointment-services { font-weight: bold; text-align: center; text-transform: uppercase; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } #outer-grid { width: 98%; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr); text-align: center; box-shadow: 0 0 4px 1px #C95E4F; } #outer-grid > div { color: white; padding: 5px; width: 100%; background-position: center; background-size: cover; } #outer-grid img { width: 60%; } #outer-grid h4 { font-weight: bold; font-size: 12px; text-decoration: underline; transition: 1s; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } #outer-grid p { font-size: 12px; } #outer-grid i { color: gray; } #outer-grid h4:hover { font-size: 14px; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { #outer-grid h4 { font-size: 30px; } #outer-grid h4:hover { font-size: 35px; } .services { font-size: 60px; } .grid-services { font-size: 60px; } } /Common Infections Grid/ #common-grid { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); text-align: center; box-shadow: 0 0 2px 0; } #common-grid > div { color: white; font-size: 12px; width: 100%; min-height: 100px; background-position: center; background-size: cover; } #common-grid div h4 { font-weight: bold; color: white; margin-top: 40px; } #common-grid p { font-size: 12px; } #common-grid i { color: gray; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { #common-grid div h4 { font-size: 30px; margin-top: 80px; } #common-grid > div { color: white; font-size: 12px; width: 100%; min-height: 200px; background-position: center; background-size: cover; } } / If the screen size is 600px wide or less, set the font-size of <div> to 30px / @media screen and (max-width: 600px) { #common-grid div h4 { font-size: 12px; } } /Background Overlay/ .background-overlay, .background-overlay-white { position: relative; border-radius: 20px; z-index: 2; background-position: center center; background-size: cover; } .background-overlay:before, .background-overlay-white:before { position: absolute; border-radius: 20px; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .background-overlay:before { background-color: rgba(0, 0, 0, 0.5); border-radius: 20px; } .background-overlay-white:before { background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; } .contact-info a{ font-size: 12px !important; } .opening-hours i{ background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; padding-right: 6px; } /Auto slideshow/ .slideshow-container { position: relative; margin-top: 3%; margin-left: 9px; width: 96%; min-height: 250px; border-radius: 10px; } .slideshow-container img{ width: 100%; height: 250px; border-radius: 10px; } .mySlides { display: none; width: 100%; min-height: 250px; border-radius: 10px; animation: color-mix 3s linear infinite alternate; box-shadow: -3px -3px 3px 0 #799395; } @keyframes color-mix { 0% { color: black } 100% { color: gray } } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; font-weight: bold; font-size: 20px; transition: 1s ease; border: 0px solid; color: none; } .next { right: 0; } .prev { left: 0; } .prev:hover, .next:hover { color: none; } .dot { cursor: pointer; height: 13px; width: 13px; border-radius: 50%; display: inline-block; transition: background-color .6s ease; background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .activ { width: 10px; height: 10px; border-radius: 50px; background: linear-gradient(45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-animation: bounce-top 0.9s both; animation: bounce-top 0.9s both; } .info-text { font-weight: bold; font-style: italic; position: absolute; color: white; text-align: center; width: 100%; height: 100%; border-radius: 10px; bottom: 0; left: 0; text-transform: uppercase; background-color: rgba(23, 24, 24, 0.2); } .info-text h1 { font-size: 18px; font-weight: bold; margin-top: 10px; letter-spacing: 0; text-transform: uppercase; color: white; text-align: left; } .info-text h2 { font-size: 60px; letter-spacing: 0; text-transform: uppercase; color: white; } .info-text h6 { margin-top: 10px; font-weight: bold; font-size: 14px; color: white; text-align: left; } .info-text h5 { margin-top: 10px; font-weight: bold; font-size: 14rem; color: white; text-align: left; } .info-text h4 { color: white; font-weight: bold; font-size: 16px; margin-top: 10px; } .info-text .animate1 { font-size: 15px; float: left; margin-top: 30%; margin-left: 10px; color: white; text-transform: capitalize; } .info-text .animate1 span:nth-child(2) { margin-top: 18%; text-transform: normal; } .info-text div div{ font-weight: bold; color: white; font-size: 12px; width: 30%; margin-top: 5%; padding: 5px; } .info-text div{ margin-top: 15%; } .info-text div:nth-child(2) { background: linear-gradient(90deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 5s ease infinite; animation: gradient 5s ease infinite; font-size: 12px; } .info-text a { color: white; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .slideshow-container { position: relative; margin-top: 3%; width: 80%; min-height: 250px; border-radius: 10px; } .mySlides { display: none; width: 100%; border-radius: 10px; animation: color-mix 3s linear infinite alternate; box-shadow: -3px -3px 3px 0 #799395; } .slideshow-container img{ width: 100%; height: 550px; border-radius: 10px; } .info-text .animate1 { margin-top: 20%; margin-left: 20px; } .info-text h6 { margin-bottom: 40px; font-weight: bold; font-size: 40px !important; color: white; text-align: left; } .dot { cursor: pointer; height: 20px; width: 20px; border-radius: 50%; display: inline-block; transition: background-color .6s ease; background: linear-gradient(-75deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .activ { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-animation: bounce-top 0.9s both; animation: bounce-top 0.9s both; } .info-text div div { font-size:30px; } .info-text div:nth-child(2) { font-size:30px; } } /Text Animation/ .M{ font-size:14px; color: white; margin-left: 10px; animation-name:pup; animation-duration:2s; } .A{ font-size:14px; color: white; margin-left:5px; animation-name:pup2; animation-duration:4s; } .D{ font-size:12px; color: white; margin-left: 0; margin-top: 20px !important; background: none !important; animation-name:pup3; animation-duration:2s; } @keyframes pup{ from{transform:rotateY(0deg);} 50%{margin-left:10px;transform:rotateY(180deg);transform:rotateX(0deg);} 75%{margin-left:10px;transform:rotateY(360deg);transform:rotateX(0deg);} 100%{margin-left:10px;transform:rotateX(360deg);} } @keyframes pup2{ from{margin-left:-300px;transform:rotateY(0deg);} 50%{margin-left:5px;transform:rotateY(180deg);transform:rotateX(0deg);} 75%{margin-left:5px;transform:rotateY(360deg);transform:rotateX(0deg);} 100%{margin-left:5px;transform:rotateX(360deg);} } @keyframes pup3{ from{transform:rotateY(0deg);} 50%{margin-left:10px;transform:rotateY(180deg);transform:rotateX(0deg);} 75%{margin-left:10px;transform:rotateY(360deg);transform:rotateX(0deg);} 100%{margin-left:10px;transform:rotateX(360deg);} } /Auto slideshow/ .site-section .container { border-top-right-radius: 10px !important; border-top-left-radius: 10px; } .owl-carousel { width: 100%; border-top-right-radius: 10px !important; border-top-left-radius: 10px; } .media-29101 { width: 100%; height: 400px; border-top-right-radius: 10px; border-top-left-radius: 10px; } .media-29101 img { width: 100%; height: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; } .media-29101 h3 { font-size: 18px; font-weight: 900 !important; } .media-29101 h3 a { color: #6c757d; } .owl-2-style .owl-nav { display: none; } .owl-2-style .owl-dots { text-align: center; position: relative; bottom: -30px; } .owl-2-style .owl-dots .owl-dot { display: inline-block; } .owl-2-style .owl-dots .owl-dot span { display: inline-block; width: 15px; height: 3px; border-radius: 0px; -webkit-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53); -o-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53); transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53); margin: 3px; } .owl-2-style .owl-dots .owl-dot.active span { } .owl-2-style .owl-dots .owl-dot:active, .owl-2-style .owl-dots .owl-dot:focus { outline: none; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .owl-carousel { width: 100%; border-top-right-radius: 0 !important; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 0 4px 0 #124448; } .media-29101 { width: 100%; height: 620px; border-top-right-radius: 0 !important; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .media-29101 img { margin-bottom: 20px; height: 100%; border-top-right-radius: 0 !important; border-top-right-radius: 10px; border-bottom-left-radius: 10px; } } / If the screen size is 600px wide or less, set the font-size of <div> to 30px / @media screen and (max-width: 600px) { .owl-carousel { width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; } .media-29101 { width: 100%; height: 400px; border-top: none; border-top-right-radius: 10px; border-top-left-radius: 10px; box-shadow: 0 0 4px 0 #5B2E4A; } .media-29101 img { margin-bottom: 20px; height: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; } } /Appointment Form/ #appointment form{ width: 100%; box-shadow: 0 0 4px 0 #5B2E4A; } #appointment form input{ color: #C95E4F !important; border: 1px solid #C95E4F !important; } #appointment form textarea{ border: 1px solid #C95E4F !important; } #appointment form select{ border: 1px solid #C95E4F !important; } #appointment form select{ color: #C95E4F !important; } #appointment form label{ background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .form-services { color: white; font-weight: bold; font-size: 25px; padding: 5px; width: 80%; border-radius: 5px; text-align: center; text-transform: uppercase; margin-top: 10px !important; box-shadow: 0 0 4px 0 #5B2E4A; background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { #appointment form{ width: 100%; height: 620px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } } .form-services { color: white; font-weight: bold; font-size: 25px; padding: 10px; width: 80%; border-radius: 5px; text-align: center; text-transform: uppercase; background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } / If the screen size is 600px wide or less, set the font-size of <div> to 30px / @media screen and (max-width: 600px) { #appointment form{ margin-top: 0px; margin-bottom: 25px; height: 800px; border-top: none; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 0 4px 0 #5B2E4A; } .appoint-img { width: 100%; border-bottom: none; border-top-right-radius: 10px; border-top-left-radius: 10px; box-shadow: 0 0 4px 0 #5B2E4A; } .form-services { color: white; font-weight: bold; font-size: 20px; padding: 6px; width: 80%; border-radius: 5px; text-align: center; text-transform: uppercase; margin-top: -20px !important; box-shadow: 0 0 4px 0 #5B2E4A; background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } } /News Thumb/ .news-thumb { box-shadow: 0 0 4px 0 #799395; } .news-info p{ text-align: justify; text-justify: auto; } .news-info h3 { text-align: center; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .h3 h3 { text-align: center; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-animation: gradient 15s ease infinite !important; animation: gradient 15s ease infinite !important; } #google-map { box-shadow: 0 0 4px 0 #C95E4F; } /Footer/ footer h4{ color: #C95E4F; } .footer-thumb { text-align: justify; text-justify: auto; } /Stories Info/ .stories-info span{ margin-left: -10px; } .stories-info h5{ margin-left: -10px; color: #C95E4F; } /Angle up button/ .angle-up-btn a { border: 1px solid #f2f2f2; border-radius: 3px; font-size: 20px; color: white; display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 38px; transition: transform 0.1s ease-in; transform: translateX(0); background: linear-gradient(-95deg, #0D2F31, #124448, #799395, #163C3F); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } /Scroll Whatsapp/ .scrollWhatsapp a { position: fixed; bottom: 10px; left: 10px; border-radius: 3px; font-size: 20px; color: white; text-align: center; width: 40px; height: 40px; line-height: 38px; transition: transform 0.1s ease-in; transform: translateX(0); background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; z-index: 99999; } /Auto Pop Up/ .popup{ position: fixed; background-color: #ffffff; width: 300px; padding: 30px 40px; transform: translate(-50%,-50%); left: 50%; top: 55%; border-radius: 8px; font-family: "Poppins",sans-serif; display: none; text-align: center; box-shadow: 0 0 4px 0 #5B2E4A; z-index: 99999; } .popup button{ display: block; float: right; margin-top: -30px; margin-right: -40px; font-size: 30px; border-radius: 100%; width: 40px; height: 40px; border: none; outline: none; cursor: pointer; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .popup h2{ font-size: 18px; text-transform: uppercase; margin-top: 0px; color: white; padding: 10px; width: 100%; border-radius: 5px; box-shadow: 0 0 4px 0 #C95E4F; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } .popup p{ font-size: 14px; text-align: justify; justify-content: auto; margin: 20px 0; line-height: 25px; } .popup b{ font-size: 14px; text-align: center !important; line-height: 25px; margin-left: -5px; background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } .popup a{ color: white; padding: 10px 25px; border-radius: 5px; box-shadow: 0 0 4px 0 #5B2E4A; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .popup{ position: fixed; background-color: #ffffff; width: 420px; padding: 30px 40px; transform: translate(-50%,-50%); left: 50%; top: 60%; border-radius: 8px; font-family: "Poppins",sans-serif; display: none; text-align: center; z-index: 99999; } .popup button{ display: block; float: right; margin-top: -25px; margin-right: -30px; background-color: transparent; font-size: 30px; color: #ffffff; border-radius: 100%; width: 40px; height: 40px; border: none; outline: none; cursor: pointer; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } .popup h2{ font-size: 25px; text-transform: uppercase; margin-top: 0px; padding: 10px; width: 100%; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } .popup p{ font-size: 16px; text-align: justify; justify-content: auto; margin: 20px 0; line-height: 25px; } .popup b{ font-size: 14px; text-align: center !important; line-height: 25px; margin-left: -5px; } .popup a{ color: white; padding: 15px 25px; border-radius: 5px; box-shadow: 0 0 4px 0 #5B2E4A; background: linear-gradient(80deg, #0D2F31, #124448, #163C3F, #799395); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } } /Accordion/ button.course-accordion { cursor: pointer; color: #95434C; font-size: 14px; font-weight: 500; margin-left: 20px; -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; background: none; outline: none; border: none; transition: 0.4s; } /When the button is active or mouse hovers/ button.course-accordion.active, button.course-accordion:hover { } /button not active/ button.course-accordion:after { content: '\002B'; font-weight: bold; float: right; margin-left: 25px; background: linear-gradient(-45deg, #5B2E4A, #C95E4F, #95434C, #79364A); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; -webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite; } / minus button / button.course-accordion.active:after { content: "\2212"; } div.course-panel { padding: 0 18px; background-color: transparent; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; width: 100%; font-family: "Raleway"; font-size: 15px; line-height: 1.6em; letter-spacing: .4px; font-weight: 400; font-style: normal; color: rgba(0,0,0,.88); overflow: auto; } div.course-panel p a{ text-decoration: underline !important; } div.course-panel p{ margin-top: -20px; text-decoration: underline !important; } div.course-panel p:nth-child(1){ margin-top: -10px; } / If the screen size is 768px wide or more / @media screen and (min-width: 768px) { button.course-accordion { margin-top: 20px; margin-left: 30px; font-size: 20px; } div.course-panel a{ font-size: 20px !important; text-decoration: underline; } div.course-panel p{ margin-top: 0px; } div.course-panel p:nth-child(1){ margin-top: 0px; } } /Consult Images/ .consult-img { padding: 10px; width: 100%; height: 300px; } .img-responsive-section { float: right; width: 49%; height: 100%; } .img-responsive-section img{ border-top-right-radius: 20px; } .consult-img-responsive-section { float: left; width: 49%; height: 100%; } .consult-img .img-responsive{ width: 100%; } .consult-img-responsive { width: 100%; margin-bottom: 2px; } .consult-img-responsive-section img:nth-child(1){ border-left: 1px solid #C95E4F; border-top: 1px solid #C95E4F; border-top-left-radius: 20px; } .consult-img-responsive-section img:nth-child(2){ border-left: 1px solid #C95E4F; border-bottom: 1px solid #C95E4F; border-bottom-left-radius: 20px; } /Directions/ .consult-img .directions { } .consult-img .directions a{ color: white; padding: 10px 16px; border-radius: 5px; background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 400% 400%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } / If the screen size is 601px wide or more, set the font-size of <div> to 80px / @media screen and (min-width: 601px) { .consult-img { padding: 10px; width: 100%; height: 1000px; } .consult-img-responsive { margin-bottom: 13px; } } / If the screen size is 600px wide or less, set the font-size of <div> to 30px / @media screen and (max-width: 600px) { .consult-img-responsive { } } /Placeholder Color/ ::placeholder { background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } :-ms-input-placeholder { / Internet Explorer 10-11 / background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } ::-ms-input-placeholder { / Microsoft Edge / background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; } </style> </head> <!--Start of Tawk.to Script--> <script type="text/javascript"> var Tawk_API=Tawk_API\|\|{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://embed.tawk.to/62865b8e7b967b1179903c50/1g3edbaa7'; s1.charset='UTF-8'; s1.setAttribute('crossorigin',''); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Tawk.to Script--> <body id="top" data-spy="scroll" data-target=".navbar-collapse" data-offset="50"> <div class="navbarr"> <a href="#" class="navbar-brand"><img class="icon-img heartbeat" src="images/logo.png"> <img src="images/logo3.jpg"></a> <div class="navbarr-nav"> <div class="head-icons" align="center"> <div class="appointment-btn"><a href="#appointment">Make an appointment</a></div> <div class="head-icons-container"> <a href="tel:+256773942500"><i class="fa fa-phone"></i></a> <a href="mailto:info@vianmedicalcenter.com"><i class="fa fa-envelope"></i></a> <a href="https://maps.app.goo.gl/2MLhG4LUXRtZyshYA"><i class="fa fa-map-marker"></i></a> </div> </div> <a href="#" class="home">Home</a> <div class="subnav"> <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <div class="sub-content background-overlay-white-0"> <a href="services/GeneralMedicine">General Medicine</a> <a href="services/Orolaryngology">Orolaryngology</a> <a href="services/Laboratory">Laboratory</a> <a href="services/Pediatric">Pediatric Care</a> <a href="services/Ultrasound">Ultrasound Scan</a> <a href="services/Gynecology">Gynecology</a> <a href="services/InternalMedicine">Internal Medicine</a> <a href="services/Orthopedic">Orthopedic</a> <a href="services/Surgery">Surgery</a> <a href="services/Theater">Theater</a> <a href="services/Urology">Urology</a> <a href="services/Checkup">Body Checkup</a> <a href="services/Immunization">Immunization</a> <a href="services/Consultation">Consultation</a> <a href="services/Emergency">Emergency</a> </div> </div> </div> <div class="navbarr-nav-links"> <a href="about">About Us</a> <a href="Contact Us">Contact Us</a> </div> </div> </div> <p class="username">If you have a health problem with your Ear, Nose & Throat that needs medical or surgical treatment, we recommend you see our Orolaryngologist (surgeon who specialises in ENT problems).</p> <!-- MENU --> <section class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <div class="head-icons" align="center"> <a href="tel:+256773942500"><i class="fa fa-phone"></i></a> <a href="mailto:info@vianmedicalcenter.com"><i class="fa fa-envelope"></i></a> <a href="https://maps.app.goo.gl/2MLhG4LUXRtZyshYA"><i class="fa fa-map-marker"></i></a> </div> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> </button> <!-- lOGO TEXT HERE --> <a href="#" class="navbar-brand"><img class="icon-img heartbeat" src="images/logo.png"> <img src="images/logo3.jpg"></a> </div> <!-- MENU LINKS --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="smoothScroll">Home</a></li> <li> <button class="course-accordion"> Services </button> <!-- This div holds the content to be displayed--> <div class="course-panel"> <p> <a href="services/GeneralMedicine">General Medicine</a> </p> <p> <a href="services/Orolaryngology">Orolaryngology</a> </p> <p> <a href="services/Laboratory">Laboratory</a> </p> <p> <a href="services/Pediatric">Pediatric Care</a> </p> <p> <a href="services/Ultrasound">Ultrasound Scan</a> </p> <p> <a href="services/Gynecology">Gynecology</a> </p> <p> <a href="services/InternalMedicine">Internal Medicine</a> </p> <p> <a href="services/Orthopedic">Orthopedic</a> </p> <p> <a href="services/Surgery">Surgery</a> </p> <p> <a href="services/Theater">Theater</a> </p> <p> <a href="services/Urology">Urology</a> </p> <p> <a href="services/Checkup">Body Checkup</a> </p> <p> <a href="services/Immunization">Immunization</a> </p> <p> <a href="services/Consultation">Consultation</a> </p> <p> <a href="services/Emergency">Emergency</a> </p> </div> </li> <li><a href="about" class="smoothScroll">About Us</a></li> <li><a href="Contact Us" class="smoothScroll">Contact Us</a></li> <li class="appointment-btn"><a href="#appointment">Make an appointment</a></li> </ul> </div> </div> </section> <!-- HOME --> <section id="home" class="slider" data-stellar-background-ratio="0.5"> <div class="container"> <div class="row"> <div class="owl-carousel owl-theme"> <div class="item item-first" style="background-image: url('images/stock/s8.jpg');background-size: cover;background-position: top;background-size: cover;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3 class="">Committed Medical Professionals Delivering</h3> <h1 class="">Over <span class="count percent" data-count="15">0</span>+ Medical Services</h1> <a href="https://wa.me/256708142139" class="section-btn btn btn-default smoothScroll">Talk To Our Doctors</a> </div> </div> </div> <div id="counter" class="item item-second" style="background-image: url('images/location/vian1.jpg');background-size: cover;background-position: top;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3 class="">A Service</h3> <h1 class="">Full Of Life</h1> <a href="about" class="section-btn btn btn-default btn-blue smoothScroll">What We Do</a> </div> </div> </div> <div class="item item-third" style="background-image: url('images/stock/s7.jpg');background-size: cover;background-position: center;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3>Live Healthier With A</h3> <h1>Professional's Guidance</h1> <a href="services/Consultation" class="section-btn btn btn-default btn-gray smoothScroll">Consult Us</a> </div> </div> </div> <div class="item item-fourth" style="background-image: url('images/stock/s4.jpg');background-size: cover;background-position: center;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3 class="">Our Specialists Are Always</h3> <h1>Available</h1> <a href="tel:+256773942500" class="section-btn btn btn-default btn-blue smoothScroll">Call Us Now</a> </div> </div> </div> <div class="item item-fifth" style="background-image: url('images/stock/s6.jpg');background-size: cover;background-position: center;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3 class="wow fadeInUp" data-wow-delay="0.8s">Avoid Queues</h3> <h1>Simply Tap And</h1> <a href="appointments" class="section-btn btn btn-default btn-gray smoothScroll">Make Appointment</a> </div> </div> </div> <div class="item item-sixth" style="background-image: url('images/stock/s5.jpg');background-size: cover;background-position: center;"> <div class="caption"> <div class="col-md-offset-1 col-md-10"> <h3 class="">Full Body</h3> <h1>Check Ups</h1> <a href="about" class="section-btn btn btn-default smoothScroll">And More <i class="fa fa-caret-right fa-fade" style="margin-left: 15px;"></i></a> </div> </div> </div> </div> </div> </div> </section> <br> <br> <br> <br> <!--Scroll Whatsapp--> <div class="scrollWhatsapp"><a href="https://wa.me/256708142139?text=https://vianmedicalcenter.com Let's Chat %0D%0A %0D%0A Hello, What can we help you with? %0D%0A %0D%0A" title="Vian Medical Whatsapp Support"><i class="fa fa-whatsapp"></i></a></div> <!--Services Grid--> <h2 align="center" data-aos="fade-up" class="grid-services" style="background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d);background-size: 200% 200%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: gradient 15s ease infinite;-webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite;">Medical Services</h2> <br> <div align="center"> <div id="outer-grid" class="background-overlay-white" style="background-image: url('images/12.jpeg');"> <div data-aos="fade-up"> <a href="services/GeneralMedicine"> <img src="images/services/icons/generalmedicine.png" alt="General Medicine"> <h4> General Medicine </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Orolaryngology"> <img src="images/services/icons/ent.png" alt="Orolaryngology"> <h4> Orolaryngology </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Pediatric"> <img src="images/services/icons/pediatric.png" alt="Pediatric Care"> <h4> Pediatric Care </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Gynecology"> <img src="images/services/icons/gynecology.png" alt="Gynecology"> <h4> Gynecology </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Radiology"> <img src="images/services/icons/radiology.png" alt="Radiology"> <h4> Radiology </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Urology"> <img src="images/services/icons/urology.png" alt="Urology"> <h4> Urology </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Surgery"> <img src="images/services/icons/surgery.png" alt="Surgery"> <h4> Surgery </h4> </a> </div> <div data-aos="fade-up"> <a href="services/InternalMedicine"> <img src="images/services/icons/internalmedicine.png" alt="Internal Medicine"> <h4> Internal Medicine </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Theater"> <img src="images/services/icons/theater.png" alt="Theater"> <h4> Theater </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Orthopedic"> <img src="images/services/icons/orthopedic.png" alt="Orthopedic"> <h4> Orthopedic </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Laboratory"> <img src="images/services/icons/lab.png" alt="Laboratory"> <h4> Laboratory </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Ultrasound"> <img src="images/services/icons/ultrasound.png" alt="Ultra Scan"> <h4> Ultra Scan </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Checkup"> <img src="images/services/icons/bodycheck.png" alt="Body Checkup"> <h4> Body Checkup </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Immunization"> <img src="images/services/icons/immunization.png" alt="Immunization"> <h4> Immunization </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Consultation"> <img src="images/services/icons/consult.png" alt="Emergency"> <h4> Consultation </h4> </a> </div> <div data-aos="fade-up"> <a href="services/Emergency"> <img src="images/services/icons/emergency.png" alt="Emergency"> <h4> Emergency </h4> </a> </div> </div> </div> <br> <hr> <br> <!-- ABOUT --> <section id="about" class="background-overlay-black" style="background: url('images/vian-hero.png') no-repeat top center;background-size: cover;padding-top: 150px;padding-bottom: 150px;"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="about-info"> <h2 class="wow fadeInUp" data-wow-delay="0.6s" style="color: white;">Welcome to our medical platform</h2> <div class="wow fadeInUp" data-wow-delay="0.8s" style="text-align: justify;justify-content: auto;"> <p style="color: white;">We believe in Integrity, Efficiency & Excellence. Our specialists are both clinical physicians & surgeons who serve people with health related problems.</p> <p style="color: white;">We help with any problems that relate to body infections, disorders, illnesses, respiratory, surgical, normal or abnormalities, sleep issues like snoring & so much more.</p> <p style="color: white;">Children who are struggling with birth defects or developmental issues that are causing problems as they grow, whether it's asthma or an infection can find relief here.</p> </div> <hr> <br> <br> <div class="wow fadeInUp" data-wow-delay="0.8s"> <img src="images/logo.png" class="profile wow fadeInUp" data-wow-delay="1s"><b style="color: white;">ian Medical Center</b> </div> <p class="profile wow fadeInUp" data-wow-delay="1.2s" style="color: white;text-align: justify;justify-content: auto;" id="specialities">If you have a health problem with your Ear, Nose & Throat that needs medical or surgical treatment, we recommend you see our Orolaryngologist (surgeon who specialises in ENT problems).</p> </div> </div> </div> </div> </section> <br> <!-- Specialities --> <section id="news" data-stellar-background-ratio="2.5"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <!-- SECTION TITLE --> <div class="section-title wow fadeInUp" data-wow-delay="0.1s"> <h2 data-aos="fade-up" class="services" style="background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d);background-size: 200% 200%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: gradient 15s ease infinite;-webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite;">Special Services</h2> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb wow fadeInUp" data-wow-delay="0.4s"> <img src="images/2.png" class="img-responsive" alt="Ears (Otology/Neurotology)"> <div class="news-info"> <h3>Ears (Otology/Neurotology)</h3> <p>Ears have a crucial role they play, not just to hear but also to balance. From hearing loss to ringing in the ears, ear infections, or trouble with balance & many more ear issues can be managed via our medical center.</p> <ul class="social-icon"> <li><a href="tel:+256773942500" class="fa fa-phone"></a></li> <li><a href="https://wa.me/256708142139?text=Otology/Neurotology" class="fa fa-whatsapp"></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb wow fadeInUp" data-wow-delay="0.6s"> <img src="images/3.png" class="img-responsive" alt="Nose (Rhinology)"> <div class="news-info"> <h3>Nose (Rhinology)</h3> <p>From allergies to sinus headaches and migraines to nasal issues like allergies, sinusitis, or growths as well as deviated septum treatment, our medical center is the place to go for issues that relate to the nosal infections and deformatties.</p> <ul class="social-icon"> <li><a href="tel:+256773942500" class="fa fa-phone"></a></li> <li><a href="https://wa.me/256708142139?text=Rhinology" class="fa fa-whatsapp"></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb wow fadeInUp" data-wow-delay="0.8s"> <img src="images/4.png" class="img-responsive" alt="Throat (Laryngology)"> <div class="news-info"> <h3>Throat (Laryngology)</h3> <p>Problems with airways or sore throats as well as conditions such as gastroesophageal reflux disease & throat problems like tonsillitis, difficulty swallowing, & voice issues can all be managed by our ENT specialist. There's a variety of throat treatment remedies.</p> <ul class="social-icon"> <li><a href="tel:+256773942500" class="fa fa-phone"></a></li> <li><a href="https://wa.me/256708142139?text=Laryngology" class="fa fa-whatsapp"></a></li> </ul> </div> </div> </div> </div> </div> </section> <br> <!--Carousel Start--> <!--Autoslides--> <div align="center"> <div class="slideshow-container"> <div class="slideshow-inner"> <div class="mySlides fad"> <img src="images/stock/1.jpg"/> <div class="info-text"> <div align="center" > <div class="bounce-top"> Integrity </div> <div class="bounce-left" style="animation-delay:1s;"> Efficiency </div> <div class="bounce-bottom"> Excellence </div> </div> </div> </div> <div class="mySlides fad"> <img src="images/stock/7.jpg"/> <div class="info-text"> <div class="animate1"> <h6 class="animate__animated animate__lightSpeedInLeft">Delivering</h6> <h6 class="animate__animated animate__bounceInDown animate__delay-500ms">Service</h6> <h6 class="animate__animated animate__lightSpeedInRight animate__delay-1s">With Care</h6> <hr class="animate__animated animate__lightSpeedInRight animate__delay-1500ms"> </div> </div> </div> <div class="mySlides fad"> <img src="images/stock/3.jpg"/> <div class="info-text"> <div class="animate1"> <h6 class="animate__animated animate__tada">A Service</h6> <h6 class="animate__animated animate__bounceInDown">Full of Life</h6> <hr class="animate__animated animate__bounceInLeft animate__delay-1s"> </div> </div> </div> <div class="mySlides fad"> <img src="images/stock/4.jpg"/> <div class="info-text"> <div class="animate1"> <h6 class="animate__animated animate__fadeInDownBig"> Live & Love</h6> <h6 class="animate__animated animate__bounceInDown animate__delay-500ms"> Empowering Healthier</h6> <h6 class="animate__animated animate__lightSpeedInRight animate__delay-1s">& Fuller Lives</h6> <hr class="animate__animated animate__lightSpeedInRight animate__delay-1500ms"> </div></div> </div> <div class="mySlides fad"> <img src="images/stock/5.jpg"/> <div class="info-text"> <div class="animate1"> <h6 class="animate__animated animate__fadeInDownBig">Touching Lives With</h6> <h6 class="animate__animated animate__fadeInLeftBig animate__delay-500ms">Prompt & Precise</h6> <h6 class="animate__animated animate__fadeInUpBig animate__delay-1s">Treatment</h6> <hr class="animate__animated animate__fadeInLeftBig animate__delay-1500ms"> </div> </div> </div> <div class="mySlides fad"> <img src="images/stock/6.jpg"/> <div class="info-text"> <div class="animate1"> <h6 class="animate__animated animate__jackInTheBox">Top Quality</h6> <h6 class="animate__animated animate__bounceInLeft animate__delay-500ms">Healthcare For</h6> <h6 class="animate__animated animate__backInUp animate__delay-1s">Children & Adults</h6> <hr class="animate__animated animate__backInUp animate__delay-1500ms"> </div> </div> </div> </div> </div> <a class="prev" onclick='plusSlides(-1)'>❮</a> <a class="next" onclick='plusSlides(1)'>❯</a> </div> <br/> <div style='text-align: center;'> <span class="dot" onclick='currentSlide(1)'></span> <span class="dot" onclick='currentSlide(2)'></span> <span class="dot" onclick='currentSlide(3)'></span> <span class="dot" onclick='currentSlide(4)'></span> <span class="dot" onclick='currentSlide(5)'></span> <span class="dot" onclick='currentSlide(6)'></span> </div> </div> </div> <script type="text/javascript"> var slideIndex = 1; var myTimer; var slideshowContainer; window.addEventListener("load",function() { showSlides(slideIndex); myTimer = setInterval(function(){plusSlides(1)}, 3000); //COMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME slideshowContainer = document.getElementsByClassName('slideshow-inner')[0]; //UNCOMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME // slideshowContainer = document.getElementsByClassName('slideshow-container')[0]; slideshowContainer.addEventListener('mouseenter', pause) slideshowContainer.addEventListener('mouseleave', resume) }) // NEXT AND PREVIOUS CONTROL function plusSlides(n){ clearInterval(myTimer); if (n < 0){ showSlides(slideIndex -= 1); } else { showSlides(slideIndex += 1); } //COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME if (n === -1){ myTimer = setInterval(function(){plusSlides(n + 2)}, 2500); } else { myTimer = setInterval(function(){plusSlides(n + 1)}, 2500); } } //Controls the current slide and resets interval if needed function currentSlide(n){ clearInterval(myTimer); myTimer = setInterval(function(){plusSlides(n + 1)}, 2500); showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("activ", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " activ"; } pause = () => { clearInterval(myTimer); } resume = () =>{ clearInterval(myTimer); myTimer = setInterval(function(){plusSlides(slideIndex)}, 2500); } </script> <br> <hr> <br> <div class="consult-img wow fadeInUp"> <div class="consult-img-responsive-section"> <img src="images/location/vian20.jpeg" class="consult-img-responsive" alt="consultation"> <img src="images/location/vian15.jpg" class="consult-img-responsive" alt="consultation"> </div> <div class="img-responsive-section"> <img src="images/stock/consult.jpg" class="img-responsive" alt="consultation"> </div> <br> <div class="directions" align="center"> <a href="https://maps.app.goo.gl/2MLhG4LUXRtZyshYA"> Get Directions <i class="fa fa-map-marker"></i></a> </div> </div> <br> <br> <!-- Diseases & Disorders --> <section id="news" data-stellar-background-ratio="2.5"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <!-- SECTION TITLE --> <div class="section-title wow fadeInUp" data-wow-delay="0.1s"> <h2 data-aos="fade-up" class="grid-services" style="background: linear-gradient(-95deg, #0D2F31, #124448, #C95E4F, #a84d4d);background-size: 200% 200%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: gradient 15s ease infinite;-webkit-animation: gradient 15s ease infinite;animation: gradient 15s ease infinite;">Diseases & Disorders</h2> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb h3 wow fadeInUp" data-wow-delay="0.4s"> <img src="images/7.png" class="img-responsive" alt="Allergy"> <div class="news-info h3"> <h3>Allergy</h3> <p>Our doctors treat environmental allergies (like pollen or pet dander) with medicine or a series of shots called immunology including food allergies.</p> </div> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb h3 wow fadeInUp" data-wow-delay="1s"> <img src="images/5.png" class="img-responsive" alt="Orolaryngology, ENT"> <div class="news-info h3"> <h3>Head and neck</h3> <p>If you have a tumor in your nose, sinuses, mouth, throat, voice box, or upper esophagus, our specialist can help you. Get the easiest and fastest solution! </p> </div> </div> </div> <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;"> <!-- NEWS THUMB --> <div class="news-thumb h3 wow fadeInUp" data-wow-delay="1.2s"> <img src="images/9.png" class="img-responsive" alt="Otology"> <div class="news-info h3"> <h3>Otology & Neurotology</h3> <p>If you have any kind of issue with your ears, our specialists can help. They treat conditions like infections, hearing loss, dizziness, and ringing or buzzing in your ears (tinnitus).</p> </div> </div> </div> </div> </div> </section> <!-- MAKE AN APPOINTMENT --> <section id="appointment" data-stellar-background-ratio="3" data-wow-delay="0.4s"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6" data-wow-delay="0.4s"> <div class="site-section bg-left-half mb-5"> <div class="appoint-img"> <div class="owl-carousel owl-2"> <div class="media-29101"> <img src="images/slides/2.jpg" alt="Appointments" class="img-fluid"> </div> <div class="media-29101"> <img src="images/slides/2.jpg" alt="Appointments" class="img-fluid"> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <!-- CONTACT FORM HERE --> <form id="appointment-form" role="form" method="post" action="appointments/appointments/index.php"> <br> <!-- SECTION TITLE --> <div class="section-title wow fadeInUp" data-wow-delay="0.4s" align="center"> <h2 class="form-services">Make an appointment</h2> </div> <br> <div class="wow fadeInUp" data-wow-delay="0.4s"> <div class="col-lg-12 col-md-12 col-sm-12 username"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" placeholder="Username" value=""> </div> <div class="col-md-6 col-sm-6"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Full Name" required> </div> <div class="col-md-6 col-sm-6" data-wow-delay="0.4s"> <label for="telephone">Phone Number</label> <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" required> </div> <div class="col-md-12 col-sm-12" data-wow-delay="0.4s"> <label for="email">Email</label> <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required> <div class="col-md-6 col-sm-6" data-wow-delay="0.4s"> <label for="date">Select Date</label> <input type="date" name="dates" class="form-control" required> </div> <div class="col-md-6 col-sm-6" data-wow-delay="0.4s"> <label for="select">Select Service</label> <select class="form-control" name="service" required> <option value="Null">Choose an option</option> <option value="General Medicine">General Medicine</option> <option value="Orolaryngology">Orolaryngology</option> <option value="Pediatric Care">Pediatric Care</option> <option value="Gynecology">Gynecology</option> <option value="Radiology">Radiology</option> <option value="Urology">Urology</option> <option value="Surgery">Surgery</option> <option value="Internal Medicine">Internal Medicine</option> <option value="Theater">Theater</option> <option value="Orthopedic">Orthopedic</option> <option value="Laboratory">Laboratory</option> <option value="Ultra Sound">Ultra Sound</option> <option value="Body Checkup">Body Checkup</option> <option value="Immunization">Immunization</option> <option value="Consultation">Consultation</option> </select> </div> <div class="col-md-12 col-sm-12" data-wow-delay="0.4s"> <label for="Message">Additional Message</label> <textarea class="form-control" rows="5" id="message" name="message" placeholder="Message"></textarea> <button type="submit" class="form-control" id="cf-submit" name="submit">Book Now</button> </div> </div> </form> </div> </div> </div> </section> <br> <!-- GOOGLE MAP --> <section id="google-map"> <!-- How to change your own map point 1. Go to Google Maps 2. Click on your location point 3. Click "Share" and choose "Embed map" tab 4. Copy only URL and paste it within the src="" field below --> <iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d31918.00539628272!2d32.578105867115475!3d0.33364308442058854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d0.3211264!2d32.5910528!4m5!1s0x177dbbc83e543819%3A0xf687d3df061ae4d1!2sVian%20Medical%20Center%2C%20Upper%20Naguru%20Rd%2C%20Kampala!3m2!1d0.34999179999999996!2d32.605908!5e0!3m2!1sen!2sug!4v1648914419106!5m2!1sen!2sug" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </section> <!-- FOOTER --> <footer class="col-md-12 col-sm-12 wow fadeInUp" data-stellar-background-ratio="5" data-wow-delay="0.4s"> <div class="row"> <div class="col-md-4 col-sm-4" id="common"> <div class="footer-thumb"> <h4 class="wow fadeInUp" data-wow-delay="0.4s">Recommended</h4> <div class="latest-stories wow fadeInUp" data-wow-delay="0.4s"> <div class="stories-image"> <img src="images/16.png" class="img-responsive" alt=""> </div> <div class="stories-info"> <h5>Early Sleep</h5> <span>Early to bed leads to a healthy mind</span> </div> </div> <div class="latest-stories wow fadeInUp" data-wow-delay="0.8s"> <div class="stories-image"> <img src="images/19.png" class="img-responsive" alt=""> </div> <div class="stories-info"> <h5>Regular Exercise</h5> <span>Motion activities keep you sharp/healthy</span> </div> </div> <div class="latest-stories wow fadeInUp" data-wow-delay="1.2s"> <div class="stories-image"> <img src="images/VI.gif" class="img-responsive" alt=""> </div> <div class="stories-info"> <h5>Balanced Diet</h5> <span>Have a vegetable on a side of your meal</span> </div> </div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="footer-thumb"> <h4 class="wow fadeInUp" data-wow-delay="0.4s">Overview</h4> <p>Our promise is a quality-driven service, and Vian Medical Center aims for the highest standards in patient care and surgical expertise nationally and worldwide. </p> </div> <br> <div class="footer-thumb"> <div class="opening-hours"> <h4 class="wow fadeInUp" data-wow-delay="0.4s">Working Hours</h4> <p>Monday - Sunday: <span>Always Open</span></p> <p>Consultaion: <span>8AM - 8PM</span></p> <p><i class="fa fa-medkit"></i> Emergency</p> </div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="footer-thumb"> <h4 class="wow fadeInUp" data-wow-delay="0.4s">Contact Info</h4> <div class="contact-info"> <p class="wow fadeInUp"><i class="fa fa-phone"></i> <a href="tel:+256773942500">+256 773 942 500</a></p> <p class="wow fadeInUp"><i class="fa fa-info"></i> <a href="mailto:info@vianmedicalcenter.com">info@vianmedicalcenter.com</a></p> </div> </div> </div> <hr> <div class="col-md-4 col-sm-4"> <div class="footer-thumb"> <div class="contact-info"> <p class="wow fadeInUp"><i class="fa fa-commenting"></i> <a href="mailto:help@vianmedicalcenter.com">help@vianmedicalcenter.com</a></p> <p class="wow fadeInUp"><i class="fa fa-pencil"></i> <a href="mailto:appointments@vianmedicalcenter.com">appointments@vianmedicalcenter.com</a></p> </div> <ul class="social-icon wow fadeInUp"> <li><a href="https://facebook.com/vianmedical" class="fa fa-facebook-square" attr="facebook icon"></a></li> <li><a href="https://twitter.com/vianmedical" class="fa fa-twitter"></a></li> <li><a href="https://instagram.com/vianmedical" class="fa fa-instagram"></a></li> <li><a href="https://wa.me/256708142139" class="fa fa-whatsapp"></a></li> </ul> </div> </div> <div class="col-md-12 col-sm-12 border-top"> <div class="col-md-4 col-sm-6"> <div class="copyright-text"> <p align="center">Copyright © <script>document.write(new Date().getFullYear());</script> <a href="#top">Vian Medical Center</a></p> </div> </div> <div class="col-md-6 col-sm-6"> <div class="footer-link"> <a href="about">About Us</a> <a href="terms">Terms & Conditions</a> <a href="privacy">Privacy Policy</a> <a href="Contact Us">Contact Us</a> </div> </div> <div class="col-md-2 col-sm-2 text-align-center"> <div class="angle-up-btn"> <a href="#top" class="smoothScroll wow fadeInUp" data-wow-delay="1.2s"><i class="fa fa-angle-up"></i></a> </div> </div> </div> </div> </div> </footer> <div class="copyright-text"> <p style="font-size: 10px;color: grey;text-align: center;">Powered by <a href="https://customassistinc.com" style="color: grey;">Custom Assist Inc.</a></p> </div> <!-- SCRIPTS --> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/jquery.stellar.min.js"></script> <script src="js/wow.min.js"></script> <script src="js/smoothscroll.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/custom.js"></script> <!-- DATA COUNTER ON SCROLL SCRIPT --> <script src="js/data-count.js"></script> <!--Auto Pop Up--> <div class="popup"> <button id="close">×</button> <h2>Medical Emergencies</h2> <p> Any acute injury or illness that poses an immediate risk to your life or wellbeing, we sometimes refer it to as a situation risking "life or limb". Let our qualified doctors offer you immediate assistance. </p> <b>Simply Tap</b> <br> <br> <div class="heartbeat"> <a href="tel:+256773942500">Call Now</a> </div> </div> <!--Auto Pop Up Script--> <script type="text/javascript"> window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector(".popup").style.display = "block"; }, 30000 ) }); document.querySelector("#close").addEventListener("click", function(){ document.querySelector(".popup").style.display = "none"; }); </script> <!--Accordion Js--> <script type="text/javascript"> var acc = document.getElementsByClassName("course-accordion"); var i; for (i = 0; i < acc.length; i++) { //when one of the buttons are clicked run this function acc[i].onclick = function() { //variables var panel = this.nextElementSibling; var coursePanel = document.getElementsByClassName("course-panel"); var courseAccordion = document.getElementsByClassName("course-accordion"); var courseAccordionActive = document.getElementsByClassName("course-accordion active"); /if pannel is already open - minimize/ if (panel.style.maxHeight){ //minifies current pannel if already open panel.style.maxHeight = null; //removes the 'active' class as toggle didnt work on browsers minus chrome this.classList.remove("active"); } else { //pannel isnt open... //goes through the buttons and removes the 'active' css (+ and -) for (var ii = 0; ii < courseAccordionActive.length; ii++) { courseAccordionActive[ii].classList.remove("active"); } //Goes through and removes 'activ' from the css, also minifies any 'panels' that might be open for (var iii = 0; iii < coursePanel.length; iii++) { this.classList.remove("active"); coursePanel[iii].style.maxHeight = null; } //opens the specified pannel panel.style.maxHeight = panel.scrollHeight + "px"; //adds the 'active' addition to the css. this.classList.add("active"); } }//closing to the acc onclick function }//closing to the for loop. </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.1.33 | Generation time: 1.4 | proxy | phpinfo | Settings