/* CSS RESET */
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* FONTS TYPE */
/* poppins-100 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 100;
src: url('../../assets/fonts/poppins/poppins-v24-latin-100.woff2') format('woff2');
}
/* poppins-200 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 200;
src: url('../../assets/fonts/poppins/poppins-v24-latin-200.woff2') format('woff2');
}
/* poppins-300 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url('../../assets/fonts/poppins/poppins-v24-latin-300.woff2') format('woff2');
}
/* poppins-regular - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../../assets/fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2');
}
/* poppins-italic - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
src: url('../../assets/fonts/poppins/poppins-v24-latin-italic.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: url('../../assets/fonts/poppins/poppins-v24-latin-500.woff2') format('woff2');
}
/* poppins-600 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 600; /* Tetap ada untuk penggunaan font-weight 600 */
src: url('../../assets/fonts/poppins/poppins-v24-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: bold; /* Trik: mengarahkan 'bold' ke file 600 */
src: url('../../assets/poppins/poppins-v24-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: italic;
font-weight: 600; /* Tetap ada untuk font-weight 600 italic; */
src: url('../../assets/fonts/poppins/poppins-v24-latin-600italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: italic;
font-weight: bold; /* Trik: mengarahkan 'bold italic' ke file 600 italic */
src: url('../../assets/fonts/poppins/poppins-v24-latin-600italic.woff2') format('woff2');
}
/* poppins-700 - latin */
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url('../../assets/fonts/poppins/poppins-v24-latin-700.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: italic;
font-weight: 700;
src: url('../../assets/fonts/poppins/poppins-v24-latin-700italic.woff2') format('woff2');
}
/* ICON RULE */
/* Gaya dasar untuk semua icon custom SVG */
.icon-custom {
display: inline-block;
width: 1.25em;
height: 1.25em;
vertical-align: middle;
position: relative;
top:0;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.icon-search {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='16.3' y1='16.3' x2='21' y2='21'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='16.3' y1='16.3' x2='21' y2='21'/%3E%3C/svg%3E");
}
.icon-menu {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}
.icon-gear {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-close {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
.icon-home {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3c-.46 0-.9.2-1.2.54L2.4 11.4c-.5.54-.12 1.43.6 1.43H5v6.5c0 .83.67 1.5 1.5 1.5h3c.28 0 .5-.22.5-.5v-4.5c0-.55.45-1 1-1h2c.55 0 1 .45 1 1v4.5c0 .28.22.5.5.5h3c.83 0 1.5-.67 1.5-1.5v-6.5h1.99c.73 0 1.11-.89.6-1.43l-8.4-7.86c-.3-.34-.74-.54-1.2-.54z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3c-.46 0-.9.2-1.2.54L2.4 11.4c-.5.54-.12 1.43.6 1.43H5v6.5c0 .83.67 1.5 1.5 1.5h3c.28 0 .5-.22.5-.5v-4.5c0-.55.45-1 1-1h2c.55 0 1 .45 1 1v4.5c0 .28.22.5.5.5h3c.83 0 1.5-.67 1.5-1.5v-6.5h1.99c.73 0 1.11-.89.6-1.43l-8.4-7.86c-.3-.34-.74-.54-1.2-.54z'/%3E%3C/svg%3E");
}
.icon-whatsapp {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}
/* BODY CSS RESET */
body {
font-family:'Poppins', sans-serif;
font-size:16px;
font-weight:400;
line-height:1.8;
padding:0;
margin:0;
color:#333;
background:#FFF;
counter-reset: Serial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width:767px){ body { line-height:1.6 } }
/* Attribute format */
a { color:#0055ff; text-decoration:none }
a:hover { color:#000; text-decoration:underline }
b, strong { font-weight:600 }
p { padding:0; margin:0 }
img { max-width:100%; height:auto; display:block }
small { font-size:0.8em }
sup { font-size:smaller; vertical-align:baseline; position:relative; top:-0.4em }
sub { font-size:smaller; vertical-align:baseline; position:relative; top:0.4em }
button {font-family: inherit;}
input, textarea, select { font-family: inherit; border:1px solid #999; }
select { width:99.5% }
/* Heading font */
h1,h2,h3,h4,h5,h6 {font-weight:600;line-height:1.4;padding:0;margin:0;color:#333}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#333}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color:#000}
h1 {font-size: 38px }
h2 {font-size: 28px }
h3 {font-size: 22px }
h4 {font-size: 20px }
h5 {font-size: 18px }
h6 {font-size: 16px }
@media screen and (max-width:1024px){
h1 {font-size: 32px }
h2 {font-size: 22px }
h3 {font-size: 20px }
h4 {font-size: 18px }
h5 {font-size: 16px }
h6 {font-size: 14px }
}
@media screen and (max-width:767px){
h1 {font-size: 28px}
h2 {font-size: 20px}
h3 {font-size: 18px}
h4 {font-size: 16px}
h5 {font-size: 15px}
h6 {font-size: 14px}
}
/* Font utility class for inline css */
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.poppins-regular-italic {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.poppins-semibold {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style: normal;
}
.poppins-bold {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
}
/* GENERAL ELEMENT */
/* Unselect content (event) */
.unselectable {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Overlay effect */
.overlay-effect { position:absolute; display:block; top:0; left:0; right:0; bottom:0; border-radius:5px; background:#000000; opacity:0 }
.overlay-effect:hover{opacity:0.1}
/* Ordered list */
.list-post ul { padding:0 0 0 30px; margin:0 }
.list-post ol { padding:0 0 0 30px; margin:0 }
.list-post ul li { list-style-type:disc; padding:0 0 10px 0; margin:0 }
.list-post ol li { list-style-type:decimal; padding:0 0 10px 5px; margin:0 }
/* Breadcrumbs format */
.breadcrumbs {
overflow:hidden;
font-size:12px;
font-weight: 300;
line-height:1.6;
padding:15px 0 13px 0;
background-color:#fff;
color:#333;
}
.breadcrumbs a {
color:#000;
font-weight: 400;
}
.breadcrumbs a:hover { text-decoration:underline }
.breadcrumbs span span + span::before {
content: "/";
margin: 0 12px;
color: #333;
font-weight: 300;
}
@media screen and (max-width:1280px){
.breadcrumbs { padding:15px 15px 13px 15px }
}
/* Social media button */
.social-share {
clear:both;
overflow:hidden;
font-size:18px;
text-align:center;
vertical-align:middle;
line-height:1em;
margin:20px 0
}
.social-share a { float:left; display:inline-block; width:18px; height:18px; padding:10px; border-radius:50%; margin:0 10px 0 0; color:#fff}
.social-share a:hover { text-decoration:none; background:#000 }
.socmed-share span {float:left; display:inline-block; font-size:14px; font-weight:bold; padding:10px 0; border-radius:50%; margin:0 10px 0 0; color:#666}
.facebook-share a { background:#3B5998 }
.twitter-share a { background:#55ACEE }
.linkedin-share a { background:#0E76A8 }
.whatsapp-share a { background:#25D366 }
.telegram-share a { background:#32AFED }
/* Page pagination */
.jwp-pagination {clear:both;padding:20px 0;margin:0 auto;text-align:center;}
.jwp-pagination span.number a, .jwp-pagination span.current {
display: inline-block;
text-decoration:none;
background: #fff;
color:#333;
border:1px solid #999;
border-radius: 50%;
cursor: pointer;
margin: 5px;
padding: 10px;
width:20px;
height:20px;
line-height:20px;
}
.jwp-pagination span.number a:hover, .jwp-pagination span.current { color:#fff; background: #999; border:1px solid #999; }
.jwp-pagination span.direction a{
display: inline-block;
text-decoration:none;
color:#666;
border:none;
cursor: pointer;
margin: 5px;
padding: 10px 5px;
width:10px;
height:20px;
line-height:20px;
}
.jwp-pagination span.direction a:hover {color:#000}
@media screen and (max-width:800px){
.jwp-pagination span.number a, .jwp-pagination span.direction a, .jwp-pagination span.current {
font-size:12px;
padding:5px;
margin:3px;
width:15px;
height:15px;
line-height:15px;
}
.jwp-pagination span.direction a {width:10px}
}
/* Searchbox main */
.search-box-main { position:relative; padding:0; margin:0; }
.search-box-main input {
width: 100%;
padding: 15px 25px;
padding-right: 90px;
font-family: 'Poppins', sans-serif;
font-size:14px;
color:#333;
outline: 0;
border-radius:30px;
}
.search-box-main input:hover,
.search-box-main input:focus {
outline: 0;
color:#333;
}
.search-box-main button {
position: absolute;
height: 100%;
right: 0;
top: 0;
border: none;
width: 75px;
font-size:18px;
color: #333;
background-color: transparent;
cursor: pointer;
}
.search-box-main button:hover {color:#034DAD}
.search-box-main .icon-search {
top:-2px;
}
/* Status button */
.running { background:#1e8e3e; color:#fff }
.scheduled { background:#fbbf10; color:#000 }
.expired { background:#c5221f; color:#fff }
.closed { background:#555; color:#fff }
.stopped { background:#000; color:#fff }
/* Tab style for event & page */
.tab .fa-user-friends{margin-right:5px}
.tab .fa-video{margin-right:5px}
.tab {overflow: hidden; margin-bottom:-1.5px; z-index:999;}
.tab button {
float: left;
outline: none;
cursor: pointer;
padding: 10px 20px;
margin-top:0;
margin-bottom:0;
margin-right:10px;
margin-left:0;
font: 14px 'Poppins', sans-serif;
font-weight:600;
letter-spacing:-0.5px;
text-transform:uppercase;
color:#7AADF0;
background-color: #033A7D;
border-top:2px solid #033A7D;
border-right:2px solid #033A7D;
border-left:2px solid #033A7D;
border-bottom:2px solid #033A7D;
border-radius:10px 10px 0 0;
}
.tab button:hover {
color:#fff;
background-color:#052F63;
border-top:2px solid #052F63;
border-right:2px solid #052F63;
border-left:2px solid #052F63;
border-bottom:2px solid #052F63;
}
.tab button.active {
color:#fff;
background-color: #034DAD;
border-top:2px solid #034DAD;
border-right:2px solid #034DAD;
border-left:2px solid #034DAD;
border-bottom:2px solid #034DAD;
}
.tabcontent { display: none; border-top: none; padding:0; margin:0;}
.tabcontent { border-top: none; }
/* Button style */
.button {
background-color: #1A73E8;
border: none;
color: #fff;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
line-height:1.2em;
margin: 0 auto;
cursor: pointer;
border-radius:5px;
-moz-border-radius:5px;
}
.button:hover { background:#034DAD; text-decoration:none}
.button-booking {
display: inline-block;
cursor: pointer;
text-decoration: none;
border: none;
color: #fff;
font-size:18px;
text-align:center;
width:90%;
padding:20px 5%;
margin:10px 0 0 0;
background:#1A73E8;
border-radius:3px
}
.button-booking:hover{text-decoration:none;color:#fff;background:#034DAD}
.button-booking sup{font-size:14px}
.button-closed {
display: inline-block;
cursor: pointer;
text-decoration: none;
border: none;
color: #fff;
font-size:20px;
text-align:center;
width:90%;
padding:20px 5%;
margin:0;
background:#333;
border-radius:3px;
}
.button-closed:hover{text-decoration:none;color:#fff;background:#000}
/* Load more button style */
.load-more {
clear:both;
font-size:14px;
text-align:center;
margin:20px auto 30px auto;
background-color:transparent;
}
.load-more a {padding:10px 30px; color:#666; border:1px solid #ccc; border-radius:30px }
.load-more a:hover {text-decoration:none; color:#333; background-color:#ddd; border:1px solid #ccc}
/* Element formatted posts */
.title-head h1 { clear:both; line-height:1.2em; color:#fff }
.postformat h2,
.postformat h3,
.postformat h4,
.postformat h5 { font-size:16px; margin:10px 0; color:#333 }
.postformat p { padding:0; margin:5px 0 15px 0 }
.postformat ul {
list-style:none;
padding:0 0 0 25px;
margin:0 0 20px 0
}
.postformat ul li {padding:0 0 5px 0 }
.postformat ul li:before {
font-size:14px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f00c";
display: inline-block;
margin-left: -20px;
width: 20px;
color:#999;
}
.postformat ol {
list-style:decimal;
padding:0 0 0 25px;
margin:0 0 20px 0;
}
.postformat ol li {padding:0 0 5px 3px }
/* Element show/hide toggle */
.toggle_title h2 {
cursor:pointer;
display:block;
font-size:16px;
font-weight: 700;
text-transform:uppercase;
padding:10px 15px;
margin:10px 0 0 0;
background:#E8E8E8;
color:#333;
transition: all 0.2s ease 0s;
}
.toggle_title h2:hover{ background:#CFCFCF}
.toggle_title h2:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f07b';
font-size: 14px;
color: #333;
float: left;
margin-right: 10px;
}
.toggle_title.active h2:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f07c';
float: left;
margin-right: 10px;
}
.toggle_title h2:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f067';
font-size: 16px;
color: #333;
float: right;
margin-right: 10px;
}
.toggle_title.active h2:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f068';
float: right;
margin-right: 10px;
}
.toggle_content {display:none; overflow: hidden; padding:0; margin:0; background:#F5F5F5 }
.toggle_content.show {display: block; padding:0; margin:0}
.toggle_content_boxed {
overflow:hidden;
font-size:0.9em;
line-height:1.6em;
padding:15px 35px 20px 15px;
}
.toggle_content_boxed p { padding:15px 0 5px 20px; margin:0 }
.toggle_content_boxed ul { padding:0 0 0 40px; margin:0 }
.toggle_content_boxed ul li { padding:5px 0 0 0; margin:0 }
.toggle_content_boxed ul li ul { padding:0 0 0 16px; margin:0 }
.toggle_content_boxed ul li:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size:14px;
content: "\f0da";
display: inline-block;
margin-left: -10px;
width: 13px;
}
.toggle_content_boxed ul li li:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size:5px;
content: "\f111";
display: inline-block;
margin-left: -10px;
vertical-align:top;
width: 13px;
}
.toggle_content_boxed ol { font-weight:600 }
.toggle_content_boxed ol li { padding:5px 0 0 5px; margin:0 }
.toggle_content_boxed ol li ul { font-weight:400; padding:0 0 0 7px; margin:0 }
.toggle_content_boxed ol li ul li { padding:5px 0 0 5px; margin:0 }
.toggle_content_boxed h3 {
font-size: 15px;
text-transform:uppercase;
line-height:1.6em;
padding:5px;
margin:10px 0 0 20px;
text-indent:-23px;
color:#444;
}
.toggle_content_boxed h3:before {
float: left;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f15c';
margin-right: 23px;
}
.toggle_content_boxed h4 {
font-size: 15px;
text-transform:capitalize;
line-height:1.6em;
padding:5px;
margin:0 0 0 20px;
text-indent:-23px;
color:#444;
}
.toggle_content_boxed h4:before {
float: left;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f138';
margin-right: 23px;
}
/* Modals essentials style */
.modal {
overflow:auto;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
display:none;
background-color:#000;
background-color:rgba(0, 0, 0, 0.7);
z-index:99999;
}
.modal-x{
float:right;
width:45px;
height:45px;
font-size:46px;
line-height:1em;
border: none;
color: #fff;
text-align: center;
vertical-align:middle;
text-decoration: none;
display: inline-block;
cursor: pointer;
background:#034396;
}
.modal-x:hover{text-decoration:none;color:#fff;background:#01316F;}
.modal-window {
position:relative;
background-color:#fff;
width:600px;
margin: 40px auto 20px auto;
}
@media screen and (max-width:600px){.modal-window{width: 90%;}}
.modal-window-header {overflow:hidden; background:#034DAD;}
.modal-window-header-title {
float:left;
font-size:15px;
font-weight:bold;
letter-spacing:-0.5px;
line-height:1em;
color:#fff;
padding:15px 20px;
margin:0;
}
.modal-window-header-title .fa-bookmark {margin-right:10px;}
.modal-window-body{padding:20px}
.modal-window-body ul{clear:both; list-style:none; padding:0 0 0 23px; margin:10px 0 20px 0}
.modal-window-body li{line-height:1.5em; padding:0 0 10px 0}
.modal-window-body li:before {
font-family: 'Font Awesome 5 Free';
font-size:14px;
font-weight: 900;
content: "\f00c";
display: inline-block;
margin-left: -23px;
width: 23px;
color:#666;
}
.running-status{
float:right;
text-align:right;
width:55px;
height:25px;
background:#e5fbec;
border:2px solid #1E8E3E;
border-radius:15px;
margin:0 5px 20px 5px;
}
.running-status:hover{cursor:pointer;background:#CCF2D7;}
.running-status .fa-check-circle {font-size:25px;color:#1E8E3E}
/* Contact form 7 layout */
.wrapp-form {overflow:hidden}
.wrapp-form p {padding:0;margin:0}
.wrapp-form h2 {font-size:16px;padding:0;margin:30px 0 10px 0}
.col-left {width: 49%; float: left; margin-right:2%;}
.col-right {width: 49%; float: left;}
@media screen and (max-width:600px){.col-left {width: 100%; margin-right:0;}.col-right {width: 100%;}}
.boxstyle-text {
width:95%;
padding:10px 2%;
margin:0 0 20px 0;
border-radius:5px;
-moz-border-radius:5px;
}
.boxstyle-textarea {
width:95%;
height:4em;
padding:10px 2%;
margin:0 0 20px 0;
border-radius:5px;
-moz-border-radius:5px;
}
.boxstyle-select {
padding:10px;
margin:0 0 20px 0;
color:#777;
background:#fff;
border-radius:5px;
-moz-border-radius:5px;
}
.boxstyle-captchar {
padding:10px;
margin:5px 0 10px 0;
border-radius:3px;
-moz-border-radius:3px;
}
.boxstyle-wysiwyg {
width:95%;
padding:10px 2%;
margin:0 0 20px 0;
border-radius:0 5px 5px 5px;
-moz-border-radius:0 0 5px 5px;
}
.boxstyle-40 {
width:95%;
height:40px;
padding:10px 2%;
margin:0 0 20px 0;
border-radius:5px;
-moz-border-radius:5px;
}
.boxstyle-90 {
width:95%;
height:90px;
padding:10px 2%;
margin:0 0 20px 0;
border-radius:5px;
-moz-border-radius:5px;
}
/* Contact form 7 backend style */
.wpcf7-form input:focus{outline:0;color:#000}
.wpcf7-form input:focus::-webkit-input-placeholder{color: transparent!important;}
.wpcf7-form input:focus::-moz-placeholder{color: transparent!important;}
.wpcf7-form input:focus:-moz-placeholder{color: transparent!important;}
.wpcf7-form input:focus:-ms-input-placeholder {color: transparent!important;}
.wpcf7-form select{background:#f2f2f2}
.wpcf7-form select:focus{outline:0;color:#000}
.wpcf7-form select:focus::-webkit-input-placeholder{color: transparent!important;}
.wpcf7-form select:focus::-moz-placeholder{color: transparent!important;}
.wpcf7-form select:focus:-moz-placeholder{color: transparent!important;}
.wpcf7-form select:focus:-ms-input-placeholder {color: transparent!important;}
.wpcf7-form textarea:focus{outline:0;color:#000}
.wpcf7-form textarea:focus::-webkit-input-placeholder {color: transparent!important;}
.wpcf7-form textarea:focus::-moz-placeholder {color: transparent!important;}
.wpcf7-form textarea:focus:-moz-placeholder {color: transparent!important;}
.wpcf7-form textarea:focus:-ms-input-placeholder {color: transparent!important;}
.wpcf7-submit {
cursor:pointer;
font-weight:bold;
letter-spacing:2px;
margin:0 0 20px 0;
padding:15px 40px;
color:#fff;
background:#1A73E8;
border:none;
border-radius:3px;
-moz-border-radius:3px;
}
.wpcf7-submit:hover{background:#034DAD;color:#fff}
span .wpcf7-not-valid-tip { clear:both; font-size:0.8em; font-style: italic; margin-top:-20px}
/* Related content format for unit-related */
.related-content {overflow:hidden; padding:20px 0}
.related-content-header { font-size:16px; line-height:1em; padding:2px 0 0 5px; margin:20px 0; color:#333; border-left:15px solid #1A73E8; }
.related-content-body { clear:both; overflow:hidden; column-count:4; column-gap:30px; padding:3px; }
.related-content-body-shellbox {
overflow:hidden;
margin:0 0 30px 0;
border-radius:5px;
box-shadow: 0 0 3px 0 #BBBBBB;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
@media screen and (max-width:1280px) { .related-content { padding:20px } }
@media screen and (max-width:800px) { .related-content-body { column-count:2 } }
@media screen and (max-width:600px) { .related-content-body { column-count:1 } }
/* Boxed format for unit-archivebox */
.boxed-archive-unit {overflow:hidden; position:relative; }
.boxed-archive-unit a:hover {text-decoration:none}
.boxed-archive-unit-thumb {position:relative; width:100%; height:auto; }
.boxed-archive-unit-thumb img {width:100%;border-radius:5px 5px 0 0;}
.thumb-note-status {
position:absolute;
display:block;
top:10px;
left:10px;
font-size:8px;
line-height:1em;
margin:0;
padding:6px 7px 4px 5px;
border:1px solid #ccc;
border-radius:10px;
background-color:#12873B;
color:#fff;
opacity:1;
}
.boxed-archive-unit-text {overflow:hidden; padding:15px }
.boxed-archive-unit-text h2 { font-size:16px; color:#000; margin:0; padding:0 }
.boxed-archive-unit-text h3 { font-size:9px; font-weight:400; text-transform:uppercase; line-height:1em; padding:0; margin:0 0 10px 0; color:#666 }
.boxed-archive-unit-text h3 .fa-user-friends { font-size:9px; margin:0 0 0 5px }
.boxed-archive-unit-text h3 .fa-video { font-size:9px; margin:0 0 0 5px }
.boxed-archive-unit-text h4 { font-size:13px; font-weight:normal; line-height:1.8em; color:#666}
.boxed-archive-unit-text h4 sup { font-size:14px; top:0; color:#12873B; }
.boxed-archive-unit-text h4 .fa-user-friends { font-size:9px; margin-right:5px }
.boxed-archive-unit-text h4 .fa-video { font-size:9px; margin-right:6px }
.boxed-archive-unit-text-sup { overflow:hidden; min-height:70px; padding:0; margin:0 0 10px 0 }
.boxed-archive-unit-text-sub { overflow:hidden; min-height:65px; font-size:10px; padding:10px 0 0 0; border-top:1px solid #DDD; color:#666 }
.boxed-archive-unit-text-sub-left { float:left; max-width:80%; min-width:60%; white-space:nowrap }
.boxed-archive-unit-text-sub-right { float:right; max-width:20% }
@media screen and (max-width:600px){ .boxed-archive-unit-text-sup { min-height:0 } .boxed-archive-unit-text-sub { min-height:0 } }
/* GENERALE RULE */
.background-body { background:linear-gradient(135deg, #eee 0%, #fff 50%, #eee 100%); }
.body-background { background:linear-gradient(135deg, #eee 0%, #fff 50%, #eee 100%); }
.wrapping-narrow { overflow:hidden; width:1000px; margin:auto }
.wrapping-wide { overflow:hidden; width:1200px; margin:auto }
@media screen and (max-width:1280px){ .wrapping-wide { width:100% } }
@media screen and (max-width:1024px){ .wrapping-narrow { width:100% } }
.desktop-only { display: block; }
.mobile-only { display: none !important; }
@media screen and (max-width:781px) {
.desktop-only { display: none !important; }
label.mobile-only { display: inline-flex !important; }
div.mobile-only { display: block !important; }
}
/* HEADER ICON CSS */
.container-tombol {
float: right;
margin: 15px 0 0 0;
display: flex;
gap: 10px;
}
@media screen and (max-width:1280px){
.container-tombol { margin: 10px 10px 0 0;}
}
/* Styling dasar kotak tombol label */
.tombol-popup {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #fff;
border: 1px solid #999;
border-radius: 5px;
cursor: pointer;
user-select: none;
}
.tombol-popup:hover { background-color: #eee;}
.ikon-buka, .ikon-tutup {
font-size: 16px;
line-height: 1;
font-weight: bold;
color: #333;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Styling area blok konten yang muncul */
.blok-konten {
display: none;
color: #333;
border-bottom: 1px solid #ccc;
position: relative;
z-index: 999;
clear: both;
}
.bg-menu, .bg-search, .bg-gear { background-color: #fff;}
/* Logika inti CSS */
#popup-menu, #popup-search, #popup-gear { display: none !important;}
.ikon-tutup { display: none !important;}
/* Trigger Diklik (:checked) */
#popup-menu:checked ~ .header .container-tombol .btn-menu .ikon-buka { display: none !important; }
#popup-menu:checked ~ .header .container-tombol .btn-menu .ikon-tutup { display: inline-block !important; color: #000; }
#popup-menu:checked ~ .header .container-tombol .btn-menu { background-color: #ddd; border-color: #999; }
#popup-menu:checked ~ #box-menu { display: block !important; }
#popup-search:checked ~ .header .container-tombol .btn-search .ikon-buka { display: none !important; }
#popup-search:checked ~ .header .container-tombol .btn-search .ikon-tutup { display: inline-block !important; color: #000; }
#popup-search:checked ~ .header .container-tombol .btn-search { background-color: #ddd; border-color: #999; }
#popup-search:checked ~ #box-search { display: block !important; }
#popup-gear:checked ~ .header .container-tombol .btn-gear .ikon-buka { display: none !important; }
#popup-gear:checked ~ .header .container-tombol .btn-gear .ikon-tutup { display: inline-block !important; color: #000; }
#popup-gear:checked ~ .header .container-tombol .btn-gear { background-color: #ddd; border-color: #999; }
#popup-gear:checked ~ #box-gear { display: block !important; }
/* HEADER LAYOUT */
header {
overflow:hidden;
font-size:14px;
line-height:1em;
width: 100%;
height:auto;
position: fixed;
top: 0;
background:#fff;
z-index:9999;
}
.header { overflow:hidden; height:70px; border-bottom:1px solid #ddd }
.header-admin { height:31px; width:100%; }
.header-fix { height:70px; width:100%; }
.header-logo { float:left; width:100px; height:30px; margin:20px 20px 30px 0 }
.header-logo img { width:100px; height:30px }
.header-menu-desktop {float:right;margin:19px 10px 0 0}
.header-menu-desktop ul { display: flex; list-style: none; padding:10px 15px; margin: 0; gap: 10px; }
.header-menu-desktop ul li a { text-decoration: none; padding:10px 15px; color: #333; transition: opacity 0.3s ease; }
.header-menu-desktop ul li a:hover { padding:10px 15px; background-color:#ddd; color: #000; border-radius:20px; box-shadow: inset 0 0 0 1px #ccc; }
.header-menu-mobile { float:right }
.header-menu-mobile span{
text-decoration:none;
color:#000;
width:40px;
height:40px;
margin:15px 10px 0 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
vertical-align:middle;
border:1px solid #999;
border-radius:5px;
cursor:pointer;
}
.header-menu-mobile span:hover {background:#ddd;border:1px solid #999;border-radius:5px}
.header-search{ float:right }
.header-search span {
text-decoration:none;
color:#000;
width:40px;
height:40px;
margin:15px 0 0 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
vertical-align:middle;
border:1px solid #999;
border-radius:5px;
cursor:pointer;
}
.header-search span:hover{background:#ddd;border:1px solid #999;border-radius:5px}
.header-search .icon-search { top:-1px }
.header-search-empty{float:right;width:10px;height:40px}
.header-tools { float:right }
.header-tools span {
text-decoration:none;
color:#000;
width:40px;
height:40px;
margin:15px 0 0 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
vertical-align:middle;
border:1px solid #fff;
cursor:pointer;
}
.header-tools span:hover { background:#ddd; border:1px solid #999; border-radius:5px }
.menu-area { overflow:hidden; width:1200px; padding:6px 0; margin:auto }
.menu-area-fix { float:left; margin:0 25px 0 0; }
.menu-area-fix a { cursor:pointer; display:block; color:#333; padding:12px 10px; border-radius:5px; }
.menu-area-fix a:hover { text-decoration: underline; color:#000; }
.search-area { overflow:hidden; padding:5% 20px }
.search-area-boxed { width:600px; margin:auto }
@media screen and ( max-width:1280px ) {
.header { height:60px }
.header-fix { height:60px }
.header-logo { margin:16px }
.header-menu-desktop { float:right; margin:14px 10px 0 0 }
.header-menu-mobile span { margin:10px 10px 0 0 }
.header-tools span { margin:10px 10px 0 0 }
.header-search span { margin:10px 10px 0 0 }
.header-search-empty { display:none }
.menu-area { width:99%; margin-left:1% }
}
@media screen and ( max-width:800px ) {
.menu-area { width:100%; padding:0; margin:0 }
.menu-area-fix { float:none; margin:0; border-bottom:1px solid #ddd }
.menu-area-fix a { cursor:pointer; display:block; padding:20px 10px; border-radius:0; }
.search-area-boxed { width:100% }
}
/* HOME LAYOUT */
.home-headline{
overflow:hidden;
background: #D2E3FC;
position: relative;
animation-name: web-background;
animation-duration: 30s;
animation-iteration-count: infinite;
}
.home-headline-inner{overflow:hidden; width:1200px; margin:7.5% auto}
.home-headline-text{overflow:hidden; float:left;width:680px;padding:120px 0 0 0}
.home-headline-text h1 {font-size:72px; letter-spacing:-1px; line-height:1.2em;color: #1A73E8;}
.home-headline-text p {font-size:18px;padding:10px 0 40px 0; color:#000}
.home-title {position: relative;animation-name: web-title; animation-duration: 30s; animation-iteration-count: infinite;}
.home-tagline {position: relative;animation: running-text 20s linear infinite;}
.home-tagline-mobile {display:none}
.home-headline-image {
float:right;
width:500px;
height:500px;
background:url(https://hrdspot.com/wp-content/uploads/banner-1.webp) no-repeat center center;
background-color:#fff;
border-radius:120px;
position: relative;
animation-name: web-image;
animation-duration: 30s;
animation-iteration-count: infinite;
}
.home-search{width:500px;}
/* Key frame */
@keyframes web-background {
0% {background-color: #D2E3FC}
25% {background-color: #CEEAD6}
50% {background-color: #FCE8E6}
75% {background-color: #FEF7E0}
}
@keyframes web-title {
0% {color: #1A73E8}
25% {color: #1E8E3E}
50% {color: #C5221F}
75% {color: #F29900}
}
@keyframes web-image {
0% { background:url(https://hrdspot.com/wp-content/uploads/banner-1.webp) no-repeat center center; background-color: #fff }
25% { background:url(https://hrdspot.com/wp-content/uploads/banner-2.webp) no-repeat center center; background-color: #fff }
50% { background:url(https://hrdspot.com/wp-content/uploads/banner-3.webp) no-repeat center center; background-color: #fff }
75% { background:url(https://hrdspot.com/wp-content/uploads/banner-4.webp) no-repeat center center; background-color: #fff }
}
@keyframes running-text {
0% { left: 100% }
100% { left: -100% }
}
@media screen and (max-width:1280px){
.home-headline-inner{width:960px;margin:10% auto}
.home-headline-image{width:350px;height:350px;border-radius:50px}
.home-headline-text{width:560px;padding:40px 0 0 0}
.home-headline-text h1 {font-size:56px}
.home-tagline {display:none}
.home-tagline-mobile {display:block; position: relative; animation: running-text 10s linear infinite;}
}
@media screen and (max-width:1024px){
.home-headline-inner{width:95%;margin:10% 2.5%}
.home-headline-text{width:400px;padding:0}
.home-headline-text h1 {font-size:42px}
.home-search{width:100%;}
}
@media screen and (max-width:800px){
.home-headline-image {float:none;width:400px;height:400px;border-radius:50px;margin:auto}
.home-headline-text {width:100%;padding:20px 0}
.home-headline-text h1 {text-align:center}
.home-headline-text p {font-size:16px;padding:10px 0}
}
@media screen and (max-width:480px){
.home-headline-inner{width:95%;margin:30px 2.5% 20px 2.5%}
.home-headline-image {width:320px;height:320px;}
.home-headline-text h1 {font-size:32px}
}
.home-body { overflow:hidden; background:#fff }
.home-content { overflow:hidden; width:1200px; padding:30px 0;margin:0 auto }
.home-content-title {font-weight:bold; text-align:center; margin:30px 0; color:#333 }
.home-content-title p { padding:0; margin:0 }
.home-content-title span {font-size:18px;letter-spacing:-0.5px }
.home-content-title .fa-star {font-size:0.9em;color:#F29900}
.home-content-title .fa-star-half-alt {font-size:0.9em;color:#F29900}
.home-content-inner {overflow:hidden; column-count:4; column-gap:30px; padding:3px;}
.home-content-shellbox{
margin:0 0 30px 0;
background:#fff;
border-radius:5px;
box-shadow: 0 0 3px 0 #BBBBBB;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
@media screen and (max-width:1280px){.home-content{width:95%;padding:2.5%;margin:0}}
@media screen and (max-width:1024px){.home-content-inner{column-count:3;}}
@media screen and (max-width:800px){.home-content{width:90%;padding:5%;}.home-content-inner{column-count:2;}}
@media screen and (max-width:480px){.home-content-inner{column-count:1;}}
.home-banner-1 {overflow:hidden;margin:0 auto;padding:10% 0;background:linear-gradient(135deg, #CEEAD6 0%, #D2E3FC 50%, #FCE8E6 100%); }
.home-banner-1 span {color:#C5221F}
.home-banner-1 h3{font-size:2.4em;line-height:1.3em;color:#000;margin:10px 0}
.home-banner-1 h4{font-size:1.1em;font-weight:400;line-height:1.4em;color:#333;}
.home-banner-1 h5 {
float:left;
font-size:14px;
font-weight:400;
line-height:1.4em;
padding:10px 30px;
margin:40px 0 0 0;
border-radius:30px;
background:#1A73E8;
color:#fff;
}
.home-banner-1 h5:hover { background:#034DAD}
.home-banner-1-inner {overflow:hidden;width:980px;margin: auto}
@media screen and (max-width:1024px){
.home-banner-1 {padding:10% 10% 15% 10%}
.home-banner-1 h3{font-size:1.6em;}
.home-banner-1 h4{font-size:1em}
.home-banner-1-inner{width:100%}
}
.home-banner-2 {overflow:hidden;margin:0 auto;padding:10% 0;background:linear-gradient(135deg, #D2E3FC 0%, #CEEAD6 50%, #FCE8E6 100%); }
.home-banner-2 span {color:#C5221F}
.home-banner-2 h3{font-size:2.4em;line-height:1.3em;color:#000;margin:10px 0}
.home-banner-2 h4{font-size:1.1em;font-weight:400;line-height:1.4em;color:#333;}
.home-banner-2 h5 {
float:left;
font-size:14px;
font-weight:400;
line-height:1.4em;
padding:10px 30px;
margin:40px 0 0 0;
border-radius:30px;
background:#1A73E8;
color:#fff;
}
.home-banner-2 h5:hover { background:#034DAD}
.home-banner-2-inner {overflow:hidden;width:980px;margin: auto}
@media screen and (max-width:1024px){
.home-banner-2 {padding:10% 10% 15% 10%}
.home-banner-2 h3{font-size:1.6em;}
.home-banner-2 h4{font-size:1em}
.home-banner-2-inner{width:100%}
}
/* PAGE LAYOUT*/
.single-page { overflow:hidden; padding:20px 0 }
.single-page p { padding:0; margin:5px 0 15px 0 }
@media screen and (max-width:1280px){ .single-page { padding:20px } }
/* FOOTER LAYOUT */
.footer-top {
font-size:14px;
padding:60px 0 40px 0;
color:#fff;
background:linear-gradient(to bottom, #2B6ED1, #034DAD)
}
.footer-top-content { column-count:4; column-gap:10px; }
.footer-top-content p { margin:0; padding:0 }
.footer-top-content a { color:#fff }
.footer-top-content a:hover { text-decoration:none; color:#000 }
.footer-top-content h2 { font-size:14px; padding:0; margin:0; color:#fff }
.footer-top-content ul { padding:0; margin:0 0 20px 0; }
.footer-top-content ul li { list-style-type:none; padding:0; margin:5px 0 }
.footer-top-content ul li a { list-style-type:none; padding:0; margin:5px 0 }
.footer-top-content-boxed {
margin:0 0 20px 0;
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.footer-hour {font-size:12px;line-height:1.6em}
.footer-whatsapp { overflow:hidden; padding:10px 0 0 0;margin:0 0 20px 0; }
.footer-whatsapp-logo { float:left; width:36px; font-size:32px; margin:0 10px 0 0 }
.footer-whatsapp-logo .icon-whatsapp{ top:-8px }
.footer-whatsapp-contact { float:left;}
.footer-whatsapp-contact p { font-size:16px; line-height:1.2em; padding:5px 0 0 0; }
#liveChatNow { font-size:12px; font-style:italic; line-height:1.4em; }
#liveChatNow span{color:#fff}
.footer-bottom {
font-size:12px;
padding:10px 0;
color:#fff;
background:#033A7D
}
@media screen and (max-width:1280px) { .footer-top { padding:40px 5% } .footer-bottom { padding: 10px 5% } }
@media screen and (max-width:800px) { .footer-top-content { column-count:2 } }
@media screen and (max-width:480px) { .footer-top-content { column-count:1 } }