/* Theme Name: websima Theme URI: https://websima.com Author: Websima Creative Agency Author URI: https://websima.com Description: Websima Creative Agency Version: 1.0 */ @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* -------------------- Fonts & Icons -------------------- */ @font-face { font-weight: normal; font-style: normal; font-display: fallback; font-family: 'PelakFA-Regular'; src: url("assets/fonts/PelakFA-Regular.woff2") format('woff2'); } @font-face { font-weight: bold; font-style: normal; font-display: fallback; font-family: 'PelakFA-Medium'; src: url("assets/fonts/PelakFA-Medium.woff2") format('woff2'); } @font-face { font-family: 'icomoon'; src: url('assets/fonts/icomoon.eot?myndct'); src: url('assets/fonts/icomoon.eot?myndct#iefix') format('embedded-opentype'), url('assets/fonts/icomoon.ttf?myndct') format('truetype'), url('assets/fonts/icomoon.woff?myndct') format('woff'), url('assets/fonts/icomoon.svg?myndct#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-fax:before { content: "\e91f"; } .icon-postal:before { content: "\e920"; } .icon-mobile:before { content: "\e921"; } .icon-user2:before { content: "\e922"; } .icon-tag:before { content: "\e91d"; } .icon-cat:before { content: "\e91e"; } .icon-gallery:before { content: "\e91c"; } .icon-x-twitter:before { content: "\e919"; } .icon-share:before { content: "\e91a"; } .icon-copy:before { content: "\e91b"; } .icon-reply:before { content: "\e916"; } .icon-date:before { content: "\e917"; } .icon-user:before { content: "\e918"; } .icon-angle-down:before { content: "\e915"; } .icon-close:before { content: "\e914"; } .icon-minus:before { content: "\e911"; } .icon-plus:before { content: "\e912"; } .icon-bar:before { content: "\e913"; font-size: 14px; } .icon-marker:before { content: "\e90a"; } .icon-clock:before { content: "\e90b"; } .icon-phone:before { content: "\e90c"; } .icon-instagram:before { content: "\e90d"; } .icon-whatsapp:before { content: "\e90e"; } .icon-telegram:before { content: "\e90f"; } .icon-linkedin:before { content: "\e910"; } .icon-pr2:before { content: "\e909"; color: #c2aba1; } .icon-pr1:before { content: "\e908"; color: #c2aba1; } .icon-arrow:before { content: "\e900"; } .icon-dimond:before { content: "\e901"; } .icon-chevron-thin-right:before { content: "\e902"; } .icon-chevron-thin-left:before { content: "\e903"; } .icon-star2:before { content: "\e904"; } .icon-star:before { content: "\e905"; } .icon-shop:before { content: "\e906"; } .icon-search:before { content: "\e907"; } .icon-cart:before { content: "\e929"; } .icon-cart3:before { content: "\e925"; } .icon-cart5:before { content: "\e926"; } .icon-cart4:before { content: "\e927"; } .icon-cart6:before { content: "\e933"; } .icon-cart1:before { content: "\e923"; } .icon-cart2:before { content: "\e924"; } .section__heading.section__heading--between { justify-content: space-between; align-items: center; gap: .75rem; flex-direction: row; margin-bottom: 2rem; } .section__heading.section__heading--center { align-items: center; gap: .75rem; margin-bottom: 2.25rem; text-align: center; } .section__heading { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: right; gap: 1rem; } .section__heading.section__heading--center .section__heading-desc { color: var(--color4); text-align: center; } .section__heading.section__heading--white .section__heading-title, .section__heading.section__heading--white .section__heading-desc { color: #fff !important; } .section__heading-title { font-size: 24px; line-height: 1.5; font-family: var(--bold_font); color: var(--color3); } .section__heading-desc { color: var(--color3); font-size: 14px; line-height: 2.25; text-align: justify; } .button i.icon-arrow { color: #fff; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: .5rem; } .button i.icon-arrow { background-color: var(--color1); transition: background-color 300ms; } .button.button2 i.icon-arrow { background-color: var(--color2); transition: background-color 300ms; } .button:hover i.icon-arrow { background-color: var(--color2); } .button.button2:hover i.icon-arrow { background-color: var(--color1); } /* -------------------- Config -------------------- */ .position-relative { position: relative; } .sw-wrapper { position: relative; } .swiper-nav--center { position: absolute; bottom: 0; left: 50%; display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; transform: translateX(-50%); bottom: -3.75rem; } .swiper-nav.absolute { position: absolute; display: flex; align-items: center; justify-content: space-between; width: 100%; top: 50%; transform: translateY(-50%); left: 0; right: 0; } .swiper-nav.static { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; gap: 1rem; margin-top: 2rem; } .swiper-next, .swiper-prev { color: var(--color2); font-size: 1.25rem; transition: color 300ms; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } .swiper-nav.swiper-nav--white .swiper-next, .swiper-nav.swiper-nav--white .swiper-prev { color: #fff; } .swiper-next.swiper-button-disabled, .swiper-prev.swiper-button-disabled { opacity: 0.5; cursor: unset; color: unset; } .swiper-next:not(.swiper-button-disabled):hover, .swiper-prev:not(.swiper-button-disabled):hover { color: var(--color1); } :root { --color1: #39377F; --color2: #C2ABA1; --color3: #252525; --color4: #6A6A6A; --bg_light: #D8DBE5; --border_light: #f3efee; --bg_body: #FDF9F7; --bg_footer: #121d2f; --danger: #dc3545; --bg_danger: #fff5f5; --success: #28a745; --bg_success: #f4fff3; --bg_info: #cce5ff4a; --info: #004085cc; --main_font: 'PelakFA-Regular'; --bold_font: 'PelakFA-Medium'; --heading_h1_fontsize: 1.5rem; --shadow: -2px 2px 0 1px var(--color1); --shadow2: -4px 4px 0 0px var(--color1); --shadow3: -2px 2px 0px 0px var(--color2); --swiper-pagination-color: #fff; --swiper-pagination-bullet-inactive-color: #fff; --swiper-pagination-bullet-inactive-opacity: .6; --swiper-wrapper-transition-timing-function: linear; } @media (min-width:992px) { .section-hero::after { animation: pulse 2s infinite; } } .swiper-pagination-bullet { transition: 300ms; } span.swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.5rem; border-radius: .25rem; } ::-moz-selection { /* Code for Firefox */ color: #fff; background: var(--color1); } ::selection { color: #fff; background: var(--color1); } body { direction: rtl; text-align: right; font-family: var(--main_font), Arial; font-size: 14px; color: #222; line-height: 2; background: var(--bg_body); } .clearfix:after { content: ''; clear: both; display: block; } .sidebar { position: sticky; top: 0; } #wrapper .no-gutters { margin-right: 0 !important; margin-left: 0 !important; } #wrapper .no-gutters>.col, #wrapper .no-gutters>[class*="col-"] { padding-right: 0 !important; padding-left: 0 !important; } .text-center { text-align: center !important; } h1, h2, h3, h4, h5, h6, b, strong { font-family: var(--bold_font), Arial; } input { font-family: var(--main_font), Arial; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } img { height: auto; } video { width: 100%; } a { transition: 0.3s; color: var(--color3); text-decoration: none; } a:hover { text-decoration: none; color: var(--color2); } .inner-pages .site-main { padding: 50px 0; } /* -------------------- GENERAL SETTING -------------------- */ .inner-page .site-main { margin-block: 2rem 3rem; } .inner-head { margin-bottom: 2.5rem; } .inner-head__title { font-size: 2rem; line-height: 1.25; } .inner-head__desc { margin-top: 1rem; } .editor-content.inner-head__desc.inner-head--black p { color: var(--color3); } .editor-content.inner-head__desc p { color: var(--color4); } .title-site h1 { font-size: var(--heading_h1_fontsize); } .title-site h4, .title-site h2 { font-size: calc(var(--heading_h1_fontsize) - 2px); } .title-site-center { text-align: center } .title-between { display: flex; align-items: center; justify-content: space-between; } @keyframes spin { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50%, 75% { transform: rotate(180deg); } } /* -------------------- Animation Pulse -------------------- */ @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes pulse3 { 0% { font-size: 2rem; } 50% { font-size: 2.25rem; } 100% { font-size: 2rem; } } @keyframes pulse2 { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(250, 190, 88, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(250, 190, 88, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); } 70% { -moz-box-shadow: 0 0 0 10px rgba(250, 190, 88, 0); box-shadow: 0 0 0 10px rgba(250, 190, 88, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(250, 190, 88, 0); box-shadow: 0 0 0 0 rgba(250, 190, 88, 0) } } /* -------------------- Menu Mobile -------------------- */ #mask { position: fixed; z-index: 9999; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; display: none; } #menumobile { position: fixed; top: 0; bottom: 0; right: -300px; width: 250px; background-color: var(--color1); font-family: var(--bold_font); z-index: 99992; transition: all 0.5s; box-sizing: border-box; overflow: hidden; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important; overflow-y: auto; padding: 1rem; } #menumobile img { /*! filter: brightness(0)invert(1); */ max-width: 130px; } #nomenumobile { cursor: pointer; transition: all 0.5s; width: 25px; height: 25px; background: var(--danger); text-align: center; border-radius: 3px; display: inline-flex; color: #fff; font-size: 11px; align-items: center; justify-content: center; } .tel-mm a { background: var(--bg_footer); color: #fff; padding: 10px 15px; display: block; text-align: center; } .tel-mm a:before { content: ''; width: 6px; height: 6px; margin-left: 10px; background: var(--color2); display: inline-block; border-radius: 100%; animation: pulse 2s infinite; position: relative; top: -1px; } .come-menumobile { right: 0 !important; } .title-mm { background: #fff; padding: .5rem; display: flex; align-items: center; justify-content: space-between; border-radius: .5rem; margin-bottom: 1rem; } .title-mm img { user-select: none; } .btn-mm { padding: 0 20px; margin-top: 20px; } .btn-mm a { display: flex; } .title-sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-flow: row-reverse; } .title-sub-head strong { font-family: var(--bold_font); font-size: 1rem; } .main-mm ul li a { color: #fff; display: block; padding: 8px 0; position: relative; width: 80%; } .main-mm ul li a:hover { color: var(--color2); } .main-mm ul li>.sub-menu { position: fixed; top: 0; bottom: 0; width: 250px; background-color: var(--color1); right: -250px; transition: 0.3s; z-index: 9; padding: 20px; } .sub-closer::after, .childer::after { content: "\e915"; font-family: 'icomoon'; transform: translateX(-2px) rotate(90deg); color: #fff; font-size: 0.6125rem; } .sub-closer::after { transform: translateX(2px) rotate(-90deg); } .childer { position: absolute; left: -25%; cursor: pointer; top: 10px; width: 1.5rem; height: 1.5rem; background-color: var(--color2); border-radius: 2px; display: flex; align-items: center; justify-content: center; } .come-submenu { right: 0 !important; } .sub-closer { cursor: pointer; top: 10px; width: 1.5rem; height: 1.5rem; background: var(--color3); border-radius: 2px; overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center; } .title-subcome { color: var(--color2); font-weight: normal; position: relative; top: 2px; } /* -------------------- Button -------------------- */ .af-form.acf-form button.acf-button.af-submit-button, #cancel-comment-reply-link, .button { user-select: none; height: 38px; border: 1px solid var(--color1); border-radius: 52px; min-width: 100px; background-color: #fff; padding-inline: .75rem; z-index: 1; position: relative; transition: 300ms; overflow: hidden; color: var(--color3); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-family: var(--bold_font); gap: .5rem; box-shadow: -2px 2px 0px 1px var(--color1); cursor: pointer; } .af-form.acf-form button.acf-button.af-submit-button:hover, #cancel-comment-reply-link:hover, .button:hover { color: var(--color2); box-shadow: 2px -2px 0px 1px var(--color2); border-color: var(--color2); } .button.button2 { box-shadow: -2px 2px 0px 1px var(--color2); border-color: var(--color2); } .button.button2:hover { color: var(--color1); box-shadow: 2px -2px 0px 1px var(--color1); border-color: var(--color1); } /* -------------------- FAQ CSS -------------------- */ .psr { position: relative; } .faqs__null { text-align: center; font-size: 15px; line-height: 2; border-bottom: 3px double #c6303e; color: #c6303e; width: fit-content; margin: 20px auto 0; padding-bottom: 5px; } .sw-faqs { padding-inline: 5rem; } .sw--faqs { padding-inline: 2px; } .faq-cat-content { margin-top: 2rem; } .faq-cat { display: block; border: 1px solid #C2ABA1; box-shadow: -2px 2px 0px 0px #C2ABA1; text-align: center; border-radius: 2px; font-size: 1rem; line-height: 1.5; color: var(--color3); font-family: var(--bold_font); transition: 300ms; padding: 0.5rem; } .faq-cats .active .faq-cat, .faq-cat:hover { color: var(--color1); border-color: var(--color1); box-shadow: -2px 2px 0px 0px var(--color1); } .faq-cats a:after { content: ""; width: 0px; height: 3px; display: inline-block; border-radius: 5px; background: var(--color2); margin: 0 auto; position: absolute; left: 0; right: 0; bottom: 0px; transition: all 0.3s; } .faq-cat img { width: auto !important; margin: 0 auto 10px; } .faq-cat.active a { color: var(--color2) } .faq-cat.active a:after { width: 70%; } .faqs-content .faqs-item:last-child { margin-bottom: unset; } .faqs-content .faqs-item:hover { box-shadow: -2px 2px 0px 0px #C2ABA1; } .faqs-content .faqs-item { border-radius: 10px; overflow: hidden; margin-bottom: 1rem; border: 1px solid #C2ABA180; background-color: #fff; padding: 1rem; transition: 300ms; } .faqs-item.active .faq-num { border: 1px solid var(--color1); color: var(--color1); box-shadow: -2px 2px 0px 0px var(--color1); } .faqs-item.active .faqs-question { color: var(--color1); } .faqs-content .faqs-question { transition: color 300ms; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; cursor: pointer; font-size: 1rem; font-family: var(--bold_font); line-height: 2; } .faqs-content .faqs-question i { transition: 300ms; margin-right: auto; font-size: 28px; display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--color2); } .faqs-item.active i { transform: rotate(45deg); color: var(--color1); } .accordion-content { display: none; } /* .faqs-item .faqs-answer{ display:none; } */ .faqs-item .faqs-answer { padding: 1.25rem 3rem 0; font-size: 1rem; font-family: var(--main_font); } .faqs-question .faq-num { border: 1px solid #C2ABA1; box-shadow: -2px 2px 0px 0px #C2ABA1; color: var(--color3); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 2px; transition: 300ms; flex-shrink: 0; } /* -------------------- TAB CSS -------------------- */ .tab-content { display: none; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } .tab-content.active { display: block; } @-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } /* -------------------- header -------------------- */ .container.container-full, .w-100 { width: 100%; max-width: 100%; } a.top__banner { display: block; } .top__banner__img { width: 100%; object-fit: cover; } .header__menu { display: flex; align-items: center; justify-content: flex-start; gap: 2.5rem; } header#header { padding-block: 1rem; background-color: #FFFFFF80; filter: drop-shadow(0px 0px 44px #7676761A); box-shadow: 0px 0px 44px #7676761A; position: relative; z-index: 5; } .header__btns { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; height: 100%; } .navtop-right { display: flex; align-items: center; } .navtop-left { display: flex; align-items: center; justify-content: flex-end; } .header__button { color: var(--color1); } .header__button i { font-size: 19px; } .header-menu { display: none; font-family: var(--bold_font); } .header-menu>li>a { padding: 13px; display: inline-block; } .header-logo { display: block; } .header-mm:hover { color: var(--color2); box-shadow: 2px -2px 0px 1px var(--color2); border-color: var(--color2); } .header-mm { display: flex; align-items: center; justify-content: center; position: relative; width: 40px; height: 40px; border-radius: 40px; box-shadow: var(--shadow); border: 1px solid var(--color1); flex-shrink: 0; transition: 300ms; } @media screen and (min-width: 992px) { .header-mm { display: none; } .header-menu { display: flex; align-items: center; } #header { padding-top: 0; } } /* -------------------- Contact Mode -------------------- */ #contactaccordion .card { margin-bottom: 20px; border: 1px solid var(--color1); padding: 10px 20px; border-radius: 5px; } #contact-tab { display: flex; align-items: center; justify-content: center; border-bottom: 2px solid #fafafa; margin-bottom: 25px; } #contact-tab a { padding: 15px; display: inline-block; } #contact-tab .active a { color: var(--color2); } .acf-form .acf-fields>.acf-field { border: none; } .websima-contact-form span.acf-required { float: right; margin-left: .25rem; } .websima-contact-form { margin-top: 6rem; } .websima-contact-form .acf-field .acf-label { margin: unset; } .websima-contact-form .input-cform { clear: none !important; width: 100%; padding: 0 !important; } .websima-contact-form textarea { min-height: 166px; } .websima-contact-form .text-cform { width: 100%; padding: 0 !important; margin-block: 2rem; } .websima-contact-form #message { text-align: center; border: 1px solid var(--success); padding: 5px; margin-bottom: 20px; margin-top: 20px; } .acf-form-submit { text-align: center; position: relative; } .contact-info::after { content: ''; position: absolute; width: calc(100% + 40px); left: 50%; top: 50%; background-image: url(assets/img/c3.png); background-repeat: no-repeat; transform: translate(-50%, -50%); z-index: -1; background-size: 100% 100%; height: calc(100% + 40px); } .contact-info { color: #fff; text-align: center; background-image: url(assets/img/c1.png); padding: 1.75rem 4.5rem; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; width: calc(100% - 40px); margin-inline: auto; position: relative; } .ct__label { display: flex; align-items: center; justify-content: center; gap: .5rem; line-height: 2.5; margin-bottom: 3px; font-size: 14px; } .contact-info li { border-bottom: 1px solid #FFFFFF1A; padding-bottom: 12px; margin-bottom: 12px; } .contact-info li:last-of-type { border-bottom: unset; } .contact-info li span, .contact-info li a { color: #fff; line-height: 2.25; font-size: 14px; } .contact-info li a:hover { color: var(--color2); } .contact-info li i { font-size: 17px; color: var(--color2); width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: flex-end; } .contact-socials a { color: #fff; } .contact-dir-button { position: absolute; left: 1.5rem; bottom: 3.5rem; z-index: 9999; display: flex; align-items: center; gap: 12px; justify-content: flex-end; } .contact-dir-button a { box-shadow: 0px 4px 16px 0px #0000001C; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 4px 8px 4px 12px; border-radius: 4px; background-color: #fff; height: 44px; text-wrap: nowrap; flex-shrink: 0; } .contact-dir-button a:hover { background-color: var(--color1); color: #fff; } .socials.contact-socials { justify-content: center; } .cform_title { font-size: 1.5rem; line-height: 1.5; margin-bottom: 2rem; text-align: center; } .websima-contact-form .acf-notice.-error.acf-error-message.-dismiss { display: none; } .websima-contact-form .acf-fields { display: flex; flex-wrap: wrap; gap: 32px 20px; } .websima-contact-form .acf-field .acf-notice.-error { background: #fff; color: #cc2727; border-color: #fff; margin: 0; z-index: 1; line-height: 1; padding: 0; } .websima-contact-form .acf-notice p { font-size: 12px; line-height: 1; margin: 0; text-shadow: none; color: inherit; position: absolute; bottom: -92px; } .websima-contact-form #message { text-align: center; } .af-form.acf-form .af-success p { text-align: center; } .af-form.acf-form .af-success p, .websima-contact-form #message, .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received, .woocommerce-success, .woocommerce-message { color: #0a3622; background-color: #d1e7dd; border: 1px solid #a3cfbb; padding: 6px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; } .websima-contact-form .acf-spinner { position: absolute; bottom: 12px; margin-right: 6px; } @media screen and (min-width: 576px) { .websima-contact-form .input-cform { width: calc(50% - 10px); clear: none !important; } } /* -------------------- Footer Style -------------------- */ #footer { background-color: #23234A; color: #fff; padding-block: 4.5rem 2.75rem; position: relative; } #footer a { color: #fff; } #footer a:hover { color: var(--color2); } .footer-sub-menu li:last-child { margin-bottom: unset; } .footer-sub-menu li { font-size: 13.5px; line-height: 2.5; margin-bottom: .5rem; } .footer-contact li { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; font-size: 13.5px; line-height: 2.5; margin-bottom: 0.5rem; } .footer-contact li i { font-size: 1rem; color: var(--color2); } .footer-title { font-size: 1rem; line-height: 2.25rem; margin-bottom: 1.25rem; font-family: var(--main_font); } .footer-title::after { content: ''; display: block; width: 3rem; height: 1px; background-color: var(--color2); margin-top: .375rem; } .col--gap { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; justify-content: flex-start; } .footer__desc { font-size: 13.5px; line-height: 2.5; text-align: justify; padding-left: 0.5rem; } .copy-right { background-color: var(--color1); color: #fff; padding-block: 1rem; } .copy-right-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .copy-right p { font-size: 12.5px; line-height: 2.5; } .copy-right bold { font-family: var(--bold_font); color: var(--color2); } form#newsletter-form { border: 1px solid #DCDCDC; border-radius: 4rem; padding: 0.5rem .75rem; gap: 0.5rem; display: inline-flex; align-items: center; position: relative; } .newsletter { margin-top: 100px; } .newsletter { margin-bottom: -2rem; } .newsletter-wrap .d-flex { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; } .newsletter-wrap h4 { font-size: 1.25rem; } .newsletter-wrap>p { font-size: 14px; color: var(--color3); line-height: 2.25; } .newsletter-wrap { background-color: #fff; border-radius: 4px; box-shadow: -6px 6px 0px 0px #23234A; border: 1px solid #23234A; padding: 1.25rem 5rem 1.25rem 2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; position: relative; overflow: hidden; } #newsletter-form input::placeholder { color: var(--color4); } form#newsletter-form .alert.bg-primary { color: #0d6efd; } form#newsletter-form .alert.bg-danger, form#newsletter-form label.error { color: var(--danger); } form#newsletter-form .alert, form#newsletter-form label { font-size: 0.6875rem; line-height: 0; display: block; position: absolute; right: 0; bottom: -.875rem; } form#newsletter-form input { color: var(--color3); font-size: 14px; line-height: 2.5; cursor: pointer; } .newsletter-wrap::after { content: "\e905"; right: -50px; top: 50%; transform: translateY(-50%); font-family: 'icomoon'; font-size: 100px; color: #23234A; line-height: 1; z-index: 1; position: absolute; } .error404-txt { display: block; text-align: center; color: var(--color4); font-size: 1rem; line-height: 2; margin-block: 3.5rem 1.5rem; font-family: var(--bold_font); } .error404-page p { font-size: 2rem; line-height: 1.25; color: var(--color3); } .error404-btn { margin-top: 2.5rem; } /* -------------------- Breadcrumb Style -------------------- */ #breadcrumbs a:hover { color: var(--color2); } #breadcrumbs a { color: var(--color3) } #breadcrumbs { background: #fff; padding-block: 24px 0; color: var(--color1); font-weight: 600; font-size: 12.5px; margin-bottom: 2rem; } #breadcrumbs a:after { content: ""; display: inline-block; margin-inline: 6px 4px; width: 5px; height: 5px; border-radius: 50%; background-color: #D8DBE5; } /* -------------------- Single Style -------------------- */ .single__post__title { font-size: 2rem; line-height: 1.25; margin-bottom: 1.5rem; } .single__post__excerpt { font-size: 1rem; line-height: 2.5; color: #252525; margin-block: 1rem 1.5rem; text-align: justify; } .single__post__date .vl { font-size: 13px; color: #6A6A6A; letter-spacing: 1px; } .single__post__date .lb { font-size: 13px; color: #252525; margin-left: 0.5rem; } .single__post__date i { color: var(--color1); font-size: 1rem; } .single__post__date { display: flex; align-items: center; gap: .5rem; } .single__post__meta { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #F5EBE4; gap: 1rem; flex-wrap: wrap; } .single__post__share .diveder { width: 1px; height: 14px; background-color: #EADCD1; } .single__post__share a:hover { color: var(--color1); } .single__post__share a:last-of-type { padding-left: 0; } .single__post__share a { font-size: 17px; display: flex; align-items: center; justify-content: center; color: #6A6A6A; padding: .25rem .5rem; } .single__post__share .label i { font-size: 15px; color: var(--color1); } .single__post__share .label { color: #252525; font-size: 13px; display: flex; align-items: center; gap: .5rem; } .single__post__share .d-flex { align-items: center; position: relative; } .single__post__share { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-bottom: 1rem; } .single__post__share #copyMessage { position: absolute; color: #fff; font-size: 10px; background-color: var(--color1); border-radius: 4px; padding: 0.25rem; line-height: 1; top: 100%; left: 0; } .single__post__tag a:not(:last-child)::after, .single__post__cat a:not(:last-child)::after { content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #EADCD1; display: block; } .single__post__tag a:hover, .single__post__cat a:hover { color: var(--color1); } .single__post__tag a, .single__post__cat a { gap: .5rem; display: flex; align-items: center; color: #6A6A6A; font-size: 13px; } .single__post__tag span, .single__post__cat span { font-size: 13px; color: #252525; margin-left: 0.5rem; } .single__post__tag i, .single__post__cat i { font-size: 1rem; color: var(--color1); } .single__post__tag, .single__post__cat { display: flex; align-items: center; gap: .5rem; } .single__post__tag { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #F5EBE4 } .single__post__tag span { display: flex; align-items: center; gap: 10px; } .single__post__tag span::after { width: 1px; height: 14px; content: ''; display: block; background-color: #F5EBE4; } .help-heading { background-color: #F7F7F7; padding: .875rem; border-radius: 4px; margin-bottom: 10px; margin-block: 24px 10px; } .help-heading>span::after { content: "\e915"; font-size: 0.5rem; font-family: 'icomoon'; transform: rotateX(180deg); display: block; line-height: 1; transition: transform 300ms; } .help-heading>span.closed::after { transform: rotateX(0); } .help-heading ul { margin-top: 1rem; padding-inline: 10px; } .help-heading>span { cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; line-height: 3; background-color: var(--color1); padding-inline: 1rem; height: 3rem; border-radius: 4px; } .help-heading a:hover:before { background-color: var(--color1); } .help-heading a::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 6px; background-color: #6A6A6A; transition: background-color 300ms; } .help-heading a:hover { color: var(--color1); } .help-heading a { display: flex; align-items: center; color: #6A6A6A; font-size: 14px; line-height: 3; margin-bottom: 4px; gap: .5rem; } .help-heading li { margin-bottom: 5px; } .help-heading li:last-child { margin-bottom: 0; } .access-post { margin-block: 10px; display: flex; flex-direction: column; gap: 10px; } .access-post-wrap { padding: 14px; border-radius: 4px; background-color: #F7F7F7; } .access-post-wrap a { display: block; border-radius: 4px; border: 1px solid var(--color1); background-color: #fff; font-size: 14px; line-height: 3; text-align: center; padding: 2px; } .access-post-wrap a:hover { background-color: var(--color1); color: #fff; } .single-post-banner img { width: 100%; border-radius: 4px; object-fit: cover; transition: transform 300ms; } .single-post-banner:hover img { transform: scale(1.1); } .single-post-banner { overflow: hidden; display: block; border-radius: 4px; margin-top: 1rem; } .socials-share { display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 4px rgb(0 0 0 / 10%); padding: 5px 10px; } .socials { display: flex; align-items: center; gap: .5rem; } .socials a:hover { background-color: #fff; color: var(--color2); } .socials a { display: flex; align-items: center; justify-content: center; background-color: var(--color1); border: 1px solid var(--color2); width: 32px; height: 32px; flex-shrink: 0; border-radius: 2px; box-shadow: var(--shadow3); font-size: 18px; } .thumbnail-post-img { border-radius: 4px; overflow: hidden; text-align: center; } .thumbnail-post-img img { width: 100%; object-fit: cover; border-radius: 4px; } .thumbnail-img { float: none; max-width: 100%; margin: 0; display: inline-flex; overflow: hidden; border-radius: 3px; } .tags_post a { border: 1px solid #000; border-radius: 5px; display: inline-flex; padding: 2px 5px 4px; min-width: 120px; justify-content: center; align-items: center; } .tags_post { border-top: 1px solid #dadada; padding-top: 10px; margin-top: 15px; } @media screen and (min-width: 768px) { .thumbnail-img { max-width: 50%; float: left; margin-right: 30px; } } #news-related .post-item-image::after { background-size: 125px; } /* -------------------- comment Style -------------------- */ .commentlist ul.children { padding-right: 66px; position: relative; } .commentlist ul.children:before { content: "\e916"; color: var(--color1); position: absolute; right: 20px; top: 50%; display: block; line-height: 1; font-family: 'icomoon'; font-size: 1.25rem; transform: translateY(-50%); } #reviews .form-submit { order: 1; text-align: center !important; margin: 2rem auto 0 !important; flex: 0 0 auto; width: 100%; } form#commentform { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 3.5rem !important; } ul.commentlist { margin: 0 !important; } .editor-content .comment-notes { flex: 0 0 100%; display: flex; flex-wrap: wrap; font-size: 13px; } .editor-content .comment-form-author, .editor-content .comment-form-email { flex: 0 0 auto; width: calc(50% - 10px); flex-wrap: wrap; display: flex; margin: 0 0 2rem !important; } .comment-form-comment, .comment-form-mobile { flex: 0 0 auto; width: 100%; margin: 0 !important; } .editor-content #commentform input, .editor-content #commentform textarea { background: #fff; } .editor-content label, .comment-form label { position: relative; display: block; color: var(--color3) !important; font-size: 1rem; margin: 0 0 1rem !important; line-height: 1.5; } .editor-content .comment-form .field-ltr { text-align: left; direction: ltr; } .comment-awaiting-moderation { background-color: var(--color2); font-size: 13.5px; line-height: 2; padding: 0.5rem; border-radius: 0.25rem; margin-block: .5rem; width: 100%; display: block; text-align: center; color: #fff; font-style: normal !important; } .commentlist .comment_container { border: 1px solid #ededed; box-shadow: 0 1px 5px rgb(240, 240, 240); border-radius: 3px; margin: 20px 0; } .comment-list .children .comment_container { width: 89%; margin: 20px 0; margin-right: 112px; } .head-comment { background: #f9f9f9; border-radius: 3px; padding: 15px; color: #0c0918; font-family: var(--bold_font); position: relative; align-items: center; justify-content: space-between; } .comment_container .editor-content p { padding-top: 50px; padding-bottom: 20px; padding: 32px; } .editor-content a.comment-reply-link:hover { color: var(--color2); } .editor-content a.comment-reply-link::after { content: "\e915"; font-family: 'icomoon'; font-size: 0.5rem; transform: rotate(90deg); } .editor-content a.comment-reply-link { justify-content: flex-end; font-family: var(--bold_font); transition: 0.3s; font-size: 13px; line-height: 2.5; color: var(--color1); width: 50px; gap: 1rem; margin-right: auto; display: flex; } .editor-content a.comment-reply-link:hover { color: var(--color2); } .comment-reply-link i { font-size: 11px; font-weight: bold; transition: 0.3s; } .comment-reply-link:hover i { margin-left: -10px; padding-right: 10px; } .item-comment::before { content: unset !important; } .item-comment { background-color: #fff; border-radius: 8px; border: 1px solid #F0F0F0; position: relative; padding: 1.5rem; margin: 0 0 2rem !important; } .item-comment .author_comment { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; font-size: 1rem; color: #272829; } .item-comment .author_comment i { width: 2rem; height: 2rem; border-radius: 4px; background-color: #fff; border: 1px solid #F0F0F0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color1); font-size: 1rem; } .item-comment .meta_comment { display: flex; align-items: center; justify-content: space-between; background-color: #F8F8F8; border-radius: 4px; padding: 0.5rem .5rem .5rem 1rem; margin-bottom: 1.5rem; height: 3rem; } .item-comment.byadmin span.time_comment i { color: #fff; } .item-comment.byadmin span.time_comment { color: #fff; } .item-comment span.time_comment i { color: var(--color1); font-size: 1rem; } .item-comment span.time_comment { display: flex; align-items: center; color: #6A6A6A; font-size: 12px; gap: .5rem; letter-spacing: 1px; } .item-comment.byadmin .meta_comment img { height: 30px; object-fit: contain; text-align: right; width: auto; display: block; margin-right: 0.5rem; } .item-comment.byadmin .meta_comment { background-color: var(--color1); } .commentlist #reply-title { border-radius: .25rem; display: flex; justify-content: space-between; padding: .5rem 1rem; margin-block: 1rem; font-size: 14px; background-color: var(--color4); color: #fff; align-items: center; line-height: 1; } .commentlist .children .comment_container { flex: 0 0 90%; } .editor-content .commentlist li { position: relative; } .head-comment .time_comment { color: var(--color1); display: flex; align-items: center; } .byadmin .head-comment { background: var(--color1); color: #fff; } .head-comment>span { display: inline-flex; align-items: center; } .byadmin .head-comment .time_comment { color: #fff; } .comment-custom-field { display: flex; align-items: center; width: 100%; justify-content: space-between; flex-wrap: wrap; } /* -------------------- Search Simple -------------------- */ .search-box { background-color: #fff; border-radius: 1rem; overflow: hidden; padding: 1rem; display: flex; align-items: center; flex: 0 0 calc(50% - .5rem); gap: 1rem; } .header-searchsimple form { width: 100%; border: 1px solid #f1f1f1; border-radius: 6px; position: relative; display: flex; align-items: center; transition: 0.4s; padding: 0 7px; } .header-searchsimple #search-text { width: 100%; text-align: right; border: none; background: none; color: var(--color1); font-size: 16px; padding: 6px; } .search-results-box { position: absolute; z-index: 1; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); left: 0; right: 0; text-align: center; } .header-searchsimple { position: relative; width: 100%; } .search__res__box { padding: 1rem; } .search__res__box .search-box h3 a { display: block; } .search__res__box .search-box h3 { text-align: right; } .search__res__box { display: flex; gap: 1rem; flex-wrap: wrap; } .search-image img { width: 100%; object-fit: cover; } .search-image { display: flex; align-items: center; border-radius: .5rem; overflow: hidden; width: 100px; flex: 0 0 auto; } @media screen and (min-width: 576px) { .header-searchsimple form { max-width: 407px; min-width: 407px; } } /* -------------------- Search Popup -------------------- */ .bottom-head-search { display: flex; align-items: center; justify-content: flex-end; } .header-search { display: flex; align-items: center; justify-content: center; color: var(--color1); border: 1px solid var(--color1); box-shadow: -2px 2px 0 1px var(--color1); background-color: #fff; border-radius: 50%; width: 38px; height: 38px; font-size: 16px; transition: 300ms; cursor: pointer; flex-shrink: 0; } .header-search:hover { color: var(--color2); box-shadow: 2px -2px 0px 1px var(--color2); border-color: var(--color2); } .search-pup-up { position: fixed; top: 0; left: 0; background: #000000de; width: 100%; height: 100%; z-index: 1000; color: white; overflow: hidden; overflow-y: visible; padding-bottom: 50px; display: none; } .fd-outer { width: 30px; margin-top: 10px; cursor: pointer; position: absolute; top: 20px; right: 30px; z-index: 10; } .fd-inner { width: 30px; text-align: center; } .fd-inner:before, .fd-inner:after { position: absolute; content: ''; height: 2px; width: inherit; background: white; right: 0; transition: all .3s ease-in; } .fd-inner:after { bottom: 48%; transform: rotate(-45deg); } .fd-inner:before { top: 48%; transform: rotate(45deg); } .fd-outer label { font-size: .8em; line-height: 3em; text-transform: uppercase; color: #fff; transition: all .3s ease-in; opacity: 0; cursor: pointer; } .fd-outer:hover .fd-inner:before, .fd-outer:hover .fd-inner:after { transform: rotate(0); background: var(--color1); } .fd-outer:hover .fd-inner:before { top: 0; } .fd-outer:hover .fd-inner:after { bottom: 0; } .fd-outer:hover label { opacity: 1; } .form-wrap { padding-top: 140px; } .search-pup-up #search-text { width: 100%; text-align: center; border: none; background: none; color: white; font-size: 16px; padding-bottom: 10px; } .search-form:after { content: ''; width: 100%; height: 2px; background-image: linear-gradient(to right, transparent, #c29f77, transparent); display: block; } .search-title { font-size: 1.5rem; padding: 20px 0 5px 0; display: block; font-family: var(--bold_font); } .search-pup-up .search-form { transform: scale(0); opacity: 0; transition-duration: .6s; transition-delay: .5s; } .search-pup-up.popup-search-active .search-form { transform: scale(1); opacity: 1; } .search-detail h3 a { display: block; margin-bottom: 10px; } .search-detail h3 a:before { font-family: icomoon; content: "\e905"; color: var(--color1); margin-left: 8px; } .noresults, .alert-danger { color: #58151c; background-color: #f8d7da; border: 1px solid #f1aeb5; border-radius: 0.5rem; font-size: 14px; line-height: 2; padding: .5rem 1rem; } /* -------------------- END Search Popup -------------------- */ @media screen and (max-width:768px) { .form-wrap { padding-top: 80px; } .fd-inner { width: 25px; } .fd-outer { width: 25px; top: 10px; right: 20px; } } @media screen and (min-width:576px) { .header-search>span { display: block; } } @media screen and (min-width:992px) { .header-search>span { font-size: 12px; } } @media screen and (min-width:1200px) { .header-search>span { font-size: inherit; } } @media screen and (max-width: 576px) { .type-product .summary.entry-summary .cart, .variations_form .woocommerce-variation-add-to-cart { flex-direction: column; } .quantity { margin-bottom: 20px; } } @media screen and (max-width: 425px) { .product-meta-top { flex-direction: column; } .product-meta-top>div { width: 100%; margin: 5px 0; justify-content: space-around; } .product-meta-right a:first-child:after { content: unset; } .type-product .summary .price ins:before { font-size: 16px; } } #more-tax-desc::before { content: url(assets/img/star.webp); position: absolute; z-index: 2; top: -32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; } .more-tax-desc { margin-top: 2rem; } #more-tax-desc { border: 1px solid #39377F; box-shadow: -4px 4px 0px 0px #2C2B5C; position: relative; padding: 3rem; } .items-sub-category { margin: 1rem 0; display: flex; align-items: center; flex-wrap: wrap; } .item-sub-category { padding: 5px 10px; border: 1px solid #a8a8a8; margin: 5px 5px; display: inline-block; } ul.page-numbers { gap: 1rem; margin-top: 2.5rem; } ul.page-numbers [class="page-numbers"] { width: 2rem; height: 2rem; border: 1px solid #C2ABA1; box-shadow: -2px 2px 0px 0px #C2ABA1; border-radius: 2px; color: var(--color3); font-family: var(--bold_font); font-size: 14px; transition: 300ms; } ul.page-numbers [class="page-numbers"]:hover, ul.page-numbers span.page-numbers.current { width: 2rem; height: 2rem; border: 1px solid var(--color1); box-shadow: -2px 2px 0px 0px var(--color1); color: var(--color1); border-radius: 2px; font-family: var(--bold_font); font-size: 14px; } .page-numbers a.next.page-numbers, .page-numbers a.prev.page-numbers { color: var(--color2); font-size: 1.125rem; cursor: pointer; padding-inline: .5rem; } .page-numbers a.next.page-numbers:hover, .page-numbers a.prev.page-numbers:hover { color: var(--color1); } .page-numbers { display: flex; align-items: center; justify-content: center; } .page-numbers li span.current { color: var(--color2) } .post-item .d-flex { flex-direction: column; width: 100%; height: inherit; justify-content: space-between; padding-block: .25rem; gap: 1.5rem; } .post-item.post-item2 .post-item-image { flex-direction: column; min-height: unset; align-items: stretch; justify-content: stretch; width: 100%; } .post-item.post-item2 { flex-direction: column; margin-bottom: unset; height: 100%; } .post-item:last-child { margin-bottom: unset; } .post-item { border: 1px solid #C2ABA180; border-radius: 4px; padding: 1rem; display: flex; gap: 1rem; margin-bottom: 1.5rem; background-color: #fff; align-items: stretch; } .post-item-image img { width: 100%; object-fit: cover; } .post-item:hover .post-item-image::after { opacity: 1; } .post-item-image::after { content: ''; background-image: url(assets/img/hover.webp); display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; pointer-events: none; inset: 0; border-radius: 4px; background-color: #39377F99; opacity: 0; transition: 300ms; backdrop-filter: blur(18px); background-repeat: no-repeat; background-size: 100px; background-position: center center; } .post-item.post-item2 .post-item-image::after { background-size: 200px; } .blog__cards .post-item.post-item2 .post-item-image::after { background-size: 125px; } .post-item-image { display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden; flex: 0 0 auto; width: 176px; position: relative; } .post-item h2 a { color: var(--color3); display: block; } .post-item h2 { font-size: 16px; line-height: 2.25; min-height: 72px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .post-item:hover .more i { background-color: var(--color1); } .post-item .more i { color: #fff; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: .5rem; background-color: var(--color2); transition: 300ms; } .post-item .more { font-family: var(--bold_font); display: inline-flex; align-items: center; justify-content: flex-start; font-size: 13.5px; line-height: 2.5; gap: .5rem; color: var(--color3); } .blog__arrow { margin-top: 2.5rem; } .section__blog-bg::before, .section__blog-bg::after { position: absolute; content: url(assets/img/pattern2.webp); z-index: -1; } .section__blog-bg::before { left: 99%; top: 0; } .section__blog-bg::after { right: 99%; bottom: 0; transform: rotate(180deg); } .section__blog-bg { position: relative; } .blog__cards { row-gap: 20px; } /* sidebar */ .widget.widget-side:last-child { margin-bottom: unset !important; } .widget_media_image img { transition: 300ms; width: 100%; object-fit: cover; } .widget_media_image:hover img { transform: scale(1.1); } .widget_media_image { overflow: hidden; border-radius: 4px; } .widget_categories { padding: .875rem; background-color: #F7F7F7; border-radius: 4px; } .widget_categories ul.children { padding-right: 1rem; font-size: 13px; font-family: var(--main_font); } .widget_categories>ul { margin-top: 1rem; padding-inline: 10px; } .widget_categories>ul>li:hover>a::before { background-color: var(--color1); } .widget_categories>ul>li>a::before { content: ''; width: 6px; height: 6px; border-radius: 6px; background-color: #676767; margin-left: 6px; display: inline-block; transition: 300ms; } li.cat-item.current-cat a::before { background-color: var(--color1); } li.cat-item.current-cat a { color: var(--color1); } .widget_categories>ul>li { font-family: var(--bold_font); margin-bottom: 0.5rem; font-size: 14px; } .widget_categories>ul>li:last-child { margin-bottom: unset; } .widget_categories>ul.children li { font-size: 13px; } .widget_categories a:hover { color: var(--color1); } .widget_categories a { color: #676767; padding-block: .375rem; display: inline-block; } .widget-title { display: block; color: #fff; text-align: center; background-color: var(--color1); border-radius: 4px; font-size: 14px; line-height: 2.25; padding: .5rem; } .cat-parent { position: relative; } .caticon:hover { background-color: var(--color1); color: #fff; } .caticon { cursor: pointer; width: 20px; height: 20px; transition: 300ms; position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 10px; border-radius: 2px; background-color: #D8D8D8; color: var(--color1); } .caticon.active:before { transform: rotateX(180deg); } .caticon:before { content: "\e915"; font-family: 'icomoon'; font-size: 0.5rem; font-weight: bold; transition: transform 300ms; } .children .caticon { top: 5px; } #sidebar { position: fixed; right: -100%; top: 0; bottom: 0; max-width: 300px; transition: all 0.5s; z-index: 1; background: var(--color1); } .sidebar-btn { display: block; width: 100%; text-align: center; padding: 5px; margin: 20px auto; border: 1px solid var(--color1); color: var(--color1); cursor: pointer; max-width: 120px; } #sidebar.active { right: 0; } #sidebar .sidebar-close { display: block; width: 20px; height: 20px; position: relative; background: var(--danger); text-align: center; margin: 10px auto 10px 0; color: #fff; font-size: 13px; cursor: pointer; } @media screen and (min-width: 768px) { .sidebar-btn { display: none; } #sidebar { position: unset; right: auto; overflow-y: unset; background: transparent; } #sidebar .sidebar-close { display: none; } } /* -------------------- Modules Css -------------------- */ .section-base { margin-block: 100px; } .countdown-wrapper { direction: ltr; } .countdown-wrapper span { display: inline-block; margin: 0 5px; } i.fas.fa-redo.refresh-captcha { width: 40px; height: 40px; display: inline-block; background: forestgreen; } .desktop-menu ul ul .menu-item-has-children>a::after { transform: translateY(-8px) rotate(90deg); left: 6px; } .desktop-menu .menu-item-has-children>a::after { content: "\e915"; font-family: 'icomoon'; position: absolute; font-size: 0.5rem; top: 50%; transform: translateY(-5px); left: 2px; font-weight: bold; } .desktop-menu ul ul ul { right: calc(100% + 0px); top: -.25rem; } .desktop-menu ul ul { position: absolute; z-index: 1; background-color: #fff; border-radius: 4px; min-width: 150px; width: max-content; padding: .25rem 0; font-size: 13.5px; right: 13px; top: 100%; box-shadow: -1px 1px 6px 0 var(--color2); opacity: 0; visibility: hidden; overflow: hidden; transition: 300ms; } .desktop-menu ul ul li a { display: block; padding: 0.25rem 0.5rem; } .desktop-menu ul li:hover>ul { overflow: visible; visibility: visible; opacity: 1; } .desktop-menu ul li:hover>a { color: var(--color2); } .desktop-menu ul li { position: relative; } .ft__lbl { text-wrap: nowrap; } .ovh { overflow: hidden; } .single__post__cat__m { display: block; text-align: center; border-bottom: 1px solid #F5EBE4; margin-bottom: 1rem; } .single__post__cat__m .single__post__cat { display: flex; align-items: center; gap: .5rem; overflow-x: auto; text-wrap: nowrap; padding-block: .75rem; } .single-col-one .single__post__date { justify-content: center; margin-bottom: 1.25rem; } /* -------------------- Responsive Mode -------------------- */ @media (max-width: 1399.98px) {} @media (max-width: 1199.98px) { .footer-contact li { align-items: baseline; } .header-menu>li>a { font-size: 12.5px; padding: 0.5rem; } .header__menu { gap: 1rem; } .desktop-menu .menu-item-has-children>a::after { left: 0; } .desktop-menu ul li { font-size: 12.5px; } .newsletter-wrap::after { content: unset; } .post-item-image { width: 136px; } .post-item h2 { font-size: 15px; } .post-item .more { font-size: 12.5px; } .newsletter-wrap { padding: 1.5rem; } .single__post__cat { overflow-x: auto; text-wrap: nowrap; } .help-heading>span { padding-inline: .5rem; font-size: 13px; } } @media (max-width: 991.98px) { .help-heading ul { display: none; } .help-heading>span.closed::after { transform: rotateX(180deg); } .help-heading>span::after { width: 20px; height: 20px; background-color: #fff; border-radius: 2px; color: var(--color1); display: flex; align-items: center; justify-content: center; transform: rotateX(0); } .single__post__share { justify-content: center; } .thumbnail-post-img { margin-bottom: 1rem; max-width: 100%; margin-inline: auto; } .help-heading { margin-block: 1rem; } .single__post__excerpt { font-size: 14px; margin-block: .875rem 1.5rem; } .single__post__tag { margin-top: 1rem; margin-bottom: -1rem; } .section__heading.section__heading--between { justify-content: center; text-align: center; margin-bottom: 1.75rem; } .error404-page p { font-size: 1.5rem; line-height: 1.5; } .error404-btn { margin-top: 1rem; } .faq-cat-content { margin-top: 1.5rem; } .sw-faqs .swiper-nav.absolute { position: absolute; display: flex; align-items: center; justify-content: space-between; width: 100%; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin-top: unset; } .sw-faqs { padding-inline: 3rem; } .blog__cards .post-item.post-item2 .post-item-image::after { background-size: 100px; } .blog__cards { row-gap: unset; } ul.page-numbers { margin-top: 1.25rem; } .section__heading { align-items: center; text-align: center; } .section__heading-desc { text-align: center; } .swiper-nav.static { margin-top: 1.25rem; } .header-search, a.button.header__button span { display: none; } a.button.header__button { min-width: 38px; } .header--row { flex-direction: row-reverse; } .header__menu>nav.wrap-menu { display: none; } .header__menu { justify-content: flex-end; } .header__btns { justify-content: flex-start; } .section__heading-title { font-size: 22px; } .swiper-nav.absolute { position: static; transform: unset; margin-top: 2rem; justify-content: center; gap: 1rem; } .section__heading.section__heading--center { margin-bottom: 1.75rem; } .section-base { margin-block: 60px; padding-block: 5px; } #more-tax-desc { padding: 2.25rem 1.25rem 1.25rem; } .section-banners>.container>.row>div:last-child { margin-bottom: unset !important; } .newsletter-wrap .d-flex, .newsletter-wrap { flex-direction: column; align-items: center; justify-content: center; text-align: center; } .newsletter-wrap { padding: 1rem .5rem 1.5rem; } form#newsletter-form { max-width: 100%; } .newsletter-wrap .d-flex { gap: .5rem; } .newsletter-wrap h4 { font-size: 1.125rem; } .post-item, .post-item.post-item2 { margin-bottom: 1rem; } .col--gap { text-align: center; align-items: center; justify-content: center; gap: 1.5rem; } .post-item.post-item2 { flex-direction: unset; height: unset; } .post-item-image { width: 176px !important; } .blog__arrow { margin-top: 1.5rem; } .post-item.post-item2 .post-item-image::after { background-size: 100px; } .newsletter { margin-bottom: -5rem; } #footer { padding-block: 7rem .75rem; } .footer__desc { text-align: center; } .socials { gap: 1rem; } .socials a { width: 2.5rem; height: 2.5rem; } .copy-right-wrap { flex-direction: column-reverse; align-items: center; text-align: center; } .copy-right p { font-size: 12px; } .copy-right { background-color: #23234A; } .col--gap--ft { margin-bottom: 2rem; } .newsletter { margin-top: 4.5rem; } .cform_title { font-size: 1.25rem; } .websima-contact-form { margin-top: 3rem; } .editor-content textarea, .comment-form textarea { min-height: 150px; } .contact-form-row { flex-direction: column-reverse; } .inner-head__title { font-size: 1.5rem; } .inner-head { margin-bottom: 1.5rem; } #breadcrumbs { background: #fff; padding-block: 12px 0; } .contact-dir-button a { font-size: 13px; height: 40px; } .contact-dir-button { left: 50%; bottom: 30%; transform: translate(-50%, -50%); justify-content: center; } .contact-form-row .col-lg-4 { margin-top: -175px; position: relative; z-index: 9999; } .single__post__title { font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem; } .single__post__date { justify-content: center; margin-bottom: 1.25rem; } .single__post__tag, .single__post__cat { display: flex; align-items: center; gap: .5rem; overflow-x: auto; text-wrap: nowrap; padding-block: .75rem; } } @media (max-width: 767.98px) { .thumbnail-post-img { max-width: 75%; } .item-comment { padding: .75rem !important; margin: 0 0 1rem !important; } .item-comment .author_comment { font-size: 13.5px; } .commentlist ul.children { padding-right: 26px; } .commentlist ul.children:before { right: 0; } form#commentform { margin: 0 auto 3rem !important; } .item-comment .meta_comment { margin-bottom: 1rem !important; padding: 0.5rem; } .inner-head { text-align: center; align-items: center; } .more-tax-desc { margin-top: 1.5rem; } .editor-content.inner-head__desc.inner-head--black p { text-align: center; } .widget_categories>ul { display: none; } .sidebar.sidebar-blog .widget:not(.widget_categories) { display: none; } .sidebar.sidebar-blog .widget_categories .widget-title { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; } .sidebar.sidebar-blog .widget_categories .widget-title.active i { transform: rotateX(180deg); } .sidebar.sidebar-blog .widget_categories .widget-title i { font-size: 0.5rem; font-weight: bold; cursor: pointer; width: 20px; height: 20px; transition: 300ms; display: flex !important; align-items: center; justify-content: center; border-radius: 2px; background-color: #ffffff; color: var(--color1); } .widget_categories>ul>li { margin-bottom: unset; } .header-logo img { max-height: 3rem; object-fit: contain; } header#header { padding-block: 0.5rem; } .collapse--ft { background-color: #39377F; padding: 1rem; border-radius: 4px; } .collapse--ft .footer-title i::after { transform: rotate(90deg); transition: 300ms; } .collapse--ft .footer-title i::before, .collapse--ft .footer-title i::after { content: ''; width: 8px; height: 1.5px; background-color: #272829; position: absolute; } .collapse--ft .footer-title::after { content: unset; } .collapse--ft .footer-title i.active::after { transform: rotate(0); } .collapse--ft .footer-title i { width: 24px; height: 24px; border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--color2); cursor: pointer; } .collapse--ft .footer-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: unset; } .collapse--ft ul { display: none; margin-top: 1rem; } .faqs-question .faq-num { display: none; } .faqs-content .faqs-question { font-size: 15px; } .faqs-item .faqs-answer { padding: 1rem 0 0; } .faqs-content .faqs-question i { font-size: 1.75rem; } .error404-txt { margin-block: 3rem 1rem; font-family: var(--bold_font); } #news-related .post-item-image::after { background-size: 90px; } } @media (max-width: 575.98px) { .editor-content .comment-form-author, .editor-content .comment-form-email { width: 100%; margin: 0 0 1rem !important; } #news-related .post-item-image::after { background-size: 75px; } .socials.contact-socials a { width: 2rem; height: 2rem; } .contact-info { padding: 1.5rem; width: calc(100% - 20px); } .contact-info::after { width: calc(100% + 20px); height: calc(100% + 20px); } .contact-info li span, .contact-info li a { color: #fff; line-height: 2.25; font-size: 13px; } .editor-content label, .comment-form label { font-size: .875rem; margin: 0 0 .5rem !important; } .search-box { flex: 1 0 100%; } #cancel-comment-reply-link, .button { font-size: 13px; padding-inline: .5rem; } form#newsletter-form button { gap: .25rem; min-width: 85px; } form#newsletter-form input { font-size: 12px; } .post-item-image { width: 116px !important; } .post-item { padding: 0.5rem; gap: .5rem; align-items: center; justify-content: center; } .post-item h2 { font-size: 13.5px; min-height: 61px; } .post-item .d-flex { padding-block: 0; } .search-box { padding: 1rem; } .search-image { width: 90px; } .search__res__box .search-box h3 a { font-size: 13px; } .footer-contact li { font-size: 13px; } .newsletter-wrap { max-width: calc(100% - 2.5vh); margin-inline: auto; } .websima-contact-form .acf-notice p { bottom: -75px; } .faq-cat { font-size: 14px; padding: .5rem .25rem; } .af-form.acf-form .af-field { width: 100% !important; } } @media (max-width:374.98px) {} @media (min-width:992px) and (max-width:1199.98px) { .contact-info { padding: 1rem; } .contact-info li span, .contact-info li a { font-size: 13px; } } @media (min-width:768px) and (max-width:991.98px) { #news-related .post-item-image, .sw--404 .post-item-image, .blog__cards .post-item-image { width: 100% !important; } #news-related .post-item.post-item2, .sw--404 .post-item.post-item2, .blog__cards .post-item.post-item2 { flex-direction: column; } .widget_categories { padding: .5rem; } .widget_categories>ul { margin-top: 1rem; padding-inline: .25rem; } } .af-form.acf-form ul li:before, .af-form.acf-form ol li:before { content: unset !important; } .af-form.acf-form input { all: revert; } .af-form.acf-form i.acf-icon { position: absolute; top: 50%; left: .5rem; transform: translateY(-50%); } .af-form.acf-form .af-field[data-type="file"] p { font-size: 0.8125rem !important; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; border-radius: 0.25rem; background-color: #fff; } .af-form.acf-form .af-field[data-type="true_false"] input[type="checkbox"] { opacity: 0; } .af-form.acf-form .af-field[data-type="select"] .af-input::after { position: absolute; top: 50%; left: 1rem; font-size: 0.75rem; content: "\e915"; font-family: 'icomoon'; font-weight: bold; transform: translateY(-50%); } .af-form.acf-form .af-field[data-type="select"] select { cursor: pointer; } .af-form.acf-form .acf-field[data-width]+.acf-field[data-width] { border: none !important; } /** lang-button *************************************/ .lang-btn { display: flex; align-items: center; } .lang-button { position: relative; display: flex; align-items: center; justify-content: center; color: var(--color1); border: 1px solid var(--color1); box-shadow: -2px 2px 0 1px var(--color1); background-color: #fff; border-radius: 50%; width: 38px; height: 38px; font-size: 16px; transition: 300ms; cursor: pointer; flex-shrink: 0; } .lang-button:hover { color: var(--color2); box-shadow: 2px -2px 0px 1px var(--color2); border-color: var(--color2); } .lang-content { opacity: 0; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 2; text-align: center; right: 0; top: 102%; left: 0; right: 0; padding-top: 10px; transition: 0.3s; border-radius: 0 0 5px 5px; } .lang-button .current-lng { display: inline-block; margin: 0 4px 0 3px; } .lang-content a { color: black; padding: 0.5rem; text-decoration: none; display: block; line-height: 1.2; font-size: 0.8rem; } .lang-button:hover .lang-content { opacity: 1; transition: 0.3s; } .lang-button:hover i.icon-arrow-down { transform: rotate(180deg); } .lang-content a:hover { color: var(--c1) !important; } .lang-button i.icon-arrow-down { font-size: 12px; transition: 0.3s; } .lang-btn i.icon-global { font-size: 20px; color: #495965; } .lang-btn span:before { content: "\e915"; font-family: 'icomoon'; position: absolute; font-size: 0.5rem; top: 45%; transform: translateY(-5px); right: 5px; font-weight: bold; } .lang-btn span { font-size: 0.8rem; margin-right: 0.5rem; } #scroll { position: absolute; transform: rotate(90deg); background: #fff; width: 50px; height: 50px; color: var(--color1); padding: 15px; line-height: 1; border-radius: 5px; border: 2px solid var(--color1); font-size: 16px; box-shadow: 2px 2px 0px 1px var(--color1); cursor: pointer; transition: 0.4s ease; left: 10%; top: -23px; } #scroll:hover { box-shadow: -2px -2px 0px 1px var(--color1); } .sw--newgallery .honor--item img { width: 100%; border-radius: 8px; }